[ENG-4223] fix: Display placeholder for failed token image load (#284)

secretkeylabs · May 27, 2024 · 4613904 · 4613904
1 parent 6c74019
commit 4613904
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/src/app/components/tokenImage/index.tsx b/src/app/components/tokenImage/index.tsx
@@ -7,7 +7,7 @@ import useWalletSelector from '@hooks/useWalletSelector';
 import { FungibleToken } from '@secretkeylabs/xverse-core';
 import { CurrencyTypes, XVERSE_ORDIVIEW_URL } from '@utils/constants';
 import { getTicker } from '@utils/helper';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 const DEFAULT_SIZE = 40;
@@ -83,6 +83,7 @@ export default function TokenImage({
 }: TokenImageProps) {
   const { network } = useWalletSelector();
   const ftProtocol = fungibleToken?.protocol;
+  const [imageError, setImageError] = useState(false);
 
   const getCurrencyIcon = useCallback(() => {
     if (currency === 'STX') {
@@ -110,18 +111,45 @@ export default function TokenImage({
   };
 
   const renderIcon = () => {
+    const ticker =
+      fungibleToken?.ticker ||
+      (fungibleToken?.name ? getTicker(fungibleToken.name) : fungibleToken?.assetName || '');
+
+    if (imageError) {
+      return (
+        <TickerIconContainer size={size} round={round}>
+          <TickerIconText>{ticker.substring(0, 4)}</TickerIconText>
+        </TickerIconContainer>
+      );
+    }
+
     if (!fungibleToken) {
-      return <TickerImage data-testid="token-image" size={size} src={getCurrencyIcon()} />;
+      return (
+        <TickerImage
+          data-testid="token-image"
+          size={size}
+          src={getCurrencyIcon()}
+          onError={() => setImageError(true)}
+        />
+      );
     }
     if (fungibleToken?.image) {
-      return <TickerImage data-testid="token-image" size={size} src={fungibleToken.image} />;
+      return (
+        <TickerImage
+          data-testid="token-image"
+          size={size}
+          src={fungibleToken.image}
+          onError={() => setImageError(true)}
+        />
+      );
     }
     if (fungibleToken.runeInscriptionId) {
       return (
         <TickerImage
           data-testid="token-image"
           size={size}
           src={`${XVERSE_ORDIVIEW_URL(network.type)}/thumbnail/${fungibleToken.runeInscriptionId}`}
+          onError={() => setImageError(true)}
         />
       );
     }
@@ -133,10 +161,6 @@ export default function TokenImage({
       );
     }
 
-    const ticker = fungibleToken?.name
-      ? getTicker(fungibleToken.name)
-      : fungibleToken?.ticker || fungibleToken?.assetName || '';
-
     return (
       <TickerIconContainer size={size} round={round}>
         <TickerIconText>{ticker.substring(0, 4)}</TickerIconText>

diff --git a/src/app/components/tokenTile/index.tsx b/src/app/components/tokenTile/index.tsx
@@ -127,12 +127,12 @@ function TokenTile({
   const { data: stxData } = useStxWalletData();
   const { data: btcBalance } = useBtcWalletData();
 
-  function getTickerTitle() {
+  const getTickerTitle = () => {
     if (currency === 'STX' || currency === 'BTC') return `${currency}`;
     return `${getFtTicker(fungibleToken as FungibleToken)}`;
-  }
+  };
 
-  function getBalanceAmount() {
+  const getBalanceAmount = () => {
     switch (currency) {
       case 'STX':
         return microstacksToStx(new BigNumber(stxData?.balance ?? 0)).toString();
@@ -141,10 +141,11 @@ function TokenTile({
       case 'FT':
         return fungibleToken ? getFtBalance(fungibleToken) : '';
       default:
+        return undefined;
     }
-  }
+  };
 
-  function getFiatEquivalent(): BigNumber | undefined {
+  const getFiatEquivalent = (): BigNumber | undefined => {
     switch (currency) {
       case 'STX':
         return microstacksToStx(new BigNumber(stxData?.balance ?? 0))
@@ -159,7 +160,7 @@ function TokenTile({
       default:
         return undefined;
     }
-  }
+  };
 
   const handleTokenPressed = () => onPress(currency, fungibleToken?.principal);