fix(wallet): render select wallet component when no wallet connected

packages/mask/background/services/helper/oauth-x.ts

@@ -187,10 +187,7 @@ export async function requestXOAuthToken() {
     await requestExtensionPermissionFromContentScript({
         origins: XOAuthRequestOrigins,
     })
-    await Promise.all([
-        fetch('https://firefly.social/api/mask/delegate-x-token'),
-        fetch('https://canary.firefly.social/api/mask/delegate-x-token'),
-    ])
+    await fetch('https://firefly.social/api/mask/delegate-x-token')
     const step1 = await getRequestToken(client)
     const step1_oauth_token = step1.get('oauth_token')
     pendingOAuth = Promise.withResolvers()

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/components/WalletItem/index.tsx

@@ -116,8 +116,6 @@ export const WalletItem = memo<WalletItemProps>(function WalletItem({
     )
     const fireflyAccount = useSubscription(PersistentStorages.Settings.storage.firefly_account.subscription)
 
-    if (wallet.owner) return null
-
     const walletName = wallet.name || (isFireflyWallet ? fireflyAccount.displayName : `${wallet.name}${extraName}`)
     return (
         <ListItem

packages/mask/popups/modals/ChooseNetworkModal/index.tsx

@@ -4,8 +4,15 @@ import { Icons } from '@masknet/icons'
 import { ImageIcon, NetworkIcon, ProgressiveText } from '@masknet/shared'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
-import { useBalance, useChainContext, useNetwork, useNetworks, useWeb3State } from '@masknet/web3-hooks-base'
-import { EVMWeb3 } from '@masknet/web3-providers'
+import {
+    useBalance,
+    useChainContext,
+    useNetwork,
+    useNetworks,
+    usePrivyWallet,
+    useWeb3State,
+} from '@masknet/web3-hooks-base'
+import { EVMWeb3, PRIVY_SUPPORTED_CHAINS } from '@masknet/web3-providers'
 import { formatBalance, type ReasonableNetwork } from '@masknet/web3-shared-base'
 import { ProviderType, type ChainId, type NetworkType, type SchemaType } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
@@ -29,6 +36,10 @@ const useStyles = makeStyles()((theme) => ({
         border: `1px solid ${theme.palette.maskColor.line}`,
         overflow: 'auto',
     },
+    disabled: {
+        opacity: '0.5',
+        cursor: 'not-allowed',
+    },
     icon: {
         width: 24,
         height: 24,
@@ -61,9 +72,10 @@ const useStyles = makeStyles()((theme) => ({
 interface NetworkItemProps {
     currentNetworkId: string | undefined
     network: ReasonableNetwork<ChainId, SchemaType, NetworkType>
+    disabled?: boolean
 }
-const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: NetworkItemProps) {
-    const { classes, theme } = useStyles()
+const NetworkItem = memo(function NetworkItem({ network, currentNetworkId, disabled = false }: NetworkItemProps) {
+    const { classes, theme, cx } = useStyles()
     const { closeModal } = useActionModal()
     const chainId = network.chainId
     const selected = network.ID === currentNetworkId
@@ -78,7 +90,7 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
 
     return (
         <li
-            className={classes.network}
+            className={cx(classes.network, disabled ? classes.disabled : null)}
             role="option"
             ref={(element) => {
                 if (!element || !selected) return
@@ -89,6 +101,7 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
                 }
             }}
             onClick={async () => {
+                if (disabled) return
                 await Network?.switchNetwork(network.ID)
                 await EVMWeb3.switchChain?.(chainId, {
                     providerType: ProviderType.MaskWallet,
@@ -132,10 +145,13 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
 export const ChooseNetworkModal = memo(function ChooseNetworkModal(props: ActionModalBaseProps) {
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const { chainId, account } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const network = useNetwork(NetworkPluginID.PLUGIN_EVM, chainId)
     const networks = useNetworks(NetworkPluginID.PLUGIN_EVM)
 
+    const privyWallet = usePrivyWallet(account)
+    const isPrivyWallet = !!privyWallet
+
     const action = (
         <ActionButton fullWidth onClick={() => navigate(PopupRoutes.NetworkManagement)}>
             <Trans>Manage Network</Trans>
@@ -147,9 +163,17 @@ export const ChooseNetworkModal = memo(function ChooseNetworkModal(props: Action
     return (
         <ActionModal header={<Trans>Network</Trans>} action={action} keepMounted {...props}>
             <ul className={classes.networkList}>
-                {networks.map((network) => (
-                    <NetworkItem key={network.ID} currentNetworkId={currentNetworkId} network={network} />
-                ))}
+                {networks.map((network) => {
+                    const disabled = isPrivyWallet ? !PRIVY_SUPPORTED_CHAINS.includes(network.chainId) : false
+                    return (
+                        <NetworkItem
+                            key={network.ID}
+                            currentNetworkId={currentNetworkId}
+                            network={network}
+                            disabled={disabled}
+                        />
+                    )
+                })}
             </ul>
         </ActionModal>
     )

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

@@ -1,22 +1,21 @@
-import { memo, useCallback, useMemo, useState } from 'react'
-import { useAsync } from 'react-use'
-import { first } from 'lodash-es'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import Services from '#services'
+import { Trans, useLingui } from '@lingui/react/macro'
+import { PersonaContext } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { useChainContext, useChainIdValid, useNetworks, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
-import { ProviderType, type ChainId } from '@masknet/web3-shared-evm'
-import { Box, Button, Typography } from '@mui/material'
-import { isSameAddress } from '@masknet/web3-shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
-import { PersonaContext } from '@masknet/shared'
+import { useChainContext, useChainIdValid, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
-import { useTitle, useVerifiedWallets } from '../../../hooks/index.js'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ProviderType, type ChainId } from '@masknet/web3-shared-evm'
+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 { WalletItem } from '../../../components/WalletItem/index.js'
-import { BottomController } from '../../../components/BottomController/index.js'
-import Services from '#services'
+import { useTitle, useVerifiedWallets } from '../../../hooks/index.js'
 import { ProfilePhotoType } from '../type.js'
-import urlcat from 'urlcat'
-import { Trans, useLingui } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     item: {
@@ -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(), [])
@@ -66,7 +75,6 @@ export const Component = memo(function SelectWallet() {
     }, [localWallets, allWallets])
     const defaultWallet = params.get('address') || account || first(wallets)?.address
     const [selected = defaultWallet, setSelected] = useState<string>()
-    console.log('bindingWallets', { bindingWallets, wallets, selected })
 
     const handleCancel = useCallback(async () => {
         if (isVerifyWalletFlow) {
@@ -84,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 })
@@ -113,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))
@@ -147,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/SwitchWallet/index.tsx

@@ -4,15 +4,15 @@ import { Icons } from '@masknet/icons'
 import { DashboardRoutes, ECKeyIdentifier, NetworkPluginID, PopupRoutes, type Wallet } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworks, useWallet, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
-import { EVMWeb3 } from '@masknet/web3-providers'
+import { EVMWeb3, PRIVY_SUPPORTED_CHAINS } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { ProviderType } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { Box, List, Typography } from '@mui/material'
+import { useWallets as usePrivyWallets } from '@privy-io/react-auth'
 import { memo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ActionModal, useActionModal } from '../../../components/index.js'
 import { WalletItem } from '../../../components/WalletItem/index.js'
-
 const useStyles = makeStyles()((theme) => ({
     content: {
         overflow: 'auto',
@@ -47,6 +47,7 @@ const SwitchWallet = memo(function SwitchWallet() {
     const { closeModal } = useActionModal()
     const wallet = useWallet()
     const wallets = useWallets()
+    const { wallets: privyWallets } = usePrivyWallets()
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
     const handleImport = useCallback(async () => {
@@ -61,9 +62,10 @@ const SwitchWallet = memo(function SwitchWallet() {
     const handleSelect = useCallback(
         async (wallet: Wallet) => {
             const address = wallet.address
+            const isPrivyWallet = privyWallets.some((x) => isSameAddress(x.address, address))
             await EVMWeb3.connect({
                 account: address,
-                chainId,
+                chainId: isPrivyWallet && !PRIVY_SUPPORTED_CHAINS.includes(chainId) ? ChainId.Mainnet : chainId,
                 providerType: ProviderType.MaskWallet,
 
                 identifier: ECKeyIdentifier.from(wallet.identifier).unwrapOr(undefined),

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

@@ -198,11 +198,11 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
                     {oauthTimeout ?
                         <Box display="flex" flexDirection="column" alignItems="center">
                             <Icons.Time size={32} color={theme.palette.maskColor.main} />
-                            <Typography color={theme.palette.maskColor.second} fontWeight={400} mt={1.5}>
+                            <Typography color={theme.palette.maskColor.second} fontWeight={400} my={1.5}>
                                 <Trans>Your X account authorization has timed out. Please try again.</Trans>
                             </Typography>
                             <ActionButton fullWidth onClick={createPrivyWallet}>
-                                <Trans>Set Payment Password</Trans>
+                                <Trans>Try Again</Trans>
                             </ActionButton>
                         </Box>
                     :   <LoadingStatus gap={3}>

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

@@ -12,6 +12,7 @@ import { WalletAssetTabs } from '../../type.js'
 import { ActivityList } from '../ActivityList/index.js'
 import { AssetsList } from '../AssetsList/index.js'
 import { WalletCollections } from './WalletCollections.js'
+import { Component as SelectWallet } from '../../SelectWallet/index.js'
 
 const useStyles = makeStyles()((theme) => {
     const isDark = theme.palette.mode === 'dark'
@@ -102,7 +103,11 @@ export const Component = memo(function WalletAssets() {
         [chainId, navigate],
     )
 
-    return wallet ? <WalletAssetsUI onAddToken={handleAdd} /> : null
+    return wallet ?
+            <WalletAssetsUI onAddToken={handleAdd} />
+        :   <Box pb="72px" display="flex" flexGrow={1} minHeight={0}>
+                <SelectWallet flexGrow={1} embed />
+            </Box>
 })
 
 interface WalletAssetsUIProps {

packages/mask/shared/definitions/extension.ts

@@ -13,6 +13,4 @@ export const XOAuthRequestOrigins: string[] = [
     // In order to run content script on it
     'https://firefly.social/api/mask/delegate-x-token',
     'https://firefly.social/api/auth/callback/twitter',
-    'https://canary.firefly.social/api/mask/delegate-x-token',
-    'https://canary.firefly.social/api/auth/callback/twitter',
 ]