From 95128df2b2f1f07b6702256173a876e5737bc7f9 Mon Sep 17 00:00:00 2001
From: Douglas Daniel <douglashdaniel@gmail.com>
Date: Tue, 8 Nov 2022 11:19:14 -0600
Subject: [PATCH] fix(wallet): ERC721 Token Registry Icons

---
 .../components/desktop/asset-watchlist-item/index.tsx     | 3 ++-
 .../components/desktop/portfolio-asset-item/index.tsx     | 3 ++-
 .../components/shared/create-placeholder-icon/index.tsx   | 8 ++++----
 components/brave_wallet_ui/utils/string-utils.ts          | 2 ++
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx b/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx
index 73c0555ea79..26340333fee 100644
--- a/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx
@@ -5,6 +5,7 @@ import { BraveWallet } from '../../../constants/types'
 
 // Utils
 import { getTokensNetwork } from '../../../utils/network-utils'
+import { isDataURL } from '../../../utils/string-utils'
 import { getLocale } from '../../../../common/locale'
 import Amount from '../../../utils/amount'
 
@@ -58,7 +59,7 @@ const AssetWatchlistItem = (props: Props) => {
   }, [token, onRemoveAsset])
 
   const AssetIconWithPlaceholder = React.useMemo(() => {
-    return withPlaceholderIcon(token.isErc721 ? NftIcon : AssetIcon, { size: 'big', marginLeft: 0, marginRight: 8 })
+    return withPlaceholderIcon(token.isErc721 && !isDataURL(token.logo) ? NftIcon : AssetIcon, { size: 'big', marginLeft: 0, marginRight: 8 })
   }, [token])
 
   const tokensNetwork = React.useMemo(() => {
diff --git a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
index 09749f0d388..71fe1b3d1f2 100644
--- a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
@@ -14,6 +14,7 @@ import { getLocale } from '../../../../common/locale'
 import { getTokensNetwork } from '../../../utils/network-utils'
 import { computeFiatAmount } from '../../../utils/pricing-utils'
 import { unbiasedRandom } from '../../../utils/random-utils'
+import { isDataURL } from '../../../utils/string-utils'
 
 // Components
 import { withPlaceholderIcon, CreateNetworkIcon, LoadingSkeleton } from '../../shared'
@@ -62,7 +63,7 @@ export const PortfolioAssetItem = ({
 
   // memos & computed
   const AssetIconWithPlaceholder = React.useMemo(() => {
-    return withPlaceholderIcon(token.isErc721 ? NftIcon : AssetIcon, { size: 'big', marginLeft: 0, marginRight: 8 })
+    return withPlaceholderIcon(token.isErc721 && !isDataURL(token.logo) ? NftIcon : AssetIcon, { size: 'big', marginLeft: 0, marginRight: 8 })
   }, [token.isErc721])
 
   const formattedAssetBalance = token.isErc721
diff --git a/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx b/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx
index 7f44d7be27e..f40c74eafb7 100644
--- a/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx
+++ b/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx
@@ -10,7 +10,8 @@ import {
   isRemoteImageURL,
   isValidIconExtension,
   httpifyIpfsUrl,
-  isIpfs
+  isIpfs,
+  isDataURL
 } from '../../../utils/string-utils'
 
 // Styled components
@@ -53,18 +54,17 @@ function withPlaceholderIcon (WrappedComponent: React.ComponentType<any>, config
 
     const tokenImageURL = stripERC20TokenImageURL(asset.logo)
     const isRemoteURL = isRemoteImageURL(tokenImageURL)
-    const isDataURL = asset.logo.startsWith('chrome://erc-token-images/')
     const isStorybook = asset.logo.startsWith('static/media/components/brave_wallet_ui/')
 
     const isValidIcon = React.useMemo(() => {
-      if (isRemoteURL || isDataURL) {
+      if (isRemoteURL || isDataURL(asset.logo)) {
         return tokenImageURL?.includes('data:image/') || isIpfs(tokenImageURL) ? true : isValidIconExtension(new URL(asset.logo).pathname)
       }
       if (isStorybook) {
         return true
       }
       return false
-    }, [isRemoteURL, isDataURL, tokenImageURL, asset.logo, isStorybook])
+    }, [isRemoteURL, tokenImageURL, asset.logo, isStorybook])
 
     const needsPlaceholder = isNativeAsset
       ? (tokenImageURL === '' || !isValidIcon) && networkLogo === ''
diff --git a/components/brave_wallet_ui/utils/string-utils.ts b/components/brave_wallet_ui/utils/string-utils.ts
index a7cf4d1f35b..c0c3a97ac1c 100644
--- a/components/brave_wallet_ui/utils/string-utils.ts
+++ b/components/brave_wallet_ui/utils/string-utils.ts
@@ -26,6 +26,8 @@ export const httpifyIpfsUrl = (url: string | undefined) => {
 
 export const isIpfs = (url?: string) => url?.startsWith('ipfs://')
 
+export const isDataURL = (url?: string) => url?.startsWith('chrome://erc-token-images/')
+
 /**
  * Wyre currently supports the following chains:
  *  bitcoin, ethereum, avalanche(X & C), stellar, algorand, matic, flow