From e37d09fde52ee36f9ee7ed7e04cba6d7c41f5953 Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Sat, 29 Jan 2022 18:05:23 +0800
Subject: [PATCH] chore: nft wall fallback resource

---
 .../CollectibleList/CollectibleCard.tsx       | 14 +++++++++++++
 .../src/UI/components/AssetPlayer/index.tsx   | 20 +++++++++----------
 .../NFTCardStyledAssetPlayer/index.tsx        | 15 ++++++++++++--
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
index 2abc582912c2..13d3bd9a2d85 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
@@ -110,6 +110,20 @@ export function CollectibleCard(props: CollectibleCardProps) {
                             url={token.info.mediaUrl}
                             renderOrder={renderOrder}
                             tokenId={token.tokenId}
+                            fallbackResourceLoader={
+                                <Image
+                                    component="img"
+                                    width={172}
+                                    height={172}
+                                    style={{ objectFit: 'cover' }}
+                                    src={token.info.imageURL ?? ''}
+                                    onError={(event) => {
+                                        const target = event.currentTarget as HTMLImageElement
+                                        target.src = fallbackImageURL.toString()
+                                        target.classList.add(classes.loadingFailImage ?? '')
+                                    }}
+                                />
+                            }
                             classes={{
                                 loadingFailImage: classes.loadingFailImage,
                                 wrapper: classes.wrapper,
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index 00ec0bc5deed..840d114df82f 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -34,6 +34,7 @@ interface AssetPlayerProps
     fallbackImage?: URL
     isFixedIframeSize?: boolean
     showIframeFromInit?: boolean
+    fallbackResourceLoader?: JSX.Element
     setERC721TokenName?: (name: string) => void
     setSourceType?: (type: string) => void
 }
@@ -53,7 +54,7 @@ enum AssetPlayerState {
 
 export const AssetPlayer = memo<AssetPlayerProps>((props) => {
     const ref = useRef<IFrameComponent | null>(null)
-    const { url, type, options, iconProps, isFixedIframeSize = true } = props
+    const { url, type, options, iconProps, isFixedIframeSize = true, fallbackResourceLoader } = props
     const classes = useStylesExtends(useStyles(), props)
     const [hidden, setHidden] = useState(Boolean(props.renderTimeout))
     const { RPC: RPC_Entries } = getRPCConstants(props.erc721Token?.chainId)
@@ -189,15 +190,14 @@ export const AssetPlayer = memo<AssetPlayerProps>((props) => {
                     playerState === AssetPlayerState.ERROR ? classes.errorPlaceholder : classes.loadingPlaceholder
                 }
                 style={{ display: playerState === AssetPlayerState.NORMAL ? 'none' : undefined }}>
-                {playerState === AssetPlayerState.ERROR ? (
-                    props.fallbackImage ? (
-                        <img className={classes.loadingFailImage} src={props.fallbackImage.toString()} />
-                    ) : (
-                        <MaskPlaceholder className={classes.errorIcon} {...iconProps} />
-                    )
-                ) : (
-                    props.loadingIcon ?? <AssetLoadingIcon className={classes.loadingIcon} />
-                )}
+                {playerState === AssetPlayerState.ERROR
+                    ? props.fallbackResourceLoader ??
+                      (props.fallbackImage ? (
+                          <img className={classes.loadingFailImage} src={props.fallbackImage.toString()} />
+                      ) : (
+                          <MaskPlaceholder className={classes.errorIcon} {...iconProps} />
+                      ))
+                    : props.loadingIcon ?? <AssetLoadingIcon className={classes.loadingIcon} />}
             </Box>
             {IframeResizerMemo}
         </>
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
index 18651b8d2e66..b3be64108cb0 100644
--- a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
@@ -33,13 +33,23 @@ interface NFTLuckyDropStyledAssetPlayerProps
     tokenId: string
     url?: string
     fallbackImage?: URL
+    fallbackResourceLoader?: JSX.Element
     renderOrder?: number
     setERC721TokenName?: (name: string) => void
     setSourceType?: (type: string) => void
 }
 export function NFTCardStyledAssetPlayer(props: NFTLuckyDropStyledAssetPlayerProps) {
-    const { chainId, contractAddress, tokenId, fallbackImage, url, setERC721TokenName, renderOrder, setSourceType } =
-        props
+    const {
+        chainId,
+        contractAddress,
+        tokenId,
+        fallbackImage,
+        fallbackResourceLoader,
+        url,
+        setERC721TokenName,
+        renderOrder,
+        setSourceType,
+    } = props
     const classes = useStylesExtends(useStyles(), props)
     const theme = useTheme()
     const fallbackImageURL =
@@ -72,6 +82,7 @@ export function NFTCardStyledAssetPlayer(props: NFTLuckyDropStyledAssetPlayerPro
                 loadingFailImage: classes.loadingFailImage,
                 loadingIcon: classes.loadingIcon,
             }}
+            fallbackResourceLoader={fallbackResourceLoader}
         />
     )
 }