fix(wallet): mf-6749 fix rename handler and wallet name display

packages/mask/popups/modals/WalletRenameModal/index.tsx

@@ -22,7 +22,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
     const [error, setError] = useState<ReactNode>()
     const contacts = useContacts()
 
-    const [{ loading }, handleClick] = useAsyncFn(async () => {
+    const [{ loading }, handleConfirm] = useAsyncFn(async () => {
         if (!name || !wallet) return
         const _name = name.trim()
         if (_name.length > 18 || _name.length < 3) {
@@ -92,7 +92,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
             <ActionButton
                 loading={loading}
                 disabled={loading || !name.length || !!error}
-                onClick={handleClick}
+                onClick={handleConfirm}
                 sx={{ marginTop: '16px' }}>
                 <Trans>Confirm</Trans>
             </ActionButton>

packages/mask/popups/pages/Wallet/SwitchWallet/index.tsx

@@ -1,3 +1,5 @@
+import Services from '#services'
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { DashboardRoutes, ECKeyIdentifier, NetworkPluginID, PopupRoutes, type Wallet } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
@@ -8,10 +10,8 @@ import { ProviderType } from '@masknet/web3-shared-evm'
 import { Box, List, Typography } from '@mui/material'
 import { memo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
-import Services from '#services'
 import { ActionModal, useActionModal } from '../../../components/index.js'
 import { WalletItem } from '../../../components/WalletItem/index.js'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -49,24 +49,6 @@ const SwitchWallet = memo(function SwitchWallet() {
     const wallets = useWallets()
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
-    const handleClickCreate = useCallback(async () => {
-        if (!wallets.some((x) => !x.configurable)) {
-            const hasPaymentPassword = await Services.Wallet.hasPassword()
-            await browser.tabs.create({
-                active: true,
-                url: browser.runtime.getURL(
-                    `/dashboard.html#${
-                        hasPaymentPassword ?
-                            DashboardRoutes.CreateMaskWalletMnemonic
-                        :   DashboardRoutes.CreateMaskWalletForm
-                    }`,
-                ),
-            })
-        } else {
-            navigate(PopupRoutes.CreateWallet)
-        }
-    }, [wallets])
-
     const handleImport = useCallback(async () => {
         await browser.tabs.create({
             active: true,
@@ -107,7 +89,9 @@ const SwitchWallet = memo(function SwitchWallet() {
                 fullWidth
                 size="small"
                 variant="outlined"
-                onClick={handleClickCreate}>
+                onClick={() => {
+                    navigate(PopupRoutes.CreateWallet)
+                }}>
                 <Icons.Wallet size={20} color={theme.palette.maskColor.second} />
                 <Typography className={classes.actionLabel} component="span">
                     <Trans>Add Wallet</Trans>

packages/mask/popups/pages/Wallet/WalletSettings/Rename.tsx

@@ -1,14 +1,14 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
+import { PersistentStorages } from '@masknet/shared-base'
 import { useWallet } from '@masknet/web3-hooks-base'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { Box, ListItem, Typography } from '@mui/material'
-import { useStyles } from './useStyles.js'
-import { WalletRenameModal } from '../../../modals/modal-controls.js'
-import { Trans } from '@lingui/react/macro'
 import { useWallets } from '@privy-io/react-auth'
 import { useMemo } from 'react'
-import { isSameAddress } from '@masknet/web3-shared-base'
 import { useSubscription } from 'use-subscription'
-import { PersistentStorages } from '@masknet/shared-base'
+import { WalletRenameModal } from '../../../modals/modal-controls.js'
+import { useStyles } from './useStyles.js'
 
 export function Rename() {
     const wallet = useWallet()
@@ -22,13 +22,14 @@ export function Rename() {
 
     if (!wallet) return null
 
+    const walletName = wallet.name || (isFireflyWallet ? fireflyAccount.displayName : wallet.name)
     return (
         <ListItem
             className={classes.item}
             onClick={() =>
                 WalletRenameModal.open({
                     wallet,
-                    walletName: wallet.name || (isFireflyWallet ? fireflyAccount.displayName : wallet.name),
+                    walletName,
                     title: <Trans>Rename</Trans>,
                 })
             }>
@@ -39,9 +40,7 @@ export function Rename() {
                 </Typography>
             </Box>
             <Box className={classes.itemBox}>
-                <Typography className={classes.itemText}>
-                    {isFireflyWallet ? fireflyAccount.displayName : wallet.name}
-                </Typography>
+                <Typography className={classes.itemText}>{walletName}</Typography>
                 <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>

packages/mask/popups/pages/Wallet/WalletSettings/index.tsx

@@ -1,13 +1,16 @@
+import { Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST, PersistentStorages, PopupModalRoutes } from '@masknet/shared-base'
 import { ActionButton } from '@masknet/theme'
 import { useWallet, useWallets } from '@masknet/web3-hooks-base'
-import { useWallets as usePrivyWallets } from '@privy-io/react-auth'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { Box, List, Typography } from '@mui/material'
+import { useWallets as usePrivyWallets } from '@privy-io/react-auth'
 import { first } from 'lodash-es'
 import { memo, useCallback, useMemo } from 'react'
+import { useSubscription } from 'use-subscription'
 import { useModalNavigate } from '../../../components/index.js'
+import { WalletAvatar } from '../../../components/WalletAvatar/index.js'
 import { useTitle } from '../../../hooks/index.js'
 import { WalletRemoveModal } from '../../../modals/modal-controls.js'
 import { AutoLock } from './AutoLock.js'
@@ -16,14 +19,11 @@ import { ChangeNetwork } from './ChangeNetwork.js'
 import { ChangePaymentPassword } from './ChangePaymentPassword.js'
 import { ConnectedOrigins } from './ConnectedOrigins.js'
 import { Contacts } from './Contacts.js'
+import { DisablePermit } from './DisablePermit.js'
+import { HidingScamTx } from './HidingScamTx.js'
 import { Rename } from './Rename.js'
 import { ShowPrivateKey } from './ShowPrivateKey.js'
 import { useStyles } from './useStyles.js'
-import { HidingScamTx } from './HidingScamTx.js'
-import { Trans, useLingui } from '@lingui/react/macro'
-import { DisablePermit } from './DisablePermit.js'
-import { useSubscription } from 'use-subscription'
-import { WalletAvatar } from '../../../components/WalletAvatar/index.js'
 
 function getPathIndex(path?: string) {
     const rawIndex = path?.split('/').pop()
@@ -66,6 +66,7 @@ export const Component = memo(function WalletSettings() {
     }, [allWallets, wallet?.mnemonicId])
 
     if (!wallet) return null
+    const walletName = wallet.name || (isFireflyWallet ? fireflyAccount.displayName : wallet.name)
 
     // The wallet has derivationPath is also the one with minimum derivation path
     const isTheFirstWallet = wallet.mnemonicId ? isSameAddress(first(siblingWallets)?.address, wallet.address) : false
@@ -76,9 +77,7 @@ export const Component = memo(function WalletSettings() {
                 <Box className={classes.primaryItemBox}>
                     <WalletAvatar size={24} address={wallet.address} />
                     <div className={classes.walletInfo}>
-                        <Typography className={classes.primaryItemText}>
-                            {isFireflyWallet ? fireflyAccount.displayName : wallet.name}
-                        </Typography>
+                        <Typography className={classes.primaryItemText}>{walletName}</Typography>
                         <Typography className={classes.primaryItemSecondText}>{wallet.address}</Typography>
                     </div>
                 </Box>

packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx

@@ -157,6 +157,7 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
     const addressLink = EVMExplorerResolver.addressLink(chainId, wallet.address)
 
     const networkName = currentNetwork?.name || currentNetwork?.fullName
+    const walletName = wallet.name || (isFireflyWallet ? fireflyAccount.displayName : wallet.name)
     return (
         <Box className={classes.container}>
             <div className={classes.topBar}>
@@ -211,9 +212,7 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
                     <WalletAvatar address={wallet.address} size={30} />
                     <Box ml={0.5} overflow="hidden">
                         <TextOverflowTooltip title={wallet.name}>
-                            <Typography className={classes.nickname}>
-                                {isFireflyWallet ? fireflyAccount.displayName : wallet.name}
-                            </Typography>
+                            <Typography className={classes.nickname}>{walletName}</Typography>
                         </TextOverflowTooltip>
                         <Typography className={classes.identifier}>
                             <FormattedAddress address={wallet.address} formatter={formatEthereumAddress} size={4} />

packages/web3-providers/src/Web3/EVM/providers/MaskWallet.ts

@@ -52,7 +52,7 @@ export class MaskWalletProvider extends BaseHostedProvider {
         const privyWallets = await Privy.getEvmWallets()
         const formattedPrivyWallets: Wallet[] = privyWallets.map((wallet) => ({
             id: wallet.address,
-            name: '',
+            name: this.walletStorage.wallets.value.find((w) => isSameAddress(w.address, wallet.address))?.name || '',
             source: ImportSource.Privy,
             address: wallet.address,
             configurable: false,