Feature Request: Expose TokenBalance Component and/or Assets List component

[jacobgoren-sb]

Describe the solution you'd like

I see in identity/components you have an EthBalance. I would prefer to show in the dropdown also USDC balance. I see in the hooks already a: useGetTokenBalance

TLDR: I know that https://wallet.coinbase.com/assets already has a beautiful way to show the assets of a wallet. I would personally use one on my own page to show a list of the users assets

It could be a full component using https://onchainkit.xyz/token/token-row after reading from cdp_listBalanceDetails?

Describe alternatives you've considered.

I started my own hook like this, but haven't built a UI for it:

import { useEffect, useState } from "react";

interface BalanceDetail {
  // Define the structure of the balance detail response according to the API documentation
  balance: number;
  currency: string;
  // Add more fields as needed
}

interface RpcResponse {
  jsonrpc: string;
  id: number;
  result: BalanceDetail[];
  error?: {
    code: number;
    message: string;
  };
}

export const useCDPBalanceDetails = (
  apiKey: string,
  networkName: string,
  address: string,
  assetId: string,
  pageToken: "",
  pageSize: 1,
) => {
  const [data, setData] = useState<BalanceDetail[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchBalanceDetails = async () => {
      setLoading(true);
      setError(null);

      const body = {
        jsonrpc: "2.0",
        id: 1,
        method: "cdp_listBalanceDetails",
        params: [
          {
            address,
            assetId,
            pageToken,
            pageSize,
          },
        ],
      };

      try {
        const response = await fetch(`https://api.developer.coinbase.com/rpc/v1/${networkName}/${apiKey}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(body),
        });

        const result: RpcResponse = await response.json();

        if (result.error) {
          setError(result.error.message);
        } else {
          setData(result.result);
        }
      } catch (err) {
        if (err instanceof Error) {
          setError(err.message);
        } else {
          setError("An unknown error occurred");
        }
      } finally {
        setLoading(false);
      }
    };

    fetchBalanceDetails();
  }, [apiKey, networkName, address, assetId, pageToken, pageSize]);

  return { data, loading, error };
};