fix: mf-6637 popup disconnect wallet (#12135)

Author: swkatmask

packages/mask/popups/components/ConnectedWallet/index.tsx

@@ -1,6 +1,16 @@
+import Services from '#services'
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { ConfirmDialog, FormattedAddress, ImageIcon, PersonaContext, ProgressiveText } from '@masknet/shared'
-import { MaskMessages, NetworkPluginID, NextIDAction, PopupModalRoutes, SignType } from '@masknet/shared-base'
+import {
+    MaskMessages,
+    NetworkPluginID,
+    NextIDAction,
+    PopupModalRoutes,
+    SignType,
+    type BindingProof,
+    type PersonaInformation,
+} from '@masknet/shared-base'
 import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { useChainContext, useNetworkDescriptor, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, NextIDProof } from '@masknet/web3-providers'
@@ -9,11 +19,8 @@ import { ChainId, formatDomainName, formatEthereumAddress } from '@masknet/web3-
 import { Box, Link, Typography, useTheme } from '@mui/material'
 import { useQueries } from '@tanstack/react-query'
 import { memo, useCallback } from 'react'
-import Services from '#services'
-import type { ConnectedWalletInfo } from '../../pages/Personas/type.js'
-import { useModalNavigate } from '../ActionModal/index.js'
 import { useVerifiedWallets } from '../../hooks/index.js'
-import { Trans } from '@lingui/react/macro'
+import { useModalNavigate } from '../ActionModal/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     walletList: {
@@ -85,9 +92,9 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
     const wallets = useVerifiedWallets(proofs)
 
     const queries = useQueries({
-        queries: wallets.map((wallet, index) => ({
+        queries: wallets.map((wallet) => ({
             enabled: !!NameService,
-            queryKey: ['persona-connected-wallet', wallet.identity, index],
+            queryKey: ['persona-connected-wallet', wallet.identity],
             queryFn: async () => {
                 const domain = await NameService?.reverse?.(wallet.identity)
                 if (domain) return domain
@@ -100,51 +107,46 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
     // TODO: remove this after next dot id support multiple chain
     const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, ChainId.Mainnet)
 
-    const handleConfirmRelease = useCallback(
-        async (wallet?: ConnectedWalletInfo) => {
-            try {
-                if (!currentPersona?.identifier.publicKeyAsHex || !wallet) return
+    const handleConfirmDisconnect = useCallback(async (wallet: BindingProof, persona: PersonaInformation) => {
+        try {
+            const result = await NextIDProof.createPersonaPayload(
+                persona.identifier.publicKeyAsHex,
+                NextIDAction.Delete,
+                wallet.identity,
+                wallet.platform,
+            )
 
-                const result = await NextIDProof.createPersonaPayload(
-                    currentPersona.identifier.publicKeyAsHex,
-                    NextIDAction.Delete,
-                    wallet.identity,
-                    wallet.platform,
-                )
-
-                if (!result) return
+            if (!result) return
 
-                const signature = await Services.Identity.signWithPersona(
-                    SignType.Message,
-                    result.signPayload,
-                    currentPersona.identifier,
-                    location.origin,
-                    true,
-                )
+            const signature = await Services.Identity.signWithPersona(
+                SignType.Message,
+                result.signPayload,
+                persona.identifier,
+                location.origin,
+                true,
+            )
 
-                if (!signature) return
+            if (!signature) return
 
-                await NextIDProof.bindProof(
-                    result.uuid,
-                    currentPersona.identifier.publicKeyAsHex,
-                    NextIDAction.Delete,
-                    wallet.platform,
-                    wallet.identity,
-                    result.createdAt,
-                    { signature },
-                )
+            await NextIDProof.bindProof(
+                result.uuid,
+                persona.identifier.publicKeyAsHex,
+                NextIDAction.Delete,
+                wallet.platform,
+                wallet.identity,
+                result.createdAt,
+                { signature },
+            )
 
-                // Broadcast updates.
-                MaskMessages.events.ownProofChanged.sendToAll()
-                showSnackbar(<Trans>Wallet disconnected</Trans>)
-            } catch {
-                showSnackbar(<Trans>Failed to disconnect wallet</Trans>, {
-                    variant: 'error',
-                })
-            }
-        },
-        [currentPersona],
-    )
+            // Broadcast updates.
+            MaskMessages.events.ownProofChanged.sendToAll()
+            showSnackbar(<Trans>Wallet disconnected</Trans>)
+        } catch {
+            showSnackbar(<Trans>Failed to disconnect wallet</Trans>, {
+                variant: 'error',
+            })
+        }
+    }, [])
 
     return (
         <Box className={classes.walletList}>
@@ -201,7 +203,7 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
                                         </Trans>
                                     ),
                                 })
-                                if (confirmed) return handleConfirmRelease(wallet)
+                                if (confirmed) return handleConfirmDisconnect(wallet, currentPersona)
                             }}
                         />
                     </Box>

packages/mask/popups/pages/Personas/Home/UI.tsx

@@ -1,6 +1,13 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { PopupHomeTabType, useParamTab } from '@masknet/shared'
-import { PopupModalRoutes, PopupRoutes, type EnhanceableSite, type ProfileAccount } from '@masknet/shared-base'
+import {
+    PopupModalRoutes,
+    PopupRoutes,
+    type BindingProof,
+    type EnhanceableSite,
+    type ProfileAccount,
+} from '@masknet/shared-base'
 import { MaskTabList, makeStyles } from '@masknet/theme'
 import { TabContext, TabPanel } from '@mui/lab'
 import { Box, Tab, Typography, useTheme } from '@mui/material'
@@ -12,8 +19,6 @@ import { PersonaPublicKey } from '../../../components/PersonaPublicKey/index.js'
 import { SelectProvider } from '../../../components/SelectProvider/index.js'
 import { SocialAccounts } from '../../../components/SocialAccounts/index.js'
 import { useModalNavigate } from '../../../components/index.js'
-import type { ConnectedWalletInfo } from '../type.js'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -171,7 +176,7 @@ interface PersonaHomeUIProps {
     networks: EnhanceableSite[]
     onConnect: (networkIdentifier: EnhanceableSite) => void
     onAccountClick: (account: ProfileAccount) => void
-    bindingWallets?: ConnectedWalletInfo[]
+    bindingWallets?: BindingProof[]
     hasPaymentPassword?: boolean
 }
 

packages/mask/popups/pages/Personas/type.ts

@@ -3,6 +3,16 @@ import { useQuery } from '@tanstack/react-query'
 import { NextIDProof } from '@masknet/web3-providers'
 import { EMPTY_LIST, type BindingProof, MaskMessages, Sniffings } from '@masknet/shared-base'
 import type { UseQueryResult } from '@tanstack/react-query'
+import { queryClient } from '@masknet/shared-base-ui'
+
+function clearPersonaProofsCache(publicKey?: string) {
+    const queryKey = ['@@next-id', 'bindings-by-persona']
+    if (publicKey) queryKey.push(publicKey)
+
+    queryClient.removeQueries({
+        queryKey,
+    })
+}
 
 export function usePersonaProofs(publicKey?: string): UseQueryResult<BindingProof[]> {
     const result = useQuery({
@@ -24,6 +34,7 @@ export function usePersonaProofs(publicKey?: string): UseQueryResult<BindingProo
             if (publicKey) {
                 await NextIDProof.clearPersonaQueryCache(publicKey)
             }
+            clearPersonaProofsCache(publicKey)
             refetch()
         })
     }, [publicKey])