Token

import type { Address } from 'ox'
import { Token } from 'regen-ui'

const tokens = [
  {
    address: '0x20c0000000000000000000000000000000000000',
    label: 'pathUSD',
  },
  {
    address: '0x20c000000000000000000000b9537d11c60e8b50',
    label: 'USDC.e',
  },
  {
    address: '0x20c0000000000000000000001621e21f71cf12fb',
    label: 'EURC.e',
  },
] as const

export function Tokens() {
  return (
    <Token.Provider chainId={4217}>
      <div className="flex gap-3">
        {tokens.map((token) => (
          <span className="grid justify-items-center gap-2" key={token.address}>
            <Token address={token.address as Address.Address} size="large" />
            <span className="label-12 text-foreground-secondary">{token.label}</span>
          </span>
        ))}
      </div>
    </Token.Provider>
  )
}