> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Balance Display

> Learn how to configure and display balances in the Para Modal, including Aggregated and Custom Asset modes, and use the useProfileBalance hook for programmatic access.

export const MethodDocs = ({name, description, parameters = [], returns, deprecated = false, since = null, async = false, static: isStatic = false, tag = null, defaultExpanded = false, preventCollapse = false, id = 'method'}) => {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded || preventCollapse);
  const [isHovered, setIsHovered] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
  const [hoveredParam, setHoveredParam] = useState(null);
  const [hoveredReturn, setHoveredReturn] = useState(false);
  const parseMethodName = fullName => {
    const match = fullName.match(/^([^(]+)(\()([^)]*)(\))$/);
    if (match) {
      return {
        name: match[1],
        openParen: match[2],
        params: match[3],
        closeParen: match[4]
      };
    }
    return {
      name: fullName,
      openParen: '',
      params: '',
      closeParen: ''
    };
  };
  const methodParts = parseMethodName(name);
  const handleCopy = e => {
    e.stopPropagation();
    navigator.clipboard.writeText(name);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000);
  };
  return <div className={`not-prose rounded-2xl border border-gray-200 overflow-hidden transition-colors duration-200 mb-6 ${isHovered && !preventCollapse ? 'bg-gray-50' : 'bg-white'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <button onClick={() => !preventCollapse && setIsExpanded(!isExpanded)} className={`w-full bg-transparent p-6 border-none text-left ${preventCollapse ? 'cursor-default' : 'cursor-pointer'}`}>
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 flex flex-col gap-2">
            <div className="flex items-center gap-3 flex-wrap">
              <div className="flex items-center gap-2">
                {async && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-purple-200 text-purple-800 rounded-lg">
                    async
                  </span>}
                {isStatic && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-violet-200 text-violet-900 rounded-lg">
                    static
                  </span>}
                {tag && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-teal-200 text-teal-800 rounded-lg">
                    {tag}
                  </span>}
              </div>

              <code className="text-lg font-mono font-semibold text-gray-900">
                <span>{methodParts.name}</span>
                <span className="text-gray-500 font-normal">{methodParts.openParen}</span>
                <span className="text-blue-600 font-normal">{methodParts.params}</span>
                <span className="text-gray-500 font-normal">{methodParts.closeParen}</span>
              </code>

              {deprecated && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-red-100 text-red-800 rounded-lg flex items-center gap-0.5">
                  ⚠ Deprecated
                </span>}
              {since && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-blue-100 text-blue-800 rounded-lg">
                  Since v{since}
                </span>}
            </div>

            <p className="text-sm text-gray-600 leading-6 m-0">
              {description}
            </p>
          </div>

          <div className="flex items-center gap-2 flex-shrink-0">
            <button onClick={handleCopy} className="p-2 bg-transparent border-none rounded-md cursor-pointer transition-colors duration-200 text-gray-500 hover:bg-gray-100" title="Copy method signature">
              {isCopied ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg> : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>}
            </button>

            {!preventCollapse && <span className="text-gray-400">
                {isExpanded ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg> : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>}
              </span>}
          </div>
        </div>
      </button>

      <div className={`overflow-hidden transition-all duration-300 ease-in-out px-6 border-t border-gray-200 ${isExpanded ? 'max-h-[2000px] opacity-100 pb-6' : 'max-h-0 opacity-0 pb-0'}`}>
        {parameters.length > 0 && <div className="pt-6">
            <div className="flex items-center gap-2 mb-3">
              <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider m-0">
                Parameters
              </h3>
              <span className="text-xs text-gray-500">({parameters.length})</span>
            </div>
            <div>
              {parameters.map((param, index) => <div key={index} className={`pl-4 border-l-2 transition-colors duration-200 ${hoveredParam === index ? 'border-gray-300' : 'border-gray-200'} ${index < parameters.length - 1 ? 'mb-3' : ''}`} onMouseEnter={() => setHoveredParam(index)} onMouseLeave={() => setHoveredParam(null)}>
                  <div className="flex items-baseline gap-2 mb-1 flex-wrap">
                    <code className="font-mono text-sm font-medium text-gray-900">
                      {param.name}
                    </code>
                    <span className="text-sm text-gray-500">:</span>
                    {param.typeLink ? <a href={param.typeLink} className="no-underline">
                        <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100 hover:text-blue-700">
                          {param.type}
                        </code>
                      </a> : <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded-md">
                        {param.type}
                      </code>}
                    {param.required && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-yellow-100 text-yellow-800 rounded-lg">
                        Required
                      </span>}
                    {param.optional && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-gray-100 text-gray-600 rounded-lg">
                        Optional
                      </span>}
                  </div>
                  {param.description && <p className="text-sm text-gray-600 mt-1 mb-0">
                      {param.description}
                    </p>}
                  {param.defaultValue !== undefined && <p className="text-sm text-gray-500 mt-1">
                      Default: <code className="font-mono text-[0.625rem] bg-gray-100 px-1.5 py-0.5 rounded-lg">{param.defaultValue}</code>
                    </p>}
                </div>)}
            </div>
          </div>}

        {returns && <div className={`${parameters.length > 0 ? 'mt-6' : 'pt-6'}`}>
            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider m-0 mb-3">
              Returns
            </h3>
            <div className={`pl-4 border-l-2 transition-colors duration-200 ${hoveredReturn ? 'border-gray-300' : 'border-gray-200'}`} onMouseEnter={() => setHoveredReturn(true)} onMouseLeave={() => setHoveredReturn(false)}>
              <div className="flex items-baseline gap-2 mb-1">
                {returns.typeLink ? <a href={returns.typeLink} className="no-underline">
                    <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded cursor-pointer transition-all duration-200 hover:bg-gray-100 hover:text-blue-700">
                      {returns.type}
                    </code>
                  </a> : <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded">
                    {returns.type}
                  </code>}
              </div>
              {returns.description && <p className="text-sm text-gray-600 mt-1 mb-0">
                  {returns.description}
                </p>}
            </div>
          </div>}
      </div>
    </div>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

The Para Modal provides comprehensive balance display capabilities, allowing users to view their wallet balances across multiple assets and networks. You can configure how balances are displayed and aggregated, and programmatically access balance data using the `useProfileBalance` hook.

## Balance Display Configuration

You can customize how balances are displayed and calculated through the `paraModalConfig.balances` property in your `ParaProvider` configuration. This setting will impact both the Para Modal's balance display and instances where you use the `useProfileBalance` hook.

Para supports two primary balance display modes, `AGGREGATED` and `CUSTOM_ASSET`. You can also specify whether to fetch balances for both `MAINNET_AND_TESTNET` (default) or one or the other only (`MAINNET` or `TESTNET`).

### Defining Custom Networks and Assets

To include custom assets when fetching connected wallet balances, you will need to supply implementation metadata for each asset, including:

* Each asset must include basic metadata, including `name`, `symbol`, and `logoUrl` (optional).
* Each asset must include an `implementations` array for each network you wish to query for balances.
  * Each implementation object must include:
    * Price data:
      * **For a fixed price:**
        * Include a `price` object with the asset's price in the format `{ value: number; currency: 'USD' }`.
      * **For a volatile price:**
        * Include a `priceUrl` string. This endpoint must respond to GET requests with a JSON object with the asset's current price in the format `{ value: number; currency: 'USD' }`.
    * Network information:
      * **For a custom EVM network:**
        * Include a `network` object specifying the network's `name`, `evmChainId`, and an `rpcUrl` where asset balances can be queried.
          * If the network is a testnet, include `isTestnet: true`.
          * Include a `nativeTokenSymbol` if the network's native token is not Ethereum (ETH).
          * Optional: Include a `logoUrl` for the network.
          * Optional: Include an `explorer` object for the network, including:
            * The explorer's display name `name`.
            * The explorer's homepage URL `url`.
            * An explorer URL template `txUrlFormat` for broadcast transactions, using `{HASH}` as the placeholder for the transaction hash. Example: `https://etherscan.io/tx/{HASH}`
        * **If the asset is the network's native token:**
          * No additional configuration is needed.
        * **If the asset is an ERC-20 token:**
          * Include a `contractAddress` string.
      * **For a standard EVM or Solana network:**
        * Include a `network` string, matching one of the networks enumerated in the `TNetwork` type. For example, `'ETHEREUM'` or `'SOLANA'`.
        * Include a `contractAddress` string.

Refer to the code snippets below for example configurations.

### Aggregated Mode (Default)

Aggregated Mode automatically aggregates balances across all detected chains and assets and displays them in USD value. If you supply additional assets and price data, these totals will be included in the calculation.

<Tip>
  The aggregated total will include most commonly used assets across many networks. If you want to only include totals from your customized tokens, set `excludeStandardAssets` to `true`.
</Tip>

An example configuration with additional assets is below:

```tsx theme={null}
<ParaProvider
  // ... other config
  paraModalConfig={{
    // ... other config
    balances: {
      displayType: "AGGREGATED",
      requestType: 'MAINNET_AND_TESTNET',
      // Include only balances for your custom assets:
      excludeStandardAssets: true,
      additionalAssets: [
        {
          name: 'Custom Asset',
          symbol: 'CUSTOM',
          logoUrl: '<logo-url>',
          // A price endpoint for the asset:
          priceUrl: '<price-url-endpoint>',
          implementations: [
            // A custom EVM network where the asset is the native token:
            {
              network: {
                name: 'Custom Chain',
                evmChainId: '12345',
                rpcUrl: 'https://rpc.customexplorer.com',
                logoUrl: 'https://cdn.customexplorer.com/logo.png',
                nativeTokenSymbol: 'CUSTOM',
                explorer: {
                  name: 'Custom Chain Explorer',
                  url: 'https://customexplorer.com',
                  txUrlFormat: 'https://customexplorer.com/tx/{HASH}',
                }
              },
            },
            // A custom EVM network where the asset is an ERC-20 token:
            {
              network: {
                name: 'Another Custom Chain',
                evmChainId: '12345',
                rpcUrl: '<rpc-url>',
                logoUrl: '<logo-url>',
                explorer: {
                  name: 'Another Custom Chain Explorer',
                  url: 'https://anothercustomexplorer.com',
                  txUrlFormat: 'https://anothercustomexplorer.com/tx/{HASH}',
                }
              },
              contractAddress: '0x...',
            },
            // An implementation of the token on Solana:
            {
              network: 'SOLANA',
              contractAddress: 'Ep4r...',
            },
            // A testnet ERC-20 implementation of the token:
            {
              network: {
                name: 'Custom Chain Testnet',
                evmChainId: '12346',
                rpcUrl: '<testnet-rpc-url>',
                logoUrl: '<testnet-logo-url>',
                nativeTokenSymbol: 'CUSTOM',
                explorer: {
                  name: 'Custom Chain Testnet Explorer',
                  url: 'https://testnet.customexplorer.com',
                  txUrlFormat: 'https://testnet.customexplorer.com/tx/{HASH}',
                },
                isTestnet: true,
              },
              contractAddress: '0x...',
            },
          ],
        },
        {
          name: 'Custom Stablecoin',
          symbol: 'CSTABLE',
          logoUrl: '<logo-url.png>',
          // A fixed price for the asset
          price: {
            value: 1,
            currency: 'USD',
          },
          networks: [
            // A custom network where the asset is an ERC-20 token:
            {
              network: {
                name: 'Custom Chain',
                evmChainId: '12345',
                rpcUrl: '<rpc-url>',
                logoUrl: '<logo-url>',
                nativeTokenSymbol: 'CUSTOM',
                explorer: {
                  name: 'Custom Chain Explorer',
                  url: 'https://customexplorer.com',
                  txUrlFormat: 'https://customexplorer.com/tx/{HASH}',
                }
              },
              contractAddress: '0x...',
            },
          ],
        },
      ]
    }
  }}
>
  {children}
</ParaProvider>
```

#### Balance Overrides

In Aggregated Mode, if you wish, you can manually override the displayed fiat balance for each wallet in the Para Modal. This is useful if you are using a custom chain with many assets that are not included in the calculated total. You can replace the default USD balance for each connected wallet.

<Tip>
  The override will alter both the per-wallet USD balance displayed in the 'Profile' modal screen and the cumulative USD balance displayed on the main 'Account' screen. It will also alter the result from the `useProfileBalance` hook.
</Tip>

To do this, you first set the `useBalanceOverrides` flag to `true` in your `ParaProvider` modal configuration:

```tsx theme={null}
<ParaProvider
  // ... other config
  paraModalConfig={{
    // ... other config
    balances: {
      // ... other config
      useBalanceOverrides: true,
    }
  }}
>
  {children}
</ParaProvider>
```

Then, within the `ParaProvider`, you can calculate and set an override object using the `useSetBalanceOverrides` hook. Pass an object where the keys are the addresses for your connected wallets (available in the `useAccount` hook) and the values are numbers representing the USD balance for each wallet.

An example usage:

```tsx App.tsx theme={null}
import { useAccount, useSetBalanceOverrides } from "@getpara/react-sdk";
import { fetchAdditionalBalances } from "@your-domain/your-api-library";

// Assuming your API function accepts an array of wallet addresses and returns a Record<string, number>:
declare global {
  fetchAdditionalBalances: (opts: { addresses: string[] }) => Promise<Record<string, number>>;
}

export const App = () => {
  const { embedded: embeddedWallets } = useAccount();
  const setBalanceOverrides = useSetBalanceOverrides();
  useEffect(() => {
     const interval = setInterval(async () => {
       const balances = await fetchAdditionalBalances({ addresses: embeddedWallets.map(w => w.address!) });

       // Example response:
       // {
       //   '0x123...': 123.45,
       //   '0x456...': 6.78,
       // }

       // Set the balance overrides:
       setBalanceOverrides(balances);
     }, 30000);

     return () => clearInterval(interval);
   }, [embeddedWallets]);

   // ...
};
```

### Custom Asset Mode

In Custom Asset Mode, the Para Modal will only display balances of a chosen asset, with no fiat currency conversion. This is ideal for cases where your app uses a particular token that may not have price information available.

Like in Aggregated Mode, you will need to supply implementation metadata for the asset, including any custom network definitions so that its balances can be queried for the session's connected wallets. However, in this mode, you do not need to include a price object or a price URL.

```tsx theme={null}
<ParaProvider
  // ... other config
  paraModalConfig={{
    // ... other config
    balances: {
      displayType: 'CUSTOM_ASSET',
      asset: {
        name: 'Custom Asset',
        symbol: 'CUSTOM',
        logoUrl: '<logo-url>',
        networks: [
          // A custom network where the asset is the native token:
          {
            network: {
              name: 'Custom Chain',
              evmChainId: '12345',
              rpcUrl: '<rpc-url>',
              logoUrl: '<logo-url>',
              nativeTokenSymbol: 'CUSTOM',
              explorer: {
                name: 'Custom Chain Explorer',
                url: 'https://customexplorer.com',
                txUrlFormat: 'https://customexplorer.com/tx/{HASH}',
              }
            },
          },
          // A known network where the asset is an ERC-20 token:
          {
            contractAddress: '0x...',
            network: 'ETHEREUM',
          }
        ],
      },
    },
  }}
>
  {children}
</ParaProvider>
```

## useProfileBalance Hook

The `useProfileBalance` hook allows you to query the current aggregated or custom asset balance of all wallets in the current session.

Balances are normally cached on the server for five minutes. You can supply a `refetchTrigger` to the hook to manually refetch balances when desired, using a unique number or string.

```tsx theme={null}
import { useProfileBalance } from "@getpara/react-sdk";

function BalanceDisplay() {
  const [refetchTrigger, setRefetchTrigger] = useState(0);

  const { data: profileBalance, isLoading, error } = useProfileBalance({
    // Balances will be refetched whenever `refetchTrigger` changes
    refetchTrigger,
  });

  if (isLoading) return <div>Loading balances...</div>;
  if (error) return <div>Error loading balances: {error.message}</div>;
  if (!profileBalance) return <div>No balance data available</div>;

  return (
    <div>
      <h2>Total Balance: ${profileBalance.value.value.toFixed(2)}</h2>
      <div>
        {profileBalance.wallets.map((wallet) => (
          <div key={wallet.address}>
            <h3>Wallet: {wallet.address}</h3>
            {wallet.assets.map((asset) => (
              <div key={asset.symbol}>
                <span>{asset.symbol}: ${asset.balance}</span>
                <span>(${asset.value.value.toFixed(2)})</span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <button onClick={() => setRefetchTrigger(prev => prev + 1)}>Refresh Balances</button>
    </div>
  );
}
```

Depending on the display type, the `ProfileBalance` object returned by `useProfileBalance` has the following structure:

<Tabs>
  <Tab title="Aggregated">
    ```tsx theme={null}
    {
      value: {
        value: 200,
        currency: 'USD',
      },
      wallets: [
        {
          type: 'EVM',
          address: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e',
          value: {
            value: 200,
            currency: 'USD',
          },
          assets: [
            {
              metadata: {
                internalId: 'ETHEREUM',
                zerionId: 'eth',
                name: 'Ethereum',
                symbol: 'ETH',
                rpcUrl: 'https://eth.llamarpc.com',
                logoUrl: 'https://cdn.zerion.io/eth.png',
                explorer: {
                  name: 'Etherscan',
                  url: 'https://etherscan.io',
                  txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                },
                price: {
                  value: 4000,
                  currency: 'USD',
                }
              },
              quantity: 0.03,
              value: {
                value: 120,
                currency: 'USD',
              },
              networks: [
                {
                  metadata: {
                    internalId: 'ETHEREUM',
                    zerionId: 'ethereum',
                    evmChainId: '1',
                    name: 'Ethereum',
                    rpcUrl: 'https://eth.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/eth.png',
                    explorer: {
                      name: 'Etherscan',
                      url: 'https://etherscan.io',
                      txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                    }
                  },
                  quantity: 0.02,
                  value: {
                    value: 80,
                    currency: 'USD',
                  },
                },
                {
                  metadata: {
                    internalId: 'BASE',
                    zerionId: 'base',
                    evmChainId: '8453',
                    name: 'Base',
                    rpcUrl: 'https://base.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/base.png',
                    explorer: {
                      name: 'Basescan',
                      url: 'https://basescan.org',
                      txUrlFormat: 'https://basescan.org/tx/{HASH}',
                    }
                  },
                  quantity: 0.01,
                  value: {
                    value: 40,
                    currency: 'USD',
                  },
                }
              ]
            },
            {
              metadata: {
                internalId: 'USDC',
                zerionId: 'usdc',
                name: 'USD Coin',
                symbol: 'USDC',
                price: {
                  value: 1,
                  currency: 'USD',
                }
              },
              quantity: 80,
              value: {
                value: 80,
                currency: 'USD',
              },
              networks: [
                {
                  metadata: {
                    internalId: 'ETHEREUM',
                    zerionId: 'ethereum',
                    evmChainId: '1',
                    name: 'Ethereum',
                    rpcUrl: 'https://eth.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/eth.png',
                    explorer: {
                      name: 'Etherscan',
                      url: 'https://etherscan.io',
                      txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                    }
                  },
                  quantity: 50,
                  value: {
                    value: 50,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                },
                {
                  metadata: {
                    internalId: 'BASE',
                    zerionId: 'base',
                    evmChainId: '8453',
                    name: 'Base',
                    rpcUrl: 'https://base.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/base.png',
                    explorer: {
                      name: 'Basescan',
                      url: 'https://basescan.org',
                      txUrlFormat: 'https://basescan.org/tx/{HASH}',
                    }
                  },
                  quantity: 20,
                  value: {
                    value: 20,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                },
                {
                  metadata: {
                    internalId: 'SOLANA',
                    name: 'Solana',
                  },
                  quantity: 10,
                  value: {
                    value: 10,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                }
              ]
            }
          ],
          networks: [
            {
              metadata: {
                internalId: 'ETHEREUM',
                zerionId: 'ethereum',
                evmChainId: '1',
                name: 'Ethereum',
              },
              value: {
                value: 130,
                currency: 'USD',
              },
              assets: [
                {
                  metadata: {
                    internalId: 'ETHEREUM',
                    zerionId: 'ethereum',
                    evmChainId: '1',
                    name: 'Ethereum',
                    symbol: 'ETH',
                    rpcUrl: 'https://eth.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/eth.png',
                    explorer: {
                      name: 'Etherscan',
                      url: 'https://etherscan.io',
                      txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                    }
                  },
                  quantity: 0.02,
                  value: {
                    value: 80,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                },
                {
                  metadata: {
                    internalId: 'USDC',
                    zerionId: 'usdc',
                    name: 'USD Coin',
                    symbol: 'USDC',
                    price: {
                      value: 1,
                      currency: 'USD',
                    },
                  },
                  quantity: 50,
                  value: {
                    value: 50,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                }
              ]
            },
            {
              metadata: {
                internalId: 'BASE',
                zerionId: 'base',
                evmChainId: '8453',
                name: 'Base',
                logoUrl: 'https://cdn.zerion.io/base.png',
                rpcUrl: 'https://base.llamarpc.com',
                explorer: {
                  name: 'Basescan',
                  url: 'https://basescan.org',
                  txUrlFormat: 'https://basescan.org/tx/{HASH}',
                }
              },
              value: {
                value: 60,
                currency: 'USD',
              },
              assets: [
                {
                  metadata: {
                    internalId: 'ETHEREUM',
                    zerionId: 'eth',
                    evmChainId: '1',
                    name: 'Ethereum',
                    logoUrl: 'https://cdn.zerion.io/eth.png',
                  },
                  quantity: 0.01,
                  value: {
                    value: 40,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                },
                {
                  metadata: {
                    internalId: 'USDC',
                    zerionId: 'usdc',
                    name: 'USD Coin',
                    symbol: 'USDC',
                    logoUrl: 'https://cdn.zerion.io/usdc.png',
                    price: {
                      value: 1,
                      currency: 'USD',
                    },
                  },
                  quantity: 20,
                  value: {
                    value: 20,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                }
              ]
            },
            {
              metadata: {
                internalId: 'SOLANA',
                name: 'Solana',
                rpcUrl: 'https://api.mainnet-beta.solana.com',
                logoUrl: 'https://cdn.zerion.io/solana.png',
                explorer: {
                  name: 'Solana Explorer',
                  url: 'https://explorer.solana.com/',
                  txUrlFormat: 'https://explorer.solana.com/tx/{HASH}',
                }
              },
              value: {
                value: 10,
                currency: 'USD',
              },
              assets: [
                {
                  metadata: {
                    internalId: 'USDC',
                    zerionId: 'usdc',
                    name: 'USD Coin',
                    symbol: 'USDC',
                    price: {
                      value: 1,
                      currency: 'USD',
                    },
                  },
                  quantity: 10,
                  value: {
                    value: 10,
                    currency: 'USD',
                  },
                  contractAddress: '0x...',
                }
              ]
            }
          ]
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Custom Asset">
    ```tsx theme={null}
    {
      wallets: [
        {
          type: 'EVM',
          address: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e',
          assets: [
            {
              metadata: {
                name: 'Custom Asset',
                symbol: 'CUSTOM',
                customAssetId: 'custom_CUSTOM',
                logoUrl: '<logo-url>',
              },
              quantity: 1.5,
              networks: [
                {
                  metadata: {
                    internalId: 'ETHEREUM',
                    zerionId: 'ethereum',
                    name: 'Ethereum',
                    evmChainId: '1',
                    rpcUrl: 'https://eth.llamarpc.com',
                    logoUrl: 'https://cdn.zerion.io/eth.png',
                    explorer: {
                      name: 'Etherscan',
                      url: 'https://etherscan.io',
                      txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                    }
                  },
                  quantity: 1.0,
                  contractAddress: '0x...',
                },
                {
                  metadata: {
                    customNetworkId: 'custom_12345',
                    name: 'Custom Chain',
                    evmChainId: '12345',
                    rpcUrl: 'https://rpc.customexplorer.com',
                    logoUrl: 'https://cdn.customexplorer.com/logo.png',
                    nativeTokenSymbol: 'CUSTOM',
                    explorer: {
                      name: 'Custom Chain Explorer',
                      url: 'https://customexplorer.com',
                      txUrlFormat: 'https://customexplorer.com/tx/{HASH}',
                    }
                  },
                  quantity: 0.5,
                  contractAddress: '0x...',
                }
              ]
            }
          ],
          networks: [
            {
              metadata: {
                internalId: 'ETHEREUM',
                zerionId: 'ethereum',
                name: 'Ethereum',
                evmChainId: '1',
                rpcUrl: 'https://eth.llamarpc.com',
                logoUrl: 'https://cdn.zerion.io/eth.png',
                explorer: {
                  name: 'Etherscan',
                  url: 'https://etherscan.io',
                  txUrlFormat: 'https://etherscan.io/tx/{HASH}',
                }
              },
              assets: [
                {
                  metadata: {
                    name: 'Custom Asset',
                    symbol: 'CUSTOM',
                    customAssetId: 'custom_CUSTOM',
                  },
                  quantity: 1.5,
                  contractAddress: '0x...',
                }
              ]
            },
            {
              metadata: {
                customNetworkId: 'custom_12345',
                name: 'Custom Chain',
                evmChainId: '12345',
                rpcUrl: 'https://rpc.customexplorer.com',
                logoUrl: 'https://cdn.customexplorer.com/logo.png',
                explorer: {
                  name: 'Custom Chain Explorer',
                  url: 'https://customexplorer.com',
                  txUrlFormat: 'https://customexplorer.com/tx/{HASH}',
                }
              },
              assets: [
                {
                  metadata: {
                    name: 'Custom Asset',
                    symbol: 'CUSTOM',
                    customAssetId: 'custom_CUSTOM',
                  },
                  quantity: 0.5,
                  contractAddress: '0x...',
                }
              ]
            }
          ]
        }
      ]
    }
    ```
  </Tab>
</Tabs>