fix(nftscan): mf-1486 set name of meta data

packages/shared/src/UI/components/NFTList/index.tsx

@@ -2,21 +2,21 @@ import { useChainId, useCurrentWeb3NetworkPluginID, useWeb3State, Web3Helper } f
 import { ElementAnchor, Linking, NFTCardStyledAssetPlayer, RetryHint } from '@masknet/shared'
 import { LoadingBase, makeStyles } from '@masknet/theme'
 import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
-import { formatTokenId } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Checkbox, List, ListItem, Radio, Stack, Typography } from '@mui/material'
 import classnames from 'classnames'
 import { noop } from 'lodash-unified'
 import { FC, useCallback } from 'react'
 
 interface NFTItemProps {
-    token: NonFungibleToken<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
+    token: NonFungibleToken<ChainId, SchemaType>
 }
 
 export type NFTKeyPair = [address: string, tokenId: string]
 
 interface Props {
     selectable?: boolean
-    tokens: Array<Web3Helper.NonFungibleAssetScope<'all'>>
+    tokens: Array<Web3Helper.NonFungibleAssetScope<void, NetworkPluginID.PLUGIN_EVM>>
     selectedPairs?: NFTKeyPair[]
     onChange?: (id: string | null, contractAddress?: string) => void
     limit?: number
@@ -28,7 +28,7 @@ interface Props {
     hasError?: boolean
 }
 
-const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { columns, gap }) => {
+const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { columns = 4, gap = 12 }) => {
     const isLight = theme.palette.mode === 'light'
     return {
         checkbox: {
@@ -37,16 +37,17 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col
             top: 0,
         },
         list: {
-            gridGap: gap ?? 12,
+            gridGap: gap,
             padding: 0,
             display: 'grid',
-            gridTemplateColumns: `repeat(${columns ?? 4}, 1fr)`,
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
         },
         nftContainer: {
             background: isLight ? '#EDEFEF' : '#2F3336',
             borderRadius: 8,
             width: '100%',
             transition: 'all 0.2s ease',
+            overflow: 'auto',
             '&:hover': {
                 backgroundColor: isLight ? theme.palette.background.paper : undefined,
                 boxShadow: isLight ? '0px 4px 30px rgba(0, 0, 0, 0.1)' : undefined,
@@ -122,7 +123,10 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col
 
 export const NFTItem: FC<NFTItemProps> = ({ token }) => {
     const { classes } = useStyles({})
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const fullCaption = token.metadata?.name || token.tokenId
+    const caption = token.metadata?.name?.match(/#\d+$/) ? token.metadata.name : Others?.formatTokenId(token.tokenId)
     return (
         <div className={classes.nftContainer}>
             <NFTCardStyledAssetPlayer
@@ -137,7 +141,9 @@ export const NFTItem: FC<NFTItemProps> = ({ token }) => {
                     wrapper: classes.wrapper,
                 }}
             />
-            <Typography className={classes.caption}>{formatTokenId(token.tokenId)}</Typography>
+            <Typography className={classes.caption} title={fullCaption !== caption ? fullCaption : undefined}>
+                {caption}
+            </Typography>
         </div>
     )
 }
@@ -177,7 +183,7 @@ export const NFTList: FC<Props> = ({
               }
 
     const SelectComponent = isRadio ? Radio : Checkbox
-    const { Others } = useWeb3State()
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     return (
         <>

packages/web3-providers/src/NFTScan/index.ts

@@ -218,7 +218,7 @@ export class NFTScanAPI implements NonFungibleTokenAPI.Provider<ChainId, SchemaT
                     schema: SchemaType.ERC721,
                     metadata: {
                         chainId,
-                        name: platformInfo.name,
+                        name: x.nft_name,
                         symbol,
                         description: platformInfo.description,
                         imageURL: prependIpfs(x.cover),

packages/web3-shared/base/src/specs/index.ts

@@ -232,6 +232,7 @@ export interface NonFungibleTokenContract<ChainId, SchemaType> {
 
 export interface NonFungibleTokenMetadata<ChainId> {
     chainId: ChainId
+    /** Might be the format `TheName #42` */
     name: string
     symbol: string
     description?: string

packages/web3-shared/evm/utils/formatter.ts

@@ -20,9 +20,14 @@ export function formatEthereumAddress(address: string, size = 0) {
     return `${address_.slice(0, Math.max(0, 2 + size))}...${address_.slice(-size)}`
 }
 
-export function formatTokenId(tokenId: string, size = 0) {
-    if (tokenId.length < 9) return `#${tokenId}`
-    return `#${tokenId.slice(0, Math.max(0, 2 + size))}...${tokenId.slice(-size)}`
+export function formatTokenId(tokenId: string, size = 4) {
+    size = Math.max(2, size)
+    const isHex = tokenId.toLowerCase().startsWith('0x')
+    const prefix = isHex ? '0x' : '#'
+    if (tokenId.length < size * 2 + prefix.length) return `#${tokenId}`
+    const head = tokenId.slice(0, isHex ? 2 + size : size)
+    const tail = tokenId.slice(-size)
+    return `${prefix}${head}...${tail}`
 }
 
 export function formatDomainName(domain: string, size = 4) {