From 3008c56bb72597823b16a44a3a1b3c806ba71b6f Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Thu, 24 Mar 2022 20:45:10 +0800
Subject: [PATCH] fix: zora api

---
 .../plugins/Collectible/SNSAdaptor/ArticleTab.tsx | 14 +++++---------
 packages/web3-providers/src/zora/index.ts         | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index e6386237d1dc..becbc804961c 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from '@masknet/theme'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
-import { AssetPlayer } from '@masknet/shared'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { useMemo } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
@@ -43,6 +43,9 @@ const useStyles = makeStyles()((theme) => ({
         minWidth: 300,
         minHeight: 300,
     },
+    imgWrapper: {
+        maxWidth: 300,
+    },
 }))
 
 export interface ArticleTabProps {}
@@ -57,14 +60,7 @@ export function ArticleTab(props: ArticleTabProps) {
         return (
             <CollectibleTab>
                 <div className={classes.body}>
-                    <AssetPlayer
-                        url={resourceUrl}
-                        options={{
-                            playsInline: true,
-                        }}
-                        classes={classes}
-                        isFixedIframeSize={false}
-                    />
+                    <NFTCardStyledAssetPlayer url={resourceUrl} classes={classes} />
                 </div>
             </CollectibleTab>
         )
diff --git a/packages/web3-providers/src/zora/index.ts b/packages/web3-providers/src/zora/index.ts
index 00f041ef36cd..8bfcbcaf68c1 100644
--- a/packages/web3-providers/src/zora/index.ts
+++ b/packages/web3-providers/src/zora/index.ts
@@ -6,6 +6,7 @@ import {
     FungibleTokenDetailed,
     ERC721TokenDetailed,
     EthereumTokenType,
+    resolveIPFSLink,
 } from '@masknet/web3-shared-evm'
 
 import { NonFungibleTokenAPI } from '..'
@@ -17,8 +18,14 @@ function createNFTAsset(asset: ZoraToken): NonFungibleTokenAPI.Asset {
     return {
         is_verified: false,
         is_auction: asset.currentAuction !== null,
-        image_url:
-            asset.metadata.json.animation_url ?? asset.metadata.json.image_url ?? asset.metadata.json.image ?? '',
+        image_url: resolveIPFSLink(
+            (
+                asset.metadata.json.image ??
+                asset.metadata.json.animation_url ??
+                asset.metadata.json.image_url ??
+                ''
+            ).replace('ipfs://', ''),
+        ),
         asset_contract: {
             name: asset.tokenContract.name,
             description: '',
@@ -49,7 +56,9 @@ function createNFTAsset(asset: ZoraToken): NonFungibleTokenAPI.Asset {
         description: asset.metadata.json.description,
         name: asset.name ?? asset.metadata.json.name,
         collection_name: '',
-        animation_url: asset.metadata.json.animation_url,
+        animation_url: resolveIPFSLink(
+            (asset.metadata.json.image ?? asset.metadata.json.animation_url).replace('ipfs://', ''),
+        ),
         end_time: asset.currentAuction ? new Date(asset.currentAuction.expiresAt) : null,
         order_payment_tokens: [] as FungibleTokenDetailed[],
         offer_payment_tokens: [] as FungibleTokenDetailed[],