feat: display proper image for src20 tokens

leather-io · Jan 10, 2025 · dbba410 · dbba410
1 parent 05132fe
commit dbba410
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
@@ -7,6 +7,7 @@ import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
 import { CryptoAssetItem } from '@app/components/crypto-asset-item/crypto-asset-item';
 import type { Src20TokenAssetDetails } from '@app/components/loaders/src20-tokens-loader';
 import { useIsPrivateMode } from '@app/store/settings/settings.selectors';
+import { CollectibleImage } from '@app/features/collectibles/components/_collectible-types/collectible-image';
 
 import type { AssetRightElementVariant } from '../../asset-list';
 
@@ -34,7 +35,17 @@ export function Src20TokenAssetList({
   return tokens.map((token, i) => {
     const key = `${token.info.id}${i}`;
     const captionLeft = getAssetDisplayName(token.info).toUpperCase();
-    const icon = <Src20AvatarIcon />;
+    const icon = token.info.deploy_img ? (
+      <CollectibleImage
+        alt={token.info.symbol}
+        icon={<Src20AvatarIcon size="lg" />}
+        src={token.info.deploy_img}
+        title={`# ${token.info.id}`}
+        subtitle={`# ${token.info.symbol}`}
+      />
+    ) : (
+      <Src20AvatarIcon />
+    );
     const titleLeft = token.info.symbol.toUpperCase();
     const symbol = token.info.symbol;