fix: mf-4979 setting jump link (#10427)

* fix: mf-4979 setting jump link * fix: mf-4916 sort wallets * chore: reply code review * chore: reply code review * fix: sort wallets * fix: no edit wallet at contacts * chore: code style * chore: type error * chore: type error
DimensionDev · Aug 16, 2023 · c856421 · c856421
1 parent a9c8b9a
commit c856421
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 70 deletions.
diff --git a/packages/dashboard/src/pages/CreateMaskWallet/AddDeriveWallet/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
@@ -6,7 +6,7 @@ import { Box } from '@mui/system'
 import { Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { WalletServiceRef } from '@masknet/plugin-infra/dom'
-import { DashboardRoutes, EMPTY_LIST, NetworkPluginID, generateNewWalletName } from '@masknet/shared-base'
+import { DashboardRoutes, EMPTY_LIST, generateNewWalletName } from '@masknet/shared-base'
 import { HD_PATH_WITHOUT_INDEX_ETHEREUM, currySameAddress } from '@masknet/web3-shared-base'
 import { useWallets } from '@masknet/web3-hooks-base'
 import { DeriveWalletTable } from '@masknet/shared'
@@ -76,7 +76,7 @@ const AddDeriveWallet = memo(function AddDeriveWallet() {
     const indexes = useRef(new Set<number>())
     const { handlePasswordAndWallets } = ResetWalletContext.useContainer()
 
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
 
     const handleRecovery = useCallback(() => {
         navigate(DashboardRoutes.CreateMaskWalletMnemonic)

diff --git a/packages/mask/src/extension/popups/components/Navigator/index.tsx b/packages/mask/src/extension/popups/components/Navigator/index.tsx
@@ -1,14 +1,15 @@
 // ! This file is used during SSR. DO NOT import new files that does not work in SSR
 import urlcat from 'urlcat'
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { NavLink, type LinkProps } from 'react-router-dom'
 import { BottomNavigation, BottomNavigationAction, Box, type BoxProps } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
-import { PopupRoutes } from '@masknet/shared-base'
+import { DashboardRoutes, PopupRoutes } from '@masknet/shared-base'
 import { useMessages, useWallet } from '@masknet/web3-hooks-base'
 import { useHasPassword } from '../../hook/useHasPassword.js'
 import { useWalletLockStatus } from '../../pages/Wallet/hooks/useWalletLockStatus.js'
+import Services from '../../../service.js'
 
 const useStyle = makeStyles()((theme) => ({
     navigation: {
@@ -68,6 +69,17 @@ export const Navigator = memo(function Navigator({ className, ...rest }: BoxProp
         return PopupRoutes.Wallet
     }, [wallet, walletPageLoading, isLocked, hasPassword, messages])
 
+    const onOpenDashboardSettings = useCallback(async () => {
+        await browser.tabs.create({
+            active: true,
+            url: browser.runtime.getURL(`/dashboard.html#${DashboardRoutes.Settings}`),
+        })
+        if (navigator.userAgent.includes('Firefox')) {
+            window.close()
+        }
+        await Services.Helper.removePopupWindow()
+    }, [])
+
     return (
         <Box className={cx(classes.container, className)} {...rest}>
             <BottomNavigation classes={{ root: classes.navigation }}>
@@ -92,13 +104,13 @@ export const Navigator = memo(function Navigator({ className, ...rest }: BoxProp
                         className={classes.iconOnly}
                     />
                 </BottomNavLink>
-                <BottomNavLink to={PopupRoutes.Settings}>
-                    <BottomNavigationAction
-                        showLabel={false}
-                        icon={<Icons.Settings2 size={28} />}
-                        className={classes.iconOnly}
-                    />
-                </BottomNavLink>
+
+                <BottomNavigationAction
+                    onClick={onOpenDashboardSettings}
+                    showLabel={false}
+                    icon={<Icons.Settings2 size={28} />}
+                    className={classes.iconOnly}
+                />
             </BottomNavigation>
         </Box>
     )

diff --git a/packages/mask/src/extension/popups/hook/useContactsContext.ts b/packages/mask/src/extension/popups/hook/useContactsContext.ts
@@ -17,7 +17,7 @@ function useContactsContext({ defaultName, defaultAddress }: ContextOptions = {
     const { t } = useI18N()
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const contacts = useContacts()
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const [userInput, setUserInput] = useState(defaultName || defaultAddress)
     const { value: registeredAddress, error: resolveDomainError } = useLookupAddress(
         NetworkPluginID.PLUGIN_EVM,

diff --git a/packages/mask/src/extension/popups/hook/useVerifiedWallets.ts b/packages/mask/src/extension/popups/hook/useVerifiedWallets.ts
@@ -5,7 +5,7 @@ import { useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { isGreaterThan, isSameAddress, resolveNextIDPlatformWalletName } from '@masknet/web3-shared-base'
 
 export function useVerifiedWallets(proofs?: BindingProof[]) {
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const { NameService } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     return useQuery({

diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectWallet/index.tsx
@@ -103,7 +103,7 @@ const ConnectWalletPage = memo(function ConnectWalletPage() {
     const { pluginID } = useNetworkContext<NetworkPluginID.PLUGIN_EVM>()
 
     const { providerType, chainId, account } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
-    const wallets = useWallets(pluginID)
+    const wallets = useWallets()
 
     const providerDescriptor = useProviderDescriptor(pluginID, providerType)
     const { data: domain } = useReverseAddress(pluginID, account)

diff --git a/packages/mask/src/extension/popups/pages/Personas/Logout/index.tsx b/packages/mask/src/extension/popups/pages/Personas/Logout/index.tsx
@@ -9,13 +9,7 @@ import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme
 import { PersonaContext } from '@masknet/shared'
 import { Box, Button, Link, Typography, useTheme } from '@mui/material'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import {
-    PopupRoutes,
-    type PersonaInformation,
-    NetworkPluginID,
-    type Wallet,
-    PopupModalRoutes,
-} from '@masknet/shared-base'
+import { PopupRoutes, type PersonaInformation, type Wallet, PopupModalRoutes } from '@masknet/shared-base'
 import { useWallet, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { ExplorerResolver, Providers, Web3 } from '@masknet/web3-providers'
 import { type ChainId, ProviderType, formatEthereumAddress } from '@masknet/web3-shared-evm'
@@ -59,7 +53,7 @@ const Logout = memo(() => {
     const { currentPersona } = PersonaContext.useContainer()
     const navigate = useNavigate()
     const wallet = useWallet()
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const { Provider } = useWeb3State()
     const { smartPayChainId } = useContainer(PopupContext)
     const { hasPassword, loading: hasPasswordLoading } = useHasPassword()

diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx
@@ -6,7 +6,7 @@ import { LoadingButton } from '@mui/lab'
 import { TableContainer, TablePagination, tablePaginationClasses, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { ProviderType } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
+import { PopupRoutes } from '@masknet/shared-base'
 import { currySameAddress, HD_PATH_WITHOUT_INDEX_ETHEREUM } from '@masknet/web3-shared-base'
 import { useNativeToken, useWallets } from '@masknet/web3-hooks-base'
 import { Web3 } from '@masknet/web3-providers'
@@ -65,7 +65,7 @@ const AddDeriveWallet = memo(() => {
           }
         | undefined
     const { classes } = useStyles()
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const walletName = new URLSearchParams(location.search).get('name')
     const { mnemonic } = state || {}
 

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ContactList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ContactList/index.tsx
@@ -1,8 +1,8 @@
-import { memo, useCallback, useMemo, useContext, useEffect } from 'react'
+import { memo, useCallback, useContext, useEffect } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import urlcat from 'urlcat'
 import { Box, Link, List, ListItem, MenuItem, Typography, useTheme, type ListItemProps } from '@mui/material'
-import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
+import { type NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext, useWallets } from '@masknet/web3-hooks-base'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
@@ -147,7 +147,7 @@ const ContactListUI = memo(function ContactListUI() {
         | undefined
     const isManage = state?.type === 'manage'
     const { classes } = useStyles({ isManage })
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const { userInput, address, contacts, inputValidationMessage } = ContactsContext.useContainer()
     const [params] = useSearchParams()
 
@@ -277,22 +277,18 @@ function ContactListItem({ address, name, contactType, onSelectContact, ...rest
         })
     }, [address, name, t])
 
-    const menuOptions = useMemo(() => {
-        const options = [
-            {
-                name: t('edit'),
-                icon: <Icons.Edit2 size={20} color={theme.palette.maskColor.second} />,
-                handler: editContact,
-            },
-        ]
-        if (contactType === ContactType.Recipient)
-            options.push({
-                name: t('delete'),
-                icon: <Icons.Decrease size={20} color={theme.palette.maskColor.second} />,
-                handler: deleteContact,
-            })
-        return options
-    }, [t, contactType, address, name])
+    const menuOptions = [
+        {
+            name: t('edit'),
+            icon: <Icons.Edit2 size={20} color={theme.palette.maskColor.second} />,
+            handler: editContact,
+        },
+        {
+            name: t('delete'),
+            icon: <Icons.Decrease size={20} color={theme.palette.maskColor.second} />,
+            handler: deleteContact,
+        },
+    ]
 
     const [menu, openMenu, _, isOpenMenu] = useMenuConfig(
         menuOptions.map((option, index) => (
@@ -336,14 +332,16 @@ function ContactListItem({ address, name, contactType, onSelectContact, ...rest
                     </Typography>
                 </div>
             </div>
-            <Icons.More
-                size={24}
-                className={classes.iconMore}
-                onClick={(event) => {
-                    event.stopPropagation()
-                    openMenu(event)
-                }}
-            />
+            {contactType === ContactType.Recipient ? (
+                <Icons.More
+                    size={24}
+                    className={classes.iconMore}
+                    onClick={(event) => {
+                        event.stopPropagation()
+                        openMenu(event)
+                    }}
+                />
+            ) : null}
             {menu}
         </ListItem>
     )

diff --git a/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx
@@ -7,7 +7,7 @@ import { Box, Button, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
 import { ProviderType, formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
+import { PopupRoutes } from '@masknet/shared-base'
 import { ManageWallet } from '@masknet/shared'
 import { useWallet, useWallets } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
@@ -83,7 +83,7 @@ const DeleteWallet = memo(() => {
     const currentWallet = useWallet()
     const wallet = selectedWallet ?? currentWallet
 
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const { classes } = useStyles()
     const [password, setPassword] = useState('')
     const [errorMessage, setErrorMessage] = useState('')

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
@@ -60,7 +60,7 @@ const SelectWallet = memo(function SelectWallet() {
 
     const { value: localWallets = [] } = useAsync(async () => Services.Wallet.getWallets(), [])
 
-    const allWallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const allWallets = useWallets()
 
     const wallets = useMemo(() => {
         if (!allWallets.length && localWallets.length) return localWallets

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -130,7 +130,7 @@ const SetPaymentPassword = memo(function SetPaymentPassword() {
     const { t } = useI18N()
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const [params] = useSearchParams()
     const [isCreating, setIsCreating] = useState(!!params.get('isCreating'))
     const { showSnackbar } = usePopupCustomSnackbar()

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
@@ -49,7 +49,7 @@ const SwitchWallet = memo(function SwitchWallet() {
     const { closeModal } = useActionModal()
     const { smartPayChainId } = PopupContext.useContainer()
     const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const handleClickCreate = useCallback(async () => {
         if (!wallets.filter((x) => x.hasDerivationPath).length) {

diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts
@@ -3,12 +3,12 @@ import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useWallets } from '@masknet/web3-hooks-base'
-import { NetworkPluginID, generateNewWalletName } from '@masknet/shared-base'
+import { generateNewWalletName } from '@masknet/shared-base'
 import { useI18N } from '../../../../../utils/i18n-next-ui.js'
 
 export function useSetWalletNameForm(defaultName?: string) {
     const { t } = useI18N()
-    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets()
 
     const schema = useMemo(() => {
         return zod.object({

diff --git a/packages/plugins/Avatar/src/Application/NFTListDialog.tsx b/packages/plugins/Avatar/src/Application/NFTListDialog.tsx
@@ -82,7 +82,7 @@ export function NFTListDialog() {
     const { pluginID } = useNetworkContext()
     const { account, chainId, setChainId, setAccount } = useChainContext()
     const [assetChainId, setAssetChainId] = useState<ChainId>()
-    const wallets = useWallets(pluginID)
+    const wallets = useWallets()
     const [selectedPluginId, setSelectedPluginId] = useState(pluginID ?? NetworkPluginID.PLUGIN_EVM)
     const [selectedToken, setSelectedToken] = useState<Web3Helper.NonFungibleTokenAll | undefined>(tokenInfo)
     const [disabled, setDisabled] = useState(false)

diff --git a/packages/web3-hooks/base/src/useAccountName.ts b/packages/web3-hooks/base/src/useAccountName.ts
@@ -8,7 +8,7 @@ import { useWeb3Others } from './useWeb3Others.js'
 export function useAccountName<T extends NetworkPluginID>(pluginID?: T, expectedAccount?: string) {
     const { account, providerType } = useChainContext<T>({ account: expectedAccount })
     const Others = useWeb3Others(pluginID)
-    const wallets = useWallets(pluginID)
+    const wallets = useWallets()
 
     return useMemo(() => {
         // if the currently selected account is a mask wallet, then use the wallet name as the account name

diff --git a/packages/web3-hooks/base/src/useWallet.ts b/packages/web3-hooks/base/src/useWallet.ts
@@ -15,7 +15,7 @@ export function useWallet<T extends NetworkPluginID>(
     providerType?: Web3Helper.Definition[T]['ProviderType'],
 ) {
     const { account } = useChainContext()
-    const wallets = useWallets(pluginID, providerType)
+    const wallets = useWallets()
 
     return useMemo(() => {
         return account ? wallets.find((x) => isSameAddress?.(x.address, account)) ?? null : null

diff --git a/packages/web3-hooks/base/src/useWallets.ts b/packages/web3-hooks/base/src/useWallets.ts
@@ -1,21 +1,28 @@
 import { useSubscription } from 'use-subscription'
-import { EMPTY_ARRAY, type NetworkPluginID } from '@masknet/shared-base'
+import { EMPTY_ARRAY } from '@masknet/shared-base'
 import { Providers } from '@masknet/web3-providers'
-import type { Web3Helper } from '@masknet/web3-helpers'
 import { ProviderType } from '@masknet/web3-shared-evm'
 
-export function useWallets<T extends NetworkPluginID>(
-    pluginID?: T,
-    providerType?: Web3Helper.Definition[T]['ProviderType'],
-) {
+export function useWallets() {
     // We got stored Mask wallets only.
     const wallets = useSubscription(Providers[ProviderType.MaskWallet].subscription.wallets ?? EMPTY_ARRAY)
     return wallets.sort((a, b) => {
+        if (a.owner && !b.owner) return 1
         if (a.createdAt.getTime() - b.createdAt.getTime() > 10000) {
-            return 1
-        } else if (a.createdAt.getTime() - b.createdAt.getTime() < 10000) {
             return -1
+        } else if (b.createdAt.getTime() - a.createdAt.getTime() > 10000) {
+            return 1
+        }
+        const numA = a.name.split('Wallet ')[1]
+        const numB = b.name.split('Wallet ')[1]
+        try {
+            if (!Number.isNaN(numA) && !Number.isNaN(numB)) {
+                return Number(numA) > Number(numB) ? 1 : -1
+            } else {
+                return numB.length - numA.length
+            }
+        } catch {
+            return 0
         }
-        return a.name > b.name ? 1 : -1
     })
 }