fix(tips): some improvement (#6129)

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

@@ -1,37 +1,30 @@
-import { DialogContent, Button } 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 { WalletsByNetwork } from './components/WalletsByNetwork'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import SettingView from './bodyViews/Setting'
-import WalletsView from './bodyViews/Wallets'
-import AddWalletView from './bodyViews/AddWallet'
-import { useProvedWallets } from '../hooks/useProvedWallets'
-import {
-    BindingProof,
-    ECKeyIdentifier,
-    NextIDAction,
-    NextIDPersonaBindings,
-    NextIDPlatform,
-    NextIdStorageInfo,
-    NextIDStoragePayload,
-} from '@masknet/shared-base'
-import Empty from './components/empty'
-import { getKvPayload, kvSet, useKvGet } from '../hooks/useKv'
-import { InjectedDialog, LoadingAnimation } from '@masknet/shared'
-import { useAsyncFn, useAsyncRetry } from 'react-use'
-import Services from '../../../extension/service'
 import { PluginId } from '@masknet/plugin-infra'
+import { useActivatedPlugin } from '@masknet/plugin-infra/content-script'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { WalletMessages } from '@masknet/plugin-wallet'
+import { InjectedDialog, LoadingAnimation } from '@masknet/shared'
+import { BindingProof, ECKeyIdentifier, NextIDAction, NextIDPlatform, NextIDStoragePayload } from '@masknet/shared-base'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
 import { isSameAddress, useAccount } from '@masknet/web3-shared-evm'
-import formatDateTime from 'date-fns/format'
 import { LoadingButton } from '@mui/lab'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { WalletMessages } from '@masknet/plugin-wallet'
+import { Button, ButtonProps, DialogContent } from '@mui/material'
+import formatDateTime from 'date-fns/format'
 import { cloneDeep } from 'lodash-unified'
-import { useActivatedPlugin } from '@masknet/plugin-infra/src/hooks'
+import { FC, useCallback, useEffect, useState } from 'react'
+import { useAsyncFn, useAsyncRetry } from 'react-use'
+import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import Services from '../../../extension/service'
+import { useI18N } from '../../../utils'
+import { getKvPayload, kvSet, useKvGet } from '../hooks/useKv'
+import { useProvedWallets } from '../hooks/useProvedWallets'
+import AddWalletView from './bodyViews/AddWallet'
+import SettingView from './bodyViews/Setting'
+import WalletsView from './bodyViews/Wallets'
+import Empty from './components/empty'
+import { VerifyAlertLine } from './components/VerifyAlertLine'
+import { WalletsByNetwork } from './components/WalletsByNetwork'
 export interface TipsEntranceDialogProps {
     open: boolean
     onClose: () => void
@@ -77,6 +70,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()
@@ -85,8 +94,9 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     const [hasChanged, setHasChanged] = useState(false)
     const [rawPatchData, setRawPatchData] = useState<BindingProof[]>([])
     const [rawWalletList, setRawWalletList] = useState<BindingProof[]>([])
-    const supportedNetworks = useActivatedPlugin(PluginId.Tip, 'any')?.enableRequirement?.web3?.['com.mask.evm']
-        ?.tipsSupportedChains
+    const supportedNetworks = useActivatedPlugin(PluginId.Tip, 'any')?.enableRequirement?.web3?.[
+        NetworkPluginID.PLUGIN_EVM
+    ]?.tipsSupportedChains
     const { showSnackbar } = useCustomSnackbar()
     const account = useAccount()
     const nowTime = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
@@ -109,17 +119,13 @@ 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) {
-            const kvCache = (kv.val as NextIdStorageInfo).proofs.find(
-                (x) => x.identity === currentPersona?.publicHexKey,
-            )
+            const kvCache = kv.val.proofs.find((x) => x.identity === currentPersona?.publicHexKey)
             if (!kvCache) return
             const result: BindingProof[] = walletsList.reduce<BindingProof[]>((res, x) => {
                 x.isDefault = 0
@@ -167,25 +173,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))
@@ -287,7 +282,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,9 @@
-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 { WalletItem } from './WalletItem'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -42,16 +42,16 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface WalletsByNetworkProps {
-    network: any
-    toSetting: any
+    network: { name: string; icon: URL }
+    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 +62,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/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>