feat: nft contract selector cors error

packages/mask/src/plugins/EVM/hooks/index.ts

@@ -1,5 +1,4 @@
 export * from './useAsset'
-export * from './useNFTBalance'
 export * from './useHistory'
 export * from './useOrders'
 export * from './useNetwork'

packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx

@@ -1,15 +1,18 @@
-import { useCallback, useState, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { DialogContent, List, ListItem, Typography, Box, Link, Avatar } from '@mui/material'
+import { Avatar, Box, CircularProgress, DialogContent, Link, List, ListItem, Typography } from '@mui/material'
 import {
     ChainId,
     ERC721ContractDetailed,
+    EthereumTokenType,
+    formatEthereumAddress,
     resolveAddressLinkOnExplorer,
-    useChainId,
+    SocketState,
     useAccount,
-    useERC721Tokens,
-    formatEthereumAddress,
+    useChainId,
+    useCollections,
     useERC721ContractDetailed,
+    useERC721Tokens,
 } from '@masknet/web3-shared-evm'
 import { InjectedDialog } from '../../../components/shared/InjectedDialog'
 import { WalletMessages } from '../messages'
@@ -20,7 +23,6 @@ import { SearchInput } from '../../../extension/options-page/DashboardComponents
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import Fuse from 'fuse.js'
 import { unionBy } from 'lodash-unified'
-import { useNFTBalance } from '../../EVM/hooks'
 import type { NonFungibleTokenAPI } from '@masknet/web3-providers'
 
 const useStyles = makeStyles()((theme) => ({
@@ -149,17 +151,30 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
     }, [id, setDialog])
     // #endregion
 
-    const { value: assets } = useNFTBalance(account, !open)
+    const { data: assets, state: loadingCollectionState } = useCollections(account, ChainId.Mainnet, open)
 
     const erc721InDb = useERC721Tokens()
     const allContractsInDb = unionBy(
         erc721InDb.map((x) => ({ ...x.contractDetailed, address: formatEthereumAddress(x.contractDetailed.address) })),
         'address',
     ).map((x) => ({ contractDetailed: x, balance: undefined }))
 
+    const renderAssets = assets.map((x) => ({
+        contractDetailed: {
+            type: EthereumTokenType.ERC721,
+            address: x.address,
+            chainId: ChainId.Mainnet,
+            name: x.name,
+            symbol: x.symbol,
+            baseURI: x.iconURL,
+            iconURL: x.iconURL,
+        } as ERC721ContractDetailed,
+        balance: x.balance,
+    }))
+
     const contractList =
-        chainId === ChainId.Mainnet && assets
-            ? unionBy([...assets, ...allContractsInDb], 'contractDetailed.address')
+        chainId === ChainId.Mainnet && renderAssets
+            ? unionBy([...renderAssets, ...allContractsInDb], 'contractDetailed.address')
             : allContractsInDb
 
     // #region fuse
@@ -192,12 +207,23 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
                         }}
                     />
                 </div>
-                <SearchResultBox
-                    keyword={keyword}
-                    contractList={contractList}
-                    searchedTokenList={searchedTokenList}
-                    onSubmit={onSubmit}
-                />
+                {loadingCollectionState === SocketState.done && (
+                    <SearchResultBox
+                        keyword={keyword}
+                        contractList={contractList}
+                        searchedTokenList={searchedTokenList}
+                        onSubmit={onSubmit}
+                    />
+                )}
+                {loadingCollectionState !== SocketState.done && (
+                    <Box
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        sx={{ paddingTop: 4, paddingBottom: 4 }}>
+                        <CircularProgress size={24} />
+                    </Box>
+                )}
             </DialogContent>
         </InjectedDialog>
     )

packages/mask/src/web3/UI/ERC721ContractSelectPanel.tsx

@@ -1,15 +1,23 @@
-import { useState, useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { v4 as uuid } from 'uuid'
-import { ERC721ContractDetailed, useERC721ContractBalance, useAccount, isSameAddress } from '@masknet/web3-shared-evm'
+import {
+    ChainId,
+    ERC721ContractDetailed,
+    EthereumTokenType,
+    isSameAddress,
+    SocketState,
+    useAccount,
+    useCollections,
+    useERC721ContractBalance,
+} from '@masknet/web3-shared-evm'
 import classNames from 'classnames'
 import { EthereumAddress } from 'wallet.ts'
-import { Box, Typography, CircularProgress } from '@mui/material'
+import { Box, CircularProgress, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useRemoteControlledDialog } from '@masknet/shared'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { SelectNftContractDialogEvent, WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
-import { useNFTBalance } from '../../plugins/EVM/hooks/useNFTBalance'
 
 interface StyleProps {
     hasIcon: boolean
@@ -72,19 +80,32 @@ export function ERC721ContractSelectPanel(props: ERC721TokenSelectPanelProps) {
     const account = useAccount()
     const { classes } = useStyles({ hasIcon: Boolean(contract?.iconURL) })
     const { value: balanceFromChain, loading: loadingFromChain } = useERC721ContractBalance(contract?.address, account)
-    const { value: assets, loading: loadingBalanceFromNFTscan } = useNFTBalance(account, !contract)
+    const { data: assets, state: loadingBalanceFromRemoteState } = useCollections(account, ChainId.Mainnet, !!contract)
+
+    const convertedAssets = assets.map((x) => ({
+        contractDetailed: {
+            type: EthereumTokenType.ERC721,
+            address: x.address,
+            chainId: ChainId.Mainnet,
+            name: x.name,
+            symbol: x.symbol,
+            baseURI: x.iconURL,
+            iconURL: x.iconURL,
+        } as ERC721ContractDetailed,
+        balance: x.balance,
+    }))
 
     const { t } = useI18N()
 
-    const balanceFromNFTscan = assets
-        ? assets.find((asset) => isSameAddress(asset.contractDetailed.address, contract?.address))?.balance
+    const balanceFromRemote = convertedAssets
+        ? convertedAssets.find((asset) => isSameAddress(asset.contractDetailed.address, contract?.address))?.balance
         : undefined
 
-    const balance = balanceFromChain ? Number(balanceFromChain) : balanceFromNFTscan ?? 0
+    const balance = balanceFromChain ? Number(balanceFromChain) : balanceFromRemote ?? 0
 
     onBalanceChange(balance)
 
-    const loading = (loadingFromChain || loadingBalanceFromNFTscan) && !balance
+    const loading = (loadingFromChain || loadingBalanceFromRemoteState !== SocketState.done) && !balance
 
     // #region select contract
     const [id] = useState(uuid())

packages/web3-shared/evm/hooks/useCollectibles.ts

@@ -4,10 +4,10 @@ import { uniqWith } from 'lodash-unified'
 import { isSameAddress } from '../utils'
 import { useSocket } from './useSocket'
 
-export function useCollections(address: string, chainId: ChainId | null) {
+export function useCollections(address: string, chainId: ChainId | null, dependReady?: boolean) {
     const id = `mask.fetchNonFungibleCollectionAsset_${address}_${chainId}`
     const message = {
-        id,
+        id: dependReady === undefined ? id : dependReady ? id : '',
         method: 'mask.fetchNonFungibleCollectionAsset',
         params: {
             address: address,

packages/web3-shared/evm/hooks/useSocket.ts

@@ -28,7 +28,8 @@ export const useSocket = <T>(message: SocketMessage) => {
             if (!info.done) {
                 setState(SocketState.receiving)
             } else {
-                setState(SocketState.done)
+                // workaround for get data from cache
+                setTimeout(() => setState(SocketState.done), 0)
             }
             setError(info.error)
             if (!socket) return

packages/web3-shared/evm/types/index.ts

@@ -217,6 +217,8 @@ export interface ERC721TokenCollectionInfo {
     slug: string
     address: string
     addresses?: string[]
+    symbol: string
+    balance: number
 }
 
 // #endregion