import { ComponentProps , SyntheticEvent } from 'react' ; import { MYC_API } from '@config' ; import { getCoinGeckoAssetManifest , useSelector } from '@store' ; import { TUuid } from '@types' ; import Box from './Box' ; import { getSVGIcon } from './Icon' ; const baseURL = `${ MYC_API }/images` ; function buildUrl ( uuid ) { return `${ baseURL }/${ uuid }.png` ; } function getIconUrl ( uuid , assetIconsManifest ? ) { const assetIconExists = assetIconsManifest && assetIconsManifest . includes ( uuid ) ; return assetIconExists ? buildUrl ( uuid ) : getSVGIcon ( 'generic-asset-icon' ) ; } interface Props { uuid : TUuid ; size ? : string ; className ? : string ; } const AssetIcon = ( { uuid , size , ... props } ) => { const coinGeckoAssetManifest = useSelector ( getCoinGeckoAssetManifest ) ; const iconUrl = getIconUrl ( uuid , coinGeckoAssetManifest ) ; const handleError = ( event ) => { const elem = event . currentTarget ; elem . onerror = null ; elem . src = getSVGIcon ( 'generic-asset-icon' ) ; } ; return ( < Box display = "inline-flex" height = { size } width = { size } { ... props } > < img src = { iconUrl } onError = { handleError } / > < /Box>); } ; export default AssetIcon ;