TokenIcon

Official TokenIcon component for React

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