From b6986d8ac5a1c6e620ac510de6baf2c36c710ae9 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 5 Apr 2022 01:34:41 +0800
Subject: [PATCH 01/14] feat: compo steps init

---
 .../shared/VerifyWallet/CurrentWalletBox.tsx  | 215 ++++++++++++++++++
 .../components/shared/VerifyWallet/Steps.tsx  |  73 ++++++
 .../shared/VerifyWallet/constants.ts          |  16 ++
 .../assets/stepAssets/dividerActive.png       | Bin 0 -> 421 bytes
 .../assets/stepAssets/dividerDisable.png      | Bin 0 -> 140 bytes
 .../shared/assets/stepAssets/dividerDone.png  | Bin 0 -> 142 bytes
 .../shared/assets/stepAssets/step1Active.png  | Bin 0 -> 915 bytes
 .../shared/assets/stepAssets/step2Active.png  | Bin 0 -> 1003 bytes
 .../shared/assets/stepAssets/step2Disable.png | Bin 0 -> 827 bytes
 .../shared/assets/stepAssets/stepSuccess.png  | Bin 0 -> 2395 bytes
 .../pages/Wallet/VerifyWallet/index.tsx       |  23 ++
 .../pages/Wallet/components/StartUp/index.tsx |   3 +-
 .../extension/popups/pages/Wallet/index.tsx   |   2 +
 .../shared-base/src/Routes/PopupRoutes.ts     |   1 +
 14 files changed, 332 insertions(+), 1 deletion(-)
 create mode 100644 packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
 create mode 100644 packages/mask/src/components/shared/VerifyWallet/Steps.tsx
 create mode 100644 packages/mask/src/components/shared/VerifyWallet/constants.ts
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/dividerActive.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/dividerDisable.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/dividerDone.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/step1Active.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/step2Active.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/step2Disable.png
 create mode 100644 packages/mask/src/components/shared/assets/stepAssets/stepSuccess.png
 create mode 100644 packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx

diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
new file mode 100644
index 000000000000..09c399566e59
--- /dev/null
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -0,0 +1,215 @@
+import { useCallback } from 'react'
+import { ExternalLink } from 'react-feather'
+import classNames from 'classnames'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { Button, Link, Typography } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import {
+    useAccount,
+    useWeb3State,
+    useChainId,
+    useNetworkDescriptor,
+    useProviderDescriptor,
+    useProviderType,
+    useReverseAddress,
+    useWallet,
+} from '@masknet/plugin-infra'
+import { FormattedAddress, WalletIcon } from '@masknet/shared'
+import { WalletMessages } from '../../../plugins/Wallet/messages'
+import { useI18N } from '../../../utils'
+import Services from '../../../extension/service'
+import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
+
+const useStyles = makeStyles()((theme) => ({
+    currentAccount: {
+        padding: '12px 8px',
+        width: '100%',
+        background: '#fff',
+        boxSizing: 'border-box',
+        marginBottom: theme.spacing(2),
+        display: 'flex',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+
+    accountInfo: {
+        flexGrow: 1,
+        marginLeft: theme.spacing(1),
+    },
+    accountName: {
+        fontSize: 16,
+        marginRight: 4,
+        fontWeight: 'bold',
+    },
+    infoRow: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    actionButton: {
+        fontSize: 12,
+        marginLeft: theme.spacing(1),
+        padding: '8px 12px',
+        fontWeight: 'bold',
+        background: 'rgba(15, 20, 25, 1)',
+        color: '#fff',
+        width: 'fit-content',
+    },
+    address: {
+        fontSize: 12,
+        marginRight: theme.spacing(1),
+        display: 'inline-block',
+        color: theme.palette.text.secondary,
+    },
+    link: {
+        color: theme.palette.text.primary,
+        fontSize: 14,
+        display: 'flex',
+        alignItems: 'center',
+    },
+    linkIcon: {
+        marginRight: theme.spacing(1),
+    },
+    twitterProviderBorder: {
+        width: 14,
+        height: 14,
+    },
+    connectButtonWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: theme.spacing(2, 0),
+    },
+    domain: {
+        fontSize: 16,
+        lineHeight: '18px',
+        marginLeft: 6,
+        padding: 4,
+        borderRadius: 8,
+        backgroundColor: '#ffffff',
+        color: theme.palette.common.black,
+    },
+}))
+interface CurrentWalletBox {
+    isDashboard?: boolean
+    disableChange?: boolean
+}
+export function CurrentWalletBox(props: CurrentWalletBox) {
+    const { t } = useI18N()
+    const { classes } = useStyles()
+    const chainId = useChainId()
+    const account = useAccount()
+    const wallet = useWallet()
+    const providerType = useProviderType()
+    const providerDescriptor = useProviderDescriptor()
+    const networkDescriptor = useNetworkDescriptor()
+    const { Utils } = useWeb3State() ?? {}
+
+    const { value: domain } = useReverseAddress(account)
+
+    // #region change provider
+    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
+        WalletMessages.events.selectProviderDialogUpdated,
+    )
+    // #endregion
+
+    // #region walletconnect
+    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
+        WalletMessages.events.walletConnectQRCodeDialogUpdated,
+    )
+    // #endregion
+
+    const onDisconnect = useCallback(async () => {
+        switch (providerType) {
+            case ProviderType.WalletConnect:
+                setWalletConnectDialog({
+                    open: true,
+                    uri: await Services.Ethereum.createConnectionURI(),
+                })
+                break
+            case ProviderType.Fortmatic:
+                await Services.Ethereum.disconnectFortmatic(chainId)
+                break
+        }
+    }, [chainId, providerType, setWalletConnectDialog])
+
+    const onChange = useCallback(() => {
+        openSelectProviderDialog()
+    }, [openSelectProviderDialog])
+
+    return account ? (
+        <section className={classNames(classes.currentAccount)}>
+            <WalletIcon
+                size={48}
+                badgeSize={16}
+                networkIcon={providerDescriptor?.icon}
+                providerIcon={networkDescriptor?.icon}
+            />
+            <div className={classes.accountInfo}>
+                <div className={classes.infoRow} style={{ marginBottom: 3 }}>
+                    {providerType !== ProviderType.MaskWallet ? (
+                        <Typography className={classes.accountName}>
+                            {domain && Utils?.formatDomainName
+                                ? Utils.formatDomainName(domain)
+                                : providerDescriptor?.name}
+                        </Typography>
+                    ) : (
+                        <>
+                            <Typography className={classes.accountName}>
+                                {wallet?.name ?? providerDescriptor?.name}
+                            </Typography>
+                            {domain && Utils?.formatDomainName ? (
+                                <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
+                            ) : null}
+                        </>
+                    )}
+                </div>
+                <div className={classes.infoRow}>
+                    <Typography className={classes.address} variant="body2" title={account}>
+                        <FormattedAddress address={account} size={4} formatter={Utils?.formatAddress} />
+                    </Typography>
+
+                    <Link
+                        className={classes.link}
+                        href={Utils?.resolveAddressLink?.(chainId, account) ?? ''}
+                        target="_blank"
+                        title={t('plugin_wallet_view_on_explorer')}
+                        rel="noopener noreferrer">
+                        <ExternalLink className={classes.linkIcon} size={14} />
+                    </Link>
+                </div>
+            </div>
+            {!props.disableChange && (
+                <section>
+                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
+                        <ActionButtonPromise
+                            className={classes.actionButton}
+                            size="small"
+                            variant="contained"
+                            init={t('wallet_status_button_disconnect')}
+                            waiting={t('wallet_status_button_disconnecting')}
+                            failed={t('failed')}
+                            complete={t('done')}
+                            executor={onDisconnect}
+                            completeIcon={<></>}
+                            failIcon={<></>}
+                        />
+                    ) : null}
+                    <Button
+                        className={classNames(classes.actionButton)}
+                        variant="contained"
+                        size="small"
+                        onClick={onChange}>
+                        {t('wallet_status_button_change')}
+                    </Button>
+                </section>
+            )}
+        </section>
+    ) : (
+        <section className={classes.connectButtonWrapper}>
+            <Button className={classNames(classes.actionButton)} variant="contained" size="small" onClick={onChange}>
+                {t('plugin_wallet_on_connect')}
+            </Button>
+        </section>
+    )
+}
diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
new file mode 100644
index 000000000000..de647ce01f35
--- /dev/null
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -0,0 +1,73 @@
+import { makeStyles } from '@masknet/theme'
+import { useState } from 'react'
+import { CurrentWalletBox } from './CurrentWalletBox'
+import {
+    step1ActiveIcon,
+    stepSuccessIcon,
+    dividerDisableIcon,
+    dividerSuccessIcon,
+    dividerActiveIcon,
+    step2DisableIcon,
+    step2ActiveIcon,
+} from './constants'
+import { ImageIcon } from '@masknet/shared'
+
+const useStyles = makeStyles()({
+    container: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    stepBox: {
+        marginTop: 12,
+    },
+    stepLine: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    stepRow: {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: 200,
+    },
+    divider: {
+        margin: '2px 0',
+    },
+})
+
+export function Steps() {
+    const { classes } = useStyles()
+    const [step, setStep] = useState(0)
+
+    const stepIconMap: any = {
+        0: {
+            step1: step1ActiveIcon,
+            divider: dividerDisableIcon,
+            step2: step2DisableIcon,
+        },
+        1: {
+            step1: stepSuccessIcon,
+            divider: dividerActiveIcon,
+            step2: step2ActiveIcon,
+        },
+        2: {
+            step1: stepSuccessIcon,
+            divider: dividerSuccessIcon,
+            step2: stepSuccessIcon,
+        },
+    }
+    return (
+        <div className={classes.container}>
+            <CurrentWalletBox />
+            <div className={classes.stepBox}>
+                <div className={classes.stepLine}>
+                    <ImageIcon size={24} icon={stepIconMap[step].step1} />
+                    <img className={classes.divider} src={stepIconMap[step].divider} />
+                    <ImageIcon size={24} icon={stepIconMap[step].step2} />
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/packages/mask/src/components/shared/VerifyWallet/constants.ts b/packages/mask/src/components/shared/VerifyWallet/constants.ts
new file mode 100644
index 000000000000..f09f49e666a6
--- /dev/null
+++ b/packages/mask/src/components/shared/VerifyWallet/constants.ts
@@ -0,0 +1,16 @@
+const step1ActiveIcon = new URL('../assets/stepAssets/step1Active.png', import.meta.url)
+const step2DisableIcon = new URL('../assets/stepAssets/step2Disable.png', import.meta.url)
+const step2ActiveIcon = new URL('../assets/stepAssets/step2Active.png', import.meta.url)
+const stepSuccessIcon = new URL('../assets/stepAssets/stepSuccess.png', import.meta.url)
+const dividerDisableIcon = new URL('../assets/stepAssets/dividerDisable.png', import.meta.url)
+const dividerActiveIcon = new URL('../assets/stepAssets/dividerActive.png', import.meta.url)
+const dividerSuccessIcon = new URL('../assets/stepAssets/dividerDone.png', import.meta.url)
+export {
+    step1ActiveIcon,
+    step2DisableIcon,
+    step2ActiveIcon,
+    stepSuccessIcon,
+    dividerDisableIcon,
+    dividerActiveIcon,
+    dividerSuccessIcon,
+}
diff --git a/packages/mask/src/components/shared/assets/stepAssets/dividerActive.png b/packages/mask/src/components/shared/assets/stepAssets/dividerActive.png
new file mode 100644
index 0000000000000000000000000000000000000000..260dae99f2f091f7cb7b4cbc258bd3009d4074a6
GIT binary patch
literal 421
zcmV;W0b2fvP)<h;3K|Lk000e1NJLTq00062002b@1^@s6VCy&V00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0Xj)UK~#7FRgq0@
z!$1gyfgw?&_9oqR-5ceUy-RmlR*@qcczukWO7+6x=fMYzetvzV@H16yBOLtEfNL8J
zJDrY*3#NvKN@yDZlA0DPH2}*ghEgMkMpY6s1xDyGLNSD$pXDv4!-h=Rtb%0CDn<O)
z>@1mxWS<_aHOFAjR4AJ@i*$ii^%hz#W`U|kO!_V^DVdv^=&@--aX<}P+q@6E7F`@-
z>vb%9Rxijl2I;1lP)|ZfYX+fnFs_r_t;>zq;9oLHXJ_jtsM_brE{EHG4PJ1+Jo|=>
zW5H3TKAJv~4V^5?J>qyT{5>3v!CP>QLD&XgJ4J|lWZL<}^7E<3kp19~Sydq~G;+<n
z$VI#);@*dPl}qFZwYabOli0{!<Ml-G!`||2XZZ41V)<TV+}>}v-mdiv{s!Nc$W1bw
P00000NkvXXu0mjfHVU$@

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/dividerDisable.png b/packages/mask/src/components/shared/assets/stepAssets/dividerDisable.png
new file mode 100644
index 0000000000000000000000000000000000000000..3eed001bf264691e7ba51ba145b8cdde5a897512
GIT binary patch
literal 140
zcmeAS@N?(olHy`uVBq!ia0vp^OhD|)!3HD~UYmaaQk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK)#}<i(^Oy<J)6~j0_AMhc`6VM}B3MiMX*n
hMl+!#O5f8ba^6DbtM6KGcK{VLc)I$ztaD0e0ss{JB$WUF

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/dividerDone.png b/packages/mask/src/components/shared/assets/stepAssets/dividerDone.png
new file mode 100644
index 0000000000000000000000000000000000000000..91f645ea799542c92d5a313e816b35d5d2e19ecb
GIT binary patch
literal 142
zcmeAS@N?(olHy`uVBq!ia0vp^OhD|)!3HD~UYmaaQk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK)$l4i(^Oy<J)73j0_AM%p06lO`dA9b%gKu
jePz*dF@48A<x`Ab7BKA=`*c+jsGPym)z4*}Q$iB}JQ5^a

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/step1Active.png b/packages/mask/src/components/shared/assets/stepAssets/step1Active.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ff3cf90401317477609826101ef30224d4b928b
GIT binary patch
literal 915
zcmV;E18n?>P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH11L#EK~#7FeN{bc
z6j2nt=gpf@K`~mT%S0lik}cDSNx;s+l!B00SXd>6kV4VjN&*&%RSLls1Z~8hkOT`$
zQ(6d_`~kDrEW63f_1^cfGaFYQJ74d;d)~R{ek|x8Bi}fgqM==7qD5kE5s)+M3KuXa
zK<H9=dQj|MD<;`v5}>WJb!J|d&ubHG1fGK(7~sy&H&;6U1)kqL$uZ3K6rUYEHIy3@
zj~R{4$sxcI@o@RacFleS+!E00Oh7?-pmmO=;*C$7JFGBfxOBMX!A)E+$o5i;8JiI4
zl_rpj+?81%lW&`V{pHp<4bMz%3}zIgrLmD=^|tW5|59AfN4z-t(s<{3HtvBu_2DFk
zt|7<eiyE5_7Tf*&tfHgZIdFgk)p$HNO}IUuP<OwKQiLGF-)ez+_V-}c8Y&ml#Conu
zguRx|N`}U8dJ1^9lF{5W=)>1C9L}iSA{S&;Ry?1=^$Tk@O(j>E5tcb50)?cYr}t92
zdn*|QN#Zbas8%RQ#2jS89V>yz<)oOKfkk9w`0ZXvpT3oNyliRVrg6b^+QyT;4O8;~
zLd!~2XS^F|q!4RB9QENT)2~x-f8dSM#A_MAJt(;0fn%QA)c#$4Bke?D#c=wE#LUtl
z)7U=om^ps96=6(;>jS=o<X$195yy?{b`pR!heO<&N$F@uZ^h<F7@I?A3A^2Os?u1w
zWAveg6Sj?e%5lc69}DC1fGD}|J*OCyi04I=DU+ZEj?r*ZaeY9LPJUgiz2m7%)tM9s
zuKJ)gxQ;Y#c7~8Ke$C6kje|7mLpy7_kI+jE?MM)Pe@G2WZ*cFKA-H~EwJ#v_4@RSp
zz*=Ip(foE8*0gt@Xup=RA*>TyeHSTmj$uQrQbx@td{2_VJ6gPcnB35J7wc_dZS8PL
zB3?K)j<K*+25DsL*hAT8am{)Uy%%(xBxZR+<cT&v_VX;!p6vdH7}Q|fU^uG0Ft1Dp
zrCHi~fMOzW9G%Z)TZ~?ymZ4r8%Sh@~CGSWx-fpj;*Tk3ztmD-e&MWDBQdO&>S1$hq
pGmbS&K^Yv%bAM3L`}2Tt`~ey@P+hJV7H<Fm002ovPDHLkV1l{PrKkV^

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/step2Active.png b/packages/mask/src/components/shared/assets/stepAssets/step2Active.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fc56f653eb1606a9bd6ee9436053bd87b2ff3b9
GIT binary patch
literal 1003
zcmV<H0~Gv;P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1As|HK~#7FeN{_q
z6hRQK>gk#IHj3WFjGhE9>&=5`A|6C9iXIfiD1zY0$H81gH-{hrg~U^CMnMEo@(+wb
zBIqT#7!pX#1QZiQvKTRDvpZ!~b<fUjTy1uyr(a)x_0?k${?Xzai>*+$odnPhL<K;M
ziDZQmG?*aZAXHaJl7VeWv-8*t(5BIKBD&7QZB5QFJo$4-h}1p(Xmj^}f%kPS##oMq
z1)r3j9OM@PH5_V~<4X`{fyzfG`*QX*-~xlD6$V9!J*_n?1+Q^p&1H!(<&N=Q2X3+j
zgVAtkvCRem@`M5M1NuZ3G2*cekldr|6#71rGX~oPqaeQFX61G8&hkArJ+ASh%$B-u
z%4f4Z$h~wbIm#NwxM`jErW@Of%W)-z+1xlJ4~gLM4#WWzVuYpN1f!D#^Ci8-I}zP0
z7pP=^tn9G{s_kK59akYjPD?$-?c!kzokuMEWYA6P5Uz9(+<dx9GxI6tW`R0clx53X
zaeK=p6Na`k3<yK3I+66OwQ6hwg5!k%W)=v}JS@}gXR8W+;y{41Cz5@-A5eW`NY7eh
zj#!?E`KBy3Jqz?>L$5!k@M%FW#_vnc;4SN&W4!`iiA+K53YM9*IWw>>gh(8s=Dm1V
zQGnKsh*ys(8ccjnl`Wg?K(XdMhrxkhg$exCymp*cyc2hBK`frNz&*TtUxl}msfJ{}
zk1Zz328zIpA<;VEQi$Iv`Y_VVcWy@LIcMS53P8_L1tz|vs=qfd^PbYqtYw^8W^Be$
zQdl+3LpA%jb<)Dd7KE|c6!z~j{2+W|tw*P*(NfCDD$E=+u8sf%r<~;?PY%AJ1!(sU
zm&u3r)shsZz7l+xu7H!O?gB3z{|52WV`^QWRyaX$t8-c%X}__tGWdvbYfc8De7|_T
zZ1<SK%UB8x^lLmyeFzOjK8_;;sP(`~T|i$yIP~&5g4P1bnXneqrZ{j->NU3;%sQ~?
z7#kgD$?9&`(7~LIA2*Z08Jaw}5bTw26|Rq2TU+kn5K5GdG6v1YFwEF0d&xMdW?0Km
zVXIcaTo9O}4W7?h*Yo8#3Zy3M-w+|xv8`jM;Yd`Q7p5y!)6sh#lcvB~>wZ-&@}aw!
z%aAWNL?o2bD)n=5=qsMaQawgfU}^V<C{DTZaaMJ*UNQd@v?*)igfckJ{hO5(o~#AT
Z+8=_3Xqol*$b|p^002ovPDHLkV1iS6$n*dJ

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/step2Disable.png b/packages/mask/src/components/shared/assets/stepAssets/step2Disable.png
new file mode 100644
index 0000000000000000000000000000000000000000..98fd95280d711e2226a40147795729f00e2af439
GIT binary patch
literal 827
zcmV-B1H}A^P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0?<iBK~#7FeN{_N
z8$l4QHp6cLo`?mkm?12H9h@M*j$JqbxdAsw;0ECa<OD2PIxM|1k}X-X7ak<bE8Fs4
zmVcdBo$g7^U{cb!yQ`~Tzk1c(R`h{AJw5qrYil>?o-Y=QQ>9d>wI+N~CX<Qaf1FOI
zFW1-C(X#bw8Q{jo#w`H&`vkyvj)5^oqm7gM`0lT+uI~Q}{QUeJA~1(;=&)>zUb0Tx
z&9Fq(&|YGL=p8VFuB@!Ypq5>NrDQK-tVOG<s~0c>o^f6{a{vxFkU#VZTDni!u|}({
zkNYIX!F)c?!TcB)gCCe+8B_{TZomLcPsw>+<2Gju%-<R*0Lp+hnPFO{Y&J{2@6&8H
zqgJa$<MBAHztpG$i4Ht4I{zzItf7*H+uz@(AP5Yo=Xn%{Ar*^7Js1p>)i?nTpAXkJ
zu+QAsG+ep~DRy^vX*e8GKA+d6Qptet?d_?QOe$5IFP_y_;}R%QcEf=E&1REEqY(qC
z$z)<C8Jq!S9J3eMo-%O24&F&voL;?NH<{oTDwct**Xuc8CBWtS(6g0ZW{!zkUtd>8
zM@NK~8jS|E+ieG&h_eH8zCCmzeg}AG>x|{#F__Zv@iF0yQl(O%e!uUInHI4uRpKTx
z<5vr8f_RbC>+tZ<Xxi;|X?uH{wzjs2wFc{S`Y~hJ8w0;!@HM4@E0W&a+%$uoot=1|
zPf4fKNwbz$|4|hR1s{d0VUU$UGH{uXTj#PF#&eMEAaizh)`8=}olCy^?tHrID&7Nm
zg<W619~^rJ%*e1|)~I-a{ymrE7|FL+6z81;wi}(CoP0L5;vdWUg8v!hizeABYj&(;
zhIZ-=P?w2HIxCmUAr|E9E0y@CkmuAgm;MO4UVv@16xdm{TD=4K_f)zhisbtIl0D!-
z`pH>KjE`;|)oQg6EYA6nV(kGIICkj2qWz5{_bUzP><`<-ZuJxG2V4LE002ovPDHLk
FV1h~3e(eAN

literal 0
HcmV?d00001

diff --git a/packages/mask/src/components/shared/assets/stepAssets/stepSuccess.png b/packages/mask/src/components/shared/assets/stepAssets/stepSuccess.png
new file mode 100644
index 0000000000000000000000000000000000000000..032d8502b4a6dbfb916ed7051c479a6e8c2f4d49
GIT binary patch
literal 2395
zcmV-h38eOkP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2=GZnK~#7F?O080
zTUix8=e=h?zu3<2*i}T@R8gta1V%vARW-uH4r%Dlph03Wn{Hqhh>;LTG&VwFMF;4L
zvKWaCQoTb+sAA)a84wypAW(v423bj)wrY&yIM2?r-_JdqbN!RpO`2pXMl9w;FTU@-
zd(ZvuIp?0A3-BrZzYqZq{r0<w;6(_}Jf7Dh6cpG8HbMjgwkU6;yAV;2WWd;OpN6c{
z4umcymIp6Ds2464i&!WYAioG$S_hKfrFEpW-a8aPPbx@*x?u5)GCAGo9=Jp5Ls@hU
z*05Tx9?2t9%}@zS01ULSQW*5}JR0yqI8l-(17t?5Qo;fn@|s`FV>QE|?w7%xUB>j~
zG-Waw<I$rJCar`sp?I|N+Pj^ZSiR38?WU<*EmNM`OZft6kloc^5a1z+fmUUK!R63R
zm$`o#>{>8ojoEJ!Mb~-A%OjKj!F{)Vitf8l{Y_`Vp#z|KDCJ8^kCM$l2gZp2dAGP$
zTEnG$i5{;mo9|XUoKMZ8JGOnDWqOB4O`gDGlUMmkZQA>d(_W`#xB>M_U5WY&EX@^I
z=>j}Pn&$Js$xpdh#_VF&_-Ad#a1tIOWDVch{Skk?&7Tu+5~1F}b*F9Pbbahk|4#mq
zLMsbb_pd^BDGRR_Uq#6Ah~m-0!sEb+6@R@Xc9(}ry<&LRJlwDD8|TgGZ}GG{@G*$B
z`3*yj|8Bdwtp+N;U+$`UMf)E*4Zyyzk+p!!3(Lj=ORieY8XeocXohf)CtZM#Lj(=x
zdc}-t_3i40%4TvZlgrQ&l&FB9dU%FF8bkA`>r~mdY2djG;6h>nn-6?+-46^Sz%QQ_
zT>dk!L&{1+Z_5+>?>nwLW6Y;6@nLhdn_4U7#aS9h%^&I%7Y{uj$0v;$EHk*j;qGL{
z2<9`aZ~8Wzfqrng0B<gQ4=yDy5Bk`2UP-6ZhVaa8H}v}2U#@h6&T|3w2584BJM;L&
zdROMK<+hB;U3;1(@Od}`xUZgj4c^(j1AlL<4*FRFuK?^!`f(pUXHH8|G$r0*07E>_
zC_oLr*DY>Ee&<s@W}b9#Ivyg#)HCkn3lqynf_r2B#sJ(q51u_wQDjYfu4imq+yIa5
zn~kZvW>MS!P^><XU^f71`;$l^JM)|nJ>F>$n?e;SV-(ykU;dQ_GYamF3pb7hrzy_S
z#Y-EXW7jor`+6<u7SkHl^RtGzGW`0WwuPbf6b%*IJKQg7D?R$H2Ga+5DsW6eq?lI?
z{91q?ebnpBcL5HB)uTZ+qs7V})=F#(nH<RJec!FYIDZRWg(-wR--h>i%(ecU+m)Z`
z6DpuYqF>}kKtB&0FS3TVzZZlPSetrGb2Bz>zt3uBYbmT~ATnkU{)Sb|v?OU#j!#y*
zM6>oR+usaM!4$Z#C*J!nqYM7@!vg%_>F+f-`4!O5CB!>pW{P>TBx4!uJP8kcaZ#K(
z3`y_+U^f+oMb1{B%<mN$^l<PwogQaT8vdFG?TxM}pnkaimIiwQJ+#pLGw)W@^iGKO
z>?K-SWLI5cSJPAR;pAc1QS*oO^%9A9UxY=lJC`W#TU3WS?AMzVk0m$~;CDw?ZH6wq
zTPwqfM0Cq*??2ohYwD9AykTPlD(wo14IV`YZbthaodjziD6tY?Lw~aZLo;l(*hTok
zJs$TqoSE=#)uFpdNP-!e<T*_pgB{P(yd?!29Fjws%>W?w{)8kO)|2Nfs?Eg68b3##
z9ao`QkF1!b%y{e;+wxmHWa}hY96eo*KsOlFEkD*#LEP8C{=<)(-qCGI8cIcu$AdWs
zu4cprp&N2~lTw{Ht2j<>%T;D*k{L}>!wjMz^p&SNcNN0xr11MZ{9i|4`zt4-zc9eR
z79!pYV!rD5mWul^PPpT0Hkc*YIuEG}@va2f_6wZR^l%(;NZ_D*DZivM->J4kcIOGj
zSc(Z&Nxbc;X<mRZ3gc!hGF4|Yr0_21Nw1*_zXYIi`Uzl}`@R`k>gOzvUE7RDAwRKr
zTXk$tHJO*|y2{SjRN*96){->`>HCq9WS|k!VMlD@Lzd!pW=yd(mD{pa@X}ZmT7J~=
z+bR}Vs+F`u0u?GFihRO)5YeVQ&BT6<`Gj1ZgpoNBwf5aGY}X^lvZI6(S9aP~@t2;`
zmbb+@VNRC-;$jpGOYbOvf*wkIlBF%Dd7XDCjFRc3ay(b7M;40AM8q{o<S@ttCc*@C
z!IGo+JstuI@Q^{ep<~(_ToCi3$F3J8TS-;jO{j_Ngto!O^(DHwa+3@)p2-JCZvna)
z7wNF0qe_W0jm7Gs;Y;E$**4hqn4Y&~bexpo*uLR+Lc@+HjL2}%X)Ddoi##$NgXFY|
z&52qCoE4s<_D(xW*J>(r^{Nv0^0npFs6cErXo5l|2XzRbH6p!k^)JPF5he7Hq-qs$
zITZlgnWK)~i6*AU$n<OoTs}AnuG=tF)M_A@Ne$2#Qz{K<Xkn9@DVKq<TWO4`Sf@>#
z3$g|pRC%vL3sb8~LL8b5PCX0mNEP?h%pz2Up12n(tDK%^mDCc|-74E-Qf*rgLPG_t
z!trp@NQV*mA&2F_4eLR&<wU!N3ajXcPHIlIcT$m<NcKu2DyPfQ`RrHJs(@qLy9tV-
zD1zgzLyo)ppo7?4;H!)^<orPxD0kJxxkQ7S50adYP2*I;r6=$hX0jRdchVTBfDAsy
zUL%0%bW3ISIua*odwg5@jS0%}p}146(@LHbV_*j$XV-vZ=~OohI+2u2gNrDMNR|4s
z;Z1ex<IM}3<a5n3$JsGl<k-WZOXvzac}b-{%k9l(oSZsWahJPQ+zRvhvDA1#{mUA9
zF@SI&)_y4})K6@sE#*NsJoefQX!Y_c<s>z_&mLj1O!`8pS9=U@$WFNaIPFyv>Ksj9
zY{@-MQ7c7i7pcgk=*jVwNPloYR0_$BM4{MwSs4_x-TnSgs2hxi9=;ATblFJVCx16@
z$|HS+LcyTXIiDcuGPMs<XGFt5@I`M}Ux*HuhkZ~3knqV$>Qg$7{tLF`*56m*hrj>;
N002ovPDHLkV1h42d42!@

literal 0
HcmV?d00001

diff --git a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
new file mode 100644
index 000000000000..12667d3080bb
--- /dev/null
+++ b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
@@ -0,0 +1,23 @@
+import { makeStyles } from '@masknet/theme'
+import { memo } from 'react'
+import { Steps } from '../../../../../components/shared/VerifyWallet/Steps'
+
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        background: 'rgba(247, 249, 250, 1)',
+        padding: '8px 16px 16px 16px',
+    },
+}))
+const VerifyWallet = memo(() => {
+    const { classes } = useStyles()
+    return (
+        <div className={classes.container}>
+            <Steps />
+        </div>
+    )
+})
+
+export default VerifyWallet
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
index d9b3f59504d9..f357cfbdbc63 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
@@ -103,7 +103,8 @@ export const WalletStartUp = memo(() => {
                 </Box>
                 {!loading ? (
                     <Link
-                        to={!hasPassword ? PopupRoutes.SetPaymentPassword : PopupRoutes.ImportWallet}
+                        // to={!hasPassword ? PopupRoutes.SetPaymentPassword : PopupRoutes.ImportWallet}
+                        to={PopupRoutes.VerifyWallet}
                         style={{ textDecoration: 'none' }}>
                         <Box className={classes.item}>
                             <ImportWalletIcon sx={{ fontSize: 24 }} />
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
index 5da93e45c4dd..a017418784e2 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -32,6 +32,7 @@ const SetPaymentPassword = lazy(() => import('./SetPaymentPassword'))
 const WalletRecovery = lazy(() => import('./WalletRecovery'))
 const LegacyWalletRecovery = lazy(() => import('./LegacyWalletRecovery'))
 const ReplaceTransaction = lazy(() => import('./ReplaceTransaction'))
+const VerifyWallet = lazy(() => import('./VerifyWallet'))
 
 const r = relativeRouteOf(PopupRoutes.Wallet)
 export default function Wallet() {
@@ -116,6 +117,7 @@ export default function Wallet() {
                         <Route path={r(PopupRoutes.Unlock)} element={<Unlock />} />
                         <Route path={r(PopupRoutes.SetPaymentPassword)} element={<SetPaymentPassword />} />
                         <Route path={r(PopupRoutes.ReplaceTransaction)} element={<ReplaceTransaction />} />
+                        <Route path={r(PopupRoutes.VerifyWallet)} element={<VerifyWallet />} />
                     </Routes>
                 )}
             </WalletContext.Provider>
diff --git a/packages/shared-base/src/Routes/PopupRoutes.ts b/packages/shared-base/src/Routes/PopupRoutes.ts
index 3294d3ade04f..174b37b7f0d0 100644
--- a/packages/shared-base/src/Routes/PopupRoutes.ts
+++ b/packages/shared-base/src/Routes/PopupRoutes.ts
@@ -30,4 +30,5 @@ export enum PopupRoutes {
     ThirdPartyRequestPermission = '/3rd-request-permission',
     SignRequest = '/sign-request',
     Swap = '/swap',
+    VerifyWallet = '/wallet/verify',
 }

From 7128d11066de35ec6186aceb96f056407f83e811 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 5 Apr 2022 02:07:21 +0800
Subject: [PATCH 02/14] fix: ui

---
 .../components/shared/VerifyWallet/Steps.tsx  | 55 +++++++++++++++++--
 .../shared/VerifyWallet/constants.ts          |  1 +
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index de647ce01f35..3c03e5425a79 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -11,8 +11,10 @@ import {
     step2ActiveIcon,
 } from './constants'
 import { ImageIcon } from '@masknet/shared'
+import { Typography } from '@mui/material'
+import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
     container: {
         width: '100%',
         display: 'flex',
@@ -21,21 +23,43 @@ const useStyles = makeStyles()({
     },
     stepBox: {
         marginTop: 12,
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexGrow: 'grow',
     },
     stepLine: {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
+        marginRight: 12,
     },
-    stepRow: {
+    stepRowBox: {
+        width: '100%',
         display: 'flex',
+        flexDirection: 'column',
         alignItems: 'center',
         minHeight: 200,
     },
+    stepRow: {
+        color: theme.palette.text.secondary,
+        minHeight: 100,
+    },
+    stepIntro: {
+        marginTop: 12,
+        fontSize: 14,
+    },
     divider: {
-        margin: '2px 0',
+        margin: '4px 0',
+    },
+    actionBox: {
+        width: 'calc(100% - 32px)',
+        gap: 12,
+        position: 'fixed',
+        bottom: 16,
+        display: 'flex',
+        alignItems: 'center',
     },
-})
+}))
 
 export function Steps() {
     const { classes } = useStyles()
@@ -67,6 +91,29 @@ export function Steps() {
                     <img className={classes.divider} src={stepIconMap[step].divider} />
                     <ImageIcon size={24} icon={stepIconMap[step].step2} />
                 </div>
+                <div className={classes.stepRowBox}>
+                    <div className={classes.stepRow}>
+                        <Typography sx={{ fontWeight: 'bold' }}>Persona Name Sign</Typography>
+                        <Typography className={classes.stepIntro}>
+                            Sign seamlessly with Persona, ensure the validity of data.
+                        </Typography>
+                    </div>
+                    <div className={classes.stepRow}>
+                        <Typography sx={{ fontWeight: 'bold' }}>Wallet Name Sign</Typography>
+                        <Typography className={classes.stepIntro}>
+                            After two steps, you will own, view, utilize all your cyber identities through Next.ID. You
+                            can also disconnect them easily.
+                        </Typography>
+                    </div>
+                </div>
+            </div>
+            <div className={classes.actionBox}>
+                <ActionButton variant="outlined" size="large" fullWidth color="primary">
+                    Cancel
+                </ActionButton>
+                <ActionButton variant="contained" size="large" fullWidth>
+                    {step === 2 ? 'Done' : 'Confirm'}
+                </ActionButton>
             </div>
         </div>
     )
diff --git a/packages/mask/src/components/shared/VerifyWallet/constants.ts b/packages/mask/src/components/shared/VerifyWallet/constants.ts
index f09f49e666a6..f16ea4657f0e 100644
--- a/packages/mask/src/components/shared/VerifyWallet/constants.ts
+++ b/packages/mask/src/components/shared/VerifyWallet/constants.ts
@@ -5,6 +5,7 @@ const stepSuccessIcon = new URL('../assets/stepAssets/stepSuccess.png', import.m
 const dividerDisableIcon = new URL('../assets/stepAssets/dividerDisable.png', import.meta.url)
 const dividerActiveIcon = new URL('../assets/stepAssets/dividerActive.png', import.meta.url)
 const dividerSuccessIcon = new URL('../assets/stepAssets/dividerDone.png', import.meta.url)
+
 export {
     step1ActiveIcon,
     step2DisableIcon,

From b309e41358997eaeb129ed87804d2792b31dbfbe Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 5 Apr 2022 16:59:26 +0800
Subject: [PATCH 03/14] fix: fix

---
 .../components/shared/VerifyWallet/Steps.tsx  | 55 +++++++++++++++++--
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 3c03e5425a79..8128109beafe 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -13,6 +13,7 @@ import {
 import { ImageIcon } from '@masknet/shared'
 import { Typography } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { useNavigate } from 'react-router-dom'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -59,29 +60,60 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
     },
+    roundBtn: {
+        borderRadius: 99,
+    },
 }))
 
+enum SignSteps {
+    Ready = 0,
+    Step1Done = 1,
+    Step2Done = 2,
+}
+
 export function Steps() {
     const { classes } = useStyles()
     const [step, setStep] = useState(0)
-
+    const navigate = useNavigate()
     const stepIconMap: any = {
-        0: {
+        [SignSteps.Ready]: {
             step1: step1ActiveIcon,
             divider: dividerDisableIcon,
             step2: step2DisableIcon,
         },
-        1: {
+        [SignSteps.Step1Done]: {
             step1: stepSuccessIcon,
             divider: dividerActiveIcon,
             step2: step2ActiveIcon,
         },
-        2: {
+        [SignSteps.Step2Done]: {
             step1: stepSuccessIcon,
             divider: dividerSuccessIcon,
             step2: stepSuccessIcon,
         },
     }
+
+    const onConfirm = () => {
+        if (step === SignSteps.Ready) {
+            personaSlientSign()
+        } else if (step === SignSteps.Step1Done) {
+            walletSign()
+        } else {
+            navigate(-1)
+        }
+    }
+    const personaSlientSign = async () => {
+        console.log('p sign')
+        setStep(1)
+    }
+    const walletSign = async () => {
+        console.log('wallet sign')
+        setStep(2)
+    }
+    const onCancel = () => {
+        navigate(-1)
+    }
+
     return (
         <div className={classes.container}>
             <CurrentWalletBox />
@@ -108,10 +140,21 @@ export function Steps() {
                 </div>
             </div>
             <div className={classes.actionBox}>
-                <ActionButton variant="outlined" size="large" fullWidth color="primary">
+                <ActionButton
+                    className={classes.roundBtn}
+                    variant="outlined"
+                    size="large"
+                    fullWidth
+                    color="primary"
+                    onClick={onCancel}>
                     Cancel
                 </ActionButton>
-                <ActionButton variant="contained" size="large" fullWidth>
+                <ActionButton
+                    className={classes.roundBtn}
+                    variant="contained"
+                    size="large"
+                    fullWidth
+                    onClick={onConfirm}>
                     {step === 2 ? 'Done' : 'Confirm'}
                 </ActionButton>
             </div>

From 35afcfb8685e22fffd13cb2824e041a6aa924a78 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 15:04:36 +0800
Subject: [PATCH 04/14] fix: kill unused code

---
 packages/mask/src/components/shared/VerifyWallet/Steps.tsx     | 2 +-
 .../extension/popups/pages/Wallet/components/StartUp/index.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 8128109beafe..167552382de8 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -38,7 +38,6 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
         minHeight: 200,
     },
     stepRow: {
@@ -102,6 +101,7 @@ export function Steps() {
             navigate(-1)
         }
     }
+
     const personaSlientSign = async () => {
         console.log('p sign')
         setStep(1)
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
index f357cfbdbc63..d9b3f59504d9 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/StartUp/index.tsx
@@ -103,8 +103,7 @@ export const WalletStartUp = memo(() => {
                 </Box>
                 {!loading ? (
                     <Link
-                        // to={!hasPassword ? PopupRoutes.SetPaymentPassword : PopupRoutes.ImportWallet}
-                        to={PopupRoutes.VerifyWallet}
+                        to={!hasPassword ? PopupRoutes.SetPaymentPassword : PopupRoutes.ImportWallet}
                         style={{ textDecoration: 'none' }}>
                         <Box className={classes.item}>
                             <ImportWalletIcon sx={{ fontSize: 24 }} />

From 1c06e0d194f726379909c72a7eb03554bf8b2c4a Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 16:28:11 +0800
Subject: [PATCH 05/14] feat: slient sign

---
 .../components/shared/VerifyWallet/Steps.tsx  | 33 +++++++++++++++++--
 .../pages/Wallet/VerifyWallet/index.tsx       |  1 +
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 167552382de8..090336bc83db 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -14,6 +14,12 @@ import { ImageIcon } from '@masknet/shared'
 import { Typography } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useNavigate } from 'react-router-dom'
+import { useValueRef } from '@masknet/shared-base-ui'
+import { currentPersonaIdentifier } from '../../../settings/settings'
+import { ECKeyIdentifier, Identifier, NextIDAction, NextIDPlatform } from '@masknet/shared-base'
+import { useAsync } from 'react-use'
+import Services from '../../../extension/service'
+import { NextIDProof } from '@masknet/web3-providers'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -74,6 +80,13 @@ export function Steps() {
     const { classes } = useStyles()
     const [step, setStep] = useState(0)
     const navigate = useNavigate()
+    const currentIdentifier = Identifier.fromString(useValueRef(currentPersonaIdentifier), ECKeyIdentifier)
+    const { value: persona_ } = useAsync(async () => {
+        return Services.Identity.queryPersona(currentIdentifier.unwrap())
+    }, [])
+
+    if (!persona_ || !persona_.publicHexKey) return null
+
     const stepIconMap: any = {
         [SignSteps.Ready]: {
             step1: step1ActiveIcon,
@@ -103,8 +116,24 @@ export function Steps() {
     }
 
     const personaSlientSign = async () => {
-        console.log('p sign')
-        setStep(1)
+        try {
+            const payload = await NextIDProof.createPersonaPayload(
+                persona_.publicHexKey as string,
+                NextIDAction.Create,
+                persona_.nickname as string,
+                NextIDPlatform.Ethereum,
+                'default',
+            )
+            if (!payload) throw new Error('Failed to create persona payload.')
+            const signResult = await Services.Identity.generateSignResult(
+                currentIdentifier.val as any,
+                payload.signPayload,
+            )
+            if (!signResult) throw new Error('Failed to sign persona.')
+            setStep(1)
+        } catch (error) {
+            console.error(error)
+        }
     }
     const walletSign = async () => {
         console.log('wallet sign')
diff --git a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
index 12667d3080bb..d50278b5c66c 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
@@ -13,6 +13,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 const VerifyWallet = memo(() => {
     const { classes } = useStyles()
+
     return (
         <div className={classes.container}>
             <Steps />

From 1056270ab42335433784633e360aae82177bc03e Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 17:40:02 +0800
Subject: [PATCH 06/14] fix: fix

---
 .../shared/VerifyWallet/CurrentWalletBox.tsx  |  5 +--
 .../components/shared/VerifyWallet/Steps.tsx  | 31 +++++++++++++++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
index 09c399566e59..018cb166c0e7 100644
--- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -47,13 +47,14 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     actionButton: {
-        fontSize: 12,
+        fontSize: 14,
         marginLeft: theme.spacing(1),
         padding: '8px 12px',
         fontWeight: 'bold',
         background: 'rgba(15, 20, 25, 1)',
         color: '#fff',
-        width: 'fit-content',
+        minWidth: 70,
+        borderRadius: '6px',
     },
     address: {
         fontSize: 12,
diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 090336bc83db..1013be331b4f 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -20,6 +20,7 @@ import { ECKeyIdentifier, Identifier, NextIDAction, NextIDPlatform } from '@mask
 import { useAsync } from 'react-use'
 import Services from '../../../extension/service'
 import { NextIDProof } from '@masknet/web3-providers'
+import { useWallet } from '@masknet/plugin-infra'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -84,8 +85,11 @@ export function Steps() {
     const { value: persona_ } = useAsync(async () => {
         return Services.Identity.queryPersona(currentIdentifier.unwrap())
     }, [])
+    const [payload, setPayload] = useState<any>()
+    const [signature, setSignature] = useState<any>()
+    const wallet = useWallet()
 
-    if (!persona_ || !persona_.publicHexKey) return null
+    if (!persona_ || !persona_.publicHexKey || !wallet) return null
 
     const stepIconMap: any = {
         [SignSteps.Ready]: {
@@ -120,15 +124,17 @@ export function Steps() {
             const payload = await NextIDProof.createPersonaPayload(
                 persona_.publicHexKey as string,
                 NextIDAction.Create,
-                persona_.nickname as string,
+                wallet.address,
                 NextIDPlatform.Ethereum,
                 'default',
             )
             if (!payload) throw new Error('Failed to create persona payload.')
+            setPayload(payload)
             const signResult = await Services.Identity.generateSignResult(
                 currentIdentifier.val as any,
                 payload.signPayload,
             )
+            setSignature(signResult.signature.signature)
             if (!signResult) throw new Error('Failed to sign persona.')
             setStep(1)
         } catch (error) {
@@ -136,7 +142,26 @@ export function Steps() {
         }
     }
     const walletSign = async () => {
-        console.log('wallet sign')
+        try {
+            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.address)
+            console.log(walletSig, 'ggg')
+            if (!walletSig) throw new Error('Wallet sign failed')
+            console.log(payload, 'paylod')
+            await NextIDProof.bindProof(
+                payload.uuid,
+                persona_.publicHexKey as string,
+                NextIDAction.Create,
+                NextIDPlatform.Ethereum,
+                wallet.address,
+                payload.createdAt,
+                {
+                    walletSignature: walletSig,
+                    signature: signature,
+                },
+            )
+        } catch (error) {
+            console.error(error)
+        }
         setStep(2)
     }
     const onCancel = () => {

From af85127bdc41d07ba47de6edff82792c219bbfe4 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 17:46:50 +0800
Subject: [PATCH 07/14] fix: fix

---
 .../components/shared/VerifyWallet/Steps.tsx  | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 1013be331b4f..10f735969bc4 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -16,7 +16,7 @@ import ActionButton from '../../../extension/options-page/DashboardComponents/Ac
 import { useNavigate } from 'react-router-dom'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { currentPersonaIdentifier } from '../../../settings/settings'
-import { ECKeyIdentifier, Identifier, NextIDAction, NextIDPlatform } from '@masknet/shared-base'
+import { ECKeyIdentifier, Identifier, NextIDAction, NextIDPayload, NextIDPlatform } from '@masknet/shared-base'
 import { useAsync } from 'react-use'
 import Services from '../../../extension/service'
 import { NextIDProof } from '@masknet/web3-providers'
@@ -79,19 +79,19 @@ enum SignSteps {
 
 export function Steps() {
     const { classes } = useStyles()
-    const [step, setStep] = useState(0)
+    const [step, setStep] = useState(SignSteps.Ready)
     const navigate = useNavigate()
     const currentIdentifier = Identifier.fromString(useValueRef(currentPersonaIdentifier), ECKeyIdentifier)
     const { value: persona_ } = useAsync(async () => {
         return Services.Identity.queryPersona(currentIdentifier.unwrap())
     }, [])
-    const [payload, setPayload] = useState<any>()
-    const [signature, setSignature] = useState<any>()
+    const [payload, setPayload] = useState<NextIDPayload>()
+    const [signature, setSignature] = useState<string>()
     const wallet = useWallet()
 
     if (!persona_ || !persona_.publicHexKey || !wallet) return null
 
-    const stepIconMap: any = {
+    const stepIconMap = {
         [SignSteps.Ready]: {
             step1: step1ActiveIcon,
             divider: dividerDisableIcon,
@@ -131,22 +131,21 @@ export function Steps() {
             if (!payload) throw new Error('Failed to create persona payload.')
             setPayload(payload)
             const signResult = await Services.Identity.generateSignResult(
-                currentIdentifier.val as any,
+                currentIdentifier.val as ECKeyIdentifier,
                 payload.signPayload,
             )
             setSignature(signResult.signature.signature)
             if (!signResult) throw new Error('Failed to sign persona.')
-            setStep(1)
+            setStep(SignSteps.Step1Done)
         } catch (error) {
             console.error(error)
         }
     }
     const walletSign = async () => {
+        if (!payload) throw new Error('paylod error')
         try {
             const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.address)
-            console.log(walletSig, 'ggg')
             if (!walletSig) throw new Error('Wallet sign failed')
-            console.log(payload, 'paylod')
             await NextIDProof.bindProof(
                 payload.uuid,
                 persona_.publicHexKey as string,
@@ -159,10 +158,10 @@ export function Steps() {
                     signature: signature,
                 },
             )
+            setStep(SignSteps.Step2Done)
         } catch (error) {
             console.error(error)
         }
-        setStep(2)
     }
     const onCancel = () => {
         navigate(-1)
@@ -174,7 +173,7 @@ export function Steps() {
             <div className={classes.stepBox}>
                 <div className={classes.stepLine}>
                     <ImageIcon size={24} icon={stepIconMap[step].step1} />
-                    <img className={classes.divider} src={stepIconMap[step].divider} />
+                    <img className={classes.divider} src={stepIconMap[step].divider.toString()} />
                     <ImageIcon size={24} icon={stepIconMap[step].step2} />
                 </div>
                 <div className={classes.stepRowBox}>

From 445c302e5b7c19efc0592600cf66f4e1e616d01f Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 18:45:22 +0800
Subject: [PATCH 08/14] feat: connect wallet page

---
 packages/icons/brands/Blocto.tsx              | 49 +++++++++++++++
 packages/icons/brands/index.ts                |  1 +
 .../popups/components/PopupFrame/index.tsx    | 10 +++-
 .../pages/Wallet/ConnectWallet/constants.ts   | 10 ++++
 .../pages/Wallet/ConnectWallet/index.tsx      | 60 +++++++++++++++++++
 .../extension/popups/pages/Wallet/index.tsx   |  2 +
 .../shared-base/src/Routes/PopupRoutes.ts     |  1 +
 7 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 packages/icons/brands/Blocto.tsx
 create mode 100644 packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
 create mode 100644 packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx

diff --git a/packages/icons/brands/Blocto.tsx b/packages/icons/brands/Blocto.tsx
new file mode 100644
index 000000000000..475355bf36dd
--- /dev/null
+++ b/packages/icons/brands/Blocto.tsx
@@ -0,0 +1,49 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const BloctoIcon: typeof SvgIcon = createIcon(
+    'Blocto',
+    <svg width="43" height="50" viewBox="0 0 43 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_bd_270_89338)">
+            <path
+                d="M28.9443 22.396C29.8924 22.396 30.6773 23.1712 30.4996 24.1025C30.3837 24.7102 30.2058 25.3059 29.9679 25.8802C29.5104 26.9849 28.8397 27.9885 27.9943 28.834C27.1488 29.6794 26.1451 30.3501 25.0405 30.8076C23.9359 31.2652 22.7519 31.5007 21.5563 31.5007C20.3606 31.5007 19.1767 31.2652 18.072 30.8076C16.9674 30.3501 15.9637 29.6794 15.1183 28.834C14.2728 27.9885 13.6022 26.9849 13.1446 25.8802C12.9067 25.3059 12.7289 24.7102 12.6129 24.1025C12.4352 23.1712 13.2201 22.396 14.1682 22.396L21.5563 22.396H28.9443Z"
+                fill="#AFD8F7"
+            />
+            <path
+                d="M21.556 14.2218C21.556 13.2737 22.3313 12.4888 23.2626 12.6665C23.8702 12.7825 24.466 12.9603 25.0403 13.1982C26.1449 13.6558 27.1486 14.3264 27.994 15.1719C28.8395 16.0173 29.5101 17.021 29.9677 18.1256C30.2056 18.6999 30.3834 19.2957 30.4994 19.9034C30.6771 20.8346 29.8922 21.6099 28.9441 21.6099L24.9893 21.6099C23.0932 21.6099 21.556 20.0727 21.556 18.1766L21.556 14.2218Z"
+                fill="#3485C4"
+            />
+            <path
+                d="M12.4753 6.8142C12.4753 6.64067 12.616 6.5 12.7895 6.5L-nan -nanL-nan -nanL12.7895 6.5C17.0844 6.5 20.5661 9.98169 20.5661 14.2766V21.0231C20.5661 21.3472 20.3034 21.6099 19.9793 21.6099H14.192C13.2439 21.6099 12.4753 20.8413 12.4753 19.8932V6.8142Z"
+                fill="#182A71"
+            />
+        </g>
+        <defs>
+            <filter
+                id="filter0_bd_270_89338"
+                x="-9.5"
+                y="-12"
+                width="62"
+                height="64"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feGaussianBlur in="BackgroundImage" stdDeviation="8" />
+                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_270_89338" />
+                <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                />
+                <feOffset dy="6" />
+                <feGaussianBlur stdDeviation="6" />
+                <feComposite in2="hardAlpha" operator="out" />
+                <feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.521569 0 0 0 0 0.768627 0 0 0 0.2 0" />
+                <feBlend mode="normal" in2="effect1_backgroundBlur_270_89338" result="effect2_dropShadow_270_89338" />
+                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_270_89338" result="shape" />
+            </filter>
+        </defs>
+    </svg>,
+    '0 0 43 50',
+)
diff --git a/packages/icons/brands/index.ts b/packages/icons/brands/index.ts
index 107479bd226b..de5508807f7f 100644
--- a/packages/icons/brands/index.ts
+++ b/packages/icons/brands/index.ts
@@ -12,3 +12,4 @@ export * from './MaskGrey'
 export * from './Discord'
 export * from './MaskBanner'
 export * from './MaskPlaceholder'
+export * from './Blocto'
diff --git a/packages/mask/src/extension/popups/components/PopupFrame/index.tsx b/packages/mask/src/extension/popups/components/PopupFrame/index.tsx
index 21881ee4d917..ebbf78575de7 100644
--- a/packages/mask/src/extension/popups/components/PopupFrame/index.tsx
+++ b/packages/mask/src/extension/popups/components/PopupFrame/index.tsx
@@ -100,7 +100,15 @@ export const PopupFrame = memo<PopupFrameProps>((props) => {
     return (
         <>
             <GlobalCss />
-            <Paper elevation={0} style={{ height: '100vh', overflowY: 'auto', minHeight: 600, borderRadius: 0 }}>
+            <Paper
+                elevation={0}
+                style={{
+                    height: '100vh',
+                    overflowY: 'auto',
+                    minHeight: 600,
+                    borderRadius: 0,
+                    background: 'rgba(247, 249, 250, 1)',
+                }}>
                 <Box className={classes.header}>
                     <Box className={classes.left}>
                         {excludePath || history.length === 1 ? (
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
new file mode 100644
index 000000000000..5cdaaaac5020
--- /dev/null
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
@@ -0,0 +1,10 @@
+import { MaskWalletIcon, WalletConnectIcon, MetaMaskIcon, BloctoIcon } from '@masknet/icons'
+
+const supportedWallets = [
+    { title: 'MetaMask', icon: MetaMaskIcon },
+    { title: 'Mask', icon: MaskWalletIcon },
+    { title: 'WalletConnetc', icon: WalletConnectIcon },
+    { title: 'Blocto', icon: BloctoIcon },
+]
+
+export { supportedWallets }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
new file mode 100644
index 000000000000..b13084505553
--- /dev/null
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
@@ -0,0 +1,60 @@
+import { makeStyles } from '@masknet/theme'
+import { Typography } from '@mui/material'
+import { memo } from 'react'
+import { supportedWallets } from './constants'
+import { useNavigate } from 'react-router-dom'
+import { PopupRoutes } from '@masknet/shared-base'
+
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        columnGap: 12,
+        rowGap: 16,
+        padding: '16px',
+        boxSizing: 'border-box',
+    },
+    walletItem: {
+        cursor: 'pointer',
+        background: '#fff',
+        width: 'calc( 50% - 6px )',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 4,
+        padding: '12px 0',
+        boxSizing: 'content-box',
+        fontSize: 12,
+        fontWeight: 700,
+        color: theme.palette.text.secondary,
+        fontFamily: 'Helvetica',
+        height: 'fit-content',
+    },
+    walletIcon: {
+        width: '4rem',
+        height: '4rem',
+    },
+}))
+const ConenctWalletPage = memo(() => {
+    const { classes } = useStyles()
+    const navigate = useNavigate()
+    const clickItem = () => {
+        navigate(PopupRoutes.VerifyWallet)
+    }
+    return (
+        <div className={classes.container}>
+            {supportedWallets.map((item, idx) => {
+                return (
+                    <div key={idx} className={classes.walletItem} onClick={clickItem}>
+                        <item.icon className={classes.walletIcon} />
+                        <Typography>{item.title}</Typography>
+                    </div>
+                )
+            })}
+        </div>
+    )
+})
+
+export default ConenctWalletPage
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
index a017418784e2..d9b2a2655ada 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -33,6 +33,7 @@ const WalletRecovery = lazy(() => import('./WalletRecovery'))
 const LegacyWalletRecovery = lazy(() => import('./LegacyWalletRecovery'))
 const ReplaceTransaction = lazy(() => import('./ReplaceTransaction'))
 const VerifyWallet = lazy(() => import('./VerifyWallet'))
+const ConnectWallet = lazy(() => import('./ConnectWallet'))
 
 const r = relativeRouteOf(PopupRoutes.Wallet)
 export default function Wallet() {
@@ -118,6 +119,7 @@ export default function Wallet() {
                         <Route path={r(PopupRoutes.SetPaymentPassword)} element={<SetPaymentPassword />} />
                         <Route path={r(PopupRoutes.ReplaceTransaction)} element={<ReplaceTransaction />} />
                         <Route path={r(PopupRoutes.VerifyWallet)} element={<VerifyWallet />} />
+                        <Route path={r(PopupRoutes.ConnectWallet)} element={<ConnectWallet />} />
                     </Routes>
                 )}
             </WalletContext.Provider>
diff --git a/packages/shared-base/src/Routes/PopupRoutes.ts b/packages/shared-base/src/Routes/PopupRoutes.ts
index 174b37b7f0d0..2465d1e722b7 100644
--- a/packages/shared-base/src/Routes/PopupRoutes.ts
+++ b/packages/shared-base/src/Routes/PopupRoutes.ts
@@ -30,5 +30,6 @@ export enum PopupRoutes {
     ThirdPartyRequestPermission = '/3rd-request-permission',
     SignRequest = '/sign-request',
     Swap = '/swap',
+    ConnectWallet = '/wallet/connect',
     VerifyWallet = '/wallet/verify',
 }

From 72a0e144ca6bd6ec7e45eaa2b2f1e1c39cc5697d Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 18:46:01 +0800
Subject: [PATCH 09/14] fix: typo

---
 .../extension/popups/pages/Wallet/ConnectWallet/constants.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
index 5cdaaaac5020..c3d21d9e53ec 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
@@ -3,7 +3,7 @@ import { MaskWalletIcon, WalletConnectIcon, MetaMaskIcon, BloctoIcon } from '@ma
 const supportedWallets = [
     { title: 'MetaMask', icon: MetaMaskIcon },
     { title: 'Mask', icon: MaskWalletIcon },
-    { title: 'WalletConnetc', icon: WalletConnectIcon },
+    { title: 'WalletConnect', icon: WalletConnectIcon },
     { title: 'Blocto', icon: BloctoIcon },
 ]
 

From 86672c2bdb729a30ec6e66f31cea7cb9c6c05e55 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Wed, 6 Apr 2022 18:50:02 +0800
Subject: [PATCH 10/14] fix: typo

---
 packages/mask/src/components/shared/VerifyWallet/Steps.tsx  | 6 +++---
 .../extension/popups/pages/Wallet/ConnectWallet/index.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 10f735969bc4..4f624dc85913 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -111,7 +111,7 @@ export function Steps() {
 
     const onConfirm = () => {
         if (step === SignSteps.Ready) {
-            personaSlientSign()
+            personaSilentSign()
         } else if (step === SignSteps.Step1Done) {
             walletSign()
         } else {
@@ -119,7 +119,7 @@ export function Steps() {
         }
     }
 
-    const personaSlientSign = async () => {
+    const personaSilentSign = async () => {
         try {
             const payload = await NextIDProof.createPersonaPayload(
                 persona_.publicHexKey as string,
@@ -142,7 +142,7 @@ export function Steps() {
         }
     }
     const walletSign = async () => {
-        if (!payload) throw new Error('paylod error')
+        if (!payload) throw new Error('payload error')
         try {
             const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.address)
             if (!walletSig) throw new Error('Wallet sign failed')
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
index b13084505553..f7bc06671ee2 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => ({
         height: '4rem',
     },
 }))
-const ConenctWalletPage = memo(() => {
+const ConnectWalletPage = memo(() => {
     const { classes } = useStyles()
     const navigate = useNavigate()
     const clickItem = () => {
@@ -57,4 +57,4 @@ const ConenctWalletPage = memo(() => {
     )
 })
 
-export default ConenctWalletPage
+export default ConnectWalletPage

From 6ba8c11a8b279154bc34d7501b991f4d16fdafee Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 12 Apr 2022 16:09:27 +0800
Subject: [PATCH 11/14] fix: comment

---
 .../shared/VerifyWallet/constants.ts          | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/constants.ts b/packages/mask/src/components/shared/VerifyWallet/constants.ts
index f16ea4657f0e..fe083043d000 100644
--- a/packages/mask/src/components/shared/VerifyWallet/constants.ts
+++ b/packages/mask/src/components/shared/VerifyWallet/constants.ts
@@ -1,17 +1,7 @@
-const step1ActiveIcon = new URL('../assets/stepAssets/step1Active.png', import.meta.url)
-const step2DisableIcon = new URL('../assets/stepAssets/step2Disable.png', import.meta.url)
-const step2ActiveIcon = new URL('../assets/stepAssets/step2Active.png', import.meta.url)
-const stepSuccessIcon = new URL('../assets/stepAssets/stepSuccess.png', import.meta.url)
-const dividerDisableIcon = new URL('../assets/stepAssets/dividerDisable.png', import.meta.url)
-const dividerActiveIcon = new URL('../assets/stepAssets/dividerActive.png', import.meta.url)
-const dividerSuccessIcon = new URL('../assets/stepAssets/dividerDone.png', import.meta.url)
-
-export {
-    step1ActiveIcon,
-    step2DisableIcon,
-    step2ActiveIcon,
-    stepSuccessIcon,
-    dividerDisableIcon,
-    dividerActiveIcon,
-    dividerSuccessIcon,
-}
+export const step1ActiveIcon = new URL('../assets/stepAssets/step1Active.png', import.meta.url)
+export const step2DisableIcon = new URL('../assets/stepAssets/step2Disable.png', import.meta.url)
+export const step2ActiveIcon = new URL('../assets/stepAssets/step2Active.png', import.meta.url)
+export const stepSuccessIcon = new URL('../assets/stepAssets/stepSuccess.png', import.meta.url)
+export const dividerDisableIcon = new URL('../assets/stepAssets/dividerDisable.png', import.meta.url)
+export const dividerActiveIcon = new URL('../assets/stepAssets/dividerActive.png', import.meta.url)
+export const dividerSuccessIcon = new URL('../assets/stepAssets/dividerDone.png', import.meta.url)

From eca2ce7d700b4bcabb16beb4660ef9f1a97f4514 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 12 Apr 2022 16:36:47 +0800
Subject: [PATCH 12/14] refactor: temp

---
 packages/mask/src/components/shared/VerifyWallet/Steps.tsx     | 2 +-
 packages/mask/src/extension/popups/pages/Personas/index.tsx    | 2 ++
 .../src/extension/popups/pages/Wallet/VerifyWallet/index.tsx   | 3 +++
 packages/mask/src/extension/popups/pages/Wallet/index.tsx      | 1 -
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 4f624dc85913..87ffc7fd300a 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -84,7 +84,7 @@ export function Steps() {
     const currentIdentifier = Identifier.fromString(useValueRef(currentPersonaIdentifier), ECKeyIdentifier)
     const { value: persona_ } = useAsync(async () => {
         return Services.Identity.queryPersona(currentIdentifier.unwrap())
-    }, [])
+    }, [currentIdentifier])
     const [payload, setPayload] = useState<NextIDPayload>()
     const [signature, setSignature] = useState<string>()
     const wallet = useWallet()
diff --git a/packages/mask/src/extension/popups/pages/Personas/index.tsx b/packages/mask/src/extension/popups/pages/Personas/index.tsx
index 8e1a5ead5ca1..62ea349e301d 100644
--- a/packages/mask/src/extension/popups/pages/Personas/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/index.tsx
@@ -4,6 +4,7 @@ import { LoadingPlaceholder } from '../../components/LoadingPlaceholder'
 import { PersonaContext } from './hooks/usePersonaContext'
 import { PopupRoutes, relativeRouteOf } from '@masknet/shared-base'
 import { Route, Routes } from 'react-router-dom'
+import VerifyWallet from '../Wallet/VerifyWallet'
 
 const Home = lazy(() => import('./Home'))
 const Logout = lazy(() => import('./Logout'))
@@ -19,6 +20,7 @@ const Persona = memo(() => {
                     <Route path={r(PopupRoutes.Logout)} element={<Logout />} />
                     <Route path={r(PopupRoutes.PersonaRename)} element={<PersonaRename />} />
                     <Route path={r(PopupRoutes.PersonaSignRequest)} element={<PersonaSignRequest />} />
+                    <Route path={r(PopupRoutes.VerifyWallet)} element={<VerifyWallet />} />
                     <Route path="*" element={<Home />} />
                 </Routes>
             </PersonaContext.Provider>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
index d50278b5c66c..aaa609e38824 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from '@masknet/theme'
 import { memo } from 'react'
 import { Steps } from '../../../../../components/shared/VerifyWallet/Steps'
+import { PersonaContext } from '../../Personas/hooks/usePersonaContext'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -13,6 +14,8 @@ const useStyles = makeStyles()((theme) => ({
 }))
 const VerifyWallet = memo(() => {
     const { classes } = useStyles()
+    const { currentPersona } = PersonaContext.useContainer()
+    console.log(currentPersona, 'ggg')
 
     return (
         <div className={classes.container}>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
index d9b2a2655ada..5b41958a955e 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -118,7 +118,6 @@ export default function Wallet() {
                         <Route path={r(PopupRoutes.Unlock)} element={<Unlock />} />
                         <Route path={r(PopupRoutes.SetPaymentPassword)} element={<SetPaymentPassword />} />
                         <Route path={r(PopupRoutes.ReplaceTransaction)} element={<ReplaceTransaction />} />
-                        <Route path={r(PopupRoutes.VerifyWallet)} element={<VerifyWallet />} />
                         <Route path={r(PopupRoutes.ConnectWallet)} element={<ConnectWallet />} />
                     </Routes>
                 )}

From d12cf9e5a3043c194f1901380c267a3e0c77ab70 Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 12 Apr 2022 17:10:22 +0800
Subject: [PATCH 13/14] refactor: refact steps compo

---
 .../components/shared/VerifyWallet/Steps.tsx  | 85 ++++---------------
 .../extension/popups/pages/Personas/index.tsx |  2 +-
 .../pages/Wallet/VerifyWallet/index.tsx       | 60 ++++++++++++-
 .../shared-base/src/Routes/PopupRoutes.ts     |  2 +-
 4 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index 87ffc7fd300a..566a677ebd47 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from '@masknet/theme'
-import { useState } from 'react'
 import { CurrentWalletBox } from './CurrentWalletBox'
 import {
     step1ActiveIcon,
@@ -14,13 +13,6 @@ import { ImageIcon } from '@masknet/shared'
 import { Typography } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useNavigate } from 'react-router-dom'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { currentPersonaIdentifier } from '../../../settings/settings'
-import { ECKeyIdentifier, Identifier, NextIDAction, NextIDPayload, NextIDPlatform } from '@masknet/shared-base'
-import { useAsync } from 'react-use'
-import Services from '../../../extension/service'
-import { NextIDProof } from '@masknet/web3-providers'
-import { useWallet } from '@masknet/plugin-infra'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -71,25 +63,22 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-enum SignSteps {
+export enum SignSteps {
     Ready = 0,
-    Step1Done = 1,
-    Step2Done = 2,
+    FirstStepDone = 1,
+    SecondStepDone = 2,
 }
 
-export function Steps() {
+interface StepsProps {
+    step: SignSteps
+    personaSign: () => void
+    walletSign: () => void
+}
+
+export function Steps(props: StepsProps) {
     const { classes } = useStyles()
-    const [step, setStep] = useState(SignSteps.Ready)
     const navigate = useNavigate()
-    const currentIdentifier = Identifier.fromString(useValueRef(currentPersonaIdentifier), ECKeyIdentifier)
-    const { value: persona_ } = useAsync(async () => {
-        return Services.Identity.queryPersona(currentIdentifier.unwrap())
-    }, [currentIdentifier])
-    const [payload, setPayload] = useState<NextIDPayload>()
-    const [signature, setSignature] = useState<string>()
-    const wallet = useWallet()
-
-    if (!persona_ || !persona_.publicHexKey || !wallet) return null
+    const { step, personaSign, walletSign } = props
 
     const stepIconMap = {
         [SignSteps.Ready]: {
@@ -97,12 +86,12 @@ export function Steps() {
             divider: dividerDisableIcon,
             step2: step2DisableIcon,
         },
-        [SignSteps.Step1Done]: {
+        [SignSteps.FirstStepDone]: {
             step1: stepSuccessIcon,
             divider: dividerActiveIcon,
             step2: step2ActiveIcon,
         },
-        [SignSteps.Step2Done]: {
+        [SignSteps.SecondStepDone]: {
             step1: stepSuccessIcon,
             divider: dividerSuccessIcon,
             step2: stepSuccessIcon,
@@ -111,58 +100,14 @@ export function Steps() {
 
     const onConfirm = () => {
         if (step === SignSteps.Ready) {
-            personaSilentSign()
-        } else if (step === SignSteps.Step1Done) {
+            personaSign()
+        } else if (step === SignSteps.FirstStepDone) {
             walletSign()
         } else {
             navigate(-1)
         }
     }
 
-    const personaSilentSign = async () => {
-        try {
-            const payload = await NextIDProof.createPersonaPayload(
-                persona_.publicHexKey as string,
-                NextIDAction.Create,
-                wallet.address,
-                NextIDPlatform.Ethereum,
-                'default',
-            )
-            if (!payload) throw new Error('Failed to create persona payload.')
-            setPayload(payload)
-            const signResult = await Services.Identity.generateSignResult(
-                currentIdentifier.val as ECKeyIdentifier,
-                payload.signPayload,
-            )
-            setSignature(signResult.signature.signature)
-            if (!signResult) throw new Error('Failed to sign persona.')
-            setStep(SignSteps.Step1Done)
-        } catch (error) {
-            console.error(error)
-        }
-    }
-    const walletSign = async () => {
-        if (!payload) throw new Error('payload error')
-        try {
-            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.address)
-            if (!walletSig) throw new Error('Wallet sign failed')
-            await NextIDProof.bindProof(
-                payload.uuid,
-                persona_.publicHexKey as string,
-                NextIDAction.Create,
-                NextIDPlatform.Ethereum,
-                wallet.address,
-                payload.createdAt,
-                {
-                    walletSignature: walletSig,
-                    signature: signature,
-                },
-            )
-            setStep(SignSteps.Step2Done)
-        } catch (error) {
-            console.error(error)
-        }
-    }
     const onCancel = () => {
         navigate(-1)
     }
diff --git a/packages/mask/src/extension/popups/pages/Personas/index.tsx b/packages/mask/src/extension/popups/pages/Personas/index.tsx
index 62ea349e301d..9f6add97dff2 100644
--- a/packages/mask/src/extension/popups/pages/Personas/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/index.tsx
@@ -4,12 +4,12 @@ import { LoadingPlaceholder } from '../../components/LoadingPlaceholder'
 import { PersonaContext } from './hooks/usePersonaContext'
 import { PopupRoutes, relativeRouteOf } from '@masknet/shared-base'
 import { Route, Routes } from 'react-router-dom'
-import VerifyWallet from '../Wallet/VerifyWallet'
 
 const Home = lazy(() => import('./Home'))
 const Logout = lazy(() => import('./Logout'))
 const PersonaRename = lazy(() => import('./Rename'))
 const PersonaSignRequest = lazy(() => import('./PersonaSignRequest'))
+const VerifyWallet = lazy(() => import('../Wallet/VerifyWallet'))
 
 const r = relativeRouteOf(PopupRoutes.Personas)
 const Persona = memo(() => {
diff --git a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
index aaa609e38824..e29fab9c4ae8 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
@@ -1,6 +1,10 @@
+import { useWallet } from '@masknet/plugin-infra'
+import { NextIDAction, NextIDPayload, NextIDPlatform } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { memo } from 'react'
-import { Steps } from '../../../../../components/shared/VerifyWallet/Steps'
+import { NextIDProof } from '@masknet/web3-providers'
+import { memo, useState } from 'react'
+import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
+import Services from '../../../../service'
 import { PersonaContext } from '../../Personas/hooks/usePersonaContext'
 
 const useStyles = makeStyles()((theme) => ({
@@ -15,11 +19,59 @@ const useStyles = makeStyles()((theme) => ({
 const VerifyWallet = memo(() => {
     const { classes } = useStyles()
     const { currentPersona } = PersonaContext.useContainer()
-    console.log(currentPersona, 'ggg')
+    const wallet = useWallet()
 
+    const [step, setStep] = useState(SignSteps.Ready)
+    const [signature, setSignature] = useState<string>()
+    const [payload, setPayload] = useState<NextIDPayload>()
+    if (!currentPersona || !wallet) return null
+    const personaSilentSign = async () => {
+        try {
+            const payload = await NextIDProof.createPersonaPayload(
+                currentPersona.publicHexKey as string,
+                NextIDAction.Create,
+                wallet.address,
+                NextIDPlatform.Ethereum,
+                'default',
+            )
+            if (!payload) throw new Error('Failed to create persona payload.')
+            setPayload(payload)
+            const signResult = await Services.Identity.generateSignResult(
+                currentPersona.identifier,
+                payload.signPayload,
+            )
+            setSignature(signResult.signature.signature)
+            if (!signResult) throw new Error('Failed to sign persona.')
+            setStep(SignSteps.FirstStepDone)
+        } catch (error) {
+            console.error(error)
+        }
+    }
+    const walletSign = async () => {
+        if (!payload) throw new Error('payload error')
+        try {
+            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.address)
+            if (!walletSig) throw new Error('Wallet sign failed')
+            await NextIDProof.bindProof(
+                payload.uuid,
+                currentPersona.publicHexKey as string,
+                NextIDAction.Create,
+                NextIDPlatform.Ethereum,
+                wallet.address,
+                payload.createdAt,
+                {
+                    walletSignature: walletSig,
+                    signature: signature,
+                },
+            )
+            setStep(SignSteps.SecondStepDone)
+        } catch (error) {
+            console.error(error)
+        }
+    }
     return (
         <div className={classes.container}>
-            <Steps />
+            <Steps step={step} personaSign={personaSilentSign} walletSign={walletSign} />
         </div>
     )
 })
diff --git a/packages/shared-base/src/Routes/PopupRoutes.ts b/packages/shared-base/src/Routes/PopupRoutes.ts
index 2465d1e722b7..963cb8f11fd6 100644
--- a/packages/shared-base/src/Routes/PopupRoutes.ts
+++ b/packages/shared-base/src/Routes/PopupRoutes.ts
@@ -31,5 +31,5 @@ export enum PopupRoutes {
     SignRequest = '/sign-request',
     Swap = '/swap',
     ConnectWallet = '/wallet/connect',
-    VerifyWallet = '/wallet/verify',
+    VerifyWallet = '/personas/verify',
 }

From e6091e694ed9a3669ce00cddb07d041186fe7f9a Mon Sep 17 00:00:00 2001
From: billy <Billy@mask.io>
Date: Tue, 12 Apr 2022 17:26:08 +0800
Subject: [PATCH 14/14] fix: fix

---
 .../src/extension/popups/assets/blocto.svg    | 21 ++++++++
 .../mask/src/extension/popups/assets/mask.svg | 20 ++++++++
 .../src/extension/popups/assets/metamask.svg  | 48 +++++++++++++++++++
 .../extension/popups/assets/walletconnect.svg | 20 ++++++++
 .../pages/Wallet/ConnectWallet/constants.ts   | 10 ++--
 .../pages/Wallet/ConnectWallet/index.tsx      |  6 +--
 6 files changed, 116 insertions(+), 9 deletions(-)
 create mode 100644 packages/mask/src/extension/popups/assets/blocto.svg
 create mode 100644 packages/mask/src/extension/popups/assets/mask.svg
 create mode 100644 packages/mask/src/extension/popups/assets/metamask.svg
 create mode 100644 packages/mask/src/extension/popups/assets/walletconnect.svg

diff --git a/packages/mask/src/extension/popups/assets/blocto.svg b/packages/mask/src/extension/popups/assets/blocto.svg
new file mode 100644
index 000000000000..646d48924816
--- /dev/null
+++ b/packages/mask/src/extension/popups/assets/blocto.svg
@@ -0,0 +1,21 @@
+<svg width="43" height="50" viewBox="0 0 43 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_270_89338)">
+<path d="M28.9443 22.396C29.8924 22.396 30.6773 23.1712 30.4996 24.1025C30.3837 24.7102 30.2058 25.3059 29.9679 25.8802C29.5104 26.9849 28.8397 27.9885 27.9943 28.834C27.1488 29.6794 26.1451 30.3501 25.0405 30.8076C23.9359 31.2652 22.7519 31.5007 21.5563 31.5007C20.3606 31.5007 19.1767 31.2652 18.072 30.8076C16.9674 30.3501 15.9637 29.6794 15.1183 28.834C14.2728 27.9885 13.6022 26.9849 13.1446 25.8802C12.9067 25.3059 12.7289 24.7102 12.6129 24.1025C12.4352 23.1712 13.2201 22.396 14.1682 22.396L21.5563 22.396H28.9443Z" fill="#AFD8F7"/>
+<path d="M21.556 14.2218C21.556 13.2737 22.3313 12.4888 23.2626 12.6665C23.8702 12.7825 24.466 12.9603 25.0403 13.1982C26.1449 13.6558 27.1486 14.3264 27.994 15.1719C28.8395 16.0173 29.5101 17.021 29.9677 18.1256C30.2056 18.6999 30.3834 19.2957 30.4994 19.9034C30.6771 20.8346 29.8922 21.6099 28.9441 21.6099L24.9893 21.6099C23.0932 21.6099 21.556 20.0727 21.556 18.1766L21.556 14.2218Z" fill="#3485C4"/>
+<path d="M12.4753 6.8142C12.4753 6.64067 12.616 6.5 12.7895 6.5L-nan -nanL12.7895 6.5C17.0844 6.5 20.5661 9.98169 20.5661 14.2766V21.0231C20.5661 21.3472 20.3034 21.6099 19.9793 21.6099H14.192C13.2439 21.6099 12.4753 20.8413 12.4753 19.8932V6.8142Z" fill="#182A71"/>
+</g>
+<defs>
+<filter id="filter0_bd_270_89338" x="-9.5" y="-12" width="62" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_270_89338"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.521569 0 0 0 0 0.768627 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_270_89338" result="effect2_dropShadow_270_89338"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_270_89338" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/mask/src/extension/popups/assets/mask.svg b/packages/mask/src/extension/popups/assets/mask.svg
new file mode 100644
index 000000000000..3666da4207ed
--- /dev/null
+++ b/packages/mask/src/extension/popups/assets/mask.svg
@@ -0,0 +1,20 @@
+<svg width="55" height="54" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_1645_1825)">
+<rect x="12.5" y="6" width="30" height="30" rx="15" fill="#1C68F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1927 17.5972V22.4583H21.7039L21.0805 22.4584C21.7403 25.4079 24.3588 27.6111 27.4885 27.6111C30.0759 27.6111 32.3139 26.1053 33.3846 23.9168L36.1927 23.9167V28C36.1927 28.9665 35.4143 29.75 34.4541 29.75H20.5448C19.5846 29.75 18.8062 28.9665 18.8062 28V17.5972H36.1927ZM31.717 23.9167C30.7949 25.2736 29.245 26.164 27.4885 26.164C25.7319 26.164 24.182 25.2736 23.2599 23.9167H31.717ZM23.7806 18.7639C22.4181 18.7639 21.2909 19.778 21.1035 21.0972L22.5855 21.0972C22.7485 20.5895 23.2219 20.2222 23.7806 20.2222C24.3394 20.2222 24.8128 20.5895 24.9758 21.0972L26.4578 21.0972C26.2704 19.778 25.1432 18.7639 23.7806 18.7639ZM31.2182 18.7639C29.8557 18.7639 28.7285 19.778 28.5411 21.0972L30.0231 21.0972C30.1861 20.5895 30.6595 20.2222 31.2182 20.2222C31.777 20.2222 32.2504 20.5895 32.4134 21.0972L33.8954 21.0972C33.708 19.778 32.5808 18.7639 31.2182 18.7639ZM34.4541 12.25C35.4143 12.25 36.1927 13.0335 36.1927 14V16.1389H18.8062V14C18.8062 13.0335 19.5846 12.25 20.5448 12.25H34.4541Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_bd_1645_1825" x="-3.5" y="-10" width="62" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1645_1825"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.407843 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1645_1825" result="effect2_dropShadow_1645_1825"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1645_1825" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/mask/src/extension/popups/assets/metamask.svg b/packages/mask/src/extension/popups/assets/metamask.svg
new file mode 100644
index 000000000000..2a8c95af16a7
--- /dev/null
+++ b/packages/mask/src/extension/popups/assets/metamask.svg
@@ -0,0 +1,48 @@
+<svg width="47" height="46" viewBox="0 0 47 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_1645_1777)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.688 25.431L21.6359 26.2138V25.1901L21.8766 24.9492H23.5611V26.1536V26.9967H21.7562L19.5303 26.0332L18.688 25.431Z" fill="#CDBDB2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3132 25.431L25.4255 26.2138V25.1901L25.1848 24.9492H23.5003V26.1536V26.9967H25.3051L27.5311 26.0332L28.3132 25.431Z" fill="#CDBDB2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8766 23.202L21.636 25.1892L21.9368 24.9483H25.0652L25.4262 25.1892L25.1855 23.202L24.7042 22.9009L22.2978 22.9611L21.8766 23.202Z" fill="#393939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2517 9.77344L21.6956 13.1457L22.3574 22.9613H24.7037L25.4256 13.1457L26.7492 9.77344H20.2517Z" fill="#F89C35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9345 17.1806L12.25 22.0583L16.4613 21.8174H19.1686V19.7098L19.0483 15.374L18.4467 15.8558L13.9345 17.1806Z" fill="#F89D35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.123 17.7227L22.0563 17.8431L21.5149 20.3723L19.1686 19.7701L17.123 17.7227Z" fill="#D87C30"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.123 17.7837L19.1686 19.7107V21.6377L17.123 17.7837Z" fill="#EA8D3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1677 19.771L21.5742 20.3732L22.3563 22.9626L21.8149 23.2637L19.1677 21.698V19.771Z" fill="#F89D35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1693 21.6973L18.688 25.4308L21.8766 23.2027L19.1693 21.6973Z" fill="#EB8F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0569 17.8423L22.3577 22.9609L21.4553 20.3414L22.0569 17.8423Z" fill="#EA8E3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4016 21.7575L19.1691 21.6973L18.6878 25.4308L16.4016 21.7575Z" fill="#D87C30"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5736 27.0551L18.6873 25.4292L16.4012 21.7559L12.25 22.057L13.5736 27.0551Z" fill="#EB8F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6953 13.1475L19.1084 15.3153L17.123 17.7241L22.0563 17.9047L21.6953 13.1475Z" fill="#E8821E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.688 25.4317L21.8766 23.2036L21.6359 25.1306V26.2145L19.4701 25.793L18.688 25.4317Z" fill="#DFCEC3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3132 25.4317L25.1848 23.2036L25.4255 25.1306V26.2145L27.5913 25.793L28.3132 25.4317Z" fill="#DFCEC3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7325 18.9263L21.3943 20.3113L19.048 19.7091L20.7325 18.9263Z" fill="#393939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5134 6.94385L21.6954 13.1464L20.3117 9.77413L13.5134 6.94385Z" fill="#E88F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5124 6.94385L12.4294 10.2559L13.0311 13.869L12.6099 14.1099L13.2115 14.6518L12.7303 15.0734L13.392 15.6755L12.9709 16.0369L13.9335 17.2412L18.4456 15.8562C20.6516 14.0898 21.7345 13.1865 21.6944 13.1464C21.6543 13.1062 18.9269 11.0387 13.5124 6.94385Z" fill="#8E5A30"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.0655 17.1806L34.75 22.0583L30.5387 21.8174H27.8314V19.7098L27.9517 15.374L28.5533 15.8558L33.0655 17.1806Z" fill="#F89D35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.877 17.7227L24.9437 17.8431L25.4852 20.3723L27.8315 19.7701L29.877 17.7227Z" fill="#D87C30"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.877 17.7837L27.8314 19.7107V21.6377L29.877 17.7837Z" fill="#EA8D3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.8323 19.771L25.4258 20.3732L24.6437 22.9626L25.1852 23.2637L27.8323 21.698V19.771Z" fill="#F89D35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.8307 21.6973L28.312 25.4308L25.1836 23.263L27.8307 21.6973Z" fill="#EB8F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9431 17.8423L24.6423 22.9609L25.5447 20.3414L24.9431 17.8423Z" fill="#EA8E3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5984 21.7575L27.8309 21.6973L28.3122 25.4308L30.5984 21.7575Z" fill="#D87C30"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.4264 27.0575L28.3127 25.4316L30.5988 21.7583L34.75 22.0594L33.4264 27.0575Z" fill="#EB8F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3047 13.1475L27.8916 15.3153L29.877 17.7241L24.9437 17.9047L25.3047 13.1475Z" fill="#E8821E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2675 18.9263L25.6057 20.3113L27.952 19.7091L26.2675 18.9263Z" fill="#393939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.4866 6.94385L25.3046 13.1464L26.6883 9.77413L33.4866 6.94385Z" fill="#E88F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.4864 6.94385L34.5693 10.2559L33.9677 13.869L34.3889 14.1099L33.7872 14.6518L34.2685 15.0734L33.6067 15.6755L34.0279 16.0369L33.0653 17.2412L28.5532 15.8562C26.3472 14.0898 25.2643 13.1865 25.3044 13.1464C25.3445 13.1062 28.0719 11.0387 33.4864 6.94385Z" fill="#8E5A30"/>
+</g>
+<defs>
+<filter id="filter0_bd_1645_1777" x="-7.5" y="-14" width="62" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1645_1777"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.847059 0 0 0 0 0.486275 0 0 0 0 0.188235 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1645_1777" result="effect2_dropShadow_1645_1777"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1645_1777" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/mask/src/extension/popups/assets/walletconnect.svg b/packages/mask/src/extension/popups/assets/walletconnect.svg
new file mode 100644
index 000000000000..764df3dbd43b
--- /dev/null
+++ b/packages/mask/src/extension/popups/assets/walletconnect.svg
@@ -0,0 +1,20 @@
+<svg width="55" height="54" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_1645_1852)">
+<path d="M12.5 21C12.5 12.7157 19.2157 6 27.5 6C35.7843 6 42.5 12.7157 42.5 21C42.5 29.2843 35.7843 36 27.5 36C19.2157 36 12.5 29.2843 12.5 21Z" fill="#3B99FC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.4068 17.1479C30.1453 13.9507 24.8572 13.9507 21.5956 17.1479L21.1648 17.5702C21.0017 17.7301 21.0017 17.9893 21.1648 18.1491L22.5076 19.4654C22.5891 19.5453 22.7213 19.5453 22.8029 19.4654L23.3813 18.8983C25.6567 16.6679 29.3458 16.6679 31.6211 18.8983L32.1613 19.4278C32.2428 19.5078 32.375 19.5078 32.4566 19.4278L33.7994 18.1116C33.9624 17.9517 33.9624 17.6925 33.7994 17.5327L33.4068 17.1479ZM37.3777 21.0416L36.1826 19.8701C36.0195 19.7102 35.7551 19.7102 35.5921 19.8701L31.7675 23.6191C31.7267 23.6591 31.6606 23.6591 31.6198 23.6191L27.7952 19.87L27.7952 19.87C27.6321 19.7101 27.3677 19.7101 27.2047 19.87L23.3802 23.6191C23.3395 23.6591 23.2733 23.6591 23.2326 23.6191L19.408 19.87C19.2449 19.7101 18.9805 19.7101 18.8174 19.87L17.6223 21.0415C17.4592 21.2013 17.4592 21.4605 17.6223 21.6204L23.0112 26.9028C23.1742 27.0627 23.4386 27.0627 23.6017 26.9028L27.4262 23.1538C27.467 23.1138 27.5331 23.1138 27.5739 23.1538L31.3984 26.9028C31.5615 27.0627 31.8259 27.0627 31.989 26.9028L37.3777 21.6205C37.5408 21.4606 37.5408 21.2014 37.3777 21.0416Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_bd_1645_1852" x="-3.5" y="-10" width="62" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1645_1852"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.407843 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1645_1852" result="effect2_dropShadow_1645_1852"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1645_1852" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
index c3d21d9e53ec..ed1b39f91e7f 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/constants.ts
@@ -1,10 +1,8 @@
-import { MaskWalletIcon, WalletConnectIcon, MetaMaskIcon, BloctoIcon } from '@masknet/icons'
-
 const supportedWallets = [
-    { title: 'MetaMask', icon: MetaMaskIcon },
-    { title: 'Mask', icon: MaskWalletIcon },
-    { title: 'WalletConnect', icon: WalletConnectIcon },
-    { title: 'Blocto', icon: BloctoIcon },
+    { title: 'MetaMask', icon: new URL('../../../assets/metamask.svg', import.meta.url).toString() },
+    { title: 'Mask', icon: new URL('../../../assets/mask.svg', import.meta.url).toString() },
+    { title: 'WalletConnect', icon: new URL('../../../assets/walletconnect.svg', import.meta.url).toString() },
+    { title: 'Blocto', icon: new URL('../../../assets/blocto.svg', import.meta.url).toString() },
 ]
 
 export { supportedWallets }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
index f7bc06671ee2..b9f1e4ebe884 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
@@ -33,8 +33,8 @@ const useStyles = makeStyles()((theme) => ({
         height: 'fit-content',
     },
     walletIcon: {
-        width: '4rem',
-        height: '4rem',
+        width: '5rem',
+        height: '5rem',
     },
 }))
 const ConnectWalletPage = memo(() => {
@@ -48,7 +48,7 @@ const ConnectWalletPage = memo(() => {
             {supportedWallets.map((item, idx) => {
                 return (
                     <div key={idx} className={classes.walletItem} onClick={clickItem}>
-                        <item.icon className={classes.walletIcon} />
+                        <img src={item.icon} className={classes.walletIcon} />
                         <Typography>{item.title}</Typography>
                     </div>
                 )