fix(wallet): reset to mask wallet on cancel and support embedded select view

Author: swkatmask

packages/mask/popups/components/ConnectedWallet/index.tsx

@@ -12,10 +12,10 @@ import {
     type PersonaInformation,
 } from '@masknet/shared-base'
 import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
-import { useChainContext, useNetworkDescriptor, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
+import { useChainContext, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, NextIDProof } from '@masknet/web3-providers'
 import { isSameAddress, resolveNextIDPlatformWalletName } from '@masknet/web3-shared-base'
-import { ChainId, formatDomainName, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { formatDomainName, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Box, Link, Typography, useTheme } from '@mui/material'
 import { useQueries } from '@tanstack/react-query'
 import { memo, useCallback } from 'react'
@@ -105,9 +105,6 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
         })),
     })
 
-    // TODO: remove this after next dot id support multiple chain
-    const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, ChainId.Mainnet)
-
     const handleConfirmDisconnect = useCallback(async (wallet: BindingProof, persona: PersonaInformation) => {
         try {
             const result = await NextIDProof.createPersonaPayload(

packages/mask/popups/pages/Personas/ConnectWallet/index.tsx

@@ -15,7 +15,6 @@ import {
     useChainContext,
     useNetworkContext,
     usePrivyWallet,
-    useProviderDescriptor,
     useReverseAddress,
     useWallets,
 } from '@masknet/web3-hooks-base'
@@ -107,7 +106,6 @@ export const Component = memo(function ConnectWalletPage() {
     const { providerType, chainId, account } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const wallets = useWallets()
 
-    const providerDescriptor = useProviderDescriptor(pluginID, providerType)
     const { data: domain } = useReverseAddress(pluginID, account)
     const { currentPersona } = PersonaContext.useContainer()
 
@@ -217,11 +215,14 @@ export const Component = memo(function ConnectWalletPage() {
             navigate(-1)
             return
         }
+        // reset to MaskWallet after cancellation
+        const maskAccount = wallets.some((x) => isSameAddress(x.address, account)) ? account : wallets[0].address
         await EVMWeb3.connect({
             providerType: ProviderType.MaskWallet,
+            account: maskAccount,
         })
         await Services.Helper.removePopupWindow()
-    }, [signResult])
+    }, [signResult, wallets, account, navigate, providerType])
 
     const handleChooseAnotherWallet = useCallback(() => {
         modalNavigate(PopupModalRoutes.SelectProvider)

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

@@ -3,17 +3,16 @@ import { Trans, useLingui } from '@lingui/react/macro'
 import { PersonaContext } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
-import { useChainContext, useChainIdValid, useNetworks, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
+import { useChainContext, useChainIdValid, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { ProviderType, type ChainId } from '@masknet/web3-shared-evm'
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Button, Typography, type BoxProps } from '@mui/material'
 import { first } from 'lodash-es'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useAsync } from 'react-use'
 import urlcat from 'urlcat'
-import { BottomController } from '../../../components/BottomController/index.js'
 import { WalletItem } from '../../../components/WalletItem/index.js'
 import { useTitle, useVerifiedWallets } from '../../../hooks/index.js'
 import { ProfilePhotoType } from '../type.js'
@@ -32,9 +31,20 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
         alignItems: 'center',
     },
+    actions: {
+        background: theme.palette.maskColor.secondaryBottom,
+        padding: theme.spacing(2),
+        boxShadow: theme.palette.maskColor.bottomBg,
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        columnGap: theme.spacing(2),
+    },
 }))
 
-export const Component = memo(function SelectWallet() {
+interface SelectWalletProps extends BoxProps {
+    embed?: boolean
+}
+export const Component = memo(function SelectWallet({ embed, ...props }: SelectWalletProps) {
     const { t } = useLingui()
     const { classes, cx } = useStyles()
     const navigate = useNavigate()
@@ -53,7 +63,6 @@ export const Component = memo(function SelectWallet() {
         chainId: chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : undefined,
     })
 
-    const networks = useNetworks(NetworkPluginID.PLUGIN_EVM)
     const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM, chainId)
 
     const { value: localWallets = EMPTY_LIST } = useAsync(async () => Services.Wallet.getWallets(), [])
@@ -83,13 +92,15 @@ export const Component = memo(function SelectWallet() {
     }, [isVerifyWalletFlow])
 
     const handleConfirm = useCallback(async () => {
-        if (isVerifyWalletFlow || isSettingNFTAvatarFlow) {
+        if (isVerifyWalletFlow || isSettingNFTAvatarFlow || embed) {
             await EVMWeb3.connect({
                 account: selected,
                 chainId,
                 providerType: ProviderType.MaskWallet,
             })
 
+            if (embed) return
+
             navigate(
                 isSettingNFTAvatarFlow ?
                     urlcat(PopupRoutes.PersonaAvatarSetting, { tab: ProfilePhotoType.NFT })
@@ -112,22 +123,22 @@ export const Component = memo(function SelectWallet() {
         }
 
         return Services.Helper.removePopupWindow()
-    }, [source, isVerifyWalletFlow, selected, chainId, wallets, isSettingNFTAvatarFlow, networks, Network])
+    }, [source, isVerifyWalletFlow, selected, chainId, wallets, isSettingNFTAvatarFlow, Network, embed])
 
     useTitle(t`Select Wallet`)
 
     if (!chainIdValid)
         return (
-            <Box className={classes.placeholder}>
+            <Box {...props} className={cx(classes.placeholder, props.className)}>
                 <Typography>
                     <Trans>Unsupported network type</Trans>
                 </Typography>
             </Box>
         )
 
     return (
-        <Box overflow="auto" data-hide-scrollbar>
-            <Box pt={1} pb={9} px={2} display="flex" flexDirection="column" rowGap="6px">
+        <Box overflow="auto" display="flex" flexGrow={1} flexDirection="column" data-hide-scrollbar {...props}>
+            <Box pt={1} pb={9} px={2} display="flex" flexGrow={1} minHeight={0} flexDirection="column" rowGap="6px">
                 {wallets.map((item) => {
                     const disabled =
                         isVerifyWalletFlow && bindingWallets?.some((x) => isSameAddress(x.identity, item.address))
@@ -146,14 +157,14 @@ export const Component = memo(function SelectWallet() {
                     )
                 })}
             </Box>
-            <BottomController>
+            <div className={classes.actions}>
                 <Button variant="outlined" fullWidth onClick={handleCancel}>
                     <Trans>Cancel</Trans>
                 </Button>
                 <ActionButton fullWidth onClick={handleConfirm}>
                     <Trans>Confirm</Trans>
                 </ActionButton>
-            </BottomController>
+            </div>
         </Box>
     )
 })

packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx

@@ -103,7 +103,11 @@ export const Component = memo(function WalletAssets() {
         [chainId, navigate],
     )
 
-    return wallet ? <WalletAssetsUI onAddToken={handleAdd} /> : <SelectWallet />
+    return wallet ?
+            <WalletAssetsUI onAddToken={handleAdd} />
+        :   <Box pb="72px" display="flex" flexGrow={1} minHeight={0}>
+                <SelectWallet flexGrow={1} embed />
+            </Box>
 })
 
 interface WalletAssetsUIProps {

packages/shared-base/src/types/Wallet.ts

@@ -29,7 +29,7 @@ export interface Wallet {
     storedKeyInfo?: api.IStoredKeyInfo
     /** record created at */
     createdAt: Date
-    /** an abstract wallet has a owner */
+    /** only abstract wallet has owner */
     owner?: string
     /** record updated at */
     updatedAt: Date