feat: asset player render from chain

packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { CollectiblePlaceholder } from '../CollectiblePlaceHolder'
 import { useHoverDirty } from 'react-use'
 import { useDashboardI18N } from '../../../../locales'
-import { WalletIcon } from '@masknet/shared'
+import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { ChangeNetworkTip } from '../FungibleTokenTableRow/ChangeNetworkTip'
 import { useNetworkDescriptor, useWeb3State, Web3Plugin } from '@masknet/plugin-infra'
 
@@ -29,7 +29,9 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
         overflow: 'hidden',
     },
-    imgContainer: {
+    mediaContainer: {
+        position: 'absolute',
+        zIndex: 1,
         width: '100%',
         height: 186,
         backgroundColor: theme.palette.mode === 'dark' ? MaskColorVar.lineLight : '#f6f6f7',
@@ -50,6 +52,7 @@ const useStyles = makeStyles()((theme) => ({
         top: 8,
         height: 20,
         width: 20,
+        zIndex: 20,
     },
     tip: {
         padding: theme.spacing(1),
@@ -58,15 +61,40 @@ const useStyles = makeStyles()((theme) => ({
     tipArrow: {
         color: '#111432',
     },
+    loadingFailImage: {
+        minHeight: '0px !important',
+        maxWidth: 'none',
+        transform: 'translateY(10px)',
+        width: 64,
+        height: 64,
+    },
+    wrapper: {
+        width: '100%',
+        minWidth: 140,
+        height: '100%',
+        minHeight: 186,
+    },
+    linkWrapper: {
+        position: 'relative',
+        width: 140,
+        height: 186,
+    },
+    blocker: {
+        position: 'absolute',
+        zIndex: 2,
+        width: 140,
+        height: 186,
+    },
 }))
 
 export interface CollectibleCardProps {
     chainId: number
     token: Web3Plugin.NonFungibleToken
     onSend(): void
+    renderOrder: number
 }
 
-export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onSend }) => {
+export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onSend, renderOrder }) => {
     const t = useDashboardI18N()
     const { Utils } = useWeb3State()
     const { classes } = useStyles()
@@ -90,17 +118,26 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                     <Link
                         target="_blank"
                         rel="noopener noreferrer"
+                        className={classes.linkWrapper}
                         href={
                             Utils?.resolveNonFungibleTokenLink?.(
                                 token.contract?.chainId,
                                 token.contract.address,
                                 token.tokenId,
                             ) ?? '#'
                         }>
-                        <div className={classes.imgContainer}>
-                            <img
-                                src={token.metadata.assetURL || token.metadata.iconURL}
-                                style={{ objectFit: 'contain', width: '100%', height: '100%' }}
+                        <div className={classes.blocker} />
+                        <div className={classes.mediaContainer}>
+                            <NFTCardStyledAssetPlayer
+                                contractAddress={token.contract.address}
+                                chainId={token.contract.chainId}
+                                renderOrder={renderOrder}
+                                url={token.metadata.assetURL || token.metadata.iconURL}
+                                tokenId={token.tokenId}
+                                classes={{
+                                    loadingFailImage: classes.loadingFailImage,
+                                    wrapper: classes.wrapper,
+                                }}
                             />
                         </div>
                     </Link>

packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx

@@ -151,11 +151,12 @@ export const CollectibleListUI = memo<CollectibleListUIProps>(
                 ) : (
                     <Box>
                         <div className={classes.root}>
-                            {dataSource.map((x) => (
-                                <div className={classes.card} key={x.id}>
+                            {dataSource.map((x, index) => (
+                                <div className={classes.card} key={index}>
                                     <CollectibleCard
                                         chainId={chainId}
                                         token={x}
+                                        renderOrder={index}
                                         // TODO: transfer not support multi chain, should remove is after supported
                                         onSend={() => onSend(x as unknown as any)}
                                     />
@@ -164,6 +165,7 @@ export const CollectibleListUI = memo<CollectibleListUIProps>(
                         </div>
                     </Box>
                 )}
+
                 {showPagination ? (
                     <Box className={classes.footer}>
                         <TablePagination

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

@@ -2,7 +2,8 @@ import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { memo, useMemo, useState } from 'react'
 import { Checkbox, ImageListItem, ImageListItemBar, Box } from '@mui/material'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
-import { MiniMaskIcon, CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
+import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 
 const useStyles = makeStyles()({
     card: {
@@ -39,19 +40,36 @@ const useStyles = makeStyles()({
         padding: 0,
         lineHeight: '16px',
     },
+    wrapper: {
+        borderTopRightRadius: '12px',
+        borderTopLeftRadius: '12px',
+        width: '140px !important',
+        height: '186px !important',
+    },
+    loadingPlaceholder: {
+        width: '140px !important',
+        height: '186px !important',
+    },
+    loadingFailImage: {
+        minHeight: '0px !important',
+        maxWidth: 'none',
+        transform: 'translateY(10px)',
+        width: 64,
+        height: 64,
+    },
 })
 
 export interface NFTCardProps {
     token: ERC721TokenDetailed
     selectedTokenId: string
     onSelect(tokenId: string): void
+    renderOrder: number
 }
 
-export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect }) => {
+export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect, renderOrder }) => {
     const { classes } = useStyles()
-    const [loadFailed, setLoadFailed] = useState(false)
     const [checked, setChecked] = useState(!!selectedTokenId && selectedTokenId === token.tokenId)
-
+    const [name, setName] = useState(token.tokenId)
     const isDisabled = useMemo(
         () => !!selectedTokenId && selectedTokenId !== token.tokenId,
         [selectedTokenId, token.tokenId],
@@ -68,11 +86,11 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
                     background: (theme) => (theme.palette.mode === 'dark' ? MaskColorVar.primaryBackground : '#F9F9FA'),
                 }}
                 classes={{ titleWrap: classes.barTitle }}
-                subtitle={<span>{token.info.name || token.tokenId}</span>}
+                subtitle={<span>{name}</span>}
                 position="below"
             />
         )
-    }, [token.info.name, token.tokenId])
+    }, [name])
 
     return (
         <ImageListItem
@@ -84,19 +102,18 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
                 background: (theme) => (theme.palette.mode === 'dark' ? getMaskColor(theme).white : '#F9F9FA'),
             }}
             className={isDisabled ? classes.disabled : ''}>
-            {loadFailed || !token.info.mediaUrl ? (
-                <div className={classes.container}>
-                    <div className={classes.placeholder}>
-                        <MiniMaskIcon viewBox="0 0 48 48" sx={{ fontSize: 48 }} />
-                    </div>
-                </div>
-            ) : (
-                <img
-                    onError={() => setLoadFailed(true)}
-                    src={token.info.mediaUrl}
-                    style={{ width: '100%', height: '100%', borderRadius: '8px 8px 0px 0px', objectFit: 'cover' }}
-                />
-            )}
+            <NFTCardStyledAssetPlayer
+                contractAddress={token.contractDetailed.address}
+                chainId={token.contractDetailed.chainId}
+                tokenId={token.tokenId}
+                setERC721TokenName={setName}
+                renderOrder={renderOrder}
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                    loadingPlaceholder: classes.loadingPlaceholder,
+                    wrapper: classes.wrapper,
+                }}
+            />
             {NFTNameBar}
             <Box className={classes.checkbox}>
                 <Checkbox

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

@@ -59,8 +59,14 @@ export const SelectNFTList = memo<SelectNFTListProps>(({ list, onSelect, selecte
                 gap={12}
                 rowHeight={186}
                 sx={{ width: '100%', height: 'auto', maxHeight: '400px', p: 2, pb: 0.5 }}>
-                {list.map((token) => (
-                    <NFTCard key={token.tokenId} token={token} selectedTokenId={selectedTokenId} onSelect={onSelect} />
+                {list.map((token, index) => (
+                    <NFTCard
+                        key={token.tokenId}
+                        token={token}
+                        selectedTokenId={selectedTokenId}
+                        onSelect={onSelect}
+                        renderOrder={index}
+                    />
                 ))}
                 {renderStatus}
             </ImageList>

packages/icons/brands/MaskPlaceholder.tsx

@@ -0,0 +1,33 @@
+import { createPaletteAwareIcon } from '../utils'
+
+export const MaskPlaceholder = createPaletteAwareIcon(
+    'MaskPlaceholder',
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#CFD9DE" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#fff"
+        />
+    </g>,
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#2F3336" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#15171A"
+        />
+    </g>,
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#38444D" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#18232E"
+        />
+    </g>,
+    '0 0 36 36',
+)

packages/icons/brands/index.ts

@@ -11,3 +11,4 @@ export * from './MaskBlue'
 export * from './MaskGrey'
 export * from './Discord'
 export * from './MaskBanner'
+export * from './MaskPlaceholder'

packages/mask/src/extension/background-script/EthereumServices/send.ts

@@ -288,7 +288,7 @@ export async function INTERNAL_send(
         // the estimation of metamask of `maxFeePerGas` = 1 * block.baseFeePerGas,
         // since the estimation of web3.js = 2 * block.baseFeePerGas which is too high
         // that would almost always causes an undesired warning tip.
-        if (Flags.EIP1559_enabled && isEIP1559Valid) {
+        if (Flags.EIP1559_enabled && isEIP1559Valid && isEIP1559Supported(chainIdFinally)) {
             config.gasPrice = undefined
             config.maxPriorityFeePerGas = formatGweiToWei(1.5).toString(16)
             config.maxFeePerGas = (Number.parseInt(config.maxFeePerGas!, 16) * 0.8).toString(16)