From 0ce5706de0027e12eb825292bc94921c0e805a85 Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Mon, 11 Nov 2024 12:35:31 +0900
Subject: [PATCH] fix: handle invalid image paths

---
 .../nft-card-image/nft-card-image.tsx         | 12 +++++++++---
 .../transaction-history-list-item.tsx         | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 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
index 3cd5f4f9..272198cf 100644
--- 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/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx
index 22325cae..e0f1dfec 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx
+++ b/packages/adena-extension/src/components/molecules/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,6 +43,7 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     queryGRC721TokenUri,
     onClickItem,
   } = args;
+  const [hasLogoError, setHasLogoError] = useState(false);
 
   const tokenUriQuery =
     type === 'TRANSFER_GRC721' && queryGRC721TokenUri !== undefined
@@ -50,6 +51,10 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
       : null;
 
   const logoImage = useMemo(() => {
+    if (hasLogoError) {
+      return `${UnknownTokenIcon}`;
+    }
+
     if (type === 'TRANSFER_GRC721' && tokenUriQuery) {
       return tokenUriQuery?.data || `${UnknownTokenIcon}`;
     }
@@ -57,17 +62,25 @@ const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (a
     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}