fix: bugfix for token list sort

packages/dashboard/src/pages/Wallets/components/Assets/index.tsx

@@ -99,7 +99,7 @@ export const Assets = memo<TokenAssetsProps>(({ network }) => {
                         )}
                     </Box>
                     <TabPanel value={AssetTab.Token} key={AssetTab.Token} sx={{ minHeight: 'calc(100% - 48px)' }}>
-                        <FungibleTokenTable selectedChainId={network?.chainId ?? null} />
+                        <FungibleTokenTable selectedChainId={network?.chainId} />
                     </TabPanel>
                     <TabPanel
                         value={AssetTab.Collectibles}

packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx

@@ -3,7 +3,7 @@ import { useHoverDirty } from 'react-use'
 import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { Box, Button, Link, Tooltip, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { NetworkPluginID, NonFungibleAsset } from '@masknet/web3-shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { CollectiblePlaceholder } from '../CollectiblePlaceHolder'
 import { useDashboardI18N } from '../../../../locales'
 import { ChangeNetworkTip } from '../FungibleTokenTableRow/ChangeNetworkTip'
@@ -95,10 +95,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface CollectibleCardProps {
-    token: NonFungibleAsset<
-        Web3Helper.Definition[NetworkPluginID]['ChainId'],
-        Web3Helper.Definition[NetworkPluginID]['SchemaType']
-    >
+    token: Web3Helper.NonFungibleAssetScope<'all'>
     onSend(): void
     renderOrder: number
 }
@@ -108,7 +105,7 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ token, onSend, rend
     const chainId = useChainId()
     const { classes } = useStyles()
     const ref = useRef(null)
-    const { Others } = useWeb3State<'all'>()
+    const { Others } = useWeb3State()
     const [isHoveringTooltip, setHoveringTooltip] = useState(false)
     const isHovering = useHoverDirty(ref)
     const networkDescriptor = useNetworkDescriptor(undefined, token.contract?.chainId)

packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
@@ -7,11 +7,17 @@ import { useDashboardI18N } from '../../../../locales'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
 import { FungibleTokenTableRow } from '../FungibleTokenTableRow'
-import { formatBalance, FungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
 import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base'
-import { useCurrentWeb3NetworkPluginID, useFungibleAssets, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
-import { PluginMessages } from '../../../../API'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { CurrencyType, formatBalance, FungibleAsset, minus, NetworkPluginID, toZero } from '@masknet/web3-shared-base'
+import {
+    useCurrentWeb3NetworkPluginID,
+    useFungibleAssets,
+    useNativeToken,
+    useWeb3State,
+    Web3Helper,
+} from '@masknet/plugin-infra/web3'
+import { PluginMessages } from '../../../../API'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -56,24 +62,23 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface TokenTableProps {
-    selectedChainId: number | null
+    selectedChainId?: Web3Helper.ChainIdAll
 }
 
 export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) => {
     const navigate = useNavigate()
+    const { value: nativeToken } = useNativeToken<'all'>(NetworkPluginID.PLUGIN_EVM, {
+        chainId: selectedChainId,
+    })
     const {
         value: fungibleAssets = EMPTY_LIST,
         loading: fungibleAssetsLoading,
         error: fungibleAssetsError,
-    } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
+    } = useFungibleAssets<'all'>(NetworkPluginID.PLUGIN_EVM, undefined, {
+        chainId: selectedChainId,
+    })
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated)
 
-    useEffect(() => {
-        // PluginMessages.Wallet.events.erc20TokensUpdated.on(() =>
-        //     setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100),
-        // )
-    }, [])
-
     const onSwap = useCallback(
         (
             token: FungibleAsset<
@@ -107,11 +112,37 @@ export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) =>
         [],
     )
 
+    const dataSource = useMemo(() => {
+        const results = fungibleAssets.filter((x) => !selectedChainId || x.chainId === selectedChainId)
+
+        if (!selectedChainId)
+            return results.sort((a, z) => {
+                const aUSD = toZero(a.value?.[CurrencyType.USD] ?? '0')
+                const zUSD = toZero(z.value?.[CurrencyType.USD] ?? '0')
+
+                // token value
+                if (!aUSD.isEqualTo(zUSD)) return minus(zUSD, aUSD).isPositive() ? 1 : -1
+
+                return 0
+            })
+
+        if (!results.length && nativeToken) {
+            return [
+                {
+                    ...nativeToken,
+                    balance: '0',
+                },
+            ]
+        }
+
+        return results
+    }, [nativeToken, fungibleAssets, selectedChainId])
+
     return (
         <TokenTableUI
             isLoading={fungibleAssetsLoading}
             isEmpty={!fungibleAssetsLoading && (!!fungibleAssetsError || !fungibleAssets?.length)}
-            dataSource={fungibleAssets.filter((x) => !selectedChainId || x.chainId === selectedChainId)}
+            dataSource={dataSource}
             onSwap={onSwap}
             onSend={onSend}
         />

packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx

@@ -11,9 +11,9 @@ interface ChangeNetworkTipProps {
 export const ChangeNetworkTip = memo<ChangeNetworkTipProps>(({ chainId }) => {
     const t = useDashboardI18N()
 
-    const providerDescriptor = useProviderDescriptor<'all'>()
-    const networkDescriptors = useNetworkDescriptors<'all'>()
-    const Web3UI = useWeb3UI<'all'>()
+    const providerDescriptor = useProviderDescriptor()
+    const networkDescriptors = useNetworkDescriptors()
+    const Web3UI = useWeb3UI()
     const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {}
     const targetNetwork = networkDescriptors.find((x) => x.chainId === chainId)
 

packages/dashboard/src/pages/Wallets/components/HistoryTable/index.tsx

@@ -64,8 +64,8 @@ export const HistoryTable = memo<HistoryTableProps>(({ selectedChainId }) => {
             onPageChange={setPage}
             hasNextPage={false}
             isLoading={loading}
-            isEmpty={!value?.data?.length}
-            dataSource={(value?.data ?? EMPTY_LIST) as Array<Transaction<ChainId, SchemaType>>}
+            isEmpty={!value?.length}
+            dataSource={(value ?? EMPTY_LIST) as Array<Transaction<ChainId, SchemaType>>}
             selectedChainId={selectedChainId}
         />
     )

packages/dashboard/src/pages/Wallets/components/HistoryTableRow/index.tsx

@@ -78,7 +78,7 @@ export interface HistoryTableRowUIProps extends HistoryTableRowProps {
 export const HistoryTableRowUI = memo<HistoryTableRowUIProps>(
     ({ transaction, selectedChainId, formattedType, domain }) => {
         const { classes } = useStyles()
-        const { Others } = useWeb3State<'all'>()
+        const { Others } = useWeb3State()
         return (
             <TableRow className={classes.hover}>
                 <TableCell className={classes.cell} align="center" variant="body">

packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx

@@ -66,8 +66,8 @@ export const WalletStateBar = memo(() => {
 
     const account = useAccount()
     const wallet = useWallet()
-    const networkDescriptor = useNetworkDescriptor<'all'>()
-    const providerDescriptor = useProviderDescriptor<'all'>()
+    const networkDescriptor = useNetworkDescriptor()
+    const providerDescriptor = useProviderDescriptor()
     const pendingTransactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM, TransactionStatusType.NOT_DEPEND)
 
     const { openDialog: openWalletStatusDialog } = useRemoteControlledDialog(

packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx

@@ -31,11 +31,11 @@ export const useNetworkSelector = (pluginID?: NetworkPluginID) => {
     const { classes } = useStyles()
 
     const currentChainId = useChainId()
-    const providerDescriptor = useProviderDescriptor<'all'>()
-    const networkDescriptors = useNetworkDescriptors<'all'>()
-    const Web3UI = useWeb3UI<'all'>()
+    const providerDescriptor = useProviderDescriptor()
+    const networkDescriptors = useNetworkDescriptors()
+    const Web3UI = useWeb3UI()
     const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {}
-    const { Connection } = useWeb3State<'all'>(pluginID)
+    const { Connection } = useWeb3State(pluginID)
 
     const onConnect = useCallback(
         async (chainId: Web3Helper.ChainIdAll) => {

packages/dashboard/src/pages/Wallets/index.tsx

@@ -46,7 +46,7 @@ function Wallets() {
 
     const networks = getRegisteredWeb3Networks()
     const pluginId = useCurrentWeb3NetworkPluginID()
-    const networkDescriptor = useNetworkDescriptor<'all'>()
+    const networkDescriptor = useNetworkDescriptor()
     const [selectedNetwork, setSelectedNetwork] = useState<Web3Helper.NetworkDescriptorAll | null>(
         networkDescriptor ?? null,
     )

packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx

@@ -90,7 +90,7 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
         [TransactionStatusType.FAILED]: t('recent_transaction_failed'),
     }
 
-    const { Others, TransactionFormatter, TransactionWatcher } = useWeb3State<'all'>()
+    const { Others, TransactionFormatter, TransactionWatcher } = useWeb3State()
 
     const address = ((tx._tx as Transaction<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>).to || '').toLowerCase()
 

packages/mask/src/components/shared/WalletStatusBox/index.tsx

@@ -127,7 +127,7 @@ export function WalletStatusBox(props: WalletStatusBox) {
     const { value: balance = '0' } = useBalance()
     const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
     const networkDescriptor = useNetworkDescriptor()
-    const { Others } = useWeb3State<'all'>()
+    const { Others } = useWeb3State()
     const { value: domain } = useReverseAddress(undefined, account)
 
     // #region copy addr to clipboard

packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx

@@ -1,4 +1,4 @@
-import { useImageChecker } from '@masknet/plugin-infra/web3'
+import { useImageChecker } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import type { NonFungibleToken } from '@masknet/web3-shared-base'
 import { ChainId, createERC721Token, SchemaType } from '@masknet/web3-shared-evm'

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx

@@ -8,8 +8,8 @@ import { Box, Button, Skeleton, Typography } from '@mui/material'
 import { useI18N } from '../../../utils'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
-import { useAccount, useChainId, useImageChecker } from '@masknet/plugin-infra/web3'
-import { ReversedAddress } from '@masknet/shared'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { ReversedAddress, useImageChecker } from '@masknet/shared'
 import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
 import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 import { useCollectibles } from '../hooks/useCollectibles'

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx

@@ -65,7 +65,7 @@ export function ConnectionProgress(props: ConnectionProgressProps) {
 
     const { t } = useI18N()
 
-    const { Others } = useWeb3State<'all'>(pluginID)
+    const { Others } = useWeb3State(pluginID)
     const providerDescriptor = useProviderDescriptor(pluginID, providerType)
     const networkDescriptor = useNetworkDescriptor(pluginID, providerType)
     const classes = useStylesExtends(useStyles({ contentBackground: providerDescriptor?.backgroundGradient }), props)

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx

@@ -38,7 +38,7 @@ export function ConnectWalletDialog() {
     )
     // #endregion
 
-    const { Connection, Others } = useWeb3State<'all'>(pluginID)
+    const { Connection, Others } = useWeb3State(pluginID)
 
     const connection = useAsyncRetry<true>(async () => {
         if (!open) return true

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

@@ -147,7 +147,9 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
     }, [id, setDialog])
     // #endregion
 
-    const { value: assets = [], loading } = useNonFungibleCollections(NetworkPluginID.PLUGIN_EVM, chainId)
+    const { value: assets = [], loading } = useNonFungibleCollections(NetworkPluginID.PLUGIN_EVM, {
+        chainId,
+    })
 
     const contractList = assets
         .filter((x) => x.schema_name === WyvernSchemaName.ERC721)

packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx

@@ -53,15 +53,14 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
     const networks = getRegisteredWeb3Networks()
     const providers = getRegisteredWeb3Providers()
     const pluginID = useValueRef(pluginIDSettings)
-    const network = useNetworkDescriptor<'all'>()
+    const network = useNetworkDescriptor()
     const [undeterminedPluginID, setUndeterminedPluginID] = useState(pluginID)
     const [undeterminedNetworkID, setUndeterminedNetworkID] = useState(network?.ID)
 
-    const Web3State = useWeb3State<'all'>(undeterminedPluginID)
+    const Web3State = useWeb3State(undeterminedPluginID)
     const { Others, Provider } = Web3State
 
-    const { NetworkIconClickBait, ProviderIconClickBait } =
-        useWeb3UI<'all'>(undeterminedPluginID).SelectProviderDialog ?? {}
+    const { NetworkIconClickBait, ProviderIconClickBait } = useWeb3UI(undeterminedPluginID).SelectProviderDialog ?? {}
 
     const onNetworkIconClicked = useCallback((network: Web3Helper.NetworkDescriptorAll) => {
         setUndeterminedPluginID(network.networkSupporterPluginID)

packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx

@@ -27,7 +27,7 @@ export function TransactionSnackbar({ pluginID }: TransactionSnackbarProps) {
 
     const chainId = useChainId(pluginID)
     const [progress, setProgress] = useState<TransactionProgressEvent>()
-    const { Others, TransactionFormatter, TransactionWatcher } = useWeb3State<'all'>(progress?.pluginID)
+    const { Others, TransactionFormatter, TransactionWatcher } = useWeb3State(progress?.pluginID)
 
     useEffect(() => {
         const removeListener = TransactionWatcher?.emitter.on('progress', (id, status, transaction) => {

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

@@ -71,13 +71,13 @@ export function ChainBoundary<T extends NetworkPluginID>(props: ChainBoundaryPro
     const classes = useStylesExtends(useStyles(), props)
 
     const actualPluginID = useCurrentWeb3NetworkPluginID()
-    const { Others: actualOthers } = useWeb3State<'all'>(actualPluginID)
+    const { Others: actualOthers } = useWeb3State(actualPluginID)
     const actualChainId = useChainId(actualPluginID)
     const actualProviderType = useProviderType(actualPluginID)
     const actualChainName = actualOthers?.chainResolver.chainName(actualChainId)
 
-    const { Others: expectedOthers } = useWeb3State<'all'>(expectedPluginID)
-    const expectedConnection = useWeb3Connection<'all'>(expectedPluginID)
+    const { Others: expectedOthers } = useWeb3State(expectedPluginID)
+    const expectedConnection = useWeb3Connection(expectedPluginID)
     const expectedAllowTestnet = useAllowTestnet(expectedPluginID)
     const expectedAccount = useAccount(expectedPluginID)
     const expectedChainName = expectedOthers?.chainResolver.chainName(expectedChainId)