@tomo/token-list

Tomo Wallet Token List SDK - A React component library for displaying cryptocurrency token lists.

Installation

npm install @tomo/token-list
# or
yarn add @tomo/token-list

Features

• 🚀 Easy to integrate token list component
• 🔄 Auto-refresh functionality
• 📱 Pull-to-refresh support
• 💰 Total value calculation
• 🔍 Chain filtering
• 🎨 Customizable styling
• 📬 PostMessage communication for iframe integration
• 🔒 Optional balance hiding

Quick Start

import { TomoTokenList } from "@tomo/token-list";

function App() {
  const walletId = "your-wallet-id";

  return (
    <TomoTokenList
      walletId={walletId}
      config={{
        chainId: 1, // Ethereum mainnet
        onTokenClick: (token) => {
          console.log("Token clicked:", token);
        },
        hideBalance: false,
        refreshInterval: 20000, // 20 seconds
      }}
    />
  );
}

API Reference

TomoTokenList

Main component for displaying token list.

Props

| Prop | Type | Description | Default | | --------- | --------------- | --------------------------------------- | ------- | | walletId | string | Required. Wallet ID for fetching tokens | - | | config | TokenListConfig | Configuration options | {} | | className | string | Custom CSS class | - | | style | CSSProperties | Custom styles | - |

TokenListConfig

| Option | Type | Description | Default | | --------------- | ---------------------------- | -------------------------- | -------------------- | | apiUrl | string | API base URL | https://api.tomo.inc | | chainId | number | string | Filter tokens by chain | - | | onTokenClick | (token: AssetsToken) => void | Token click handler | - | | hideBalance | boolean | Hide token balances | false | | showRiskWarning | boolean | Show risk warnings | true | | refreshInterval | number | Auto-refresh interval (ms) | 20000 |

Hooks

useTokenList

import { useTokenList } from "@tomo/token-list";

const { tokens, isLoading, error, refresh } = useTokenList({
  walletId: "your-wallet-id",
  chainId: 1,
  autoRefresh: true,
});

PostMessage Events

The SDK sends the following events via postMessage:

OPEN_WALLET_TOKEN_DETAIL

Sent when a token is clicked.

{
  eventType: 'open_wallet_token_detail',
  eventData: {
    token: {
      id: string,
      symbol: string,
      name: string,
      chainId: number,
      address: string,
      balance: string,
      price: number,
      formatted: string,
    }
  }
}

IS_LOADING_READY

Sent when the component has finished loading.

{
  eventType: 'is_loading_ready',
  eventData: { ready: true }
}

Advanced Usage

Custom Token Click Handler

<TomoTokenList
  walletId={walletId}
  config={{
    onTokenClick: (token) => {
      // Navigate to token details
      router.push(`/token/${token.id}`);
    },
  }}
/>

Chain Filtering

<TomoTokenList
  walletId={walletId}
  config={{
    chainId: 56, // Show only BSC tokens
  }}
/>

Custom Styling

<TomoTokenList
  walletId={walletId}
  className="my-custom-class"
  style={{
    height: "600px",
    border: "1px solid #e0e0e0",
  }}
/>

License

MIT