Merge pull request #15847 from brave/fix-erc721-token-registry-icons

fix(wallet): ERC721 Token Registry Icons

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(() => {

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

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 === ''

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