Merge pull request #13 from dynamic-labs/feat/sign-message-example

feat: add basic sign message and send transaction

packages/nextjs/app/page.tsx

@@ -1,15 +1,48 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
+import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
 import type { NextPage } from "next";
-import { useAccount } from "wagmi";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Address } from "~~/components/scaffold-eth";
-
-// app/page.tsx
+import { sendTransaction, signMessage } from "~~/lib/dynamic";
 
 const Home: NextPage = () => {
-  const { address: connectedAddress } = useAccount();
+  const { primaryWallet } = useDynamicContext();
+  const [messageSignature, setMessageSignature] = useState<string>("");
+  const [transactionSignature, setTransactionSignature] = useState<string>("");
+  const connectedAddress = primaryWallet?.address;
+
+  const handleSignMesssage = async () => {
+    try {
+      const signature = await signMessage("Hello World", primaryWallet);
+      setMessageSignature(signature);
+
+      setTimeout(() => {
+        setMessageSignature("");
+      }, 10000);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleSendTransaction = async () => {
+    try {
+      const isTestnet = await primaryWallet?.connector?.isTestnet();
+      if (!isTestnet) {
+        alert("You might want to switch to testnet to send transactions");
+      }
+      const hash = await sendTransaction(connectedAddress, "0.0001", primaryWallet);
+      setTransactionSignature(hash);
+
+      setTimeout(() => {
+        setTransactionSignature("");
+      }, 10000);
+    } catch (e) {
+      console.error(e);
+    }
+  };
 
   return (
     <>
@@ -23,6 +56,22 @@ const Home: NextPage = () => {
             <p className="my-2 font-medium">Connected Address:</p>
             <Address address={connectedAddress} />
           </div>
+          {primaryWallet && !transactionSignature && (
+            <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
+              <button onClick={() => handleSendTransaction()} className="btn btn-primary">
+                Send 0.001 ETH to yourself
+              </button>
+              <button onClick={() => handleSignMesssage()} className="btn btn-primary">
+                Sign Hello World
+              </button>
+            </div>
+          )}
+          {primaryWallet && messageSignature && (
+            <p className="text-center-text-lg">Message signed! {messageSignature}</p>
+          )}
+          {primaryWallet && transactionSignature && (
+            <p className="text-center-text-lg">Transaction processed! {transactionSignature}</p>
+          )}
           <p className="text-center text-lg">
             Get started by editing{" "}
             <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -11,6 +11,7 @@ import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
+import { customEvmNetworks } from "~~/lib/networks";
 import scaffoldConfig from "~~/scaffold.config";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
@@ -45,74 +46,6 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
    * https://docs.dynamic.xyz/chains/evmNetwork#custom-evm-networks-evmnetwork
    */
 
-  const customEvmNetworks = [
-    {
-      blockExplorerUrls: ["https://explorer-holesky.morphl2.io/"],
-      chainId: 2810,
-      name: "Morph",
-      rpcUrls: ["https://rpc-quicknode-holesky.morphl2.io"],
-      iconUrls: ["https://avatars.githubusercontent.com/u/132543920?v=4"],
-      nativeCurrency: {
-        name: "Ethereum",
-        symbol: "ETH",
-        decimals: 18,
-      },
-      networkId: 2810,
-    },
-    {
-      blockExplorerUrls: ["https://explorer.zircuit.com"],
-      chainId: 48899,
-      name: "Zircuit Testnet",
-      rpcUrls: ["https://zircuit1.p2pify.com/"],
-      iconUrls: ["https://pbs.twimg.com/profile_images/1774812048683143168/gSbmfQfa_400x400.jpg"],
-      nativeCurrency: {
-        name: "Ethereum",
-        symbol: "ETH",
-        decimals: 18,
-      },
-      networkId: 48899,
-    },
-    {
-      blockExplorerUrls: ["https://explorer.zero.network"],
-      chainId: 4457845,
-      name: "ZERϴ",
-      rpcUrls: ["https://rpc.zerion.io/v1/zero-sepolia"],
-      iconUrls: ["https://pbs.twimg.com/profile_images/1805906049213329408/oZFUGW9L_400x400.jpg"],
-      nativeCurrency: {
-        name: "Ethereum",
-        symbol: "ETH",
-        decimals: 18,
-      },
-      networkId: 4457845,
-    },
-    {
-      blockExplorerUrls: ["https://explorer.testnet.rsk.co"],
-      chainId: 31,
-      name: "RSK Testnet",
-      rpcUrls: ["https://public-node.testnet.rsk.co"],
-      iconUrls: ["https://rootstock.io/icons/icon-512x512.png?v=d5199ca8e8f274bc01b19fe9024f128e"],
-      nativeCurrency: {
-        name: "Rootstock Bitcoin",
-        symbol: "tRBTC",
-        decimals: 18,
-      },
-      networkId: 31,
-    },
-    {
-      blockExplorerUrls: ["https://explorer.rsk.co"],
-      chainId: 30,
-      name: "RSK Mainnet",
-      rpcUrls: ["https://public-node.rsk.co"],
-      iconUrls: ["https://rootstock.io/icons/icon-512x512.png?v=d5199ca8e8f274bc01b19fe9024f128e"],
-      nativeCurrency: {
-        name: "Rootstock Bitcoin",
-        symbol: "tRBTC",
-        decimals: 18,
-      },
-      networkId: 30,
-    },
-  ];
-
   const evmNetworks = [
     ...scaffoldConfig.targetNetworks.map(chain => ({
       blockExplorerUrls: chain.blockExplorers

packages/nextjs/lib/dynamic.ts

@@ -0,0 +1,33 @@
+import { Wallet } from "@dynamic-labs/sdk-react-core";
+import { getOrMapViemChain } from "@dynamic-labs/viem-utils";
+import { Account, Chain, Hex, Transport, WalletClient, parseEther } from "viem";
+import { customEvmNetworks } from "~~/lib/networks";
+
+export const signMessage = async (message: string, wallet: any): Promise<string> => {
+  const connector = wallet?.connector;
+
+  return await connector.signMessage(message);
+};
+
+export const sendTransaction = async (address: any, amount: string, wallet: Wallet): Promise<string> => {
+  const walletClient = wallet.connector.getWalletClient<WalletClient<Transport, Chain, Account>>();
+
+  const chainID = await wallet.connector.getNetwork();
+  const currentNetwork = customEvmNetworks.find(network => network.chainId === chainID);
+
+  if (!currentNetwork) {
+    throw new Error("No chain ID found");
+  }
+
+  const chain = getOrMapViemChain(currentNetwork);
+
+  const transaction = {
+    account: wallet.address as Hex,
+    to: address as Hex,
+    chain,
+    value: amount ? parseEther(amount) : undefined,
+  };
+
+  const transactionHash = await walletClient.sendTransaction(transaction);
+  return transactionHash;
+};

packages/nextjs/lib/networks.ts

@@ -0,0 +1,83 @@
+export const customEvmNetworks = [
+  {
+    blockExplorerUrls: ["http://localhost"],
+    chainId: 43490458484,
+    chainName: "My Arbitrum L3 Chain",
+    iconUrls: ["https://www.shutterstock.com/image-vector/moon-icon-vector-star-logo-600nw-1403123270.jpg"],
+    name: "My Arbitrum L3 Chain",
+    nativeCurrency: {
+      decimals: 18,
+      name: "Ether",
+      symbol: "ETH",
+    },
+    networkId: 43490458484,
+
+    rpcUrls: ["http://127.0.0.1:8449"],
+    vanityName: "Into Orbit",
+  },
+  {
+    blockExplorerUrls: ["https://explorer-holesky.morphl2.io/"],
+    chainId: 2810,
+    name: "Morph",
+    rpcUrls: ["https://rpc-quicknode-holesky.morphl2.io"],
+    iconUrls: ["https://avatars.githubusercontent.com/u/132543920?v=4"],
+    nativeCurrency: {
+      name: "Ethereum",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    networkId: 2810,
+  },
+  {
+    blockExplorerUrls: ["https://explorer.zircuit.com"],
+    chainId: 48899,
+    name: "Zircuit Testnet",
+    rpcUrls: ["https://zircuit1.p2pify.com/"],
+    iconUrls: ["https://pbs.twimg.com/profile_images/1774812048683143168/gSbmfQfa_400x400.jpg"],
+    nativeCurrency: {
+      name: "Ethereum",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    networkId: 48899,
+  },
+  {
+    blockExplorerUrls: ["https://explorer.zero.network"],
+    chainId: 4457845,
+    name: "ZERϴ",
+    rpcUrls: ["https://rpc.zerion.io/v1/zero-sepolia"],
+    iconUrls: ["https://pbs.twimg.com/profile_images/1805906049213329408/oZFUGW9L_400x400.jpg"],
+    nativeCurrency: {
+      name: "Ethereum",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    networkId: 4457845,
+  },
+  {
+    blockExplorerUrls: ["https://explorer.testnet.rsk.co"],
+    chainId: 31,
+    name: "RSK Testnet",
+    rpcUrls: ["https://public-node.testnet.rsk.co"],
+    iconUrls: ["https://rootstock.io/icons/icon-512x512.png?v=d5199ca8e8f274bc01b19fe9024f128e"],
+    nativeCurrency: {
+      name: "Rootstock Bitcoin",
+      symbol: "tRBTC",
+      decimals: 18,
+    },
+    networkId: 31,
+  },
+  {
+    blockExplorerUrls: ["https://explorer.rsk.co"],
+    chainId: 30,
+    name: "RSK Mainnet",
+    rpcUrls: ["https://public-node.rsk.co"],
+    iconUrls: ["https://rootstock.io/icons/icon-512x512.png?v=d5199ca8e8f274bc01b19fe9024f128e"],
+    nativeCurrency: {
+      name: "Rootstock Bitcoin",
+      symbol: "tRBTC",
+      decimals: 18,
+    },
+    networkId: 30,
+  },
+];