diff --git a/packages/civic-auth-web3/wagmi/src/App.tsx b/packages/civic-auth-web3/wagmi/src/App.tsx index 747958c..c1fc665 100644 --- a/packages/civic-auth-web3/wagmi/src/App.tsx +++ b/packages/civic-auth-web3/wagmi/src/App.tsx @@ -4,8 +4,8 @@ import { createConfig, useAccount, useConnect, - useSendTransaction, http, + useBalance, } from 'wagmi'; import { embeddedWallet, userHasWallet } from '@civic/auth-web3'; import { CivicAuthProvider, UserButton, useUser } from '@civic/auth-web3/react'; @@ -44,10 +44,12 @@ const App = () => { // Separate component for the app content that needs access to hooks const AppContent = () => { const userContext = useUser(); - const { connect, connectors } = useConnect(); const { isConnected } = useAccount(); - const { sendTransaction } = useSendTransaction(); + const balance = useBalance({ + address: userHasWallet(userContext) + ? userContext.walletAddress as `0x${string}` : undefined, + }); // A function to connect an existing civic embedded wallet const connectExistingWallet = () => { @@ -60,21 +62,10 @@ const AppContent = () => { const createWallet = () => { if (userContext.user && !userHasWallet(userContext)) { // Once the wallet is created, we can connect it straight away - return userContext.createWallet().then(() => new Promise((resolve) => { - setTimeout(() => { - connectExistingWallet(); - resolve(); - }, 200); - })); + return userContext.createWallet().then(connectExistingWallet); } }; - // A reference implementation of a function to send a transaction - const sendTx = () => sendTransaction({ - to: '0x...', - value: 1000n, - }); - return ( <> @@ -86,10 +77,13 @@ const AppContent = () => { {userHasWallet(userContext) && <>

Wallet address: {userContext.walletAddress}

- {isConnected ? ( - - ) : ( - +

Balance: { + balance?.data + ? `${(BigInt(balance.data.value) / BigInt(1e18)).toString()} ${balance.data.symbol}` + : 'Loading...' + }

+ {isConnected ?

Wallet is connected

: ( + )} }