// CoinLogo (can be deprecated in the future because we will have AssetLogo)
// ------------------------------------------
// we already use this component

type CoinLogoProps = {
  size: number; // can be any, we have it as SVG
  symbol: NetworkSymbol;
}

<CoinLogo symbol="btc" size={30} />

// AssetLogo 
// ------------------------------------------
// new component for rendering token logo
// icon is fetched from API 

type AssetLogoProps = {
  size: 20 | 24; // + inner implementation for @2x (srcSet on img)
  coingeckoId: string; // this is coingecko id, we can maybe also provide symbol and do translation inside?
  contractAddress?: string; 
  shouldTryToFetch?: boolean; // (by default true) we know that some images are not available
  placeholder: string; // letters when unavailable
}

<AssetLogo 
  coingeckoId="binance-smart-chain" 
  contractAddress="0x0203d275d2a65030889af45ed91d472be3948b92"
  size={24} 
  shouldTryToFetch={true} 
  placeholder="CATWIFHAT"
/>


// ShareIndicator
// ------------------------------------------
// - uses coin/token logos icons independently

type ShareIndicatorProps = {
  percentageShare: number; // 0-100
  image: ReactNode;
}

// ShareIndicator using coin logo
<ShareIndicator 
  percentageShare={90}
  image={<CoinLogo 
    symbol="btc" 
    size={30}
  />}
/>

// ShareIndicator using asset logo
<ShareIndicator 
  percentageShare={90}
  image={<AssetLogo 
      coingeckoId="binance-smart-chain" 
      symbol //
      contractAddress="0x0203d275d2a65030889af45ed91d472be3948b92"
      size={24} 
      shouldTryToFetch={true} 
      placeholder="CATWIFHAT"
  />}
/>