fix(dashboard): if show one network only, select it by default

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

@@ -1,13 +1,13 @@
-import { memo, useEffect, useState } from 'react'
-import { useMatch } from 'react-router-dom'
-import { Box, Button, buttonClasses, styled, Typography } from '@mui/material'
-import { MaskColorVar } from '@masknet/theme'
 import { CardIcon, DownloadIcon, MaskWalletIcon, SendIcon, SwapIcon } from '@masknet/icons'
-import { MiniNetworkSelector } from '@masknet/shared'
 import type { Web3Plugin } from '@masknet/plugin-infra'
-import { useDashboardI18N } from '../../../../locales'
+import { MiniNetworkSelector } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { NetworkPluginID } from '@masknet/plugin-infra'
+import { MaskColorVar } from '@masknet/theme'
+import { Box, Button, buttonClasses, styled, Typography } from '@mui/material'
+import { noop } from 'lodash-unified'
+import { memo } from 'react'
+import { useDashboardI18N } from '../../../../locales'
+import { useIsMatched } from '../../hooks'
 
 const BalanceContainer = styled('div')(
     ({ theme }) => `
@@ -77,25 +77,19 @@ export interface BalanceCardProps {
     onReceive(): void
     networks: Web3Plugin.NetworkDescriptor[]
     selectedNetwork: Web3Plugin.NetworkDescriptor | null
-    pluginId: NetworkPluginID | null
+    showOperations: boolean
     onSelectNetwork(network: Web3Plugin.NetworkDescriptor | null): void
 }
 
 export const Balance = memo<BalanceCardProps>(
-    ({ balance, onSend, onBuy, onSwap, onReceive, onSelectNetwork, networks, selectedNetwork, pluginId }) => {
+    ({ balance, onSend, onBuy, onSwap, onReceive, onSelectNetwork, networks, selectedNetwork, showOperations }) => {
         const t = useDashboardI18N()
 
-        const isWalletTransferPath = useMatch(DashboardRoutes.WalletsTransfer)
-        const isWalletHistoryPath = useMatch(DashboardRoutes.WalletsHistory)
-
-        const [renderNetworks, setRenderNetworks] = useState<Web3Plugin.NetworkDescriptor[]>([])
-
-        useEffect(() => {
-            setRenderNetworks(networks.filter((x) => pluginId === x.networkSupporterPluginID && x.isMainnet))
-        }, [pluginId])
+        const isWalletTransferPath = useIsMatched(DashboardRoutes.WalletsTransfer)
+        const isWalletHistoryPath = useIsMatched(DashboardRoutes.WalletsHistory)
 
         const isDisabledNonCurrentChainSelect = !!isWalletTransferPath
-        const isHiddenAllButton = !!isWalletHistoryPath || !!isWalletTransferPath || renderNetworks.length <= 1
+        const isHiddenAllButton = isWalletHistoryPath || isWalletTransferPath || networks.length <= 1
 
         return (
             <BalanceContainer>
@@ -119,14 +113,14 @@ export const Balance = memo<BalanceCardProps>(
                             hideAllNetworkButton={isHiddenAllButton}
                             disabledNonCurrentNetwork={isDisabledNonCurrentChainSelect}
                             selectedNetwork={selectedNetwork}
-                            networks={renderNetworks}
+                            networks={networks}
                             onSelect={(network: Web3Plugin.NetworkDescriptor | null) =>
-                                renderNetworks.length <= 1 ? () => {} : onSelectNetwork(network)
+                                networks.length <= 1 ? noop : onSelectNetwork(network)
                             }
                         />
                     </BalanceDisplayContainer>
                 </Box>
-                {pluginId === NetworkPluginID.PLUGIN_EVM && (
+                {showOperations && (
                     <ButtonGroup>
                         <Button size="small" onClick={onSend} endIcon={<SendIcon fontSize="inherit" />}>
                             {t.wallets_balance_Send()}

packages/dashboard/src/pages/Wallets/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useAddressBook'
+export * from './useERC20TokensDetailed'
+export * from './useGasConfig'
+export * from './useIsMatched'
+export * from './useRecentTransactions'

packages/dashboard/src/pages/Wallets/hooks/useIsMatched.ts

@@ -0,0 +1,6 @@
+import { useMatch } from 'react-router-dom'
+
+export function useIsMatched(...args: Parameters<typeof useMatch>) {
+    const match = useMatch(...args)
+    return match !== null
+}

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

@@ -1,21 +1,6 @@
-import { useEffect, useMemo, useState } from 'react'
-import BigNumber from 'bignumber.js'
-import { useWeb3State } from '@masknet/web3-shared-evm'
-import { StartUp } from './StartUp'
-import { Assets } from './components/Assets'
-import { Route, Routes, useLocation, useMatch, useNavigate } from 'react-router-dom'
-import { Balance } from './components/Balance'
-import { Transfer } from './components/Transfer'
-import { History } from './components/History'
-import { PageFrame } from '../../components/PageFrame'
-import { ReceiveDialog } from './components/ReceiveDialog'
-import { DashboardRoutes } from '@masknet/shared-base'
-import { useRemoteControlledDialog } from '@masknet/shared'
-import { PluginMessages } from '../../API'
-import { WalletStateBar } from './components/WalletStateBar'
-import { useDashboardI18N } from '../../locales'
 import {
     getRegisteredWeb3Networks,
+    NetworkPluginID,
     useAccount,
     useChainId,
     useNetworkDescriptor,
@@ -25,7 +10,24 @@ import {
     useWeb3State as useWeb3PluginState,
     Web3Plugin,
 } from '@masknet/plugin-infra'
+import { useRemoteControlledDialog } from '@masknet/shared'
+import { DashboardRoutes } from '@masknet/shared-base'
+import { useWeb3State } from '@masknet/web3-shared-evm'
+import BigNumber from 'bignumber.js'
+import { useEffect, useMemo, useState } from 'react'
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 import { useAsync } from 'react-use'
+import { PluginMessages } from '../../API'
+import { PageFrame } from '../../components/PageFrame'
+import { useDashboardI18N } from '../../locales'
+import { Assets } from './components/Assets'
+import { Balance } from './components/Balance'
+import { History } from './components/History'
+import { ReceiveDialog } from './components/ReceiveDialog'
+import { Transfer } from './components/Transfer'
+import { WalletStateBar } from './components/WalletStateBar'
+import { useIsMatched } from './hooks'
+import { StartUp } from './StartUp'
 import { getTokenUSDValue } from './utils/getTokenUSDValue'
 
 function Wallets() {
@@ -40,9 +42,9 @@ function Wallets() {
     const network = useNetworkDescriptor()
 
     const { pathname } = useLocation()
-    const isWalletPath = useMatch(DashboardRoutes.Wallets)
-    const isWalletTransferPath = useMatch(DashboardRoutes.WalletsTransfer)
-    const isWalletHistoryPath = useMatch(DashboardRoutes.WalletsHistory)
+    const isWalletPath = useIsMatched(DashboardRoutes.Wallets)
+    const isWalletTransferPath = useIsMatched(DashboardRoutes.WalletsTransfer)
+    const isWalletHistoryPath = useIsMatched(DashboardRoutes.WalletsHistory)
 
     const [receiveOpen, setReceiveOpen] = useState(false)
 
@@ -60,29 +62,36 @@ function Wallets() {
         async () => Asset?.getFungibleAssets?.(account, portfolioProvider, network!),
         [account, Asset, portfolioProvider, network],
     )
+    const renderNetworks = useMemo(() => {
+        return networks.filter((x) => pluginId === x.networkSupporterPluginID && x.isMainnet)
+    }, [networks, pluginId])
+
+    // If show one network only, set it as default network
+    const defaultNetwork = useMemo(() => {
+        if (renderNetworks.length !== 1) return null
+        return renderNetworks[0]
+    }, [renderNetworks])
 
     useEffect(() => {
         if (isWalletPath) return
-        setSelectedNetwork(networkDescriptor ?? null)
-    }, [networkDescriptor])
+        setSelectedNetwork(networkDescriptor || defaultNetwork)
+    }, [isWalletPath, networkDescriptor, defaultNetwork])
 
     useEffect(() => {
         if (isWalletTransferPath || isWalletHistoryPath) {
-            setSelectedNetwork(networkDescriptor ?? null)
+            setSelectedNetwork(networkDescriptor || defaultNetwork)
             return
         }
-        setSelectedNetwork(null)
-    }, [pathname])
+        setSelectedNetwork(defaultNetwork)
+    }, [pathname, defaultNetwork])
 
     const balance = useMemo(() => {
-        return BigNumber.sum
-            .apply(
-                null,
-                detailedTokens
-                    ?.filter((x) => (selectedNetwork ? x.chainId === selectedNetwork.chainId : true))
-                    ?.map((y) => getTokenUSDValue(y.value)) ?? [],
-            )
-            .toNumber()
+        if (!detailedTokens || !detailedTokens.length) return 0
+
+        const values = detailedTokens
+            .filter((x) => (selectedNetwork ? x.chainId === selectedNetwork.chainId : true))
+            .map((y) => getTokenUSDValue(y.value))
+        return BigNumber.sum(...values).toNumber()
     }, [selectedNetwork, detailedTokens])
 
     const pateTitle = useMemo(() => {
@@ -107,10 +116,10 @@ function Wallets() {
                         onBuy={openBuyDialog}
                         onSwap={openSwapDialog}
                         onReceive={() => setReceiveOpen(true)}
-                        networks={networks}
+                        networks={renderNetworks}
                         selectedNetwork={selectedNetwork}
                         onSelectNetwork={setSelectedNetwork}
-                        pluginId={pluginId}
+                        showOperations={pluginId === NetworkPluginID.PLUGIN_EVM}
                     />
                     <Routes>
                         <Route path="/" element={<Assets network={selectedNetwork} />} />

packages/plugins/Solana/src/UI/Web3State/index.ts

@@ -10,7 +10,7 @@ import {
     resolveTransactionLinkOnExplorer,
 } from '@masknet/web3-shared-solana'
 import { getFungibleAssets, getNonFungibleAssets } from '../../apis'
-import { formatAddress } from '../../helpers'
+import { formatAddress, formatCurrency } from '../../helpers'
 import { getStorage, StorageDefaultValue } from '../../storage'
 
 function createSubscriptionFromPublicKey<T>(getter: (value: typeof StorageDefaultValue.publicKey) => T) {
@@ -50,7 +50,7 @@ export function createWeb3State(signal: AbortSignal): Web3Plugin.ObjectCapabilit
         Utils: {
             formatAddress,
             formatBalance: toFixed,
-            formatCurrency: (value) => toFixed(value),
+            formatCurrency,
 
             isChainIdValid: () => true,
 

packages/plugins/Solana/src/helpers/formatter.ts

@@ -1,4 +1,12 @@
+import { toFixed } from '@masknet/web3-shared-base'
+import type BigNumber from 'bignumber.js'
+
 export function formatAddress(address: string, size = 0) {
     if (size === 0 || size >= 22) return address
     return `${address.substr(0, 2 + size)}...${address.substr(-size)}`
 }
+
+export function formatCurrency(value: BigNumber.Value, sign = '') {
+    const digits = toFixed(value)
+    return `${sign}${digits}`
+}