add sign msg, send tx and get balance

.gitignore

@@ -0,0 +1 @@
+.vscode

react/react-wagmi/package.json

@@ -10,13 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@reown/appkit": "^1.5.2",
-    "@reown/appkit-adapter-wagmi": "^1.5.2",
+    "@reown/appkit": "^1.5.3",
+    "@reown/appkit-adapter-wagmi": "^1.5.3",
     "@tanstack/react-query": "^5.56.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "viem": "^2.21.14",
-    "wagmi": "^2.12.14"
+    "viem": "^2.21.53",
+    "wagmi": "^2.13.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

react/react-wagmi/src/App.tsx

@@ -1,6 +1,7 @@
 import { createAppKit } from '@reown/appkit/react'
 
 import { WagmiProvider } from 'wagmi'
+import { useState } from 'react'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ActionButtonList } from './components/ActionButtonList'
@@ -13,17 +14,35 @@ const queryClient = new QueryClient()
 
 const generalConfig = {
   projectId,
+  networks,
   metadata,
-  networks
+  themeMode: 'light' as const,
 }
 
 // Create modal
 createAppKit({
   adapters: [wagmiAdapter],
   ...generalConfig,
+
 })
 
 export function App() {
+  const [transactionHash, setTransactionHash] = useState<`0x${string}` | undefined>(undefined);
+  const [signedMsg, setSignedMsg] = useState('');
+  const [balance, setBalance] = useState('');
+
+  const receiveHash = (hash: `0x${string}`) => {
+    setTransactionHash(hash); // Update the state with the transaction hash
+  };
+
+  const receiveSignedMsg = (signedMsg: string) => {
+    setSignedMsg(signedMsg); // Update the state with the transaction hash
+  };
+
+  const receivebalance = (balance: string) => {
+    setBalance(balance)
+  }
+
 
   return (
     <div className={"pages"}>
@@ -32,14 +51,14 @@ export function App() {
       <WagmiProvider config={wagmiAdapter.wagmiConfig}>
         <QueryClientProvider client={queryClient}>
             <appkit-button />
-            <ActionButtonList />
+            <ActionButtonList sendHash={receiveHash} sendSignMsg={receiveSignedMsg} sendBalance={receivebalance}/>
             <div className="advice">
               <p>
                 This projectId only works on localhost. <br/>
                 Go to <a href="https://cloud.reown.com" target="_blank" className="link-button" rel="Reown Cloud">Reown Cloud</a> to get your own.
               </p>
             </div>
-            <InfoList />
+            <InfoList hash={transactionHash} signedMsg={signedMsg} balance={balance}/>
         </QueryClientProvider>
       </WagmiProvider>
     </div>

react/react-wagmi/src/components/ActionButtonList.tsx

@@ -1,15 +1,74 @@
-import { useDisconnect, useAppKit, useAppKitNetwork  } from '@reown/appkit/react'
+import { useEffect } from 'react';
+import { useDisconnect, useAppKit, useAppKitNetwork, useAppKitAccount  } from '@reown/appkit/react'
+import { parseGwei, type Address } from 'viem'
+import { useEstimateGas, useSendTransaction, useSignMessage, useBalance } from 'wagmi'
 import { networks } from '../config'
 
-export const ActionButtonList = () => {
-    const { disconnect } = useDisconnect();
-    const { open } = useAppKit();
-    const { switchNetwork } = useAppKitNetwork();
+// test transaction
+const TEST_TX = {
+  to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045" as Address, // vitalik address
+  value: parseGwei('0.0001')
+}
+
+interface ActionButtonListProps {
+  sendHash: (hash: `0x${string}` ) => void;
+  sendSignMsg: (hash: string) => void;
+  sendBalance: (balance: string) => void;
+}
+
+export const ActionButtonList = ({ sendHash, sendSignMsg, sendBalance }: ActionButtonListProps) => {
+    const { disconnect } = useDisconnect(); // AppKit hook to disconnect
+    const { open } = useAppKit(); // AppKit hook to open the modal
+    const { switchNetwork } = useAppKitNetwork(); // AppKithook to switch network
+    const { address } = useAppKitAccount() // AppKit hook to get the address
+
+    const { data: gas } = useEstimateGas({...TEST_TX}); // Wagmi hook to estimate gas
+    const { data: hash, sendTransaction, } = useSendTransaction(); // Wagmi hook to send a transaction
+    const { signMessageAsync } = useSignMessage() // Wagmi hook to sign a message
+    const { refetch } = useBalance({
+      address: address as Address
+    }); // Wagmi hook to get the balance
+
+    useEffect(() => {
+        if (hash) {
+          sendHash(hash);
+        }
+    }, [hash]);
+
+    // function to send a tx
+    const sendTx = () => {
+      try {
+        sendTransaction({
+          ...TEST_TX,
+          gas // Add the gas to the transaction
+        });
+      } catch (err) {
+        console.log('Error sending transaction:', err);
+      }
+    }
+
+    // function to sing a msg 
+    const signMsg = async () => {
+      const msg = "Hello Reown AppKit!" // message to sign
+      const sig = await signMessageAsync({ message: msg, account: address as Address }); 
+      sendSignMsg(sig);
+    }
+
+    // function to get the balance
+    const getBalance = async () => {
+      const balance = await refetch()
+      sendBalance(balance?.data?.value.toString() + " " + balance?.data?.symbol.toString())
+    }
+
+
   return (
     <div >
         <button onClick={() => open()}>Open</button>
         <button onClick={() => disconnect()}>Disconnect</button>
         <button onClick={() => switchNetwork(networks[1]) }>Switch</button>
+        <button onClick={() => signMsg() }>Sign msg</button>
+        <button onClick={() => sendTx() }>Send tx</button>
+        <button onClick={() => getBalance()}>Get Balance</button>  
     </div>
   )
 }

react/react-wagmi/src/components/InfoList.tsx

@@ -6,20 +6,53 @@ import {
     useAppKitAccount,
     useWalletInfo
      } from '@reown/appkit/react'
+import { useWaitForTransactionReceipt } from 'wagmi'
 
-export const InfoList = () => {
-    const kitTheme = useAppKitTheme();
-    const state = useAppKitState();
-    const {address, caipAddress, isConnected, status} = useAppKitAccount();
-    const events = useAppKitEvents()
-    const { walletInfo } = useWalletInfo()
+interface InfoListProps {
+    hash: `0x${string}` | undefined;
+    signedMsg: string;
+    balance: string;
+}
+
+export const InfoList = ({ hash, signedMsg, balance }: InfoListProps) => {
+    const kitTheme = useAppKitTheme(); // AppKit hook to get the theme information and theme actions 
+    const state = useAppKitState(); // AppKit hook to get the state
+    const {address, caipAddress, isConnected, status} = useAppKitAccount(); // AppKit hook to get the account information
+    const events = useAppKitEvents() // AppKit hook to get the events
+    const { walletInfo } = useWalletInfo() // AppKit hook to get the wallet info
+
+    const { data: receipt } = useWaitForTransactionReceipt({ hash, confirmations: 2,  // Wait for at least 2 confirmation
+        timeout: 300000,    // Timeout in milliseconds (5 minutes)
+        pollingInterval: 1000,  })
 
     useEffect(() => {
         console.log("Events: ", events);
     }, [events]);
 
   return (
-    < >
+    <>
+        {balance && (
+        <section>
+            <h2>Balance: {balance}</h2>
+        </section>
+        )}
+        {hash && (
+        <section>
+            <h2>Sign Tx</h2>
+            <pre>
+                Hash: {hash}<br />
+                Status: {receipt?.status.toString()}<br />
+            </pre>
+        </section>
+        )}
+        {signedMsg && (
+        <section>
+            <h2>Sign msg</h2>
+            <pre>
+                signedMsg: {signedMsg}<br />
+            </pre>
+        </section>
+        )}
         <section>
             <h2>useAppKit</h2>
             <pre>

react/react-wagmi/src/config/index.tsx

@@ -1,5 +1,5 @@
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { mainnet, arbitrum } from '@reown/appkit/networks'
+import { mainnet, arbitrum, sepolia } from '@reown/appkit/networks'
 import type { AppKitNetwork } from '@reown/appkit/networks'
 
 // Get projectId from https://cloud.reown.com
@@ -17,7 +17,7 @@ export const metadata = {
   }
 
 // for custom networks visit -> https://docs.reown.com/appkit/react/core/custom-networks
-export const networks = [mainnet, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]
+export const networks = [mainnet, arbitrum, sepolia] as [AppKitNetwork, ...AppKitNetwork[]]
 
 //Set up the Wagmi Adapter (Config)
 export const wagmiAdapter = new WagmiAdapter({