From 482af1be0cbc756a82074944b6cf2f9f38233be3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 9 Nov 2022 12:22:30 +0000
Subject: [PATCH] NFT image & faulty metadata fixes (#1779)

* safeguard against faults in metadata.tags

* properly handle image strings in tokenURI

* keep image ratios

* render test for faulty tags

* tweak fallback in popover
---
 src/@utils/nft.ts                                |  9 ++++++---
 src/components/@shared/AssetList/index.tsx       | 10 +++++-----
 src/components/@shared/atoms/Tags/index.test.tsx |  5 +++++
 src/components/@shared/atoms/Tags/index.tsx      |  3 +++
 .../Asset/AssetContent/Nft/NftTooltip.module.css |  2 +-
 .../Asset/AssetContent/Nft/NftTooltip.tsx        |  4 +++-
 .../Asset/AssetContent/Nft/index.module.css      |  7 ++++++-
 src/components/Asset/AssetContent/Nft/index.tsx  |  1 +
 src/components/Asset/RelatedAssets/index.tsx     | 16 +++++++++++-----
 9 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts
index 2bbc30155..a4343801d 100644
--- a/src/@utils/nft.ts
+++ b/src/@utils/nft.ts
@@ -82,10 +82,13 @@ export function generateNftCreateData(
 
 export function decodeTokenURI(tokenURI: string): NftMetadata {
   if (!tokenURI) return undefined
+
   try {
-    const nftMeta = JSON.parse(
-      Buffer.from(tokenURI.replace(tokenUriPrefix, ''), 'base64').toString()
-    ) as NftMetadata
+    const nftMeta = tokenURI.includes('data:application/json')
+      ? (JSON.parse(
+          Buffer.from(tokenURI.replace(tokenUriPrefix, ''), 'base64').toString()
+        ) as NftMetadata)
+      : ({ image: tokenURI } as NftMetadata)
 
     return nftMeta
   } catch (error) {
diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx
index f58a43c34..7624a61aa 100644
--- a/src/components/@shared/AssetList/index.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -69,11 +69,13 @@ export default function AssetList({
 
   const styleClasses = `${styles.assetList} ${className || ''}`
 
-  return assetsWithPrices && !loading ? (
+  return loading ? (
+    <LoaderArea />
+  ) : (
     <>
       <div className={styleClasses}>
-        {assetsWithPrices.length > 0 ? (
-          assetsWithPrices.map((assetWithPrice) => (
+        {assetsWithPrices?.length > 0 ? (
+          assetsWithPrices?.map((assetWithPrice) => (
             <AssetTeaser
               asset={assetWithPrice}
               key={assetWithPrice.id}
@@ -95,7 +97,5 @@ export default function AssetList({
         />
       )}
     </>
-  ) : (
-    <LoaderArea />
   )
 }
diff --git a/src/components/@shared/atoms/Tags/index.test.tsx b/src/components/@shared/atoms/Tags/index.test.tsx
index 5867e96ad..71b253315 100644
--- a/src/components/@shared/atoms/Tags/index.test.tsx
+++ b/src/components/@shared/atoms/Tags/index.test.tsx
@@ -24,4 +24,9 @@ describe('Tags', () => {
   it('renders WithoutLinks', () => {
     render(<Tags {...argsWithoutLinks} />)
   })
+
+  it('renders with faulty tags', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    render(<Tags items={'tags' as any} />)
+  })
 })
diff --git a/src/components/@shared/atoms/Tags/index.tsx b/src/components/@shared/atoms/Tags/index.tsx
index 1f5c70943..2922417c5 100644
--- a/src/components/@shared/atoms/Tags/index.tsx
+++ b/src/components/@shared/atoms/Tags/index.tsx
@@ -30,6 +30,9 @@ export default function Tags({
   className,
   noLinks
 }: TagsProps): ReactElement {
+  // safeguard against faults in the metadata
+  if (!(items instanceof Array)) return null
+
   max = max || items.length
   const remainder = items.length - max
   // filter out empty array items, and restrict to `max`
diff --git a/src/components/Asset/AssetContent/Nft/NftTooltip.module.css b/src/components/Asset/AssetContent/Nft/NftTooltip.module.css
index 3916afc25..1b7b73c38 100644
--- a/src/components/Asset/AssetContent/Nft/NftTooltip.module.css
+++ b/src/components/Asset/AssetContent/Nft/NftTooltip.module.css
@@ -7,7 +7,7 @@
 .wrapper img {
   margin: 0;
   width: 128px;
-  height: 128px;
+  height: auto;
 }
 
 .info {
diff --git a/src/components/Asset/AssetContent/Nft/NftTooltip.tsx b/src/components/Asset/AssetContent/Nft/NftTooltip.tsx
index 3a13868b0..9290bd9fd 100644
--- a/src/components/Asset/AssetContent/Nft/NftTooltip.tsx
+++ b/src/components/Asset/AssetContent/Nft/NftTooltip.tsx
@@ -14,11 +14,13 @@ const openSeaTestNetworks = [4]
 
 export default function NftTooltip({
   nft,
+  nftImage,
   address,
   chainId,
   isBlockscoutExplorer
 }: {
   nft: NftMetadata
+  nftImage: string
   address: string
   chainId: number
   isBlockscoutExplorer: boolean
@@ -39,7 +41,7 @@ export default function NftTooltip({
 
   return (
     <div className={styles.wrapper}>
-      {nft && <img src={nft.image_data || nft.image} alt={nft?.name} />}
+      {nftImage && <img src={nftImage} alt={nft?.name} />}
       <div className={styles.info}>
         {nft && <h5>{nft.name}</h5>}
         {address && (
diff --git a/src/components/Asset/AssetContent/Nft/index.module.css b/src/components/Asset/AssetContent/Nft/index.module.css
index 4c6e3850c..eb54b9cd1 100644
--- a/src/components/Asset/AssetContent/Nft/index.module.css
+++ b/src/components/Asset/AssetContent/Nft/index.module.css
@@ -4,14 +4,19 @@
   border-right: 1px solid var(--border-color);
   width: calc(var(--spacer) * 2);
   height: calc(var(--spacer) * 2);
+  display: flex;
+  align-items: center;
 }
 
-.nftImage img,
 .nftImage > svg:first-of-type {
   width: 100%;
   height: 100%;
 }
 
+.nftImage img {
+  height: auto;
+}
+
 .nftImage > svg:first-of-type {
   transform: scale(0.7);
 }
diff --git a/src/components/Asset/AssetContent/Nft/index.tsx b/src/components/Asset/AssetContent/Nft/index.tsx
index f741c6eaf..7f063bd75 100644
--- a/src/components/Asset/AssetContent/Nft/index.tsx
+++ b/src/components/Asset/AssetContent/Nft/index.tsx
@@ -48,6 +48,7 @@ export default function Nft({
           content={
             <NftTooltip
               nft={nftMetadata}
+              nftImage={nftImage}
               address={asset?.nftAddress}
               chainId={asset?.chainId}
               isBlockscoutExplorer={isBlockscoutExplorer}
diff --git a/src/components/Asset/RelatedAssets/index.tsx b/src/components/Asset/RelatedAssets/index.tsx
index f6cba742a..9476e3230 100644
--- a/src/components/Asset/RelatedAssets/index.tsx
+++ b/src/components/Asset/RelatedAssets/index.tsx
@@ -31,11 +31,17 @@ export default function RelatedAssets(): ReactElement {
       setIsLoading(true)
 
       try {
-        const tagQuery = generateBaseQuery(
-          generateQuery(chainIds, asset.nftAddress, 4, asset.metadata.tags)
-        )
-        const tagResults = (await queryMetadata(tagQuery, newCancelToken()))
-          ?.results
+        let tagResults: Asset[] = []
+
+        // safeguard against faults in the metadata
+        if (asset.metadata.tags instanceof Array) {
+          const tagQuery = generateBaseQuery(
+            generateQuery(chainIds, asset.nftAddress, 4, asset.metadata.tags)
+          )
+
+          tagResults = (await queryMetadata(tagQuery, newCancelToken()))
+            ?.results
+        }
 
         if (tagResults.length === 4) {
           setRelatedAssets(tagResults)