# Token

Shows a token icon by contract address or symbol.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Token.tsx)

## Overview

A token shows a token icon, found by contract address or by symbol.

Its `alt` is empty unless set, which suits an icon beside the token name.

## Examples

### Basic

```tsx
import { style, Token } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Token.Provider>
      <div {...styles.row()}>
        <Token address="0x20c0000000000000000000000000000000000000" />
        pathUSD
      </div>
    </Token.Provider>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Token/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { style, Token } from '@tempoxyz/ds'

const tokens = [
  ['pathUSD', '0x20c0000000000000000000000000000000000000'],
  ['USDC.e', '0x20c000000000000000000000b9537d11c60e8b50'],
  ['EURC.e', '0x20c0000000000000000000001621e21f71cf12fb'],
  ['USDT0', '0x20c00000000000000000000014f22ca97301eb73'],
  ['frxUSD', '0x20c0000000000000000000003554d28269e0f3c2'],
] as const

export function Demo() {
  return (
    <Token.Provider>
      <div {...styles.grid()}>
        {tokens.map(([label, address]) => (
          <div key={address} {...styles.row()}>
            {(['small', 'medium', 'large'] as const).map((size) => (
              <Token address={address} key={size} size={size} />
            ))}
            {label}
          </div>
        ))}
      </div>
    </Token.Provider>
  )
}

namespace styles {
  export const grid = style({ display: 'grid', gap: '3' })

  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Token/Size.tsx)

### Symbol

Pass `symbol` instead of `address` to resolve the token through the token list.

```tsx
import { style, Token } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Token.Provider>
      <div {...styles.row()}>
        <Token size="large" symbol="pathUSD" />
        By symbol: pathUSD
      </div>
    </Token.Provider>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Token/Symbol.tsx)

### Fallback

An unknown address or symbol renders a placeholder.

```tsx
import { style, Token } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Token.Provider>
      <div {...styles.grid()}>
        <div {...styles.row()}>
          <Token address="0x0000000000000000000000000000000000000001" size="large" />
          Unknown address (service placeholder)
        </div>
        <div {...styles.row()}>
          <Token size="large" symbol="UNKNOWN" />
          Unknown symbol (fallback)
        </div>
      </div>
    </Token.Provider>
  )
}

namespace styles {
  export const grid = style({ display: 'grid', gap: '3' })

  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Token/Fallback.tsx)

## Guidelines

TODO: Write guidelines for Token.