<TokenImage />
The TokenImage
component is an image that crops token image to a circle with an adjustable size.
With token
props has no image, render partial token symbol and deterministic dark color.
Usage
TokenImage
with an url
<TokenImage
token={{
image: "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png",
}}
size={24}
/>
<TokenImage
token={{
image: "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png",
}}
size={32}
/>
TokenImage
with null as src
<TokenImage
token={{
name: 'USDC',
address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
symbol: 'USDC',
decimals: 6,
image: null,
chainId: 8453,
}}
size={24}
/>
<TokenImage
token={{
name: 'USDC',
address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
symbol: 'USDC',
decimals: 6,
image: null,
chainId: 8453,
}}
size={32}
/>
Props
CSS
.ock-tokenimage {
@apply overflow-hidden rounded-[50%];
}