Skip to Content
🌐 Frontend SDKHooksBalance & Assets

Balance & Assets

Hooks for native balances, fiat conversion, ERC-20 token balances, and asset tracking.

EmbarkAI provides a set of hooks for reading balances and asset data. The primary useBalance hook returns the native token balance with fiat conversion, while useAssets, useTokenInfo, and useTokenBalance give you access to individual ERC-20 tokens.

Import

import {
  useBalance,
  useAssets,
  useTokenInfo,
  useTokenBalance,
} from '@embarkai/ui-kit'

useBalance

Returns the native token balance for the connected wallet along with fiat conversion data.

import { useBalance } from '@embarkai/ui-kit'
 
function BalanceCard() {
  const { walletBalance, fiatBalance, cryptoRate, fiatSymbol, cryptoSymbol } = useBalance()
 
  return (
    <div>
      <p>{walletBalance} {cryptoSymbol}</p>
      <p>{fiatSymbol}{fiatBalance}</p>
      <p className="text-sm">Rate: {fiatSymbol}{cryptoRate}</p>
    </div>
  )
}

Return Values

PropertyTypeDescription
walletBalancestringNative token balance (e.g., '1.5').
fiatBalancestringBalance converted to fiat currency.
cryptoRatestringCurrent exchange rate for the native token.
fiatSymbolstringFiat currency symbol (e.g., '$').
cryptoSymbolstringNative token symbol (e.g., 'LUMIA').

useAssets

Returns the full list of tracked token assets for the connected wallet. Tracked tokens are configured via the watchTokens option in the Provider.

import { useAssets } from '@embarkai/ui-kit'
 
function AssetList() {
  const assets = useAssets()
 
  return (
    <ul>
      {assets?.map((asset) => (
        <li key={asset.address}>
          {asset.symbol}: {asset.balance}
        </li>
      ))}
    </ul>
  )
}

useTokenInfo

Returns metadata for a specific token by its contract address.

import { useTokenInfo } from '@embarkai/ui-kit'
 
function TokenDetails({ address }: { address: `0x${string}` }) {
  const tokenInfo = useTokenInfo(address)
 
  if (!tokenInfo) return <p>Loading token info...</p>
 
  return (
    <div>
      <p>{tokenInfo.name} ({tokenInfo.symbol})</p>
      <p>Decimals: {tokenInfo.decimals}</p>
    </div>
  )
}

useTokenBalance

Returns the balance for a specific ERC-20 token by its contract address.

import { useTokenBalance } from '@embarkai/ui-kit'
 
function TokenBalance({ address }: { address: `0x${string}` }) {
  const balance = useTokenBalance(address)
 
  return <p>Balance: {balance ?? '0'}</p>
}

Formatting Example

Combine hooks to build a complete balance display:

import { useBalance, useAssets } from '@embarkai/ui-kit'
 
function Portfolio() {
  const { walletBalance, fiatBalance, fiatSymbol, cryptoSymbol } = useBalance()
  const assets = useAssets()
 
  return (
    <div>
      <h2>Portfolio</h2>
      <div className="native-balance">
        <span>{walletBalance} {cryptoSymbol}</span>
        <span className="text-muted">{fiatSymbol}{fiatBalance}</span>
      </div>
 
      <h3>Tokens</h3>
      {assets?.map((asset) => (
        <div key={asset.address} className="token-row">
          <span>{asset.symbol}</span>
          <span>{asset.balance}</span>
        </div>
      ))}
    </div>
  )
}

Next Steps

Last updated on
Session & AuthTransactions