fix: mf-6835 keep external wallet connected after done and show provider icon

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

@@ -1,9 +1,10 @@
 import { Icons } from '@masknet/icons'
 import { Image } from '@masknet/shared'
-import { PersistentStorages } from '@masknet/shared-base'
+import { NetworkPluginID, PersistentStorages } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { useFireflyEmbeddedWallets } from '@masknet/web3-hooks-base'
+import { useChainContext, useFireflyEmbeddedWallets } from '@masknet/web3-hooks-base'
+import { getRegisteredWeb3Providers } from '@masknet/web3-providers'
 import { memo, useMemo, type HTMLProps } from 'react'
 import { useSubscription } from 'use-subscription'
 
@@ -28,19 +29,26 @@ interface Props extends HTMLProps<HTMLDivElement> {
 export const WalletAvatar = memo<Props>(function WalletAvatar({ size = 30, address, badgeSize = 12, ...rest }) {
     const { classes, cx } = useStyles()
     const { wallets: fireflyWallets } = useFireflyEmbeddedWallets()
+    const { providerType } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
     const isFireflyWallet = useMemo(
         () => fireflyWallets.some((w) => isSameAddress(w.address, address)),
         [fireflyWallets, address],
     )
     const fireflyAccount = useSubscription(PersistentStorages.Settings.storage.firefly_account.subscription)
 
+    const providerIcon = useMemo(
+        () => getRegisteredWeb3Providers(NetworkPluginID.PLUGIN_EVM).find((x) => x.type === providerType)?.icon,
+        [providerType],
+    )
+
     if (isFireflyWallet && fireflyAccount)
         return (
             <div {...rest} className={cx(classes.container, rest.className)}>
                 <Image size={size} src={fireflyAccount.avatar} rounded />
                 <Icons.Firefly className={classes.badgeIcon} size={badgeSize} />
             </div>
         )
+    if (providerIcon) return <img src={providerIcon} width={size} height={size} className={rest.className} />
     return <Icons.MaskBlue size={size} className={rest.className} />
 })

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

@@ -3,7 +3,7 @@ import { FormattedAddress, PopupHomeTabType } from '@masknet/shared'
 import { PopupModalRoutes, PopupRoutes, type NetworkPluginID } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworkContext, useReverseAddress } from '@masknet/web3-hooks-base'
-import { EVMExplorerResolver, EVMProviderResolver, EVMWeb3 } from '@masknet/web3-providers'
+import { EVMExplorerResolver, EVMProviderResolver } from '@masknet/web3-providers'
 import { formatDomainName, formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm'
 import { Box, Button, Link, Typography } from '@mui/material'
 import { memo, useCallback } from 'react'
@@ -77,7 +77,6 @@ export const Component = memo(function ConnectWalletPage() {
     }, [modalNavigate])
 
     const handleDone = useCallback(async () => {
-        await EVMWeb3.disconnect({ providerType })
         if (providerType === ProviderType.WalletConnect) {
             navigate(urlcat(PopupRoutes.Personas, { tab: PopupHomeTabType.ConnectedWallets }), {
                 replace: true,

packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx

@@ -105,8 +105,8 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             height: 7,
             borderRadius: 99,
         },
-        unconnectedDot: {
-            backgroundColor: theme.vars.palette.maskColor.third,
+        connectedDot: {
+            backgroundColor: theme.vars.palette.maskColor.success,
         },
         balance: {
             fontSize: 36,
@@ -176,18 +176,12 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
                                     {networkName}
                                 </Typography>
                             </TextOverflowTooltip>
-                            {disabled ? null : (
-                                <Icons.ArrowDrop
-                                    size={20}
-                                    className={classes.arrow}
-                                    style={{ transform: status ? 'rotate(-180deg)' : undefined }}
-                                />
-                            )}
+                            {disabled ? null : <Icons.ArrowDrop size={20} className={classes.arrow} />}
                         </Box>
                         <Typography className={classes.connected}>
-                            <span className={cx(classes.dot, classes.unconnectedDot)} />
+                            <span className={cx(classes.dot, classes.connectedDot)} />
                             <span>
-                                <Trans>Not Connected</Trans>
+                                <Trans>Connected</Trans>
                             </span>
                         </Typography>
                     </Box>