fix(popups): mf-6756 privy signing (#12307)

swkatmask · web-flow · commit 0197c5c310cc · 2025-11-04T18:16:53.000+08:00
* fix(popups): mf-6756 privy signing, wallet avatar &amp; selection fixes

use WalletAvatar with forwarded props; add privy wallet personal_sign fallback; tighten select-wallet param handling, default selection and resolveMaskAccount guard; minor refactors and cleanup.

* fix(popups): mf-6757 prevent long error codes from overflowing modal
diff --git a/packages/mask/popups/components/ConnectedWallet/index.tsx b/packages/mask/popups/components/ConnectedWallet/index.tsx
@@ -1,7 +1,7 @@
 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 { ConfirmDialog, FormattedAddress, PersonaContext, ProgressiveText } from '@masknet/shared'
 import {
     MaskMessages,
     NetworkPluginID,
@@ -21,6 +21,7 @@ import { useQueries } from '@tanstack/react-query'
 import { memo, useCallback } from 'react'
 import { useVerifiedWallets } from '../../hooks/index.js'
 import { useModalNavigate } from '../ActionModal/index.js'
+import { WalletAvatar } from '../WalletAvatar/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     walletList: {
@@ -159,7 +160,7 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
                 return (
                     <Box className={classes.wallet} key={index}>
                         <Box display="flex" alignItems="center">
-                            <ImageIcon size={24} icon={networkDescriptor?.icon} className={classes.walletIcon} />
+                            <WalletAvatar size={24} className={classes.walletIcon} address={wallet.identity} />
                             <Typography className={classes.walletInfo} component="div">
                                 <ProgressiveText
                                     className={classes.walletName}
diff --git a/packages/mask/popups/components/PopupLayout/index.tsx b/packages/mask/popups/components/PopupLayout/index.tsx
@@ -28,6 +28,10 @@ const GlobalCss = (
                     display: 'none',
                 },
             },
+            // privy modal error text overflow
+            '#privy-modal-content [class^=TransactionErrorScreenContainer] [class^=ErrorCode]': {
+                wordBreak: 'break-all',
+            },
         }}
     />
 )
diff --git a/packages/mask/popups/components/WalletAvatar/index.tsx b/packages/mask/popups/components/WalletAvatar/index.tsx
@@ -4,7 +4,7 @@ import { PersistentStorages } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { useWallets } from '@privy-io/react-auth'
-import { memo, useMemo } from 'react'
+import { memo, useMemo, type HTMLProps } from 'react'
 import { useSubscription } from 'use-subscription'
 
 const useStyles = makeStyles()((theme) => ({
@@ -20,12 +20,12 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-interface Props {
+interface Props extends HTMLProps<HTMLDivElement> {
     size?: number
     address: string
 }
-export const WalletAvatar = memo<Props>(function WalletAvatar({ size = 30, address }) {
-    const { classes } = useStyles()
+export const WalletAvatar = memo<Props>(function WalletAvatar({ size = 30, address, ...rest }) {
+    const { classes, cx } = useStyles()
     const { wallets: fireflyWallets } = useWallets()
 
     const isFireflyWallet = useMemo(
@@ -36,10 +36,10 @@ export const WalletAvatar = memo<Props>(function WalletAvatar({ size = 30, addre
 
     if (isFireflyWallet && fireflyAccount)
         return (
-            <div className={classes.container}>
+            <div {...rest} className={cx(classes.container, rest.className)}>
                 <Image size={size} src={fireflyAccount.avatar} rounded />
                 <Icons.Firefly className={classes.badgeIcon} size={12} />
             </div>
         )
-    return <Icons.MaskBlue size={size} />
+    return <Icons.MaskBlue size={size} className={rest.className} />
 })
diff --git a/packages/mask/popups/components/WalletItem/index.tsx b/packages/mask/popups/components/WalletItem/index.tsx
@@ -1,24 +1,24 @@
-import { memo, useCallback, useMemo } from 'react'
+import { Trans } from '@lingui/react/macro'
+import { FormattedAddress } from '@masknet/shared'
+import { ImportSource, NetworkPluginID, PersistentStorages, type Wallet } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { formatDomainName, formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, ImportSource, type Wallet, PersistentStorages } from '@masknet/shared-base'
 import { useReverseAddress } from '@masknet/web3-hooks-base'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { formatDomainName, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import {
     Box,
     ListItem,
-    Typography,
-    type ListItemProps,
-    Tooltip,
     Radio,
+    Tooltip,
+    Typography,
     listItemSecondaryActionClasses,
+    type ListItemProps,
 } from '@mui/material'
-import { FormattedAddress } from '@masknet/shared'
-import { WalletBalance } from '../index.js'
-import { Trans } from '@lingui/react/macro'
-import { WalletAvatar } from '../WalletAvatar/index.js'
 import { useWallets } from '@privy-io/react-auth'
-import { isSameAddress } from '@masknet/web3-shared-base'
+import { memo, useCallback, useMemo } from 'react'
 import { useSubscription } from 'use-subscription'
+import { WalletBalance } from '../index.js'
+import { WalletAvatar } from '../WalletAvatar/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     item: {
@@ -118,6 +118,7 @@ export const WalletItem = memo<WalletItemProps>(function WalletItem({
 
     if (wallet.owner) return null
 
+    const walletName = wallet.name || (isFireflyWallet ? fireflyAccount.displayName : `${wallet.name}${extraName}`)
     return (
         <ListItem
             className={cx(classes.item, className)}
@@ -128,9 +129,7 @@ export const WalletItem = memo<WalletItemProps>(function WalletItem({
             <Box className={classes.text}>
                 <Box width={180} overflow="auto">
                     <Typography className={classes.mainLine} component="div">
-                        <Typography className={classes.name}>
-                            {isFireflyWallet ? fireflyAccount.displayName : `${wallet.name}${extraName}`}
-                        </Typography>
+                        <Typography className={classes.name}>{walletName}</Typography>
                         {wallet.source === ImportSource.LocalGenerated || hiddenTag ? null : (
                             <Typography component="span" className={classes.badge}>
                                 <Trans>Imported</Trans>
diff --git a/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx b/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
@@ -1,38 +1,39 @@
-import { memo, useCallback } from 'react'
-import urlcat from 'urlcat'
-import { useAsync, useAsyncFn } from 'react-use'
-import { useNavigate } from 'react-router-dom'
-import { Avatar, Box, Button, Link, Typography } from '@mui/material'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { Icons } from '@masknet/icons'
+import { FormattedAddress, PersonaContext, PopupHomeTabType, WalletIcon } from '@masknet/shared'
 import {
-    NextIDPlatform,
-    type NetworkPluginID,
+    MaskMessages,
     NextIDAction,
+    NextIDPlatform,
+    PopupModalRoutes,
+    PopupRoutes,
     SignType,
+    type NetworkPluginID,
     type NextIDPayload,
-    PopupRoutes,
-    PopupModalRoutes,
-    MaskMessages,
 } from '@masknet/shared-base'
-import { formatDomainName, formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm'
-import { FormattedAddress, PersonaContext, PopupHomeTabType, WalletIcon } from '@masknet/shared'
-import { EVMExplorerResolver, NextIDProof, EVMProviderResolver, EVMWeb3 } from '@masknet/web3-providers'
+import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import {
     useChainContext,
     useNetworkContext,
+    usePrivyWallet,
     useProviderDescriptor,
     useReverseAddress,
     useWallets,
 } from '@masknet/web3-hooks-base'
+import { EVMExplorerResolver, EVMProviderResolver, EVMWeb3, NextIDProof } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { Icons } from '@masknet/icons'
+import { EthereumMethodType, formatDomainName, formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { Avatar, Box, Button, Link, Typography } from '@mui/material'
+import { memo, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAsync, useAsyncFn } from 'react-use'
+import urlcat from 'urlcat'
 
-import { useTitle } from '../../../hooks/index.js'
-import { BottomController } from '../../../components/BottomController/index.js'
-import { LoadingMask } from '../../../components/LoadingMask/index.js'
 import Services from '#services'
-import { useModalNavigate } from '../../../components/index.js'
 import { Trans, useLingui } from '@lingui/react/macro'
+import { BottomController } from '../../../components/BottomController/index.js'
+import { useModalNavigate } from '../../../components/index.js'
+import { LoadingMask } from '../../../components/LoadingMask/index.js'
+import { useTitle } from '../../../hooks/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     provider: {
@@ -158,6 +159,7 @@ export const Component = memo(function ConnectWalletPage() {
         [account, currentPersona],
     )
 
+    const privyWallet = usePrivyWallet(account)
     const [{ value: signResult, loading }, handleSign] = useAsyncFn(async () => {
         try {
             if (!currentPersona?.identifier || !account) return
@@ -178,12 +180,21 @@ export const Component = memo(function ConnectWalletPage() {
                 true,
             )
 
-            const walletSignature = await EVMWeb3.signMessage('message', payload.signPayload, {
-                chainId,
-                account,
-                providerType,
-                silent: providerType === ProviderType.MaskWallet,
-            })
+            let walletSignature = ''
+            if (privyWallet?.isConnected) {
+                const provider = await privyWallet.getEthereumProvider()
+                walletSignature = await provider.request({
+                    method: EthereumMethodType.personal_sign,
+                    params: [payload.signPayload, account],
+                })
+            } else {
+                walletSignature = await EVMWeb3.signMessage('message', payload.signPayload, {
+                    chainId,
+                    account,
+                    providerType,
+                    silent: providerType === ProviderType.MaskWallet,
+                })
+            }
 
             const result = await bindProof(payload, walletSignature, personaSignature)
 
diff --git a/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
@@ -41,8 +41,8 @@ export const Component = memo(function SelectWallet() {
     const [params] = useSearchParams()
     const source = params.get('source')
     const chainIdSearched = params.get('chainId')
-    const isVerifyWalletFlow = params.get('verifyWallet')
-    const isSettingNFTAvatarFlow = params.get('setNFTAvatar')
+    const isVerifyWalletFlow = params.has('verifyWallet')
+    const isSettingNFTAvatarFlow = params.has('setNFTAvatar')
 
     const { Network } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const { proofs } = PersonaContext.useContainer()
@@ -64,8 +64,9 @@ export const Component = memo(function SelectWallet() {
         if (!allWallets.length && localWallets.length) return localWallets
         return allWallets
     }, [localWallets, allWallets])
-    const defaultWallet = params.get('address') || account || (first(wallets)?.address ?? '')
+    const defaultWallet = params.get('address') || account || first(wallets)?.address
     const [selected = defaultWallet, setSelected] = useState<string>()
+    console.log('bindingWallets', { bindingWallets, wallets, selected })
 
     const handleCancel = useCallback(async () => {
         if (isVerifyWalletFlow) {
@@ -103,11 +104,13 @@ export const Component = memo(function SelectWallet() {
 
         if (wallet && source) await Services.Wallet.internalWalletConnect(wallet.address, source)
 
-        await Services.Wallet.resolveMaskAccount([
-            {
-                address: selected,
-            },
-        ])
+        if (selected) {
+            await Services.Wallet.resolveMaskAccount([
+                {
+                    address: selected,
+                },
+            ])
+        }
 
         return Services.Helper.removePopupWindow()
     }, [source, isVerifyWalletFlow, selected, chainId, wallets, isSettingNFTAvatarFlow, networks, Network])
@@ -126,37 +129,29 @@ export const Component = memo(function SelectWallet() {
     return (
         <Box overflow="auto" data-hide-scrollbar>
             <Box pt={1} pb={9} px={2} display="flex" flexDirection="column" rowGap="6px">
-                {wallets
-                    .filter((x) => {
-                        if (!isVerifyWalletFlow && !isSettingNFTAvatarFlow) return true
-                        return false
-                    })
-                    .map((item) => {
-                        const disabled =
-                            isVerifyWalletFlow && bindingWallets?.some((x) => isSameAddress(x.identity, item.address))
-
-                        return (
-                            <WalletItem
-                                className={cx(classes.item, disabled ? classes.disabled : undefined)}
-                                wallet={item}
-                                key={item.address}
-                                isSelected={isSameAddress(item.address, selected)}
-                                onSelect={() => {
-                                    if (disabled) return
-                                    setSelected(item.address)
-                                }}
-                            />
-                        )
-                    })}
+                {wallets.map((item) => {
+                    const disabled =
+                        isVerifyWalletFlow && bindingWallets?.some((x) => isSameAddress(x.identity, item.address))
+
+                    return (
+                        <WalletItem
+                            className={cx(classes.item, disabled ? classes.disabled : undefined)}
+                            wallet={item}
+                            key={item.address}
+                            isSelected={isSameAddress(item.address, selected)}
+                            onSelect={() => {
+                                if (disabled) return
+                                setSelected(item.address)
+                            }}
+                        />
+                    )
+                })}
             </Box>
             <BottomController>
                 <Button variant="outlined" fullWidth onClick={handleCancel}>
                     <Trans>Cancel</Trans>
                 </Button>
-                <ActionButton
-                    fullWidth
-                    onClick={handleConfirm}
-                    disabled={isVerifyWalletFlow ? !!wallets?.some((x) => isSameAddress(x.address, selected)) : false}>
+                <ActionButton fullWidth onClick={handleConfirm} disabled={!isVerifyWalletFlow}>
                     <Trans>Confirm</Trans>
                 </ActionButton>
             </BottomController>
