fix: handle invalid image paths

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

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
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
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import IconEmptyImage from '@assets/icon-empty-image.svg';
 import { Loading } from '@components/atoms';
@@ -11,6 +11,12 @@ export interface NFTCardImageProps {
 }
 
 const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge = false }) => {
+  const [hasError, setHasError] = useState(false);
+
+  const handleError = (): void => {
+    setHasError(true);
+  };
+
   if (!isFetched) {
     return (
       <NFTCardImageSkeletonBox>
@@ -19,7 +25,7 @@ const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge
     );
   }
 
-  if (!image) {
+  if (!image || hasError) {
     return (
       <NFTCardImageWrapper className='empty'>
         <img className='empty-image' src={IconEmptyImage} alt='empty image' />
@@ -29,7 +35,7 @@ const NFTCardImage: React.FC<NFTCardImageProps> = ({ isFetched, image, hasBadge
 
   return (
     <NFTCardImageWrapper>
-      <img className='nft-image' src={image} />
+      <img className='nft-image' src={image} 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
@@ -5,7 +5,7 @@ import FailedIcon from '@assets/failed.svg';
 import SuccessIcon from '@assets/success.svg';
 import { TokenBalance } from '@components/molecules';
 import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { TransactionHistoryListItemWrapper } from './transaction-history-list-item.styles';
 
 export interface TransactionHistoryListItemProps {
@@ -43,31 +43,44 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     queryGRC721TokenUri,
     onClickItem,
   } = args;
+  const [hasLogoError, setHasLogoError] = useState(false);
 
   const tokenUriQuery =
     type === 'TRANSFER_GRC721' && queryGRC721TokenUri !== undefined
       ? queryGRC721TokenUri(logo || '', '0')
       : null;
 
   const logoImage = useMemo(() => {
+    if (hasLogoError) {
+      return `${UnknownTokenIcon}`;
+    }
+
     if (type === 'TRANSFER_GRC721' && tokenUriQuery) {
       return tokenUriQuery?.data || `${UnknownTokenIcon}`;
     }
 
     if (type === 'ADD_PACKAGE') {
       return `${AddPackageIcon}`;
     }
+
     if (type === 'CONTRACT_CALL') {
       return `${ContractIcon}`;
     }
+
     if (type === 'MULTI_CONTRACT_CALL') {
       return `${ContractIcon}`;
     }
+
     if (!logo) {
       return `${UnknownTokenIcon}`;
     }
+
     return `${logo}`;
-  }, [type, logo, tokenUriQuery]);
+  }, [hasLogoError, type, logo, tokenUriQuery]);
+
+  const handleLogoError = (): void => {
+    setHasLogoError(true);
+  };
 
   const getValueTypeClassName = useCallback(() => {
     if (valueType === 'ACTIVE') {
@@ -82,7 +95,7 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
   return (
     <TransactionHistoryListItemWrapper onClick={(): void => onClickItem(hash)}>
       <div className='logo-wrapper'>
-        <img className='logo' src={logoImage} alt='logo image' />
+        <img className='logo' src={logoImage} alt='logo image' onError={handleLogoError} />
         <img
           className='badge'
           src={status === 'SUCCESS' ? SuccessIcon : FailedIcon}