Repository: oceanprotocol/market (ts)

Issue:
@tippyjs/react: Cannot use `className` prop in conjunction with `render` prop.
There is a warning in the console:
```
@tippyjs/react: Cannot use `className` prop in conjunction with `render` prop. Place the className on the element you are rendering. 
```

Exclude `className` from this object in order to fix it:

https://github.com/oceanprotocol/market/blob/4dca7d3442bbba51d98195150b78314967094234/src/components/%40shared/atoms/Tooltip/index.tsx#L63

____________

```
const { className, ...restProps } = props
const { content, children, trigger, disabled, placement } = props
```

and use `restProps` instead if `props`

Pull request:
filter out `className` from `Tippy`
* fixes #1692

Was a little annoyance as this warning was showing up sometimes also in test runs. So just filter out `className` as suggested in #1692, change should not affect any behavior

Patch:
diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts
index 2bbc3015..a4343801 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 f58a43c3..7624a61a 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.tsx b/src/components/@shared/atoms/Tags/index.tsx
index 1f5c7094..2922417c 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/@shared/atoms/Tooltip/index.tsx b/src/components/@shared/atoms/Tooltip/index.tsx
index 76ee1fe7..7d5e9883 100644
--- a/src/components/@shared/atoms/Tooltip/index.tsx
+++ b/src/components/@shared/atoms/Tooltip/index.tsx
@@ -17,7 +17,8 @@ const DefaultTrigger = React.forwardRef((props, ref: any) => {
 })
 
 export default function Tooltip(props: TippyProps): ReactElement {
-  const { content, children, trigger, disabled, className, placement } = props
+  const { className, ...restProps } = props
+  const { content, children, trigger, disabled, placement } = props
   const [styles, api] = useSpring(() => animation.from)
 
   function onMount() {
@@ -60,7 +61,7 @@ export default function Tooltip(props: TippyProps): ReactElement {
       onMount={onMount}
       onHide={onHide}
       // animation
-      {...props}
+      {...restProps}
     >
       <div className={styleClasses}>{children || <DefaultTrigger />}</div>
     </Tippy>
diff --git a/src/components/Asset/AssetContent/Nft/NftTooltip.module.css b/src/components/Asset/AssetContent/Nft/NftTooltip.module.css
index 3916afc2..1b7b73c3 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 3a13868b..9290bd9f 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 4c6e3850..eb54b9cd 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 f741c6ea..7f063bd7 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 f6cba742..9476e323 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)


Test patch:
diff --git a/src/components/@shared/atoms/Tags/index.test.tsx b/src/components/@shared/atoms/Tags/index.test.tsx
index 5867e96a..71b25331 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} />)
+  })
 })