feat: popup connect wallet

packages/dashboard/src/initialization/Dashboard.tsx

@@ -60,8 +60,8 @@ export default function DashboardRoot() {
                                         <SharedContextProvider>
                                             <HashRouter>
                                                 <Pages />
+                                                <PluginRender />
                                             </HashRouter>
-                                            <PluginRender />
                                         </SharedContextProvider>
                                     </CustomSnackbarProvider>
                                 </ErrorBoundary>

packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx

@@ -1,10 +1,8 @@
-import { useCallback } from 'react'
 import { ExternalLink } from 'react-feather'
 import classNames from 'classnames'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Button, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import {
     useAccount,
     useWeb3State,
@@ -16,10 +14,7 @@ import {
     useWallet,
 } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
-import { WalletMessages } from '../../../plugins/Wallet/messages'
 import { useI18N } from '../../../utils'
-import Services from '../../../extension/service'
-import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles()((theme) => ({
     currentAccount: {
@@ -109,34 +104,6 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
 
     const { value: domain } = useReverseAddress(account)
 
-    // #region change provider
-    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
-        WalletMessages.events.selectProviderDialogUpdated,
-    )
-    // #endregion
-
-    // #region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-    )
-    // #endregion
-
-    const onDisconnect = useCallback(async () => {
-        switch (providerType) {
-            case ProviderType.WalletConnect:
-                setWalletConnectDialog({
-                    open: true,
-                    uri: await Services.Ethereum.createConnectionURI(),
-                })
-                break
-            case ProviderType.Fortmatic:
-                await Services.Ethereum.disconnectFortmatic(chainId)
-                break
-        }
-    }, [chainId, providerType, setWalletConnectDialog])
-
-    const onChange = props.changeWallet
-
     return account ? (
         <section className={classNames(classes.currentAccount)}>
             <WalletIcon
@@ -181,33 +148,23 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             </div>
             {!props.disableChange && (
                 <section>
-                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
-                        <ActionButtonPromise
-                            className={classes.actionButton}
-                            size="small"
-                            variant="contained"
-                            init={t('wallet_status_button_disconnect')}
-                            waiting={t('wallet_status_button_disconnecting')}
-                            failed={t('failed')}
-                            complete={t('done')}
-                            executor={onDisconnect}
-                            completeIcon={<></>}
-                            failIcon={<></>}
-                        />
-                    ) : null}
                     <Button
                         className={classNames(classes.actionButton)}
                         variant="contained"
                         size="small"
-                        onClick={onChange}>
+                        onClick={props.changeWallet}>
                         {t('wallet_status_button_change')}
                     </Button>
                 </section>
             )}
         </section>
     ) : (
         <section className={classes.connectButtonWrapper}>
-            <Button className={classNames(classes.actionButton)} variant="contained" size="small" onClick={onChange}>
+            <Button
+                className={classNames(classes.actionButton)}
+                variant="contained"
+                size="small"
+                onClick={props.changeWallet}>
                 {t('plugin_wallet_on_connect')}
             </Button>
         </section>

packages/mask/src/components/shared/WalletStatusBox.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useCopyToClipboard } from 'react-use'
 import { Copy, ExternalLink } from 'react-feather'
 import classNames from 'classnames'
@@ -20,8 +19,6 @@ import {
 import { FormattedAddress, useSnackbarCallback, WalletIcon } from '@masknet/shared'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
-import Services from '../../extension/service'
-import { ActionButtonPromise } from '../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     content: {
@@ -130,26 +127,6 @@ export function WalletStatusBox(props: WalletStatusBox) {
     )
     // #endregion
 
-    // #region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-    )
-    // #endregion
-
-    const onDisconnect = useCallback(async () => {
-        switch (providerType) {
-            case ProviderType.WalletConnect:
-                setWalletConnectDialog({
-                    open: true,
-                    uri: await Services.Ethereum.createConnectionURI(),
-                })
-                break
-            case ProviderType.Fortmatic:
-                await Services.Ethereum.disconnectFortmatic(chainId)
-                break
-        }
-    }, [chainId, providerType, setWalletConnectDialog])
-
     return account ? (
         <section className={classNames(classes.currentAccount, props.isDashboard ? classes.dashboardBackground : '')}>
             <WalletIcon
@@ -201,21 +178,6 @@ export function WalletStatusBox(props: WalletStatusBox) {
             </div>
             {!props.disableChange && (
                 <section>
-                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
-                        <ActionButtonPromise
-                            className={classes.actionButton}
-                            color="primary"
-                            size="small"
-                            variant="contained"
-                            init={t('wallet_status_button_disconnect')}
-                            waiting={t('wallet_status_button_disconnecting')}
-                            failed={t('failed')}
-                            complete={t('done')}
-                            executor={onDisconnect}
-                            completeIcon={<></>}
-                            failIcon={<></>}
-                        />
-                    ) : null}
                     <Button
                         className={classNames(classes.actionButton)}
                         variant="contained"

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

@@ -1,6 +1,6 @@
 import { first } from 'lodash-unified'
 import { defer } from '@dimensiondev/kit'
-import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import type { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import * as MaskWallet from './providers/MaskWallet'
 import * as MetaMask from './providers/MetaMask'
 import * as WalletConnect from './providers/WalletConnect'
@@ -50,8 +50,8 @@ export async function cancelWalletConnect() {
 }
 // #endregion
 
-export async function connectMaskWallet(networkType: NetworkType) {
-    const { accounts, chainId } = await MaskWallet.requestAccounts(networkType)
+export async function connectMaskWallet(expectedChainId: ChainId) {
+    const { accounts, chainId } = await MaskWallet.requestAccounts(expectedChainId)
     return {
         account: first(accounts),
         chainId,

packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts

@@ -1,10 +1,10 @@
 import MaskWallet from 'web3'
 import type { HttpProvider } from 'web3-core'
 import { PopupRoutes } from '@masknet/shared-base'
-import { ChainId, getChainIdFromNetworkType, getChainRPC, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import { ChainId, getChainRPC, ProviderType } from '@masknet/web3-shared-evm'
 import { currentChainIdSettings } from '../../../../plugins/Wallet/settings'
-import { getWallets, selectAccountPrepare } from '../../../../plugins/Wallet/services'
 import { openPopupWindow } from '../../../../../background/services/helper'
+import { WalletRPC } from '../../../../plugins/Wallet/messages'
 
 // #region providers
 const providerPool = new Map<string, HttpProvider>()
@@ -66,21 +66,21 @@ export function createWeb3({
 }
 // #endregion
 
-export async function requestAccounts(networkType: NetworkType) {
-    const wallets = await getWallets(ProviderType.MaskWallet)
+export async function requestAccounts(chainId: ChainId) {
+    const wallets = await WalletRPC.getWallets(ProviderType.MaskWallet)
     return new Promise<{
         chainId: ChainId
         accounts: string[]
     }>(async (resolve, reject) => {
         try {
-            await selectAccountPrepare((accounts, chainId) => {
+            await WalletRPC.selectAccountPrepare((accounts, chainId) => {
                 resolve({
                     chainId,
                     accounts,
                 })
             })
             await openPopupWindow(wallets.length > 0 ? PopupRoutes.SelectWallet : undefined, {
-                chainId: getChainIdFromNetworkType(networkType),
+                chainId,
             })
         } catch {
             reject(new Error('Failed to connect to Mask Network.'))

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

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { first } from 'lodash-unified'
 import { makeStyles } from '@masknet/theme'
 import {
@@ -14,6 +14,7 @@ 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'
@@ -87,28 +88,42 @@ const SelectWallet = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
     const location = useLocation()
+    const navigate = useNavigate()
     const wallet = useAccount()
     const wallets = useWallets(ProviderType.MaskWallet)
 
     const [selected, setSelected] = useState(wallet)
+    const [, onSelectAccount] = useSelectAccount()
 
     const search = new URLSearchParams(location.search)
 
     const chainIdSearched = search.get('chainId')
-    const chainId = chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : undefined
+    // The previous page is popup page
+    const isPopup = search.get('popup')
     // Swap page also uses SelectWallet, but changing wallet in Swap page
     // should not affect other pages, for example, dashboard.
     // So we make Swap page 'internal' for popups
     const isInternal = search.get('internal')
 
+    const chainId = chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : ChainId.Mainnet
     const chainIdValid = useChainIdValid()
 
     const handleCancel = useCallback(async () => {
-        await WalletRPC.selectAccount([], ChainId.Mainnet)
-        await Services.Helper.removePopupWindow()
-    }, [])
+        if (isPopup) {
+            onSelectAccount([], ChainId.Mainnet)
+        } else {
+            await WalletRPC.selectAccount([], ChainId.Mainnet)
+            await Services.Helper.removePopupWindow()
+        }
+    }, [isPopup, navigate])
 
     const handleConfirm = useCallback(async () => {
+        if (isPopup) {
+            onSelectAccount([selected], chainId)
+            navigate(-1)
+            return
+        }
+
         await WalletRPC.updateMaskAccount({
             chainId,
             account: selected,
@@ -120,17 +135,15 @@ const SelectWallet = memo(() => {
                 providerType: ProviderType.MaskWallet,
             })
         }
-        if (chainId) {
-            await WalletRPC.selectAccount([selected], chainId)
-        }
+        await WalletRPC.selectAccount([selected], chainId)
         return Services.Helper.removePopupWindow()
-    }, [chainId, selected, isInternal])
+    }, [chainId, selected, isPopup, isInternal, navigate])
 
     useEffect(() => {
         if (!selected && wallets.length) setSelected(first(wallets)?.address ?? '')
-    }, [selected, wallets])
+    }, [selected, wallets, location.state])
 
-    return chainId && chainIdValid ? (
+    return chainIdValid ? (
         <>
             <div className={classes.content}>
                 <div className={classes.header}>

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

@@ -1,16 +1,17 @@
+import { memo, useState } from 'react'
+import { useLocation } from 'react-use'
+import { useNavigate } from 'react-router-dom'
 import { NextIDAction, NextIDPayload, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
-import { memo, useState } from 'react'
+import { ChainId, isSameAddress, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import type { Web3Plugin } from '@masknet/plugin-infra/src/web3-types'
 import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
 import Services from '../../../../service'
 import { PersonaContext } from '../../Personas/hooks/usePersonaContext'
 import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { useQueryIsBound } from '../../../hook/useQueryIsBound'
-import { useNavigate } from 'react-router-dom'
-import { useLocation } from 'react-use'
-import { isSameAddress } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -32,7 +33,7 @@ const VerifyWallet = memo(() => {
     const navigate = useNavigate()
     useTitle(t('popups_add_wallet'))
     const location = useLocation()
-    const wallet = location.state.usr
+    const wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
 
     const bounds = useQueryIsBound(wallet.account)
     if (bounds && bounds.length > 0 && !isBound) {
@@ -72,7 +73,10 @@ const VerifyWallet = memo(() => {
     const walletSign = async () => {
         if (!payload) throw new Error('payload error')
         try {
-            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.account)
+            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.account, '', {
+                chainId: wallet.chainId,
+                providerType: wallet.providerType,
+            })
             if (!walletSig) throw new Error('Wallet sign failed')
             await NextIDProof.bindProof(
                 payload.uuid,