fix: handle invalid image paths

onbloc · Nov 11, 2024 · b55d049 · b55d049
1 parent 0ce5706
commit b55d049
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 11 deletions.
diff --git a/...ges/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx b/...ges/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import IconEmptyImage from '@assets/icon-empty-image.svg';
 import Toggle from '@components/atoms/toggle';
@@ -34,6 +34,7 @@ const ManageTokenListItem: React.FC<ManageTokenListItemProps> = ({
   onToggleActiveItem,
 }) => {
   const theme = useTheme();
+  const [hasLogoError, setHasLogoError] = useState(false);
   const isTokenInfo = isManageTokenInfo(token);
   const tokenUriResponse =
     !isTokenInfo && token.isTokenUri && queryGRC721TokenUri
@@ -45,6 +46,10 @@ const ManageTokenListItem: React.FC<ManageTokenListItemProps> = ({
       : null;
 
   const grc721CollectionImage = useMemo(() => {
+    if (!hasLogoError) {
+      return null;
+    }
+
     if (!tokenUriResponse) {
       return null;
     }
@@ -77,11 +82,15 @@ const ManageTokenListItem: React.FC<ManageTokenListItemProps> = ({
     return `${balanceBN.toFormat()} Item`;
   }, [token]);
 
+  const handleLogoError = (): void => {
+    setHasLogoError(true);
+  };
+
   if (isTokenInfo) {
     return (
       <ManageTokenListItemWrapper>
         <div className={'logo-wrapper'}>
-          <img className='logo' src={token.logo} alt='token img' />
+          <img className='logo' src={token.logo} alt='token img' onError={handleLogoError} />
         </div>
 
         <div className='name-wrapper'>

diff --git a/packages/adena-extension/src/components/molecules/nft-card-image/nft-card-image.tsx b/packages/adena-extension/src/components/molecules/nft-card-image/nft-card-image.tsx
@@ -12,6 +12,11 @@ export interface NFTCardImageProps {
 
 const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge = false }) => {
   const [hasError, setHasError] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = (): void => {
+    setLoaded(true);
+  };
 
   const handleError = (): void => {
     setHasError(true);
@@ -25,7 +30,7 @@ const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge
     );
   }
 
-  if (!image || hasError) {
+  if (!image || !loaded || hasError) {
     return (
       <NFTCardImageWrapper className='empty'>
         <img className='empty-image' src={IconEmptyImage} alt='empty image' />
@@ -35,7 +40,13 @@ const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge
 
   return (
     <NFTCardImageWrapper>
-      <img className='nft-image' src={image} onError={handleError} alt='nft image' />
+      <img
+        className='nft-image'
+        src={image}
+        onLoad={handleLoad}
+        onError={handleError}
+        alt='nft image'
+      />
     </NFTCardImageWrapper>
   );
 };

diff --git a/...cules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx b/...cules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx
@@ -44,6 +44,7 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     onClickItem,
   } = args;
   const [hasLogoError, setHasLogoError] = useState(false);
+  const [isLoadedLogo, setIsLoadedLogo] = useState(false);
 
   const tokenUriQuery =
     type === 'TRANSFER_GRC721' && queryGRC721TokenUri !== undefined
@@ -56,6 +57,10 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     }
 
     if (type === 'TRANSFER_GRC721' && tokenUriQuery) {
+      if (!isLoadedLogo) {
+        return `${UnknownTokenIcon}`;
+      }
+
       return tokenUriQuery?.data || `${UnknownTokenIcon}`;
     }
 
@@ -76,12 +81,16 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     }
 
     return `${logo}`;
-  }, [hasLogoError, type, logo, tokenUriQuery]);
+  }, [isLoadedLogo, hasLogoError, type, logo, tokenUriQuery]);
 
   const handleLogoError = (): void => {
     setHasLogoError(true);
   };
 
+  const handleLoadLogo = (): void => {
+    setIsLoadedLogo(true);
+  };
+
   const getValueTypeClassName = useCallback(() => {
     if (valueType === 'ACTIVE') {
       return 'active';
@@ -95,7 +104,13 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
   return (
     <TransactionHistoryListItemWrapper onClick={(): void => onClickItem(hash)}>
       <div className='logo-wrapper'>
-        <img className='logo' src={logoImage} alt='logo image' onError={handleLogoError} />
+        <img
+          className='logo'
+          src={logoImage}
+          alt='logo image'
+          onLoad={handleLoadLogo}
+          onError={handleLogoError}
+        />
         <img
           className='badge'
           src={status === 'SUCCESS' ? SuccessIcon : FailedIcon}

diff --git a/packages/adena-extension/src/pages/popup/wallet/transaction-detail/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transaction-detail/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import AddPackageIcon from '@assets/addpkg.svg';
@@ -24,35 +24,55 @@ interface DLProps {
 }
 
 export const TransactionDetail = (): JSX.Element => {
+  const [hasLogoError, setHasLogoError] = useState(false);
+  const [isLoadedLogo, setIsLoadedLogo] = useState(false);
+
   const { openLink } = useLink();
   const { convertDenom } = useTokenMetainfo();
   const { currentNetwork, scannerParameters } = useNetwork();
   const { goBack, params } = useAppNavigate<RoutePath.TransactionDetail>();
+
   const transactionItem = params.transactionInfo;
   const tokenUriQuery =
     transactionItem?.type === 'TRANSFER_GRC721'
       ? useGetGRC721TokenUri(transactionItem.logo, '0')
       : null;
 
-  const getLogoImage = useCallback(() => {
-    if (transactionItem?.type === 'TRANSFER_GRC721') {
+  const logoImage = useMemo(() => {
+    if (transactionItem?.type === 'TRANSFER_GRC721' && tokenUriQuery) {
+      if (!isLoadedLogo || hasLogoError) {
+        return `${UnknownTokenIcon}`;
+      }
+
       return tokenUriQuery?.data || `${UnknownTokenIcon}`;
     }
 
     if (transactionItem?.type === 'ADD_PACKAGE') {
       return `${AddPackageIcon}`;
     }
+
     if (transactionItem?.type === 'CONTRACT_CALL') {
       return `${ContractIcon}`;
     }
+
     if (transactionItem?.type === 'MULTI_CONTRACT_CALL') {
       return `${ContractIcon}`;
     }
+
     if (!transactionItem?.logo) {
       return `${UnknownTokenIcon}`;
     }
+
     return `${transactionItem?.logo}`;
-  }, [transactionItem]);
+  }, [isLoadedLogo, hasLogoError, transactionItem?.type, transactionItem?.logo, tokenUriQuery]);
+
+  const handleLoadLogo = (): void => {
+    setIsLoadedLogo(true);
+  };
+
+  const handleLogoError = (): void => {
+    setHasLogoError(true);
+  };
 
   const handleLinkClick = (hash: string): void => {
     const scannerUrl = currentNetwork.linkUrl || SCANNER_URL;
@@ -70,7 +90,13 @@ export const TransactionDetail = (): JSX.Element => {
         alt='status icon'
       />
       <TokenBox color={getStatusStyle(transactionItem.status).color}>
-        <img className='tx-symbol' src={getLogoImage()} alt='logo image' />
+        <img
+          className='tx-symbol'
+          src={logoImage}
+          onLoad={handleLoadLogo}
+          onError={handleLogoError}
+          alt='logo image'
+        />
         {transactionItem.type === 'TRANSFER' ? (
           <TokenBalance
             value={transactionItem.amount.value || '0'}