`<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
  src="https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png"
  size={24}
/>
 
<TokenImage
  src="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,
    blockchain: 'eth',
    chainId: 8453,
  }}
  size={24}
/>
 
<TokenImage
  token={{
    name: 'USDC',
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    symbol: 'USDC',
    decimals: 6,
    image: null,
    blockchain: 'eth',
    chainId: 8453,
  }}
  size={32}
/>

Props

TokenImageReact

CSS

.ock-tokenimage {
  @apply overflow-hidden rounded-[50%];
}