fix: code review

packages/mask/src/extension/background-script/EthereumServices/send.ts

@@ -19,6 +19,7 @@ import {
     getPayloadChainId,
     getTransactionHash,
     isZeroAddress,
+    getPayloadAccount,
 } from '@masknet/web3-shared-evm'
 import type { IJsonRpcRequest } from '@walletconnect/types'
 import * as MetaMask from './providers/MetaMask'
@@ -150,7 +151,8 @@ export async function INTERNAL_send(
     }: SendOverrides = {},
 ) {
     const chainIdFinally = getPayloadChainId(payload) ?? chainId
-    const wallet = providerType === ProviderType.MaskWallet ? await getWallet(account) : null
+    const accountFinally = getPayloadAccount(payload) ?? account
+    const wallet = providerType === ProviderType.MaskWallet ? await getWallet(accountFinally) : null
     const privKey = isSignableMethod(payload) && wallet ? await WalletRPC.exportPrivateKey(wallet.address) : undefined
     const web3 = await createWeb3({
         chainId: chainIdFinally,
@@ -337,12 +339,12 @@ export async function INTERNAL_send(
                         )
                         switch (payload.method) {
                             case EthereumMethodType.ETH_SEND_TRANSACTION:
-                                handleNonce(chainIdFinally, account, error, response)
+                                handleNonce(chainIdFinally, accountFinally, error, response)
                                 handleTransferTransaction(chainIdFinally, payload)
-                                handleRecentTransaction(chainIdFinally, account, payload, response)
+                                handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
                                 break
                             case EthereumMethodType.MASK_REPLACE_TRANSACTION:
-                                handleReplaceRecentTransaction(chainIdFinally, hash, account, payload, response)
+                                handleReplaceRecentTransaction(chainIdFinally, hash, accountFinally, payload, response)
                                 break
                         }
                     },
@@ -359,7 +361,7 @@ export async function INTERNAL_send(
                             response,
                         )
                         handleTransferTransaction(chainIdFinally, payload)
-                        handleRecentTransaction(chainIdFinally, account, payload, response)
+                        handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
                     })
                 } catch (error) {
                     callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION))
@@ -371,7 +373,7 @@ export async function INTERNAL_send(
                     const response = await WalletConnect.sendCustomRequest(payload as IJsonRpcRequest)
                     callback(null, response)
                     handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, account, payload, response)
+                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
                 } catch (error) {
                     callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION))
                 }
@@ -388,7 +390,7 @@ export async function INTERNAL_send(
                         response,
                     )
                     handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, account, payload, response)
+                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
                 })
                 break
             case ProviderType.Fortmatic:
@@ -400,7 +402,7 @@ export async function INTERNAL_send(
                         response,
                     )
                     handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, account, payload, response)
+                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
                 })
                 break
             case ProviderType.CustomNetwork:
@@ -414,7 +416,7 @@ export async function INTERNAL_send(
         const [hash] = payload.params as [string]
 
         // redirect receipt queries to tx watcher
-        const transaction = await WalletRPC.getRecentTransaction(chainIdFinally, account, hash, {
+        const transaction = await WalletRPC.getRecentTransaction(chainIdFinally, accountFinally, hash, {
             receipt: true,
         })
 
@@ -439,7 +441,7 @@ export async function INTERNAL_send(
                 callback(null, {
                     id: payload.id,
                     jsonrpc: payload.jsonrpc,
-                    result: [account],
+                    result: [accountFinally],
                 } as JsonRpcResponse)
                 break
             case EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT:
@@ -489,6 +491,7 @@ export async function INTERNAL_nativeSend(
     { account = currentAccountSettings.value, chainId = currentChainIdSettings.value }: SendOverrides = {},
 ) {
     const chainIdFinally = getPayloadChainId(payload) ?? chainId
+    const accountFinally = getPayloadAccount(payload) ?? account
     const config = getPayloadConfig(payload)
     if (config && !config.chainId) config.chainId = chainIdFinally
     if (payload.method === EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT)
@@ -509,15 +512,15 @@ export async function INTERNAL_nativeSend(
         }
         callback(null, response)
         if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) {
-            handleNonce(chainIdFinally, account, null, response)
+            handleNonce(chainIdFinally, accountFinally, null, response)
             handleTransferTransaction(chainIdFinally, payload)
-            handleRecentTransaction(chainIdFinally, account, payload, response)
+            handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
         }
     } catch (error) {
         if (!(error instanceof Error)) return
         callback(error, undefined)
         if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) {
-            handleNonce(chainIdFinally, account, error, undefined)
+            handleNonce(chainIdFinally, accountFinally, error, undefined)
         }
     }
 }

packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx

@@ -1,9 +1,11 @@
+import urlcat from 'urlcat'
 import { memo, useCallback } from 'react'
+import { useMount } from 'react-use'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
-import { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import {
     getRegisteredWeb3Networks,
     getRegisteredWeb3Providers,
@@ -14,7 +16,6 @@ import {
 import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { PopupContext } from '../../../hook/usePopupContext'
-import { useMount } from 'react-use'
 
 const useStyles = makeStyles()((theme) => ({
     box: {
@@ -71,12 +72,28 @@ const ConnectWalletPage = memo(() => {
     )
     const { ProviderIconClickBait } = useWeb3UI(NetworkPluginID.PLUGIN_EVM).SelectProviderDialog ?? {}
 
-    const onSubmit = useCallback(async (result?: Web3Plugin.ConnectionResult) => {
-        navigate(PopupRoutes.VerifyWallet, {
-            state: result as Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>,
-        })
+    const onClick = useCallback((network: Web3Plugin.NetworkDescriptor, provider: Web3Plugin.ProviderDescriptor) => {
+        if (provider.type !== ProviderType.MaskWallet) return
+        navigate(
+            urlcat(PopupRoutes.SelectWallet, {
+                popup: true,
+            }),
+        )
     }, [])
 
+    const onSubmit = useCallback(
+        async (
+            network: Web3Plugin.NetworkDescriptor,
+            provider: Web3Plugin.ProviderDescriptor,
+            result?: Web3Plugin.ConnectionResult,
+        ) => {
+            navigate(PopupRoutes.VerifyWallet, {
+                state: result,
+            })
+        },
+        [],
+    )
+
     useTitle(t('plugin_wallet_on_connect'))
 
     useMount(() => {
@@ -93,7 +110,8 @@ const ConnectWalletPage = memo(() => {
                             key={provider.ID}
                             network={network}
                             provider={provider}
-                            onSubmit={(network, provider, result) => onSubmit(result)}>
+                            onClick={onClick}
+                            onSubmit={onSubmit}>
                             <div className={classes.walletItem}>
                                 <img src={provider.icon.toString()} className={classes.walletIcon} />
                                 <Typography className={classes.walletName}>{provider.name}</Typography>

packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx

@@ -5,6 +5,7 @@ import { makeStyles } from '@masknet/theme'
 import {
     ChainId,
     getNetworkName,
+    getNetworkTypeFromChainId,
     isSameAddress,
     ProviderType,
     useAccount,
@@ -14,12 +15,12 @@ import {
 import { Button, List, Typography } from '@mui/material'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
-import { useSelectAccount } from '../../../../../plugins/Wallet/hooks/useSelectAccount'
 import { useI18N } from '../../../../../utils'
 import Services from '../../../../service'
 import { WalletItem } from './WalletItem'
-import { getRegisteredWeb3Networks } from '@masknet/plugin-infra/web3'
 import { ChainIcon, WalletIcon } from '@masknet/shared'
+import { PopupRoutes } from '@masknet/shared-base'
+import { getRegisteredWeb3Networks } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     content: {
@@ -99,7 +100,6 @@ const SelectWallet = memo(() => {
     const wallets = useWallets(ProviderType.MaskWallet)
 
     const [selected, setSelected] = useState(wallet)
-    const [, onSelectAccount] = useSelectAccount()
 
     const search = new URLSearchParams(location.search)
 
@@ -122,18 +122,23 @@ const SelectWallet = memo(() => {
 
     const handleCancel = useCallback(async () => {
         if (isPopup) {
-            onSelectAccount([], ChainId.Mainnet)
             navigate(-1)
         } else {
             await WalletRPC.selectAccount([], ChainId.Mainnet)
             await Services.Helper.removePopupWindow()
         }
-    }, [isPopup, navigate])
+    }, [isPopup])
 
     const handleConfirm = useCallback(async () => {
         if (isPopup) {
-            onSelectAccount([selected], chainId)
-            navigate(-1)
+            navigate(PopupRoutes.VerifyWallet, {
+                state: {
+                    chainId,
+                    account: selected,
+                    networkType: getNetworkTypeFromChainId(chainId),
+                    providerType: ProviderType.MaskWallet,
+                },
+            })
             return
         }
 
@@ -150,7 +155,7 @@ const SelectWallet = memo(() => {
         }
         await WalletRPC.selectAccount([selected], chainId)
         return Services.Helper.removePopupWindow()
-    }, [chainId, selected, isPopup, isInternal, navigate])
+    }, [chainId, selected, isPopup, isInternal])
 
     useEffect(() => {
         if (!selected && wallets.length) setSelected(first(wallets)?.address ?? '')

packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx

@@ -1,14 +1,14 @@
 import { memo, useMemo, useState } from 'react'
+import { useAsyncFn, useLocation } from 'react-use'
+import { useLocation as useRouteLocation , useNavigate } from 'react-router-dom'
+import { LoadingButton } from '@mui/lab'
+import { toUtf8 } from 'web3-utils'
 import { useUnconfirmedRequest } from '../hooks/useUnConfirmedRequest'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
 import { ChainId, EthereumRpcType, NetworkType, ProviderType, useWallet } from '@masknet/web3-shared-evm'
-import { useAsyncFn, useLocation } from 'react-use'
-import { useLocation as useRouteLocation , useNavigate } from 'react-router-dom'
 import Services from '../../../../service'
-import { LoadingButton } from '@mui/lab'
-import { toUtf8 } from 'web3-utils'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useTitle } from '../../../hook/useTitle'
 import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types'
@@ -101,7 +101,7 @@ const SignRequest = memo(() => {
         ) {
             let message = value.computedPayload.data
             try {
-                message = toUtf8(message)
+                message = toUtf8(value.computedPayload.data)
             } catch (error) {
                 console.log(error)
             }

packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx

@@ -2,7 +2,7 @@ import { useCallback, cloneElement, isValidElement } from 'react'
 import { unreachable } from '@dimensiondev/kit'
 import type { Web3Plugin } from '@masknet/plugin-infra/web3'
 import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { isDashboardPage } from '@masknet/shared-base'
+import { isDashboardPage, isPopupPage } from '@masknet/shared-base'
 import {
     getChainIdFromNetworkType,
     isFortmaticSupported,
@@ -54,6 +54,13 @@ export function ProviderIconClickBait({
             }
         }
 
+        // it's not necessary to open the connection dialog on popup page.
+        // it will switch to the wallet selection page directly.
+        if (isPopupPage() && providerType === ProviderType.MaskWallet) {
+            onClick?.(network, provider)
+            return
+        }
+
         switch (providerType) {
             case ProviderType.MaskWallet:
             case ProviderType.MetaMask:

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx

@@ -6,7 +6,6 @@ import { RedPacketERC721Form } from './RedPacketERC721Form'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
 import { useI18N } from '../../../utils'
 import { activatedSocialNetworkUI } from '../../../social-network'
-
 import { IconURLs } from './IconURL'
 
 interface StyleProps {

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useState } from 'react'
 import { useAsyncRetry } from 'react-use'
-import urlcat from 'urlcat'
-import { useNavigate } from 'react-router-dom'
-import { first } from 'lodash-unified'
 import { DialogContent } from '@mui/material'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { safeUnreachable, delay } from '@dimensiondev/kit'
 import {
     ChainId,
@@ -15,13 +12,11 @@ import {
     resolveNetworkName,
     resolveProviderName,
 } from '@masknet/web3-shared-evm'
-import { isPopupPage, PopupRoutes } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import { WalletMessages } from '../../messages'
 import { ConnectionProgress } from './ConnectionProgress'
 import Services from '../../../../extension/service'
-import { useSelectAccount } from '../../hooks/useSelectAccount'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -32,10 +27,7 @@ const useStyles = makeStyles()((theme) => ({
 export interface ConnectWalletDialogProps {}
 
 export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
-    const classes = useStylesExtends(useStyles(), props)
-
-    const navigate = useNavigate()
-    const [onSelectAccountPrepare] = useSelectAccount()
+    const { classes } = useStyles()
 
     const [providerType, setProviderType] = useState<ProviderType | undefined>()
     const [networkType, setNetworkType] = useState<NetworkType | undefined>()
@@ -76,26 +68,7 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
 
         switch (providerType) {
             case ProviderType.MaskWallet:
-                if (isPopupPage()) {
-                    ;({ account, chainId } = await new Promise<{
-                        account: string
-                        chainId: ChainId
-                    }>(async (resolve) => {
-                        onSelectAccountPrepare(async (accounts, chainId) => {
-                            resolve({
-                                chainId,
-                                account: first(accounts) ?? '',
-                            })
-                        })
-                        navigate(
-                            urlcat(PopupRoutes.SelectWallet, {
-                                popup: true,
-                            }),
-                        )
-                    }))
-                } else {
-                    ;({ account, chainId } = await Services.Ethereum.connectMaskWallet(expectedChainId))
-                }
+                ;({ account, chainId } = await Services.Ethereum.connectMaskWallet(expectedChainId))
                 break
             case ProviderType.MetaMask:
                 ;({ account, chainId } = await Services.Ethereum.connectMetaMask())
@@ -168,7 +141,7 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
             networkType,
             providerType,
         }
-    }, [networkType, providerType, onSelectAccountPrepare])
+    }, [networkType, providerType])
 
     const connection = useAsyncRetry<true>(async () => {
         if (!open) return true
@@ -183,9 +156,6 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
 
     if (!providerType) return null
 
-    // The connection state is transferring between pages when we connect Mask Wallet on the popup page
-    if (isPopupPage() && providerType === ProviderType.MaskWallet) return null
-
     return (
         <InjectedDialog title={`Connect to ${resolveProviderName(providerType)}`} open={open} onClose={onClose}>
             <DialogContent className={classes.content}>