Show account balance in USD for AccountBalance and ConnectButton

Show account balance in USD for AccountBalance and ConnectButton

In our recent update, we enabled a new feature for showing the token balance of your account in USD, via the AccountBalance component and since the ConnectButton also uses AccountBalance internally, said feature is also supported.

// For AccountBalance
<AccountBalance showBalanceInFiat="USD" />

// For ConnectButton
<ConnectButton 
  // Show USD balance in the details button
  detailsButton={{
    showBalanceInUSD: "USD",
  }}
  // Show USD balance in the details modal
  detailsModal={{
    showBalanceInUSD: "USD",
  }}
/>

A few things to notice:

  • Only USD is supported at the moment. We have a plan to support more fiat currencies.
  • Since not all tokens are resolvable to a fiat value, you should handle such case by using the fallbackComponent if you are using AccountBalance:
<AccountBalance 
  showBalanceInFiat="USD"
  fallbackComponent={<div>Failed to load fiat price</div>}
/>