diff --git a/packages/mask/src/extension/background-script/EthereumServices/send.ts b/packages/mask/src/extension/background-script/EthereumServices/send.ts index d77dd4d07ca2..f13fc170f3b5 100644 --- a/packages/mask/src/extension/background-script/EthereumServices/send.ts +++ b/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) } } } diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx index abee2661dd53..ccd7e34befa6 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx +++ b/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, - }) + 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}>
{provider.name} diff --git a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx index 0810148f10e2..9758db558ec0 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx +++ b/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 ?? '') diff --git a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx index 4c96786e1552..79d5f15f2e04 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx +++ b/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) } diff --git a/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx b/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx index cbab88e17121..f7e30af05294 100644 --- a/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx +++ b/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: diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx index 398ade09c04d..60b0327f3878 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx +++ b/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 { diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx index 87277ebce9fe..6c9c7e75c76a 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx +++ b/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() const [networkType, setNetworkType] = useState() @@ -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(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 ( diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx index c0f9b70785f7..a283ba043d4c 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx @@ -5,11 +5,11 @@ import { ProviderType, useWallets, useWallet, NetworkType } from '@masknet/web3- import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { InjectedDialog } from '@masknet/shared' import { DashboardRoutes } from '@masknet/shared-base' +import { delay } from '@dimensiondev/kit' import { useI18N } from '../../../utils' import { WalletMessages, WalletRPC } from '../messages' import { WalletInList } from '../../../components/shared/SelectWallet/WalletInList' import Services from '../../../extension/service' -import { delay } from '@dimensiondev/kit' const useStyles = makeStyles()({ content: { diff --git a/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts b/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts deleted file mode 100644 index 0afdcb849a03..000000000000 --- a/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useCallback } from 'react' -import type { ChainId } from '@masknet/web3-shared-evm' - -interface SelectAccountCallback { - (accounts: string[], chainId: ChainId): Promise -} - -let globalCallback: SelectAccountCallback | undefined - -export function useSelectAccount() { - const onSelectAccountPrepare = useCallback((callback: SelectAccountCallback) => { - if (callback) { - globalCallback = callback - } - }, []) - - const onSelectAccount = useCallback((accounts: string[], chainId: ChainId) => { - if (!globalCallback) return - globalCallback(accounts, chainId) - globalCallback = undefined - }, []) - - return [onSelectAccountPrepare, onSelectAccount] as const -} diff --git a/packages/web3-shared/evm/utils/payload.ts b/packages/web3-shared/evm/utils/payload.ts index 6266f39ee82c..e7a05eb16b85 100644 --- a/packages/web3-shared/evm/utils/payload.ts +++ b/packages/web3-shared/evm/utils/payload.ts @@ -15,6 +15,21 @@ export function getPayloadChainId(payload: JsonRpcPayload) { } } +export function getPayloadAccount(payload: JsonRpcPayload): string | undefined { + switch (payload.method) { + case EthereumMethodType.ETH_SIGN: + return first(payload.params) + case EthereumMethodType.PERSONAL_SIGN: + return payload.params?.[1] + case EthereumMethodType.ETH_SIGN_TYPED_DATA: + return first(payload.params) + case EthereumMethodType.ETH_SEND_TRANSACTION: + return getPayloadConfig(payload)?.from as string | undefined + default: + return + } +} + export function getPayloadConfig(payload: JsonRpcPayload) { switch (payload.method) { case EthereumMethodType.ETH_SEND_TRANSACTION: {