refactor: remove NFTCardStyledAssetPlayer (#8764)

packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx

@@ -2,7 +2,9 @@ import { memo, useMemo, useState } from 'react'
 import { Checkbox, ImageListItem, ImageListItemBar, Box } from '@mui/material'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { AssetPreviewer } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { useNonFungibleAsset } from '@masknet/web3-hooks-base'
 import type { NonFungibleToken } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
@@ -43,6 +45,15 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
         [selectedTokenId, token.tokenId],
     )
 
+    const { value: NFTDetailed } = useNonFungibleAsset<'all'>(
+        NetworkPluginID.PLUGIN_EVM,
+        token.address,
+        token.tokenId,
+        {
+            chainId: token.chainId,
+        },
+    )
+
     const NFTNameBar = useMemo(() => {
         return (
             <ImageListItemBar
@@ -70,13 +81,11 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
                 background: (theme) => (theme.palette.mode === 'dark' ? getMaskColor(theme).white : '#F9F9FA'),
             }}
             className={isDisabled ? classes.disabled : ''}>
-            <NFTCardStyledAssetPlayer
+            <AssetPreviewer
                 classes={{
                     fallbackImage: classes.fallbackImage,
                 }}
-                chainId={token.chainId}
-                tokenId={token.tokenId}
-                contractAddress={token.address}
+                url={NFTDetailed?.metadata?.imageURL || NFTDetailed?.metadata?.mediaURL}
             />
             {NFTNameBar}
             <Box className={classes.checkbox}>

packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx

@@ -1,10 +1,11 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { Card, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useWeb3State } from '@masknet/web3-hooks-base'
+import { useWeb3State, useNetworkDescriptor } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import type { NetworkPluginID } from '@masknet/shared-base'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { AssetPreviewer, ImageIcon } from '@masknet/shared'
+import { NETWORK_DESCRIPTORS } from '@masknet/web3-shared-evm'
 import type { SourceType, Wallet } from '@masknet/web3-shared-base'
 import { ActionsBarNFT } from '../ActionsBarNFT.js'
 
@@ -43,6 +44,11 @@ const useStyles = makeStyles()((theme) => ({
         position: 'relative',
         display: 'block',
     },
+    networkIcon: {
+        position: 'absolute',
+        top: 6,
+        left: 6,
+    },
 }))
 
 export interface CollectibleCardProps {
@@ -70,26 +76,34 @@ export const CollectibleCard = memo(function CollectibleCard({
     const { classes, cx } = useStyles()
     const { Others } = useWeb3State()
 
+    const networkDescriptor = useNetworkDescriptor(pluginID)
+
+    const networkIcon = useMemo(() => {
+        if (pluginID === NetworkPluginID.PLUGIN_EVM) {
+            return NETWORK_DESCRIPTORS.find((network) => network?.chainId === asset.chainId)?.icon
+        }
+        return networkDescriptor?.icon
+    }, [asset.chainId, pluginID])
+
     const content = (
         <>
             <div className={classes.blocker} />
             <Card className={classes.root}>
                 {readonly || !wallet ? null : (
                     <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} asset={asset} />
                 )}
-                <NFTCardStyledAssetPlayer
-                    contractAddress={asset.address}
-                    chainId={asset.chainId}
-                    isImageOnly
-                    url={asset.metadata?.mediaURL || asset.metadata?.imageURL}
-                    tokenId={asset.tokenId}
-                    pluginID={pluginID}
-                    classes={{
-                        fallbackImage: classes.fallbackImage,
-                        imgWrapper: classes.wrapper,
-                    }}
-                    showNetwork={showNetworkIcon}
-                />
+                <div>
+                    <AssetPreviewer
+                        url={asset.metadata?.mediaURL || asset.metadata?.imageURL}
+                        classes={{
+                            fallbackImage: classes.fallbackImage,
+                            root: classes.wrapper,
+                        }}
+                    />
+                    {networkIcon ? (
+                        <ImageIcon icon={networkIcon} size={24} classes={{ icon: classes.networkIcon }} />
+                    ) : null}
+                </div>
             </Card>
         </>
     )

packages/mask/src/plugins/Pets/SNSAdaptor/ModelView.tsx

@@ -1,5 +1,5 @@
 import type { FC, HTMLProps } from 'react'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { AssetPreviewer } from '@masknet/shared'
 
 interface ModelViewProps extends HTMLProps<HTMLDivElement> {
     source: string
@@ -10,7 +10,7 @@ const ModelView: FC<ModelViewProps> = ({ source, ...rest }) => {
 
     return (
         <div {...rest}>
-            <NFTCardStyledAssetPlayer url={source} />
+            <AssetPreviewer url={source} />
         </div>
     )
 }

packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx

@@ -2,7 +2,7 @@ import type { FC, HTMLProps } from 'react'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { ChainId, formatTokenId, SchemaType } from '@masknet/web3-shared-evm'
 import { List, ListItem, ListProps, Typography } from '@mui/material'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { AssetPreviewer } from '@masknet/shared'
 import type { NonFungibleCollection } from '@masknet/web3-shared-base'
 import { useI18N } from '../locales/index.js'
 
@@ -92,15 +92,11 @@ export const NftItem: FC<NftItemProps> = ({ collection, tokenId, className, clai
 
     return (
         <div className={cx(className, classes.nft)} {...rest}>
-            <NFTCardStyledAssetPlayer
+            <AssetPreviewer
                 classes={{
                     fallbackImage: classes.fallbackImage,
                 }}
                 url={asset?.metadata?.imageURL || asset?.metadata?.mediaURL}
-                tokenId={tokenId}
-                contractAddress={collection?.address ?? ''}
-                chainId={collection?.chainId}
-                disableQueryNonFungibleAsset
             />
             <Typography className={classes.name}>{formatTokenId(tokenId, 2)}</Typography>
             {claimed && <Typography className={classes.claimedBadge}>{t.claimed({ amount: '' })}</Typography>}

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx

@@ -5,7 +5,7 @@ import { Check as CheckIcon, Close as CloseIcon, AddCircleOutline as AddCircleOu
 import { useI18N } from '../locales/index.js'
 import {
     WalletConnectedBoundary,
-    NFTCardStyledAssetPlayer,
+    AssetPreviewer,
     PluginWalletStatusBar,
     ERC721ContractSelectPanel,
     ChainBoundary,
@@ -422,16 +422,12 @@ function NFTCard(props: NFTCardProps) {
     const { classes, cx } = useStyles()
     return (
         <ListItem className={cx(classes.tokenSelectorWrapper)}>
-            <NFTCardStyledAssetPlayer
-                contractAddress={token.collection?.address}
-                chainId={token.chainId}
+            <AssetPreviewer
                 url={token.metadata?.mediaURL || token.metadata?.imageURL}
-                tokenId={token.tokenId}
                 classes={{
                     fallbackImage: classes.fallbackImage,
-                    imgWrapper: classes.assetImgWrapper,
+                    root: classes.assetImgWrapper,
                 }}
-                disableQueryNonFungibleAsset
             />
             <div className={classes.nftNameWrapper}>
                 <Typography className={classes.nftName} color="textSecondary">

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx

@@ -9,12 +9,7 @@ import {
     isNativeTokenAddress,
     formatTokenId,
 } from '@masknet/web3-shared-evm'
-import {
-    NFTCardStyledAssetPlayer,
-    PluginWalletStatusBar,
-    ChainBoundary,
-    WalletConnectedBoundary,
-} from '@masknet/shared'
+import { AssetPreviewer, PluginWalletStatusBar, ChainBoundary, WalletConnectedBoundary } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useChainContext, useWallet, useWeb3 } from '@masknet/web3-hooks-base'
 import type { NonFungibleToken, NonFungibleCollection } from '@masknet/web3-shared-base'
@@ -324,16 +319,12 @@ function NFTCard(props: NFTCardProps) {
     const { classes, cx } = useStyles()
     return (
         <ListItem className={cx(classes.tokenSelectorWrapper)}>
-            <NFTCardStyledAssetPlayer
-                contractAddress={token.contract?.address}
-                chainId={token.contract?.chainId}
+            <AssetPreviewer
                 url={token.metadata?.mediaURL || token.metadata?.imageURL}
-                tokenId={token.tokenId}
                 classes={{
                     fallbackImage: classes.fallbackImage,
-                    imgWrapper: classes.assetImgWrapper,
+                    root: classes.assetImgWrapper,
                 }}
-                disableQueryNonFungibleAsset
             />
             <div className={classes.nftNameWrapper}>
                 <Typography className={classes.nftName} color="textSecondary">

packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx

@@ -20,9 +20,9 @@ import {
     useSaveNFTAvatar,
 } from '@masknet/plugin-avatar'
 import { useAsync, useLocation, useUpdateEffect, useWindowSize } from 'react-use'
-import { useChainContext } from '@masknet/web3-hooks-base'
+import { useChainContext, useWeb3Hub } from '@masknet/web3-hooks-base'
 import { Box, Typography } from '@mui/material'
-import { NFTCardStyledAssetPlayer, useShowConfirm } from '@masknet/shared'
+import { AssetPreviewer, useShowConfirm } from '@masknet/shared'
 import type { AvatarMetaDB } from '@masknet/plugin-avatar'
 import { NetworkPluginID, EnhanceableSite, NFTAvatarEvent, CrossIsolationMessages } from '@masknet/shared-base'
 import { activatedSocialNetworkUI } from '../../../../social-network/ui.js'
@@ -111,12 +111,12 @@ function NFTAvatarInTwitter(props: NFTAvatarInTwitterProps) {
     const [NFTEvent, setNFTEvent] = useState<NFTAvatarEvent>()
     const openConfirmDialog = useShowConfirm()
     const saveNFTAvatar = useSaveNFTAvatar()
+    const hub = useWeb3Hub(NetworkPluginID.PLUGIN_EVM)
 
     // After the avatar is set, it cannot be saved immediately,
     // and must wait until the avatar of twitter gets updated
     useAsync(async () => {
-        if (!account || !nftAvatar) return
-        if (!identity.identifier) return
+        if (!account || !nftAvatar || !hub?.getNonFungibleAsset || !identity.identifier) return
 
         if (!NFTEvent?.address || !NFTEvent?.tokenId) {
             MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll({
@@ -149,11 +149,16 @@ function NFTAvatarInTwitter(props: NFTAvatarInTwitterProps) {
             window.alert('Sorry, failed to save NFT Avatar. Please set again.')
             return
         }
+
+        const NFTDetailed = await hub.getNonFungibleAsset(avatar.address ?? '', avatar.tokenId, {
+            chainId: ChainId.Mainnet,
+        })
+
         openConfirmDialog({
             title: t('plugin_avatar_setup_share_title'),
             content: (
                 <Box display="flex" flexDirection="column" alignItems="center">
-                    <NFTCardStyledAssetPlayer contractAddress={avatar.address} tokenId={avatar.tokenId} />
+                    <AssetPreviewer url={NFTDetailed?.metadata?.imageURL || NFTDetailed?.metadata?.mediaURL} />
                     <Typography mt={3} fontSize="18px">
                         {t('plugin_avatar_setup_success')}
                     </Typography>
@@ -178,7 +183,7 @@ function NFTAvatarInTwitter(props: NFTAvatarInTwitterProps) {
         )
 
         setNFTEvent(undefined)
-    }, [identity.avatar, openConfirmDialog, t, saveNFTAvatar])
+    }, [identity.avatar, openConfirmDialog, t, saveNFTAvatar, hub?.getNonFungibleAsset])
 
     useEffect(() => {
         return MaskMessages.events.NFTAvatarUpdated.on((data) => setNFTEvent(data))

packages/plugins/MaskBox/src/SNSAdaptor/components/CollectibleCard.tsx

@@ -1,10 +1,11 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { Card, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useWeb3State } from '@masknet/web3-hooks-base'
+import { useWeb3State, useNetworkDescriptor } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import type { NetworkPluginID } from '@masknet/shared-base'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { AssetPreviewer, ImageIcon } from '@masknet/shared'
+import { NETWORK_DESCRIPTORS } from '@masknet/web3-shared-evm'
 import type { SourceType, Wallet } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
@@ -19,6 +20,11 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         height: '100%',
     },
+    networkIcon: {
+        position: 'absolute',
+        top: 6,
+        left: 6,
+    },
     fallbackImage: {
         minHeight: '0 !important',
         maxWidth: 'none',
@@ -62,23 +68,29 @@ export const CollectibleCard = memo(function CollectibleCard({
     const { classes, cx } = useStyles()
     const { Others } = useWeb3State()
 
+    const networkDescriptor = useNetworkDescriptor(pluginID)
+
+    const networkIcon = useMemo(() => {
+        if (pluginID === NetworkPluginID.PLUGIN_EVM) {
+            return NETWORK_DESCRIPTORS.find((network) => network?.chainId === asset.chainId)?.icon
+        }
+        return networkDescriptor?.icon
+    }, [asset.chainId, pluginID])
+
     const content = (
         <>
             <div className={classes.blocker} />
             <Card className={classes.root}>
-                <NFTCardStyledAssetPlayer
-                    contractAddress={asset.address}
-                    chainId={asset.chainId}
-                    isImageOnly
+                <AssetPreviewer
                     url={asset.metadata?.mediaURL || asset.metadata?.imageURL}
-                    tokenId={asset.tokenId}
-                    pluginID={pluginID}
                     classes={{
                         fallbackImage: classes.fallbackImage,
-                        imgWrapper: classes.wrapper,
+                        root: classes.wrapper,
                     }}
-                    showNetwork={showNetworkIcon}
                 />
+                {networkIcon ? (
+                    <ImageIcon icon={networkIcon} size={24} classes={{ icon: classes.networkIcon }} />
+                ) : null}
             </Card>
         </>
     )