fix(tips): some improvement

packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx

@@ -1,8 +1,8 @@
-import { DialogContent, Button } from '@mui/material'
+import { DialogContent, Button, ButtonProps } from '@mui/material'
 import { useI18N } from '../../../utils'
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { VerifyAlertLine } from './components/VerifyAlertLine'
-import { useCallback, useMemo, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { enableRequirement } from '../constants'
 import { WalletsByNetwork } from './components/WalletsByNetwork'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -14,7 +14,6 @@ import {
     BindingProof,
     ECKeyIdentifier,
     NextIDAction,
-    NextIDPersonaBindings,
     NextIDPlatform,
     NextIdStorageInfo,
     NextIDStoragePayload,
@@ -77,6 +76,22 @@ enum BodyViewStep {
     AddWallet = 'Add Wallet',
 }
 
+interface WalletButtonProps extends ButtonProps {
+    step: BodyViewStep
+}
+
+const WalletButton: FC<WalletButtonProps> = ({ step, onClick }) => {
+    const { classes } = useStyles()
+    if (step === BodyViewStep.AddWallet) return null
+    return (
+        <div className={classes.btnContainer}>
+            <Button onClick={onClick} className={classes.walletBtn} variant="contained" size="small">
+                {step === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets}
+            </Button>
+        </div>
+    )
+}
+
 export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
@@ -107,11 +122,9 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     const { value: kv, retry: retryKv } = useKvGet()
     const { loading, value: proofRes, retry: retryProof } = useProvedWallets()
 
-    useMemo(() => {
+    useEffect(() => {
         setHasChanged(false)
-        const walletsList = proofRes
-            ? (proofRes as NextIDPersonaBindings).proofs.filter((x) => x.platform === NextIDPlatform.Ethereum)
-            : []
+        const walletsList = proofRes ? proofRes.proofs.filter((x) => x.platform === NextIDPlatform.Ethereum) : []
         walletsList.sort((a, b) => Number.parseInt(b.last_checked_at, 10) - Number.parseInt(a.last_checked_at, 10))
         walletsList.forEach((wallet, idx) => (wallet.rawIdx = walletsList.length - idx - 1))
         if (kv?.ok && kv.val.proofs.length > 0 && walletsList.length > 0) {
@@ -165,25 +178,14 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
         retryProof()
         retryKv()
     }
-    const WalletButton = () => {
-        const { classes } = useStyles()
-        if (bodyViewStep === BodyViewStep.AddWallet) return null
-        return (
-            <div className={classes.btnContainer}>
-                <Button
-                    onClick={() => {
-                        setBodyViewStep(
-                            bodyViewStep === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets,
-                        )
-                    }}
-                    className={classes.walletBtn}
-                    variant="contained"
-                    size="small">
-                    {bodyViewStep === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets}
-                </Button>
-            </div>
-        )
-    }
+    const titleTail = (
+        <WalletButton
+            step={bodyViewStep}
+            onClick={() => {
+                setBodyViewStep(bodyViewStep === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets)
+            }}
+        />
+    )
     const setAsDefault = (idx: number) => {
         const changed = cloneDeep(rawPatchData)
         changed.forEach((x: any) => (x.isDefault = 0))
@@ -285,7 +287,7 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     )
 
     return (
-        <InjectedDialog open={open} onClose={clickBack} title={bodyViewStep} titleTail={WalletButton()}>
+        <InjectedDialog open={open} onClose={clickBack} title={bodyViewStep} titleTail={titleTail}>
             {loading ? (
                 <DialogContent className={classes.dContent}>
                     <div className={classes.loading}>

packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/Wallets.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
 import { memo, useCallback, useState } from 'react'
 import { useI18N } from '../../../../utils'
 import { DisconnectWalletDialog } from '../components/DisconnectDialog'
-import { WalletCom } from '../components/WalletCom'
+import { WalletItem } from '../components/WalletItem'
 
 const useStyles = makeStyles()((theme) => ({
     emptyBox: {
@@ -44,12 +44,12 @@ const WalletsPage = memo(({ wallets, releaseLoading, onRelease, personaName }: W
         <>
             {wallets.map((x, idx) => {
                 return (
-                    <WalletCom
+                    <WalletItem
+                        key={idx}
                         nowIdx={idx}
                         onDelete={() => deleteWallet(x)}
                         canDelete
-                        key={idx}
-                        index={x.rawIdx}
+                        fallbackName={`Wallet ${idx + 1}`}
                         address={x.identity}
                         isDefault={!!x.isDefault}
                     />

packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletCom.tsx → packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletItem.tsx

@@ -1,11 +1,11 @@
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { FormattedAddress, useSnackbarCallback } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
+import { isSameAddress, useWallets } from '@masknet/web3-shared-evm'
 import { Link, Typography } from '@mui/material'
+import { useMemo } from 'react'
 import { useCopyToClipboard } from 'react-use'
-import { useSnackbarCallback, FormattedAddress } from '@masknet/shared'
 import { useI18N } from '../../../../utils'
-import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
-import { isSameAddress, useWallets } from '@masknet/web3-shared-evm'
-import { useEffect, useState } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     currentAccount: {
@@ -76,23 +76,30 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-interface WalletComProps {
+interface WalletItemProps {
     address: string
     isDefault?: boolean
     canDelete?: boolean
     onDelete?: any
-    index?: number
+    fallbackName?: string
     nowIdx: number
     setAsDefault?: (idx: number) => void
 }
 
-export function WalletCom({ address, isDefault, canDelete, index, setAsDefault, onDelete, nowIdx }: WalletComProps) {
+export function WalletItem({
+    address,
+    isDefault,
+    canDelete,
+    fallbackName,
+    setAsDefault,
+    onDelete,
+    nowIdx,
+}: WalletItemProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
     const [, copyToClipboard] = useCopyToClipboard()
     const { value: domain } = useReverseAddress(address)
     const { Utils } = useWeb3State() ?? {}
-    const [walletName, setWalletName] = useState<string>('')
     const onCopy = useSnackbarCallback(
         async (ev: React.MouseEvent<HTMLAnchorElement>) => {
             ev.stopPropagation()
@@ -106,17 +113,15 @@ export function WalletCom({ address, isDefault, canDelete, index, setAsDefault,
     )
     const wallets = useWallets()
 
-    useEffect(() => {
-        const nowItem = wallets.find((x) => isSameAddress(x.address, address))
-        const name = nowItem?.name
-        const res =
-            domain && Utils?.formatDomainName
-                ? Utils.formatDomainName(domain)
-                : name !== undefined && nowItem?.hasStoredKeyInfo
-                ? name
-                : `Wallet ${index !== undefined ? index + 1 : 0}`
-        setWalletName(res as string)
-    }, [address, domain])
+    const walletName = useMemo(() => {
+        const currentWallet = wallets.find((x) => isSameAddress(x.address, address))
+        const name = currentWallet?.name
+        if (domain && Utils?.formatDomainName) {
+            return Utils.formatDomainName(domain)
+        }
+        return name !== undefined && currentWallet?.hasStoredKeyInfo ? name : fallbackName
+    }, [address, domain, fallbackName])
+
     const getActionRender = () => {
         if (!canDelete && !isDefault)
             return (

packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletsByNetwork.tsx

@@ -1,9 +1,10 @@
-import { makeStyles } from '@masknet/theme'
 import { SettingsIcon } from '@masknet/icons'
-import { Typography } from '@mui/material'
-import { WalletCom } from './WalletCom'
 import type { BindingProof } from '@masknet/shared-base'
+import { makeStyles } from '@masknet/theme'
+import { Typography } from '@mui/material'
 import { useI18N } from '../../../../utils'
+import type { NetworkConfig } from '../../constants'
+import { WalletItem } from './WalletItem'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -42,16 +43,16 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface WalletsByNetworkProps {
-    network: any
-    toSetting: any
+    network: NetworkConfig
+    toSetting: () => void
     wallets: BindingProof[]
     setAsDefault: (idx: number) => void
 }
 
 export function WalletsByNetwork({ wallets, network, toSetting, setAsDefault }: WalletsByNetworkProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const isAllHide = wallets.every((x) => !x.isPublic)
+    const isAllHid = wallets.every((x) => !x.isPublic)
     return (
         <div className={classes.container}>
             <div className={classes.topBox}>
@@ -62,24 +63,22 @@ export function WalletsByNetwork({ wallets, network, toSetting, setAsDefault }:
                 <SettingsIcon onClick={toSetting} className={classes.settingIcon} />
             </div>
             <div className={classes.content}>
-                <>
-                    {(!isAllHide &&
-                        wallets.map((x, idx) => {
-                            return (
-                                (x.isPublic && (
-                                    <WalletCom
-                                        key={x.identity}
-                                        nowIdx={idx}
-                                        setAsDefault={setAsDefault}
-                                        index={x.rawIdx}
-                                        address={x.identity}
-                                        isDefault={!!x.isDefault}
-                                    />
-                                )) ||
-                                null
-                            )
-                        })) || <Typography className={classes.empty}>{t('plugin_tips_empty_list')}</Typography>}
-                </>
+                {isAllHid ? (
+                    <Typography className={classes.empty}>{t('plugin_tips_empty_list')}</Typography>
+                ) : (
+                    wallets
+                        .filter((x) => x.isPublic)
+                        .map((x, idx) => (
+                            <WalletItem
+                                key={x.identity}
+                                nowIdx={idx}
+                                setAsDefault={setAsDefault}
+                                fallbackName={`Wallet ${idx}`}
+                                address={x.identity}
+                                isDefault={!!x.isDefault}
+                            />
+                        ))
+                )}
             </div>
         </div>
     )

packages/mask/src/plugins/Tips/constants.ts

@@ -1 +1,8 @@
-export const enableRequirement = [{ name: 'EVM Chain', icon: new URL('./assets/evmChains.png', import.meta.url) }]
+export type NetworkConfig = {
+    name: string
+    icon: URL
+}
+
+export const enableRequirement: NetworkConfig[] = [
+    { name: 'EVM Chain', icon: new URL('./assets/evmChains.png', import.meta.url) },
+]

packages/mask/src/plugins/Tips/hooks/useProvedWallets.ts

@@ -1,13 +1,14 @@
 import { useAsyncRetry } from 'react-use'
 import { NextIDProof } from '@masknet/web3-providers'
 import Services from '../../../extension/service'
-import { EMPTY_LIST } from '@masknet/shared-base'
+import { EMPTY_OBJECT } from '@masknet/shared-base'
+
 export function useProvedWallets() {
     const res = useAsyncRetry(async () => {
         const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier()
-        if (!currentPersonaIdentifier) return EMPTY_LIST
+        if (!currentPersonaIdentifier) return EMPTY_OBJECT
         const currentPersona = await Services.Identity.queryPersona(currentPersonaIdentifier)
-        if (!currentPersona || !currentPersona.publicHexKey) return EMPTY_LIST
+        if (!currentPersona || !currentPersona.publicHexKey) return EMPTY_OBJECT
         return NextIDProof.queryExistedBindingByPersona(currentPersona.publicHexKey)
     }, [])
 

packages/shared-base/src/Pure/index.ts

@@ -1,3 +1,3 @@
 export const EMPTY_LIST = Object.freeze([]) as never[]
 
-export const EMPTY_OBJECT = Object.freeze({})
+export const EMPTY_OBJECT = Object.freeze({}) as Record<string, never>