feat: add fetch nfts v2

packages/mask/shared-ui/locales/en-US.json

@@ -64,6 +64,7 @@
     "message": "Message",
     "dashboard_tab_collectibles": "Collectibles",
     "dashboard_no_collectible_found": "No collectible found.",
+    "dashboard_collectible_menu_all": "All ({{count}})",
     "days": "Every {{days}} days",
     "decrypted_postbox_add_recipients": "Append recipients",
     "decrypted_postbox_decrypting": "Mask decrypting…",
@@ -326,7 +327,6 @@
     "plugin_wallet_name_placeholder": "Enter 1-12 characters",
     "plugin_wallet_fail_to_sign": "Failed to sign password.",
     "plugin_wallet_cancel_sign": "Signature canceled.",
-    "plugin_wallet_nft_wall_current_display": "Current display: ",
     "plugin_red_packet_display_name": "Plugin: Lucky Drop",
     "plugin_red_packet_claimed": "Claimed",
     "plugin_red_packet_erc20_tab_title": "Token",

packages/mask/shared-ui/locales/qya-AA.json

@@ -326,7 +326,6 @@
     "plugin_wallet_name_placeholder": "crwdns4705:0crwdne4705:0",
     "plugin_wallet_fail_to_sign": "crwdns4707:0crwdne4707:0",
     "plugin_wallet_cancel_sign": "crwdns4709:0crwdne4709:0",
-    "plugin_wallet_nft_wall_current_display": "crwdns13185:0crwdne13185:0",
     "plugin_red_packet_display_name": "crwdns4711:0crwdne4711:0",
     "plugin_red_packet_claimed": "crwdns10205:0crwdne10205:0",
     "plugin_red_packet_erc20_tab_title": "crwdns8143:0crwdne8143:0",

packages/mask/shared-ui/locales/zh-CN.json

@@ -324,7 +324,6 @@
     "plugin_wallet_name_placeholder": "输入1-12 个字符",
     "plugin_wallet_fail_to_sign": "无法签名密码。",
     "plugin_wallet_cancel_sign": "签名已取消。",
-    "plugin_wallet_nft_wall_current_display": "当前显示： ",
     "plugin_red_packet_display_name": "插件：红包",
     "plugin_red_packet_claimed": "已认领",
     "plugin_red_packet_erc20_tab_title": "代币",

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

@@ -79,7 +79,7 @@ export function CollectibleCard(props: CollectibleCardProps) {
             (entries) => {
                 entries.forEach((item) => {
                     if (!item.isIntersecting) return
-                    setImageLinkWithLazy(token.info.mediaUrl!)
+                    setImageLinkWithLazy(token.info.imageURL || token.info.mediaUrl!)
                     observer.unobserve(item.target)
                 })
             },
@@ -101,7 +101,7 @@ export function CollectibleCard(props: CollectibleCardProps) {
         theme.palette.mode === 'dark'
             ? new URL('./nft_token_fallback_dark.png', import.meta.url)
             : new URL('./nft_token_fallback.png', import.meta.url)
-    const { value: isImageToken, loading } = useImageChecker(token.info.mediaUrl)
+    const { value: isImageToken, loading } = useImageChecker(token.info.imageURL || token.info.mediaUrl)
     return (
         <Link
             ref={imgRef}
@@ -114,7 +114,7 @@ export function CollectibleCard(props: CollectibleCardProps) {
                 {readonly || !wallet ? null : (
                     <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
                 )}
-                {token.info.mediaUrl ? (
+                {token.info.imageURL || token.info.mediaUrl ? (
                     loading ? (
                         <Image component="img" width={172} height={172} loading src="" />
                     ) : isImageToken && imageLinkWithLazy ? (

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

@@ -0,0 +1,72 @@
+import { memo } from 'react'
+import { Box, Tooltip } from '@mui/material'
+import { Image } from '../../../../components/shared/Image'
+import { makeStyles } from '@masknet/theme'
+import { TokenIcon } from '@masknet/shared'
+import classNames from 'classnames'
+import type { ERC721ContractDetailed } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-evm'
+
+const useStyles = makeStyles()((theme) => ({
+    collectionWrap: {
+        width: '24px',
+        height: '24px',
+        borderRadius: '50%',
+        background: 'rgba(229,232,235,1)',
+        cursor: 'pointer',
+    },
+    collectionImg: {
+        objectFit: 'cover',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        color: theme.palette.primary.main,
+    },
+    tip: {
+        padding: theme.spacing(1),
+        color: '#ffffff',
+    },
+    selected: {
+        border: '2px solid #1D9BF0',
+        borderRadius: '50%',
+    },
+}))
+
+interface CollectionIconProps {
+    selectedCollection?: string
+    collection?: ERC721ContractDetailed
+    onClick?(): void
+}
+
+export const CollectionIcon = memo<CollectionIconProps>(({ collection, onClick, selectedCollection }) => {
+    const { classes } = useStyles()
+    if (!collection) {
+        return <TokenIcon classes={{ icon: classes.collectionImg }} name="other" address="other" />
+    }
+    return (
+        <Tooltip
+            classes={{ tooltip: classes.tip }}
+            PopperProps={{
+                disablePortal: true,
+            }}
+            title={collection.name}
+            arrow>
+            <Box
+                className={classNames(
+                    classes.collectionWrap,
+                    isSameAddress(collection.address, selectedCollection) ? classes.selected : '',
+                )}
+                onClick={onClick}>
+                {collection.iconURL ? (
+                    <Image component="img" className={classes.collectionImg} src={collection.iconURL} />
+                ) : (
+                    <TokenIcon
+                        classes={{ icon: classes.collectionImg }}
+                        name={collection.name}
+                        address={collection.address}
+                    />
+                )}
+            </Box>
+        </Tooltip>
+    )
+})

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

@@ -0,0 +1,34 @@
+import { makeStyles } from '@masknet/theme'
+import { Box, Skeleton } from '@mui/material'
+
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        display: 'grid',
+        flexWrap: 'wrap',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(172px, 1fr))',
+        gridGap: theme.spacing(1),
+    },
+    card: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        position: 'relative',
+        padding: theme.spacing(1),
+    },
+}))
+
+export const LoadingCollectible = () => {
+    const { classes } = useStyles()
+    return (
+        <Box className={classes.root}>
+            {Array.from({ length: 3 })
+                .fill(0)
+                .map((_, i) => (
+                    <Box className={classes.card} display="flex" flexDirection="column" key={i}>
+                        <Skeleton animation="wave" variant="rectangular" width={172} height={172} />
+                        <Skeleton animation="wave" variant="text" width={172} height={20} style={{ marginTop: 4 }} />
+                    </Box>
+                ))}
+        </Box>
+    )
+}