Display Token List

import { useWallet, useTokenAccounts } from '@wankmi/wankmi'
 
export function TokenList() {
  const { publicKey, connected } = useWallet()
  const { data: accounts, isLoading } = useTokenAccounts({ owner: publicKey })
 
  if (!connected) return <p>Connect your wallet to see your tokens.</p>
  if (isLoading) return <p>Loading tokens...</p>
  if (!accounts || accounts.length === 0) return <p>No tokens found.</p>
 
  return (
    <table>
      <thead>
        <tr>
          <th>Mint</th>
          <th>Balance</th>
        </tr>
      </thead>
      <tbody>
        {accounts.map((account) => {
          const info = account.account.data.parsed.info
          const mint = info.mint as string
          const amount = info.tokenAmount.uiAmountString as string
 
          return (
            <tr key={account.pubkey.toBase58()}>
              <td>{`${mint.slice(0, 4)}...${mint.slice(-4)}`}</td>
              <td>{amount}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}