fix: align chain list (#12150)

* fix: enter to search

* fix: align chain list

packages/plugins/RedPacket/src/SiteAdaptor/views/SelectCollectibles.tsx

@@ -1,18 +1,18 @@
 import { Trans } from '@lingui/react/macro'
-import { AddCollectiblesModal, CollectionList, UserAssetsProvider } from '@masknet/shared'
+import { AddCollectiblesModal, CollectionList, useAssetsNetworks, UserAssetsProvider } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useChainContext, useNetworkContext, useWeb3Connection, useWeb3Hub } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { alpha, Box, Button, DialogActions } from '@mui/material'
+import { compact, uniqBy } from 'lodash-es'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { NFT_DEFAULT_CHAINS, NFT_RED_PACKET_MAX_SHARES } from '../../constants.js'
 import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { emitter } from '../emitter.js'
-import { compact, uniqBy } from 'lodash-es'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -48,6 +48,7 @@ export function SelectCollectibles() {
     const { pluginID } = useNetworkContext()
     const Web3 = useWeb3Connection(pluginID)
     const Hub = useWeb3Hub(pluginID)
+    const networks = useAssetsNetworks(pluginID)
     const { selectedNfts, setSelectedNfts, setCollection } = useRedPacket()
     const [pendingNfts, setPendingNfts] = useState<Web3Helper.NonFungibleAssetAll[]>(selectedNfts)
     const handleItemClick = useCallback((nft: Web3Helper.NonFungibleAssetAll) => {
@@ -71,10 +72,14 @@ export function SelectCollectibles() {
     const [pendingTokenCount, setPendingTokenCount] = useState(0)
     const [tokens, setTokens] = useState<Web3Helper.NonFungibleAssetAll[]>([])
     const handleAddCollectibles = useCallback(async () => {
+        const chainWhiteList = networks
+            .filter((x) => NFT_DEFAULT_CHAINS.includes(x.chainId as ChainId))
+            .map((x) => x.chainId)
         const results = await AddCollectiblesModal.openAndWaitForClose({
             pluginID,
             chainId: assetChainId || chainId,
             account,
+            chainWhiteList,
         })
         if (!results) return
         const [contract, tokenIds] = results
@@ -108,7 +113,7 @@ export function SelectCollectibles() {
         setTokens((originalTokens) => {
             return uniqBy([...originalTokens, ...tokens], (x) => `${x.contract?.address}.${x.tokenId}`)
         })
-    }, [pluginID, assetChainId, chainId, account])
+    }, [pluginID, assetChainId, chainId, account, networks])
 
     const handleSelect = useCallback((assets: Web3Helper.NonFungibleAssetAll[]) => {
         setPendingNfts(assets.length > NFT_RED_PACKET_MAX_SHARES ? assets.slice(0, NFT_RED_PACKET_MAX_SHARES) : assets)

packages/shared/src/UI/components/AssetsManagement/ChainRuntimeProvider.tsx

@@ -1,22 +1,21 @@
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { CHAIN_DESCRIPTORS, ChainId, type NetworkType, type SchemaType } from '@masknet/web3-shared-evm'
+import type { ReasonableNetwork } from '@masknet/web3-shared-base'
+import { type ChainId } from '@masknet/web3-shared-evm'
 import { type ChainId as FlowChainId } from '@masknet/web3-shared-flow'
-import { noop, sortBy } from 'lodash-es'
 import { type ChainId as SolanaChainId } from '@masknet/web3-shared-solana'
-import { useNetworks } from '@masknet/web3-hooks-base'
+import { noop } from 'lodash-es'
 import {
     createContext,
     memo,
+    useContext,
     useMemo,
-    type PropsWithChildren,
     useState,
-    type SetStateAction,
     type Dispatch,
-    useContext,
+    type PropsWithChildren,
+    type SetStateAction,
 } from 'react'
-import type { ReasonableNetwork } from '@masknet/web3-shared-base'
-import { SimpleHashSupportedChains } from '../../../constants.js'
+import { useAssetsNetworks } from './useAssetsNetworks.js'
 
 interface ChainRuntimeOptions {
     pluginID: NetworkPluginID
@@ -46,21 +45,13 @@ export const ChainRuntimeProvider = memo<PropsWithChildren<ChainRuntimeProviderP
     children,
 }) {
     const [chainId, setChainId] = useState<Web3Helper.ChainIdAll>()
-    const allNetworks = useNetworks(pluginID, true)
+    const assetsNetworks = useAssetsNetworks(pluginID)
 
     const networks = useMemo(() => {
-        const supported = SimpleHashSupportedChains[pluginID]
-        const networks = allNetworks.filter(
-            (x) => (x.network === 'mainnet' || x.isCustomized) && supported.includes(x.chainId),
-        )
-        // hard-coded for Zora
-        if (pluginID === NetworkPluginID.PLUGIN_EVM) {
-            const zora = CHAIN_DESCRIPTORS.find((x) => x.chainId === ChainId.Zora)
-            if (zora) networks.push(zora as ReasonableNetwork<ChainId, SchemaType, NetworkType>)
-        }
-        const list = sortBy(networks, (x) => supported.indexOf(x.chainId))
-        return chainWhiteList?.length ? list.filter((x) => chainWhiteList.includes(x.chainId as ChainId)) : list
-    }, [allNetworks, pluginID, chainWhiteList])
+        return chainWhiteList?.length ?
+                assetsNetworks.filter((x) => chainWhiteList.includes(x.chainId as ChainId))
+            :   assetsNetworks
+    }, [chainWhiteList, assetsNetworks])
 
     const currentChainId = chainId ?? defaultChainId ?? (networks.length === 1 ? networks[0].chainId : chainId)
 

packages/shared/src/UI/components/AssetsManagement/CollectionHeader.tsx

@@ -157,13 +157,13 @@ export const CollectionHeader = memo(function CollectionHeader({
                             autoFocus
                             fullWidth
                             value={pendingKeyword}
-                            onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
-                                if (event.key !== 'Enter') return
-                                setSearchKeyword(event.currentTarget.value)
-                            }}
                             onChange={(event) => setPendingKeyword(event.target.value)}
                             InputProps={{
                                 startAdornment: <Icons.Search size={16} />,
+                                onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {
+                                    if (event.key !== 'Enter') return
+                                    setSearchKeyword(pendingKeyword)
+                                },
                             }}
                         />
                         <Button

packages/shared/src/UI/components/AssetsManagement/index.ts

@@ -2,3 +2,4 @@ export type * from './types.js'
 export * from './CollectionList.js'
 export * from './UserAssetsContext.js'
 export * from './CollectibleCard.js'
+export * from './useAssetsNetworks.js'

packages/shared/src/UI/components/AssetsManagement/useAssetsNetworks.ts

@@ -0,0 +1,26 @@
+import { SimpleHashSupportedChains } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { useNetworks } from '@masknet/web3-hooks-base'
+import type { ReasonableNetwork } from '@masknet/web3-shared-base'
+import { CHAIN_DESCRIPTORS, ChainId, type SchemaType, type NetworkType } from '@masknet/web3-shared-evm'
+import { sortBy } from 'lodash-es'
+import { useMemo } from 'react'
+
+export function useAssetsNetworks(pluginID: NetworkPluginID) {
+    const allNetworks = useNetworks(pluginID, true)
+    const networks = useMemo(() => {
+        const supported = SimpleHashSupportedChains[pluginID]
+        const networks = allNetworks.filter(
+            (x) => (x.network === 'mainnet' || x.isCustomized) && supported.includes(x.chainId),
+        )
+        // hard-coded for Zora
+        if (pluginID === NetworkPluginID.PLUGIN_EVM) {
+            const zora = CHAIN_DESCRIPTORS.find((x) => x.chainId === ChainId.Zora)
+            if (zora) networks.push(zora as ReasonableNetwork<ChainId, SchemaType, NetworkType>)
+        }
+        const list = sortBy(networks, (x) => supported.indexOf(x.chainId))
+        return list
+    }, [allNetworks, pluginID])
+
+    return networks
+}

packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx

@@ -2,10 +2,12 @@ import { Trans } from '@lingui/react/macro'
 import { type NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useNetworks } from '@masknet/web3-hooks-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import { DialogContent } from '@mui/material'
-import { memo, useState } from 'react'
+import { memo, useMemo, useState } from 'react'
 import { AddCollectibles, SelectNetworkSidebar, type AddCollectiblesProps } from '../../components/index.js'
 import { InjectedDialog } from '../../contexts/components/index.js'
+import type { Web3Helper } from '@masknet/web3-helpers'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -28,19 +30,25 @@ const useStyles = makeStyles()((theme) => ({
 
 interface AddCollectiblesDialogProps<T extends NetworkPluginID = NetworkPluginID> extends AddCollectiblesProps<T> {
     open: boolean
+    chainWhiteList?: Web3Helper.ChainIdAll[]
 }
 
 export const AddCollectiblesDialog = memo(function AddCollectiblesDialog({
     open,
     pluginID,
     chainId: defaultChainId,
     account,
+    chainWhiteList,
     onAdd,
 }: AddCollectiblesDialogProps) {
     const { classes } = useStyles()
 
     const [chainId, setChainId] = useState(defaultChainId)
     const allNetworks = useNetworks(pluginID, true)
+    const networks = useMemo(() => {
+        if (!chainWhiteList?.length) return allNetworks
+        return allNetworks.filter((x) => chainWhiteList.includes(x.chainId as ChainId))
+    }, [allNetworks, chainWhiteList])
 
     return (
         <InjectedDialog
@@ -54,7 +62,7 @@ export const AddCollectiblesDialog = memo(function AddCollectiblesDialog({
                     chainId={chainId}
                     onChainChange={setChainId}
                     pluginID={pluginID}
-                    networks={allNetworks}
+                    networks={networks}
                     hideAllButton
                 />
                 <AddCollectibles

packages/shared/src/UI/modals/AddCollectiblesModal/index.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import { NetworkPluginID, type SingletonModalProps } from '@masknet/shared-base'
+import { EMPTY_LIST, NetworkPluginID, type SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import type { NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import { useState } from 'react'
 import { AddCollectiblesDialog } from './AddCollectiblesDialog.js'
 
 export interface AddCollectiblesModalOpenProps {
@@ -13,6 +13,7 @@ export interface AddCollectiblesModalOpenProps {
      * For example, in PFP, we can add collectibles from verified wallets if no wallet connected.
      */
     account?: string
+    chainWhiteList?: Web3Helper.ChainIdAll[]
 }
 
 export type AddCollectiblesModalCloseProps =
@@ -25,12 +26,14 @@ export function AddCollectiblesModal({
     const [pluginID, setPluginID] = useState<NetworkPluginID>(NetworkPluginID.PLUGIN_EVM)
     const [chainId, setChainId] = useState<Web3Helper.ChainIdAll>()
     const [account, setAccount] = useState<string>()
+    const [chainWhiteList, setChainWhiteList] = useState<Web3Helper.ChainIdAll[]>(EMPTY_LIST)
 
     const [open, dispatch] = useSingletonModal(ref, {
         onOpen(props) {
             setPluginID(props.pluginID ?? NetworkPluginID.PLUGIN_EVM)
             setChainId(props.chainId)
             setAccount(props.account)
+            setChainWhiteList(props.chainWhiteList ?? EMPTY_LIST)
         },
     })
 
@@ -42,6 +45,7 @@ export function AddCollectiblesModal({
             pluginID={pluginID}
             account={account}
             chainId={chainId}
+            chainWhiteList={chainWhiteList}
         />
     )
 }