Learn how to access information about the connected user’s wallet.
useAccount
HookuseAccount
, provides access to information about your users’ wallet and connection information.
You can use this for connection-status-based rendering, to enable or disable controls or views based on address, and many other useful tasks.
useAccount
hook to show the user’s address, connection state, network, and balanceisMounted
hook to prevent hydration errorsbaseSepolia
as the network option. You don’t want to accidentally spend real money while developing!
You can set up your providers as described in Introduction to Providers, or use the default from RainbowKit:
ssr
to true
, or you will get a hydration error from Next.js.
useAccount
HookuseAccount
hook allows you to access account and connection data from within any of your components.
Add a folder for components
and a file called ConnectionWindow.tsx
in that folder. Add the below component to the file, and replace the boilerplate text in index.tsx
with an instance of it.
styles/Home.module.css
and delete or comment out .main
. Doing so will move the content to the top of the page, which will prevent the RainbowKit modal from blocking your ability to see changes.
Return to ConnectionWindow.tsx
and add the useAccount
hook to the top, where you’d add any state variables. The general pattern for wagmi hooks is you decompose the properties you want to use from a function call of the name of the hook. For some, you’ll add a config object to that call, but it’s not needed for this one.
<div>
to show the address of the connected wallet:
undefined
when you are disconnected.
undefined
to the user, so let’s use the connection status values for conditional rendering depending on whether the user is disconnected, connected, or connecting.
A common pattern is to use the conditional directly in the html return of a component or render function. For example, we could add a line to show that we’re connecting as demonstrated:
isConnecting
state is true while the Connect to website wallet UI is open.
Autoconnect is enabled by default, so you’ll need to clear the connection from your wallet settings to see this more than once. Otherwise, it will briefly flash as the auto-connect processes.
Use the connected
property in the same way to only render the wallet address if there is a wallet connected. Similarly, use the isDisconnected
property to show a message asking the user to connect.
useAccount
hook gives you access to information about the user’s connection status and wallet. It can be used in any part of your app that is wrapped by the wagmi context provider. You’ve also learned a technique for conditional rendering based on connection status. Finally, you’ve learned to set the ssr
flag to prevent hydration errors due to the client and server possessing different information about the user’s connection status.
Set up RainbowKit and providers
baseSepolia
as the network option. You can set up your providers as described in Introduction to Providers, or use the default from RainbowKit:ssr
to true
, or you will get a hydration error from Next.js.Add the useAccount hook to your component
useAccount
hook to the top of your component, where you’d add any state variables. The general pattern for wagmi hooks is you decompose the properties you want to use from a function call of the name of the hook. For some, you’ll add a config object to that call, but it’s not needed for this one.Display the address of the connected wallet
<div>
to show the address of the connected wallet:undefined
when you are disconnected.Add connection status conditional rendering