From d9209f9110739a4c0c6aff410e3f2af72a652e59 Mon Sep 17 00:00:00 2001 From: unclebill Date: Wed, 13 Jul 2022 21:52:28 +0800 Subject: [PATCH 1/3] fix(nftscan): mf-1486 set name of meta data fix formatTokenId --- packages/shared/src/UI/components/NFTList/index.tsx | 7 ++++++- packages/web3-providers/src/NFTScan/index.ts | 2 +- packages/web3-shared/base/src/specs/index.ts | 1 + packages/web3-shared/evm/utils/formatter.ts | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/shared/src/UI/components/NFTList/index.tsx b/packages/shared/src/UI/components/NFTList/index.tsx index 37606c65d08b..1602f6f05735 100644 --- a/packages/shared/src/UI/components/NFTList/index.tsx +++ b/packages/shared/src/UI/components/NFTList/index.tsx @@ -47,6 +47,7 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col 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, @@ -123,6 +124,8 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col export const NFTItem: FC = ({ token }) => { const { classes } = useStyles({}) const chainId = useChainId() + const fullCaption = token.metadata?.name || token.tokenId + const caption = token.metadata?.name || formatTokenId(token.tokenId) return (
= ({ token }) => { wrapper: classes.wrapper, }} /> - {formatTokenId(token.tokenId)} + + {caption} +
) } diff --git a/packages/web3-providers/src/NFTScan/index.ts b/packages/web3-providers/src/NFTScan/index.ts index b6d61a0b92a4..96c68def6c2a 100644 --- a/packages/web3-providers/src/NFTScan/index.ts +++ b/packages/web3-providers/src/NFTScan/index.ts @@ -218,7 +218,7 @@ export class NFTScanAPI implements NonFungibleTokenAPI.Provider { export interface NonFungibleTokenMetadata { chainId: ChainId + /** Might be the format `TheName #42` */ name: string symbol: string description?: string diff --git a/packages/web3-shared/evm/utils/formatter.ts b/packages/web3-shared/evm/utils/formatter.ts index e8bff3b48c65..ebee3e6d7ef7 100644 --- a/packages/web3-shared/evm/utils/formatter.ts +++ b/packages/web3-shared/evm/utils/formatter.ts @@ -22,7 +22,7 @@ export function formatEthereumAddress(address: string, size = 0) { 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)}` + return `#${tokenId.slice(0, Math.max(0, 2 + size))}...${tokenId.slice(-4)}` } export function formatDomainName(domain: string, size = 4) { From bbd62b310af7738af0ace73ccf83e8c2b489ff53 Mon Sep 17 00:00:00 2001 From: unclebill Date: Wed, 13 Jul 2022 22:09:17 +0800 Subject: [PATCH 2/3] fixup! fix(nftscan): mf-1486 set name of meta data --- packages/shared/src/UI/components/NFTList/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/shared/src/UI/components/NFTList/index.tsx b/packages/shared/src/UI/components/NFTList/index.tsx index 1602f6f05735..974c6d2776a8 100644 --- a/packages/shared/src/UI/components/NFTList/index.tsx +++ b/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 + token: NonFungibleToken } export type NFTKeyPair = [address: string, tokenId: string] interface Props { selectable?: boolean - tokens: Array> + tokens: Array> selectedPairs?: NFTKeyPair[] onChange?: (id: string | null, contractAddress?: string) => void limit?: number @@ -124,8 +124,9 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col export const NFTItem: FC = ({ token }) => { const { classes } = useStyles({}) const chainId = useChainId() + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const fullCaption = token.metadata?.name || token.tokenId - const caption = token.metadata?.name || formatTokenId(token.tokenId) + const caption = token.metadata?.name.match(/#\d+$/) ? token.metadata.name : Others?.formatTokenId(token.tokenId) return (
= ({ } const SelectComponent = isRadio ? Radio : Checkbox - const { Others } = useWeb3State() + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) return ( <> From a322dccf299c19b83e78ce15922ff5d8a2a3a7b9 Mon Sep 17 00:00:00 2001 From: unclebill Date: Wed, 13 Jul 2022 22:58:58 +0800 Subject: [PATCH 3/3] fixup! fix(nftscan): mf-1486 set name of meta data closes #6793 --- packages/shared/src/UI/components/NFTList/index.tsx | 10 +++++----- packages/web3-shared/evm/utils/formatter.ts | 11 ++++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/shared/src/UI/components/NFTList/index.tsx b/packages/shared/src/UI/components/NFTList/index.tsx index 974c6d2776a8..9143372abde6 100644 --- a/packages/shared/src/UI/components/NFTList/index.tsx +++ b/packages/shared/src/UI/components/NFTList/index.tsx @@ -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,10 +37,10 @@ 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', @@ -123,10 +123,10 @@ const useStyles = makeStyles<{ columns?: number; gap?: number }>()((theme, { col export const NFTItem: FC = ({ 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) + const caption = token.metadata?.name?.match(/#\d+$/) ? token.metadata.name : Others?.formatTokenId(token.tokenId) return (