refactor: the connect wallet dialog

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

@@ -21,15 +21,15 @@ import { WalletMessages } from '../../../plugins/Wallet/messages'
 import { useI18N } from '../../../utils'
 import { usePendingTransactions } from './usePendingTransactions'
 
-const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
+const useStyles = makeStyles()((theme) => ({
     content: {
         padding: theme.spacing(2, 3, 3),
     },
     currentAccount: {
         padding: theme.spacing(1.5),
         marginBottom: theme.spacing(2),
         display: 'flex',
-        backgroundColor: isDashboard ? getMaskColor(theme).primaryBackground2 : theme.palette.background.default,
+        backgroundColor: isDashboardPage() ? getMaskColor(theme).primaryBackground2 : theme.palette.background.default,
         borderRadius: 8,
         alignItems: 'center',
     },
@@ -92,15 +92,13 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }
     },
 }))
 interface WalletStatusBox {
-    isDashboard?: boolean
     disableChange?: boolean
     showPendingTransaction?: boolean
 }
 export function WalletStatusBox(props: WalletStatusBox) {
     const { t } = useI18N()
 
-    const isDashboard = isDashboardPage()
-    const { classes } = useStyles({ isDashboard })
+    const { classes } = useStyles()
     const chainId = useChainId()
     const account = useAccount()
     const wallet = useWallet()
@@ -140,7 +138,7 @@ export function WalletStatusBox(props: WalletStatusBox) {
                 className={classNames(
                     classes.statusBox,
                     classes.currentAccount,
-                    props.isDashboard ? classes.dashboardBackground : '',
+                    isDashboardPage() ? classes.dashboardBackground : '',
                 )}>
                 <WalletIcon
                     size={48}

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

@@ -17,12 +17,15 @@ export async function createConnectionURI() {
 
 // step2:
 // If user confirmed the request we will receive the 'connect' event
-let resolveConnect: ((result: { account?: string; chainId: ChainId }) => void) | undefined
+type Account = { account?: string; chainId: ChainId }
+let deferredConnect: Promise<Account> | null = null
+let resolveConnect: ((result: Account) => void) | undefined
 let rejectConnect: ((error: Error) => void) | undefined
 
 export async function connectWalletConnect() {
-    const [deferred, resolve, reject] = defer<{ account?: string; chainId: ChainId }>()
+    const [deferred, resolve, reject] = defer<Account>()
 
+    deferredConnect = deferred
     resolveConnect = resolve
     rejectConnect = reject
     createWalletConnect().then(resolve, reject)
@@ -32,6 +35,7 @@ export async function connectWalletConnect() {
 
 export async function createWalletConnect() {
     const connector = await WalletConnect.createConnectorIfNeeded()
+
     if (connector.connected)
         return {
             account: first(connector.accounts),
@@ -45,8 +49,13 @@ export async function createWalletConnect() {
     }
 }
 
+export async function untilWalletConnect() {
+    if (!deferredConnect) throw new Error('No connection.')
+    return deferredConnect
+}
+
 export async function cancelWalletConnect() {
-    rejectConnect?.(new Error('Failed to connect to WalletConnect.'))
+    rejectConnect?.(new Error('User rejected the request.'))
 }
 // #endregion
 

packages/mask/src/extension/popups/components/LoadingPlaceholder/index.tsx

@@ -15,15 +15,21 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export const LoadingPlaceholder = memo(() => {
+export interface LoadingPlaceholderProps {
+    title?: string
+    titleColor?: string
+    iconColor?: string
+}
+
+export const LoadingPlaceholder = memo((props: LoadingPlaceholderProps) => {
     const { t } = useI18N()
     const { classes } = useStyles()
 
     return (
         <main className={classes.container}>
-            <LoadingIcon style={{ color: '#1C68F3' }} />
-            <Typography variant="caption" color="#A6A9B6">
-                {t('loading')}
+            <LoadingIcon style={{ color: props.iconColor ?? '#1C68F3' }} />
+            <Typography variant="caption" color={props.titleColor ?? '#A6A9B6'}>
+                {props.title ?? t('loading')}
             </Typography>
         </main>
     )

packages/mask/src/plugins/Wallet/Dashboard/index.tsx

@@ -23,7 +23,7 @@ const dashboard: Plugin.Dashboard.Definition = {
                 <SelectWalletDialog />
                 <SelectProviderDialog />
                 <SelectNftContractDialog />
-                <WalletStatusDialog isDashboard />
+                <WalletStatusDialog />
                 <ConnectWalletDialog />
                 <WalletConnectQRCodeDialog />
                 <WalletRenameWalletDialog />

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

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useAsyncRetry } from 'react-use'
 import { DialogContent } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { safeUnreachable, delay } from '@dimensiondev/kit'
 import {
     ChainId,
@@ -17,16 +17,30 @@ import { InjectedDialog } from '@masknet/shared'
 import { WalletMessages } from '../../messages'
 import { ConnectionProgress } from './ConnectionProgress'
 import Services from '../../../../extension/service'
+import { isPopupPage } from '@masknet/shared-base'
+import { LoadingPlaceholder } from '../../../../extension/popups/components/LoadingPlaceholder'
+import { useI18N } from '../../../../utils'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
         padding: theme.spacing(2.5),
     },
+    popupDialog: {
+        width: 200,
+        margin: 'auto',
+    },
+    popupDialogPaper: {
+        backgroundColor: 'transparent',
+    },
+    popupDialogContent: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    },
 }))
 
 export interface ConnectWalletDialogProps {}
 
 export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
+    const { t } = useI18N()
     const { classes } = useStyles()
     const [providerType, setProviderType] = useState<ProviderType | undefined>()
     const [networkType, setNetworkType] = useState<NetworkType | undefined>()
@@ -150,8 +164,38 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
         return true
     }, [open, connectTo, setConnectWalletDialog])
 
+    const { showSnackbar } = usePopupCustomSnackbar()
+    useEffect(() => {
+        if (!isPopupPage() || !connection.error) return
+        setConnectWalletDialog({
+            open: false,
+        })
+        showSnackbar(connection.error.message, {
+            variant: 'error',
+        })
+    }, [connection.error, showSnackbar])
+
     if (!providerType) return null
 
+    if (isPopupPage()) {
+        return (
+            <InjectedDialog
+                className={classes.popupDialog}
+                open={open}
+                hideBackdrop
+                disableBackdropClick
+                PaperProps={{
+                    className: classes.popupDialogPaper,
+                    elevation: 0,
+                }}
+                BackdropProps={{}}>
+                <DialogContent className={classes.popupDialogContent}>
+                    <LoadingPlaceholder title={t('connecting')} titleColor="#ffffff" iconColor="#ffffff" />
+                </DialogContent>
+            </InjectedDialog>
+        )
+    }
+
     return (
         <InjectedDialog title={`Connect to ${resolveProviderName(providerType)}`} open={open} onClose={closeDialog}>
             <DialogContent className={classes.content}>

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

@@ -38,8 +38,13 @@ export const WalletConnectQRCodeDialog: React.FC = () => {
 
     useAsync(async () => {
         if (!open) return
-        await Services.Ethereum.connectWalletConnect()
-        closeDialog()
+        try {
+            await Services.Ethereum.untilWalletConnect()
+        } catch {
+            // do nothing
+        } finally {
+            closeDialog()
+        }
     }, [open])
 
     let mode: QRCodeDialogProps['mode'] = 'qrcode'

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

@@ -39,9 +39,7 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.primary,
     },
 }))
-export interface WalletStatusDialogProps {
-    isDashboard?: boolean
-}
+export interface WalletStatusDialogProps {}
 export function WalletStatusDialog(props: WalletStatusDialogProps) {
     const { t } = useI18N()
 
@@ -65,7 +63,7 @@ export function WalletStatusDialog(props: WalletStatusDialogProps) {
     return (
         <InjectedDialog title="Mask Network" open={open} onClose={closeDialog} maxWidth="sm">
             <DialogContent className={classes.content}>
-                <WalletStatusBox isDashboard={props.isDashboard} showPendingTransaction />
+                <WalletStatusBox showPendingTransaction />
             </DialogContent>
             {!chainIdValid ? (
                 <DialogActions className={classes.footer}>

packages/shared/src/contexts/components/InjectedDialog.tsx

@@ -27,6 +27,7 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
     dialogTitle: {
         whiteSpace: 'nowrap',
+        display: 'flex',
         gridTemplateColumns: '50px auto 50px',
     },
     dialogTitleEndingContent: {