# TokenAmount

The Token Amount component is used to display a token logo followed by an amount and the token symbol.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { TokenAmount } from '@aragon/ui'

function App() {
  return (
    <TokenAmount
      address="0x6B175474E89094C44Da98b954EedeAC495271d0F"
      amount="1049228954700000000000"
      decimals={18}
      symbol="DAI"
    />
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-29b68ad2cda5df2e342b67cf4191a8a54e6edda2%2FSchermata%202022-06-25%20alle%2022.46.13.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `address` <a href="#address" id="address"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `string` | None          |

The address of the token contract, on the specified `chainId` (only Ethereum Mainnet is supported at the moment).

#### `amount` <a href="#amount" id="amount"></a>

| TYPE                         | DEFAULT VALUE   |
| ---------------------------- | --------------- |
| `BigInt`, `Number`, `String` | None (required) |

The token amount.

#### `chainId` <a href="#chainid" id="chainid"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `Number` | `1`           |

The [chain ID](https://chainid.network/) for the token. Only Ethereum Mainnet (`1`) is supported at the moment.

#### `decimals` <a href="#decimals" id="decimals"></a>

| TYPE                         | DEFAULT VALUE   |
| ---------------------------- | --------------- |
| `BigInt`, `Number`, `String` | None (required) |

The number of decimals for the token amount, [as specified by the token contract](https://eips.ethereum.org/EIPS/eip-20#decimals).

#### `digits` <a href="#digits" id="digits"></a>

| TYPE                         | DEFAULT VALUE |
| ---------------------------- | ------------- |
| `BigInt`, `Number`, `String` | `2`           |

Rounds the number to a given decimal place.

#### `iconUrl` <a href="#iconurl" id="iconurl"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | None          |

Overrides the icon URL given by the token address.

#### `size` <a href="#size" id="size"></a>

| TYPE                    | DEFAULT VALUE |
| ----------------------- | ------------- |
| `"large"` or `"medium"` | `"medium"`    |

Size of the component.

#### `symbol` <a href="#symbol" id="symbol"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | None          |

Overrides the symbol given by the token address.