Skip to content

Wallet assets

Wallet assets represent the tokens held by a user's embedded wallet. This includes:

  • Native tokens (e.g., ETH, MATIC, AVAX) - The blockchain's native currency used for gas fees and value transfers
  • ERC-20 tokens (e.g., USDC, DAI, USDT) - Fungible tokens following the ERC-20 standard

You can query asset balances using wagmi hooks integrated with Openfort's embedded wallet system.

Using Openfort UI

Using Openfort's pre-built UI components, users can easily view their wallet assets without additional coding. The UI automatically fetches and displays native and some default ERC-20 token balances.

Your user's assets would look something like this:

Wallet Assets UI

Here's the continued documentation with details about asset definition and optional fields:

ERC-20 tokens

By default, Openfort's UI displays balances for popular ERC-20 tokens like USDC and DAI. You can customize the list of displayed tokens in the OpenfortProvider configuration.

import { polygonAmoy } from 'viem/chains';
import { OpenfortProvider } from '@openfort/react';
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
        assets: {
          [polygonAmoy.id]: ['0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac'],
        },
      }}
    >
      {children}
    </OpenfortProvider>
  );
}

Asset Configuration

Assets are defined in the assets object within the walletConfig. The structure is organized by chain ID, where each chain can have multiple asset configurations.

Structure

The assets object uses chain IDs as keys, with each value being an array of AssetConfig objects:

assets?: {
  [chainId: number]: Hex[];
}

Openfort will automatically query the token contract to retrieve the symbol, name, and decimals for each asset address provided.

Get wallet assets

To fetch and display wallet assets, you can use useWalletAssets hook.

import { useWalletAssets } from '@openfort/react';
import { formatUnits } from 'viem';
 
function WalletAssets() {
  const { data: assets, isLoading, error } = useWalletAssets();
 
  if (isLoading) return <div>Loading assets...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <div>
      <h2>Wallet Assets</h2>
      <ul>
        {assets?.map((asset) => (
          <li key={asset.address}>
            {asset.address}: {formatUnits(asset.balance, asset.metadata?.decimals ?? 18)} {asset.metadata?.symbol}
          </li>
        ))}
      </ul>
    </div>
  );
}

For more details and advanced usage, see the useWalletAssets documentation.

Related resources