1.1.0 • Published 1 year ago
@tokenicon/react v1.1.0
Installation
Using yarn
yarn add @tokenicon/reactor using npm
npm install -S @tokenicon/reactUsage
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