diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 46bd109..e9758de 100644 --- a/packages/nextjs/app/page.tsx +++ b/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(""); + const [transactionSignature, setTransactionSignature] = useState(""); + 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 = () => {

Connected Address:

+ {primaryWallet && !transactionSignature && ( +
+ + +
+ )} + {primaryWallet && messageSignature && ( +

Message signed! {messageSignature}

+ )} + {primaryWallet && transactionSignature && ( +

Transaction processed! {transactionSignature}

+ )}

Get started by editing{" "} diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx index c950e5d..48b2f32 100644 --- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx +++ b/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 diff --git a/packages/nextjs/lib/dynamic.ts b/packages/nextjs/lib/dynamic.ts new file mode 100644 index 0000000..6822152 --- /dev/null +++ b/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 => { + const connector = wallet?.connector; + + return await connector.signMessage(message); +}; + +export const sendTransaction = async (address: any, amount: string, wallet: Wallet): Promise => { + const walletClient = wallet.connector.getWalletClient>(); + + 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; +}; diff --git a/packages/nextjs/lib/networks.ts b/packages/nextjs/lib/networks.ts new file mode 100644 index 0000000..ef55615 --- /dev/null +++ b/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, + }, +];