Fix Market and NFT Icons

brave · Feb 27, 2025 · e8dc4e4 · e8dc4e4
1 parent 9337aab
commit e8dc4e4
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 33 deletions.
diff --git a/browser/ui/webui/brave_wallet/market/market_ui.cc b/browser/ui/webui/brave_wallet/market/market_ui.cc
@@ -7,13 +7,16 @@
 
 #include <string>
 
+#include "brave/browser/ui/webui/untrusted_sanitized_image_source.h"
 #include "brave/components/brave_wallet/browser/brave_wallet_constants.h"
 #include "brave/components/constants/webui_url_constants.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "brave/components/market_display/resources/grit/market_display_generated_map.h"
+#include "chrome/browser/profiles/profile.h"
 #include "chrome/grit/browser_resources.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/grit/brave_components_resources.h"
+#include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "ui/webui/resources/grit/webui_resources.h"
@@ -55,7 +58,7 @@ UntrustedMarketUI::UntrustedMarketUI(content::WebUI* web_ui)
   untrusted_source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ImgSrc,
       std::string("img-src 'self' https://assets.cgproxy.brave.com "
-                  "chrome-untrusted://resources;"));
+                  "chrome-untrusted://resources chrome-untrusted://image;"));
 
   untrusted_source->AddResourcePath("load_time_data_deprecated.js",
                                     IDR_WEBUI_JS_LOAD_TIME_DATA_DEPRECATED_JS);
@@ -67,6 +70,10 @@ UntrustedMarketUI::UntrustedMarketUI(content::WebUI* web_ui)
   untrusted_source->AddString("braveWalletNftBridgeUrl", kUntrustedNftURL);
   untrusted_source->AddString("braveWalletMarketUiBridgeUrl",
                               kUntrustedMarketURL);
+
+  Profile* profile = Profile::FromWebUI(web_ui);
+  content::URLDataSource::Add(
+      profile, std::make_unique<UntrustedSanitizedImageSource>(profile));
 }
 
 UntrustedMarketUI::~UntrustedMarketUI() = default;

diff --git a/browser/ui/webui/brave_wallet/nft/nft_ui.cc b/browser/ui/webui/brave_wallet/nft/nft_ui.cc
@@ -7,13 +7,16 @@
 
 #include <string>
 
+#include "brave/browser/ui/webui/untrusted_sanitized_image_source.h"
 #include "brave/components/brave_wallet/browser/brave_wallet_constants.h"
 #include "brave/components/constants/webui_url_constants.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "brave/components/nft_display/resources/grit/nft_display_generated_map.h"
+#include "chrome/browser/profiles/profile.h"
 #include "chrome/grit/browser_resources.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/grit/brave_components_resources.h"
+#include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "ui/webui/resources/grit/webui_resources.h"
@@ -59,7 +62,12 @@ UntrustedNftUI::UntrustedNftUI(content::WebUI* web_ui)
                               kUntrustedMarketURL);
   untrusted_source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ImgSrc,
-      std::string("img-src 'self' https: data:;"));
+      std::string("img-src 'self' chrome-untrusted://resources "
+                  "chrome-untrusted://image;"));
+
+  Profile* profile = Profile::FromWebUI(web_ui);
+  content::URLDataSource::Add(
+      profile, std::make_unique<UntrustedSanitizedImageSource>(profile));
 }
 
 UntrustedNftUI::~UntrustedNftUI() = default;

diff --git a/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx b/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx
@@ -25,9 +25,9 @@ export const AssetNameAndIcon = (props: Props) => {
   return (
     <StyledWrapper>
       <AssetIcon
-        // This usage is good, but it's breaking because it looks like it's being loaded from chrome-untrusted://market-display frame
-        // the image is coming from https://assets.cgproxy.brave.com
-        src={`chrome://image?url=${encodeURIComponent(assetLogo)}&staticEncode=true16`} 
+        src={`chrome-untrusted://image?url=${encodeURIComponent(
+          assetLogo
+        )}&staticEncode=true`}
         loading='lazy'
       />
       <NameAndSymbolWrapper>

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
@@ -13,11 +13,10 @@ import { BraveWallet } from '../../../constants/types'
 
 // Utils
 import {
-  stripERC20TokenImageURL,
   isRemoteImageURL,
   isValidIconExtension,
   isDataURL,
-  isComponentInStorybook,
+  isComponentInStorybook
 } from '../../../utils/string-utils'
 import { isNativeAsset } from '../../../utils/asset-utils'
 
@@ -73,34 +72,34 @@ export function withPlaceholderIcon<
     const nativeAssetLogo =
       isNative && asset ? makeNativeAssetLogo(asset.symbol, asset.chainId) : ''
 
-    const tokenImageURL = stripERC20TokenImageURL(
-      nativeAssetLogo || asset?.logo || ''
-    )
-    const isRemoteURL = isRemoteImageURL(tokenImageURL)
+    const initialTokenImageURL = nativeAssetLogo || asset?.logo || ''
+
+    const isRemoteURL = isRemoteImageURL(initialTokenImageURL)
 
     const isNonFungibleToken = asset?.isNft || asset?.isErc721
 
+    const tokenImageURL =
+      isRemoteURL || isNonFungibleToken || isNative
+        ? initialTokenImageURL
+        : `chrome://erc-token-images/${encodeURIComponent(
+            initialTokenImageURL
+          )}`
+
     // memos + computed
     const isValidIcon = React.useMemo(() => {
       if (isStorybook) {
         return !!asset?.logo
       }
 
-      const isDataUri = isDataURL(asset?.logo)
+      const isDataUri = isDataURL(tokenImageURL)
 
       if (isRemoteURL || isDataUri) {
-        return tokenImageURL?.includes('data:image/') ||
-          isNonFungibleToken
+        return tokenImageURL?.includes('data:image/') || isNonFungibleToken
           ? true
-          : isValidIconExtension(new URL(asset?.logo || '').pathname)
+          : isValidIconExtension(new URL(tokenImageURL).pathname)
       }
       return false
-    }, [
-      asset?.logo,
-      isRemoteURL,
-      tokenImageURL,
-      isNonFungibleToken
-    ])
+    }, [asset?.logo, isRemoteURL, tokenImageURL, isNonFungibleToken])
 
     const needsPlaceholder =
       (tokenImageURL === '' || !isValidIcon) && nativeAssetLogo === ''
@@ -117,7 +116,9 @@ export function withPlaceholderIcon<
 
     const remoteImage = React.useMemo(() => {
       if (isRemoteURL) {
-        return isStorybook ? tokenImageURL || '' : `chrome://image?url=${encodeURIComponent(tokenImageURL)}&staticEncode=true`
+        return `chrome://image?url=${encodeURIComponent(
+          tokenImageURL
+        )}&staticEncode=true`
       }
       return ''
     }, [isRemoteURL, tokenImageURL])
@@ -127,7 +128,7 @@ export function withPlaceholderIcon<
       return null
     }
 
-    const icon = nativeAssetLogo || (isRemoteURL ? remoteImage : asset?.logo)
+    const icon = nativeAssetLogo || (isRemoteURL ? remoteImage : tokenImageURL)
 
     if (needsPlaceholder || !icon) {
       return (

diff --git a/components/brave_wallet_ui/components/shared/nft-icon/nft-icon.tsx b/components/brave_wallet_ui/components/shared/nft-icon/nft-icon.tsx
@@ -55,9 +55,9 @@ export const NftIcon = (props: NftIconProps) => {
   const nftIframeUrl = React.useMemo(() => {
     const urlParams = new URLSearchParams({
       displayMode: 'icon',
-      // appears to still be broken. Seems this is being used in brave://wallet/crypto/accounts/<account-id>/nfts to display nft images
-      // seems to be not working because we're trying to load from chrome-untrusted://nft-display frame which might not be allowed even with the CSP set correctly
-      icon: `chrome://image?url=${encodeURIComponent(remoteImage)}&staticEncode=true&test=8`
+      icon: `chrome-untrusted://image?url=${encodeURIComponent(
+        remoteImage
+      )}&staticEncode=true`
     })
     return `chrome-untrusted://nft-display?${urlParams.toString()}`
   }, [remoteImage])

diff --git a/components/brave_wallet_ui/nft/components/nft-details/nft-screen.tsx b/components/brave_wallet_ui/nft/components/nft-details/nft-screen.tsx
@@ -233,11 +233,7 @@ export const NftScreen = ({ selectedAsset, tokenNetwork }: Props) => {
         spamTokenBalancesRegistry
       ) && (
         <>
-          <Alert
-            type='info'
-          >
-            {getLocale('braveWalletUnownedNftAlert')}
-          </Alert>
+          <Alert type='info'>{getLocale('braveWalletUnownedNftAlert')}</Alert>
           <VerticalSpace space='24px' />
         </>
       )}
@@ -249,7 +245,9 @@ export const NftScreen = ({ selectedAsset, tokenNetwork }: Props) => {
             <NftMultimedia
               as='img'
               visible={!isFetchingNFTMetadata}
-              src={`chrome://image?url=${encodeURIComponent(nftMetadata?.imageURL || '')}&staticEncode=true9`}
+              src={`chrome-untrusted://image?url=${encodeURIComponent(
+                nftMetadata?.imageURL || ''
+              )}&staticEncode=true`}
             />
           ) : (
             <NftMultimedia

diff --git a/components/brave_wallet_ui/nft/nft_script.ts b/components/brave_wallet_ui/nft/nft_script.ts
@@ -37,7 +37,10 @@ const imageSrc = stripChromeImageURL(imageUrl) ?? Placeholder
 function render() {
   const imgEl = document.getElementById('nft-image') as HTMLImageElement
   // update img src
-  imgEl.src = displayMode === 'details' && nftMetadata ? mediaUrl : imageSrc
+  imgEl.src =
+    displayMode === 'details' && nftMetadata
+      ? `chrome-untrusted://image?url=${encodeURIComponent(mediaUrl)}`
+      : imageSrc
 }
 
 document.addEventListener('DOMContentLoaded', render)