add get Balance

react/react-bitcoin/src/App.tsx

@@ -28,6 +28,7 @@ export function App() {
   const [psbt, setPSBT] = useState<string>("");
   const [signedMsg, setSignedMsg] = useState<string>("");
   const [txHash, setTxHash] = useState<string>("");
+  const [balance, setBalance] = useState<string>("");
 
   const receivePSBT = (hash: string) => {
     setPSBT(hash);
@@ -41,19 +42,23 @@ export function App() {
     setTxHash(hash)
   }
 
+  const receiveBalance= (amount: string) => {
+    setBalance(amount)
+  }
+
   return (
     <div className={"pages"}>
       <img src="/reown.svg" alt="Reown" style={{ width: '150px', height: '150px' }} />
       <h1>AppKit bitcoin React dApp Example</h1>
           <appkit-button />
-          <ActionButtonList sendSignPSBT={receivePSBT} sendSignMsg={receiveSignedMsg} sendSendTx={receiveTxHash} />
+          <ActionButtonList sendSignPSBT={receivePSBT} sendSignMsg={receiveSignedMsg} sendSendTx={receiveTxHash} 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 psbt={psbt} signedMsg={signedMsg} txHash={txHash} />
+          <InfoList psbt={psbt} signedMsg={signedMsg} txHash={txHash} balance={balance} />
     </div>
   )
 }

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

@@ -1,16 +1,16 @@
 import { useDisconnect, useAppKit, useAppKitNetwork, useAppKitProvider, useAppKitAccount } from '@reown/appkit/react'
 import type { BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
 import { networks } from '../config'
-import { createPSBT } from '../utils/BitcoinUtil';
+import { createPSBT, getBalance } from '../utils/BitcoinUtil';
 
 interface ActionButtonListProps {
   sendSignPSBT: (hash: string ) => void;
   sendSignMsg: (hash: string) => void;
   sendSendTx: (hash: string) => void;
+  sendBalance: (balance: string) => void;
 }
 
-
-export const ActionButtonList = ({ sendSignPSBT, sendSignMsg, sendSendTx }: ActionButtonListProps) => {
+export const ActionButtonList = ({ sendSignPSBT, sendSignMsg, sendSendTx, sendBalance }: ActionButtonListProps) => {
     const { disconnect } = useDisconnect();
     const { open } = useAppKit();
     const { switchNetwork, caipNetwork } = useAppKitNetwork();
@@ -47,7 +47,7 @@ export const ActionButtonList = ({ sendSignPSBT, sendSignMsg, sendSendTx }: Acti
         recipient: recipientAddress,
         amount: "1000"
       })
-      
+
       sendSendTx(signature);
     }
 
@@ -65,6 +65,13 @@ export const ActionButtonList = ({ sendSignPSBT, sendSignMsg, sendSendTx }: Acti
       sendSignPSBT(signature.psbt);
     }
 
+    const handleGetBalance = async () => {
+      if (!walletProvider || !address || !caipNetwork) throw Error('user is disconnected');
+
+      const balance = await getBalance(caipNetwork, address);
+      sendBalance(balance.toString()  );
+    }
+
   return (
     <>
       {isConnected ? (
@@ -73,8 +80,9 @@ export const ActionButtonList = ({ sendSignPSBT, sendSignMsg, sendSendTx }: Acti
             <button onClick={handleDisconnect}>Disconnect</button>
             <button onClick={() => switchNetwork(networks[1]) }>Switch</button>
             <button onClick={handleSignMsg}>Sign msg</button>
-            <button onClick={handleSignPSBT}>Sign PSBT</button>  
+            {/* <button onClick={handleSignPSBT}>Sign PSBT</button>   */}
             <button onClick={handleSendTx}>Send tx</button>
+            {/* <button onClick={handleGetBalance}>Get Balance</button> */}
         </div>
       ) : null}
     </>

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

@@ -11,9 +11,10 @@ interface InfoListProps {
     psbt: string;
     signedMsg: string;
     txHash: string;
+    balance: string;
 }
 
-export const InfoList = ({psbt, signedMsg, txHash}: InfoListProps) => {
+export const InfoList = ({psbt, signedMsg, txHash, balance}: InfoListProps) => {
     const { themeMode, themeVariables } = useAppKitTheme();
     const state = useAppKitState();
     const {address, caipAddress, isConnected, status} = useAppKitAccount();
@@ -50,6 +51,14 @@ export const InfoList = ({psbt, signedMsg, txHash}: InfoListProps) => {
             </pre>
         </section>
         )}
+        {balance && (
+        <section>
+            <h2>Balance</h2>
+            <pre>
+                {balance}<br />
+            </pre>
+        </section>
+        )}
         <section>
             <h2>useAppKit</h2>
             <pre>

react/react-bitcoin/src/utils/BitcoinUtil.ts

@@ -107,6 +107,14 @@ export const getFeeRate = async () => {
 
     throw new Error('Unsupported payment type')
   }
+
+export const getBalance = async (caipNetwork: CaipNetwork, address: string): Promise<number> => {
+    // get the utxos ... this is the list of unspent transactions that the sender has
+    const utxos = await getUTXOs(address, isTestnet(caipNetwork.caipNetworkId))
+    // return the sum of the utxos ... The balance of the sender
+    return utxos.reduce((sum, utxo) => sum + utxo.value, 0)
+}
+
 //
 // Create a psbt ... The PSBT that will be signed by the sender in the wallet
 //