Installation

Using yarn

yarn add @tokenicon/react

or using npm

npm install -S @tokenicon/react

Usage

Use TokenIcon to render token image. TokenInfoProvider is optional and used to fill alt attribute with full token name.

If you want to use useTokenInfo then TokenInfoProvider initialized with TokenInfoCache instance is required.

Example

import { TokenIcon, TokenInfoCache, TokenInfoProvider } from '@tokenicon/react';

const tokenInfoCache = new TokenInfoCache();

function App() {
  return (
    <TokenInfoProvider cache={tokenInfoCache}>
      <TokenIcon chain="ethereum" address="0xdAC17F958D2ee523a2206206994597C13D831ec7" size={64} />
    </TokenInfoProvider>
  );
}

API

TokenIcon

Renders token image. It has all img props and token related props listed bellow.

Properties

| name | description | type | default | | :---------- | :----------------------------------------------------------------------------------------------------------------------- | ----------------: | :------ | | address | Token address | string | - | | chain | Token chain (required) | string | - | | placeholder | Should placeholder be shown while image is loading or unavailable?Pass string as url-value for custom placeholder. | boolean | string | true | | round | Should icon be rounded? | boolean | true | | size | Icon size | number | - |

TokenInfoCache

Manages and caches all the token info queries.

Methods

| name | description | | :---------------------------------- | :--------------------------------------------------- | | fetch(chain, address) | Fetch token info or get it from cache (if available) | | get(chain, address) | Get token info cache data | | subscribe(chain, address, callback) | Subscribe to changes of token info cache data |

TokenInfoProvider

Provides access to TokenInfoCache for underlying react components.

Properties

| name | description | type | default | | :---- | :------------------------- | -------------: | :------ | | cache | Instance of TokenInfoCache | TokenInfoCache | - |

useTokenInfo(chain, address): TokenInfoCacheData

Hook to fetch or get token info from cache