From c173d2be21fd5fea5c11a9b35bd4715c8d5d16be Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Fri, 20 May 2022 16:49:53 +0800
Subject: [PATCH] fix: tips  some ui issues

---
 .../shared/VerifyWallet/CurrentWalletBox.tsx  | 28 ++-----------------
 .../pages/Personas/VerifyWallet/index.tsx     | 22 +++++++++++++--
 .../plugins/NextID/components/BindingItem.tsx |  1 +
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
index 9df906ccc2c1..2226ba0b7573 100644
--- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -2,13 +2,7 @@ import { ExternalLink } from 'react-feather'
 import { ChainId, ProviderType, NetworkType, useAccount, useProviderType } from '@masknet/web3-shared-evm'
 import { Button, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import {
-    useWeb3State,
-    useNetworkDescriptor,
-    useProviderDescriptor,
-    useReverseAddress,
-    Web3Plugin,
-} from '@masknet/plugin-infra/web3'
+import { useWeb3State, useNetworkDescriptor, useProviderDescriptor, Web3Plugin } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
 import { useI18N } from '../../../utils'
 
@@ -107,8 +101,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
     const frontAccount = useAccount()
     const account = notInPop ? frontAccount : wallet.account
     const { Utils } = useWeb3State() ?? {}
-    const { value: domain } = useReverseAddress(wallet.account)
-    const _providerType = wallet.providerType ?? providerType
+
     return account ? (
         <section className={classes.currentAccount}>
             <WalletIcon
@@ -119,22 +112,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             />
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    {_providerType !== ProviderType.MaskWallet ? (
-                        <Typography className={classes.accountName}>
-                            {domain && Utils?.formatDomainName
-                                ? Utils.formatDomainName(domain)
-                                : providerDescriptor?.name}
-                        </Typography>
-                    ) : (
-                        <>
-                            <Typography className={classes.accountName}>
-                                {walletName ?? providerDescriptor?.name}
-                            </Typography>
-                            {domain && Utils?.formatDomainName ? (
-                                <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
-                            ) : null}
-                        </>
-                    )}
+                    <Typography className={classes.accountName}>{walletName}</Typography>
                 </div>
                 <div className={classes.infoRow}>
                     <Typography className={classes.address} variant="body2" title={account}>
diff --git a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
index 2f5e9163bf6d..dac8682dbed9 100644
--- a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
@@ -4,7 +4,15 @@ import { useNavigate } from 'react-router-dom'
 import { EMPTY_LIST, NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
-import { ChainId, EthereumRpcType, isSameAddress, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import {
+    ChainId,
+    EthereumRpcType,
+    isSameAddress,
+    NetworkType,
+    ProviderType,
+    resolveProviderName,
+    useWallets,
+} from '@masknet/web3-shared-evm'
 import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types'
 import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
 import Services from '../../../../service'
@@ -14,6 +22,7 @@ import { useI18N } from '../../../../../utils'
 import { useUnconfirmedRequest } from '../../Wallet/hooks/useUnConfirmedRequest'
 import { PopupContext } from '../../../hook/usePopupContext'
 import urlcat from 'urlcat'
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -33,8 +42,10 @@ const VerifyWallet = memo(() => {
     const location = useLocation()
     const { showSnackbar } = usePopupCustomSnackbar()
     const { value: request } = useUnconfirmedRequest()
-
     const wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
+    const { value: domain } = useReverseAddress(wallet.account)
+    const { Utils } = useWeb3State() ?? {}
+    const wallets = useWallets()
 
     const { value: bounds } = useAsync(async () => {
         if (!wallet.account) return EMPTY_LIST
@@ -52,6 +63,12 @@ const VerifyWallet = memo(() => {
         return false
     }, [bounds])
 
+    const walletName = () => {
+        if (domain && Utils?.formatDomainName) return Utils.formatDomainName(domain)
+        if (wallet.providerType !== ProviderType.MaskWallet) return `${resolveProviderName(wallet.providerType)} Wallet`
+        return wallets.find((x) => isSameAddress(x.address, wallet.account))?.name ?? 'Wallet'
+    }
+
     useEffect(() => {
         if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return
 
@@ -156,6 +173,7 @@ const VerifyWallet = memo(() => {
     return (
         <div className={classes.container}>
             <Steps
+                walletName={walletName()}
                 disableConfirm={isBound && !signed}
                 nickname={currentPersona.nickname}
                 wallet={wallet}
diff --git a/packages/mask/src/plugins/NextID/components/BindingItem.tsx b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
index a16aaec72842..8a618c8cbbd2 100644
--- a/packages/mask/src/plugins/NextID/components/BindingItem.tsx
+++ b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
@@ -21,6 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     copy: {
+        color: theme.palette.text.primary,
         fontSize: 16,
         cursor: 'pointer',
     },