feat: tips entrance (#6012)

* feat: upgrade mask wallet setting page * feat: tips enterence init * feat: dialog * feat: injected dialog suppose actions badge * feat: temp * feat: tips wallet ui * fix: fix * fix: temp * feat: popup bottom navigator * feat: new header for popup * fix: adjust header for ssr * fix: build error * fix: prettier * refactor: split smart and dumb component * fix: bugfix * fix: icon * feat: bodyviews * fix: sth wrong * fix: fix sth * feat: ui * fix: bugfix * fix: fix * fix: default ui * fix: bugfix * feat: new persona page * fix: bugfix * fix: bugfix * fix: bugfix * fix: network icon * fix: bugfix * fix: bugfix for header * fix: build error * feat: popup nextid (#6028) * feat: compo steps init * fix: ui * fix: fix * fix: kill unused code * feat: slient sign * fix: fix * fix: fix * feat: connect wallet page * fix: typo * fix: typo * fix: comment * refactor: temp * refactor: refact steps compo * fix: fix Co-authored-by: nuanyang233 <nuanyang233@gmail.com> * feat: connect wallet with persona * fix: empty com * fix: wallet list * fix: wallet interface * feat: connect popup wallet (#6081) * feat: impl the connect page * refactor: replace mm logo * fix: kv temp * fix: bugfix * fix: bugfix * fix: reply to commnts * fix: typo * fix: typo again * chore: improve eslint (#6084) * chore: improve eslint * revert: file * fix: eslintrc * chore: setup i18n in background (#6086) * fix: revert remove i18n key * fix: remove wallet sign * fix: temp * feat: popup connect wallet (#6088) * fix: personalSign * refactor: replace NetworkType with ChainId * fix: popup connect wallet * fix: bugfix * feat: popup custom snackbar * fix: eslint * fix: fix * fix: delete unused code * fix: ui * refactor: move verify wallet to persona * fix: navigate replace * fix: ui issues * fix: refresh proofs when bound * fix: conflict * fix: fix * Delete settings.json * fix: vscode settings * fix: temp * fix: types * fix: wallet dialog * fix: set as default * fix: typo * fix: sth * feat: switch * feat: disconnect dialog * fix: disconnect * chore: ui style * fix: persona max length * fix: fix * fix: persona max length * chore: reply review * fix: i18n init twice in wrong context * feat: add loading at connected wallets page * fix: temp * fix: reply to coments * fix: locales * fix: kill !evm * fix: disable open new window when sign on popup * fix: pos * fix: replace * fix: steps btn loading * fix: navigate back when wallet sign success * refactor: replace useState to useAsyncFn * fix: adjust connect wallet step * fix: err state * fix: go back when wallet signed * fix: temp * fix: ui * fix: wallet name * fix: bugfix * fix: sign * fix: sign step * fix: fix * fix: sth * fix: fix * chore: tips no wallet connected required * fix: fix bug * chore: tips jump to next id * fix: fix * fix: sign text * fix: ens * fix: disable when not in evm * fix: ui temp * fix: temp * fix: ui * fix: empty status * fix: fix address crash * fix: add && del fix * fix: confirm bug * fix: fix * fix: some ui issues * fix: change icon * fix: temp * fix: icon * fix: del wlt&& un unsed code * fix: kv storage * fix: reply temp * fix: temp * fix: fix * style: judge * fix: lint err * fix: verify * feat: only evm * fix: only evm fix * fix: sth * fix: sort * style: kill console * fix: kv * fix: lint * fix: sort fix * chore: disable tips entry as no nextId * style: debug * fix: kill prividerdespecter * chore: remove useless interface * fix: fix * fix: kill unused type * fix: discard unrelated changes * chore: add config * fix: wallet name idx * fix: reverse * fix: steps wallet name * fix: wallet name sign fix * style: reply * fix: new idx * fix: wallet name sort * fix: typo * fix: optimise change default speed * fix: locales * chore: handle sns persona unmatched * chore: move verify logic out of tips * chore: rename * style: reply to cmt * Update packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx Co-authored-by: UncleBill <billbill290@gmail.com> * fix: for review * fix: name * chore: reply code review * fix: typo * fix: name fix * style: reply to comments * Update packages/shared-base/src/NextID/type.ts Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> * fix: resolve issues * Update packages/mask/src/components/shared/ApplicationBoard.tsx Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> * fix: review * fix: types * fix: reply * fix: reply * fix(tips): some improvement (#6129) * fix: fix * style: reply to comments * refactor: refact the useTipsWalletsList * fix: build * fix: types * fix: build empty component * chore: reply code review * chore: reply code review Co-authored-by: nuanyang233 <nuanyang233@gmail.com> Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Co-authored-by: septs <github@septs.pw> Co-authored-by: Jack Works <jackworks@protonmail.com> Co-authored-by: zhouhanseng <z308114274@gmail.com> Co-authored-by: UncleBill <billbill290@gmail.com>
DimensionDev · Apr 24, 2022 · 6c6b28f · 6c6b28f
1 parent f3a3639
commit 6c6b28f
Show file tree

Hide file tree

Showing 56 changed files with 1,888 additions and 100 deletions.
diff --git a/packages/icons/general/Tips.tsx b/packages/icons/general/Tips.tsx
@@ -0,0 +1,30 @@
+import { createIcon } from '../utils'
+
+export const TipsIcon = createIcon(
+    'TipIcon',
+    <g>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.5 3C10.2157 3 3.5 9.71573 3.5 18V30.757C3.5 31.9958 4.50422 33 5.74299 33H18.5C26.7843 33 33.5 26.2843 33.5 18C33.5 9.71573 26.7843 3 18.5 3Z"
+            fill="url(#tips_paint0_linear_2324_1469)"
+        />
+        <path
+            d="M12.0108 25.077C11.8171 24.8813 11.7087 24.6168 11.709 24.3409C11.7093 24.065 11.8184 23.7999 12.0125 23.603L13.117 22.4986L13.0333 22.3591C12.7183 21.8498 12.4913 21.291 12.3617 20.7058C12.2506 20.2594 12.2054 19.7989 12.2274 19.3389C12.2518 19.066 12.3824 18.8132 12.591 18.6348C12.7996 18.4565 13.0696 18.3669 13.3428 18.3854C13.616 18.404 13.8706 18.5291 14.0516 18.7339C14.2327 18.9386 14.3258 19.2067 14.3109 19.4802C14.3069 19.735 14.3359 19.9891 14.3972 20.2361C14.5285 20.8374 14.8285 21.3881 15.2621 21.8237C15.4839 22.0634 15.7526 22.2548 16.0516 22.3864C16.3506 22.518 16.6736 22.5868 17.0008 22.5886C17.1554 22.587 17.3081 22.5525 17.4486 22.4875C17.5892 22.4225 17.7145 22.3285 17.8163 22.2116C18.2288 21.6983 18.1742 20.9742 17.5882 19.1096L17.4507 18.6811C17.0902 17.7144 16.879 16.6979 16.8245 15.6665C16.841 14.8771 17.1453 14.1197 17.6801 13.5367C18.215 12.9537 18.9435 12.5852 19.7288 12.5004C20.6278 12.4224 21.527 12.6343 22.2946 13.105L22.4315 13.186L23.5416 12.0759C23.7415 11.8984 24.0014 11.8036 24.2682 11.811C24.5349 11.8184 24.7884 11.9274 24.9767 12.1157C25.165 12.304 25.274 12.5575 25.2814 12.8242C25.2888 13.091 25.194 13.3509 25.0165 13.5508L23.912 14.6553L23.9969 14.7935C24.3107 15.3034 24.5376 15.862 24.6686 16.4468C24.7789 16.8933 24.8241 17.3537 24.8028 17.8136C24.7957 17.9521 24.7611 18.0879 24.7009 18.2131C24.6407 18.3383 24.5563 18.4503 24.4525 18.5426C24.3486 18.635 24.2275 18.7057 24.0962 18.7508C23.9649 18.7959 23.826 18.8144 23.6877 18.8053C23.5494 18.7961 23.4144 18.7594 23.2906 18.6974C23.1669 18.6354 23.0568 18.5493 22.9669 18.4441C22.877 18.3389 22.809 18.2168 22.7669 18.0848C22.7249 17.9529 22.7096 17.8138 22.7219 17.6756C22.7262 17.4202 22.6969 17.1656 22.6346 16.9181C22.5058 16.3158 22.2066 15.7637 21.7727 15.3275C21.5508 15.0879 21.282 14.8966 20.9827 14.7653C20.6835 14.634 20.3603 14.5656 20.0331 14.5643C19.8784 14.566 19.7257 14.6004 19.585 14.6652C19.4442 14.7299 19.3186 14.8236 19.2163 14.94C18.8051 15.452 18.858 16.1777 19.4467 18.0416L19.5828 18.4689C19.9426 19.4361 20.1533 20.453 20.2078 21.4848C20.1927 22.2743 19.8891 23.0322 19.3542 23.6153C18.8193 24.1983 18.0903 24.5662 17.3047 24.6495C16.4066 24.7276 15.5082 24.5157 14.7416 24.045L14.6034 23.9626L13.492 25.074C13.3949 25.1715 13.2795 25.2489 13.1526 25.3018C13.0257 25.3547 12.8897 25.3821 12.7524 25.3824C12.6151 25.3827 12.4792 25.3558 12.3525 25.3034C12.2258 25.251 12.1108 25.1741 12.014 25.077L12.0108 25.077Z"
+            fill="white"
+        />
+        <defs>
+            <linearGradient
+                id="tips_paint0_linear_2324_1469"
+                x1="18.5"
+                y1="3"
+                x2="18.5"
+                y2="33"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#F7931E" />
+                <stop offset="1" stopColor="#FBB03B" />
+            </linearGradient>
+        </defs>
+    </g>,
+    '0 0 37 36',
+)
diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts
@@ -64,6 +64,7 @@ export * from './NFTRedPacket'
 export * from './Poll'
 export * from './union'
 export * from './Tip'
+export * from './Tips'
 export * from './Delete'
 export * from './GrayMasks'
 export * from './Loader'

diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -21,6 +21,7 @@
     "no_data": "No Data",
     "tip": "Tip",
     "tags": "Tags",
+    "default": "Default",
     "contract": "Contract",
     "initializing": "Initializing...",
     "redirect_alert": "If your browser does not redirect, please <terms>click here</terms>.",
@@ -918,6 +919,7 @@
     "wallet_verify_persona_sign": "Persona Sign",
     "wallet_verify_has_bound": "The wallet has been bound. Please switch wallets.",
     "wallet_verify_persona_name": "{{personaName}} Sign",
+    "wallet_verify_empty_alert": "Please connect your wallet first.",
     "wallet_verify_persona_sign_intro": "Sign seamlessly with Persona, ensure the validity of data.",
     "waller_verify_wallet_sign_intro": "After two steps, you will own, view, utilize all your cyber identities through Next.ID. You can also disconnect them easily.",
     "popups_add_wallet": "Add Wallet",
@@ -1085,6 +1087,19 @@
     "plugin_artblocks_smt_wrong": "Something went wrong!",
     "plugin_artblocks_share": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Install @realMaskNetwork to get yours.",
     "plugin_artblocks_share_no_official_account": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Welcome to join.",
+    "plugin_tips_disconnect_introduction": "Are you going to disconnect {{persona}} from wallet <strong>{{address}}<strong/>?",
+    "plugin_tips_disconnect_dialog_title": "Disconnect Wallet?",
+    "plugin_tips_not_evm_alert": "The tips feature only supports EVM chains, and other chains are starting to support it.",
+    "plugin_tips_persona_sign_success": "Persona signed successfully.",
+    "plugin_tips_persona_sign_error": "Persona Signature failed.",
+    "plugin_tips_wallet_sign_success": "The walelt is connected.",
+    "plugin_tips_wallet_sign_error": "Wallet connection failed.",
+    "plugin_tips_wallet_add": "Please add wallet",
+    "plugin_tips_connect_wallet": "Connect your wallet",
+    "plugin_tips_sns_persona_unmatched": "Twitter ID verified persona({{currentSNSConnectedPersonaPublicKey}}) is not consistent with your current persona({{currentPersonaPublicKey}}). Please switch to persona({{currentSNSConnectedPersonaPublicKey}}) and try again.",
+    "plugin_tips_verify_line_intro": "Please add and verify your wallet to set the address for receiving tips.",
+    "plugin_tips_empty_list": "Please set wallets to receive tips.",
+    "plugin_tips_set_as_default": "Set as default",
     "plugin_artblocks_description": "Artblocks allow you to pick a style that you like, pay for the work, and a randomly generated version of the content is created by an algorithm and sent to your Ethereum account.",
     "plugin_artblocks_name": "Artblocks",
     "plugin_dhedge_description": "Decentralized hedge funds on Ethereum and Polygon (Matic).",

diff --git a/packages/mask/shared/kv-storage.ts b/packages/mask/shared/kv-storage.ts
@@ -39,6 +39,7 @@ export const PersistentStorages = {
             [PluginId.Savings]: false,
             [PluginId.Avatar]: false,
             [PluginId.Trader]: false,
+            [PluginId.Tips]: false,
             [PluginId.Transak]: false,
             [PluginId.Pets]: false,
             [PluginId.FindTruman]: false,

diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts
@@ -47,20 +47,22 @@ export enum NextIDVerificationStatus {
     Other = 'Other',
 }
 
-export function useNextIDConnectStatus() {
-    const ui = activatedSocialNetworkUI
-    const [enableNextID] = useState(ui.configuration.nextIDConfig?.enable)
-    const personaConnectStatus = usePersonaConnectStatus()
-    const lastStateRef = currentSetupGuideStatus[ui.networkIdentifier]
-    const lastState_ = useValueRef(lastStateRef)
-    const lastState = useMemo<SetupGuideCrossContextStatus>(() => {
+export function useSetupGuideStatusState() {
+    const lastState_ = useValueRef(currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier])
+    return useMemo<SetupGuideCrossContextStatus>(() => {
         try {
             return JSON.parse(lastState_)
         } catch {
             return {}
         }
     }, [lastState_])
+}
 
+export function useNextIDConnectStatus() {
+    const ui = activatedSocialNetworkUI
+    const [enableNextID] = useState(ui.configuration.nextIDConfig?.enable)
+    const personaConnectStatus = usePersonaConnectStatus()
+    const lastState = useSetupGuideStatusState()
     const lastRecognized = useLastRecognizedIdentity()
     const [username] = useState(
         lastState.username || (lastRecognized.identifier.isUnknown ? '' : lastRecognized.identifier.userId),

diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx
@@ -16,10 +16,11 @@ import {
     fromHex,
     NextIDAction,
     EnhanceableSite,
+    CrossIsolationMessages,
 } from '@masknet/shared-base'
 import Services from '../../extension/service'
 import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
-import { useAsync, useCopyToClipboard } from 'react-use'
+import { useAsync } from 'react-use'
 import stringify from 'json-stable-stringify'
 import type { NextIDPayload } from '@masknet/shared-base'
 import { SetupGuideStep } from './SetupGuide/types'
@@ -45,12 +46,10 @@ function SetupGuideUI(props: SetupGuideUIProps) {
     const { t } = useI18N()
     const { persona } = props
     const ui = activatedSocialNetworkUI
-    const [, copyToClipboard] = useCopyToClipboard()
     const [step, setStep] = useState(SetupGuideStep.FindUsername)
     const [enableNextID] = useState(ui.configuration.nextIDConfig?.enable)
     const verifyPostCollectTimer = useRef<NodeJS.Timer | null>(null)
     const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform
-
     // #region parse setup status
     const lastStateRef = currentSetupGuideStatus[ui.networkIdentifier]
     const lastState_ = useValueRef(lastStateRef)
@@ -109,6 +108,12 @@ function SetupGuideUI(props: SetupGuideUIProps) {
         return Services.Identity.queryPersona(Identifier.fromString(persona.toText(), ECKeyIdentifier).unwrap())
     }, [persona])
 
+    useEffect(() => {
+        return CrossIsolationMessages.events.verifyNextID.on(() => {
+            setStep(SetupGuideStep.VerifyOnNextID)
+        })
+    }, [])
+
     const onConnect = async () => {
         // attach persona with SNS profile
         await Services.Identity.attachProfile(new ProfileIdentifier(ui.networkIdentifier, username), persona, {

diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -1,15 +1,30 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { makeStyles, getMaskColor } from '@masknet/theme'
 import { Typography, useTheme } from '@mui/material'
 import { useChainId } from '@masknet/web3-shared-evm'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
 import { useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3'
-import { EMPTY_LIST } from '@masknet/shared-base'
+import {
+    EMPTY_LIST,
+    NextIDPlatform,
+    CrossIsolationMessages,
+    ProfileIdentifier,
+    formatPersonaPublicKey,
+} from '@masknet/shared-base'
 import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { useI18N } from '../../utils'
 import { ApplicationSettingDialog } from './ApplicationSettingDialog'
 import { Application, getUnlistedApp } from './ApplicationSettingPluginList'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { useAsync } from 'react-use'
+import Services from '../../extension/service'
+import { NextIDProof } from '@masknet/web3-providers'
+import type { Persona } from '../../database'
+import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
+import { useSetupGuideStatusState } from '../DataSource/useNextID'
+import { useMyPersonas } from '../DataSource/useMyPersonas'
+import { WalletMessages } from '../../plugins/Wallet/messages'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -153,5 +168,76 @@ interface RenderEntryComponentWrapperProps {
 
 function RenderEntryComponentWrapper({ application }: RenderEntryComponentWrapperProps) {
     const RenderEntryComponent = application.entry.RenderEntryComponent!
-    return <RenderEntryComponent disabled={!application.enabled} />
+    return application.entry.nextIdRequired ? (
+        <RenderEntryComponentWithNextIDRequired application={application} />
+    ) : (
+        <RenderEntryComponent disabled={!application.enabled} />
+    )
+}
+
+function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComponentWrapperProps) {
+    const ui = activatedSocialNetworkUI
+    const { t } = useI18N()
+    const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform
+    const lastState = useSetupGuideStatusState()
+    const lastRecognized = useLastRecognizedIdentity()
+    const username = useMemo(() => {
+        return lastState.username || (!lastRecognized.identifier.isUnknown ? lastRecognized.identifier.userId : '')
+    }, [lastState, lastRecognized])
+    const personas = useMyPersonas()
+
+    const checkSNSConnectToCurrentPersona = useCallback((persona: Persona) => {
+        return (
+            persona?.linkedProfiles.get(new ProfileIdentifier(ui.networkIdentifier, username))
+                ?.connectionConfirmState === 'confirmed'
+        )
+    }, [])
+
+    const { value: ApplicationCurrentStatus } = useAsync(async () => {
+        const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier()
+        const currentPersona = (await Services.Identity.queryPersona(currentPersonaIdentifier!)) as Persona
+        const currentSNSConnectedPersona = personas.find((persona) =>
+            checkSNSConnectToCurrentPersona(persona as Persona),
+        )
+        return {
+            isSNSConnectToCurrentPersona: checkSNSConnectToCurrentPersona(currentPersona),
+            isNextIDVerify: await NextIDProof.queryIsBound(currentPersona.publicHexKey ?? '', platform, username),
+            currentPersonaPublicKey: currentPersona?.fingerprint,
+            currentSNSConnectedPersonaPublicKey: currentSNSConnectedPersona?.fingerprint,
+        }
+    }, [platform, username, ui, personas])
+    const {
+        isNextIDVerify,
+        isSNSConnectToCurrentPersona,
+        currentPersonaPublicKey,
+        currentSNSConnectedPersonaPublicKey,
+    } = ApplicationCurrentStatus ?? {}
+    const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated)
+
+    const onNextIDVerify = useCallback(() => {
+        closeDialog()
+        CrossIsolationMessages.events.verifyNextID.sendToAll(undefined)
+    }, [])
+
+    if (!application.entry.RenderEntryComponent) return null
+
+    const RenderEntryComponent = application.entry.RenderEntryComponent
+
+    return (
+        <RenderEntryComponent
+            disabled={!application.enabled || isNextIDVerify === undefined || !isSNSConnectToCurrentPersona}
+            nextIdVerification={{
+                isNextIDVerify,
+                isSNSConnectToCurrentPersona,
+                toolTipHint: t('plugin_tips_sns_persona_unmatched', {
+                    currentPersonaPublicKey: formatPersonaPublicKey(currentPersonaPublicKey ?? '', 4),
+                    currentSNSConnectedPersonaPublicKey: formatPersonaPublicKey(
+                        currentSNSConnectedPersonaPublicKey ?? '',
+                        4,
+                    ),
+                }),
+                onNextIDVerify,
+            }}
+        />
+    )
 }
diff --git a/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx b/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx
@@ -18,7 +18,8 @@ export function setUnlistedApp(app: Application, unlisted: boolean) {
 }
 
 export function getUnlistedApp(app: Application): boolean {
-    return PersistentStorages.ApplicationEntryUnListedList.storage[app.entry.ApplicationEntryID].value
+    const state = PersistentStorages.ApplicationEntryUnListedList.storage[app.entry.ApplicationEntryID]
+    return state.initialized ? state.value : true
 }
 // #endregion
 

diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -1,6 +1,5 @@
 import { ExternalLink } from 'react-feather'
-import classNames from 'classnames'
-import { ChainId, ProviderType, NetworkType } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType, NetworkType, useAccount, useProviderType } from '@masknet/web3-shared-evm'
 import { Button, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import {
@@ -17,7 +16,7 @@ const useStyles = makeStyles()((theme) => ({
     currentAccount: {
         padding: '12px 8px 12px 12px',
         width: '100%',
-        background: '#fff',
+        background: theme.palette.background.input,
         boxSizing: 'border-box',
         marginBottom: theme.spacing(2),
         display: 'flex',
@@ -39,14 +38,19 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
     },
+    connectButton: {
+        fontSize: 12,
+        marginLeft: theme.spacing(1),
+        padding: theme.spacing(1, 2),
+    },
     actionButton: {
         boxSizing: 'border-box',
         fontSize: 12,
         lineHeight: '16px',
         padding: '8px 12px',
         fontWeight: 'bold',
-        background: 'rgba(15, 20, 25, 1)',
-        color: '#fff',
+        background: theme.palette.text.primary,
+        color: theme.palette.background.paper,
         borderRadius: '6px',
         minWidth: 'unset',
         width: '69px',
@@ -91,18 +95,21 @@ interface CurrentWalletBox {
     wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>
     walletName?: string
     changeWallet: () => void
+    notInPop?: boolean
 }
 export function CurrentWalletBox(props: CurrentWalletBox) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { wallet, walletName } = props
-    const providerDescriptor = useProviderDescriptor(wallet.providerType)
+    const { wallet, walletName, notInPop, changeWallet } = props
+    const providerType = useProviderType()
+    const providerDescriptor = useProviderDescriptor(wallet.providerType ?? providerType)
     const networkDescriptor = useNetworkDescriptor(wallet.networkType)
+    const frontAccount = useAccount()
+    const account = notInPop ? frontAccount : wallet.account
     const { Utils } = useWeb3State() ?? {}
     const { value: domain } = useReverseAddress(wallet.account)
-
-    return (
-        <section className={classNames(classes.currentAccount)}>
+    return account ? (
+        <section className={classes.currentAccount}>
             <WalletIcon
                 size={30}
                 badgeSize={12}
@@ -111,7 +118,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             />
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    {wallet.providerType !== ProviderType.MaskWallet ? (
+                    {wallet.providerType ?? providerType !== ProviderType.MaskWallet ? (
                         <Typography className={classes.accountName}>
                             {domain && Utils?.formatDomainName
                                 ? Utils.formatDomainName(domain)
@@ -129,8 +136,8 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
                     )}
                 </div>
                 <div className={classes.infoRow}>
-                    <Typography className={classes.address} variant="body2" title={wallet.account}>
-                        <FormattedAddress address={wallet.account} size={4} formatter={Utils?.formatAddress} />
+                    <Typography className={classes.address} variant="body2" title={account}>
+                        <FormattedAddress address={account} size={4} formatter={Utils?.formatAddress} />
                     </Typography>
 
                     <Link
@@ -143,12 +150,19 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
                     </Link>
                 </div>
             </div>
+            <Button className={classes.actionButton} variant="contained" size="small" onClick={changeWallet}>
+                {t('wallet_status_button_change')}
+            </Button>
+        </section>
+    ) : (
+        <section className={classes.connectButtonWrapper}>
             <Button
-                className={classNames(classes.actionButton)}
+                className={classes.connectButton}
+                color="primary"
                 variant="contained"
                 size="small"
-                onClick={props.changeWallet}>
-                {t('wallet_status_button_change')}
+                onClick={changeWallet}>
+                {t('plugin_wallet_on_connect')}
             </Button>
         </section>
     )