feat: popups persona (DimensionDev#4344)

* feat: popups persona * feat: delete persona * fix: bugfix * fix: i18n * feat: add instagram on connect social media page * refactor: connect social media use defined social network * fix: improve drawer closing * fix: error * fix: build error * revert: useless d.ts * chore: replace fallback avatar * fix: adjust style * chore: ajust avatar * chore: apply review Co-authored-by: Lantt <[email protected]>
dmrazzy · Sep 17, 2021 · dde549c · dde549c
1 parent 50cbf38
commit dde549c
Show file tree

Hide file tree

Showing 34 changed files with 1,031 additions and 206 deletions.
diff --git a/packages/dashboard/src/components/DashboardFrame/index.tsx b/packages/dashboard/src/components/DashboardFrame/index.tsx
@@ -186,7 +186,12 @@ export const PageFrame = memo((props: PageFrameProps) => {
                     <NavigationDrawer
                         open={drawerOpen}
                         onClose={toggleDrawer}
-                        hideBackdrop
+                        ModalProps={{
+                            BackdropProps: {
+                                sx: { background: 'transparent' },
+                            },
+                        }}
+                        transitionDuration={300}
                         variant="temporary"
                         elevation={0}>
                         <Navigation />

diff --git a/packages/dashboard/src/pages/CreateMaskWallet/components/CreateWalletForm/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/components/CreateWalletForm/index.tsx
@@ -83,10 +83,11 @@ const CreateWalletForm = memo(() => {
         //     .string()
         //     .min(8)
         //     .max(20)
-        //     .refine((input) => /[A-Z]/.test(input), t.create_wallet_password_uppercase_tip())
-        //     .refine((input) => /[a-z]/.test(input), t.create_wallet_password_lowercase_tip())
-        //     .refine((input) => /\d/.test(input), t.create_wallet_password_number_tip())
-        //     .refine((input) => /[^\dA-Za-z]/.test(input), t.create_wallet_password_special_tip())
+        //     .refine((input) => [/[A-Z]/, /[a-z]/, /\d/, /[^\dA-Za-z]/].filter((regex) => regex.test(input)).length >= 2)
+        // .refine((input) => /[A-Z]/.test(input), t.create_wallet_password_uppercase_tip())
+        // .refine((input) => /[a-z]/.test(input), t.create_wallet_password_lowercase_tip())
+        // .refine((input) => /\d/.test(input), t.create_wallet_password_number_tip())
+        // .refine((input) => /[^\dA-Za-z]/.test(input), t.create_wallet_password_special_tip())
         const confirmRule = zod.string().min(8).max(20)
         return zod.object({
             name: zod.string().min(1).max(12),

diff --git a/packages/dashboard/src/pages/Personas/components/ContactsTable/index.tsx b/packages/dashboard/src/pages/Personas/components/ContactsTable/index.tsx
@@ -124,7 +124,7 @@ export const ContactsTableUI = memo<ContactsTableUIProps>(
                         <Table stickyHeader>
                             <TableHead>
                                 <TableRow>
-                                    <TableCell variant="head" align="center" className={classes.header}>
+                                    <TableCell variant="head" align="left" className={classes.header}>
                                         {t.personas_contacts_name()}
                                     </TableCell>
                                     <TableCell variant="head" align="center" className={classes.header}>

diff --git a/packages/dashboard/src/pages/Personas/components/DisconnectProfileDialog/index.tsx b/packages/dashboard/src/pages/Personas/components/DisconnectProfileDialog/index.tsx
@@ -1,8 +1,7 @@
 import { getMaskColor, makeStyles, MaskColorVar, MaskDialog } from '@masknet/theme'
 import { Box, Button, DialogContent, Link, Stack, Typography } from '@material-ui/core'
 import { useDashboardI18N } from '../../../../locales'
-import { SOCIAL_MEDIA_ICON_MAPPING } from '../../../../constants'
-import type { ProfileIdentifier } from '@masknet/shared'
+import { ProfileIdentifier, SOCIAL_MEDIA_ICON_MAPPING } from '@masknet/shared'
 import { useState } from 'react'
 import { WarningIcon } from '@masknet/icons'
 

diff --git a/packages/dashboard/src/pages/Personas/components/PersonaCard/Row.tsx b/packages/dashboard/src/pages/Personas/components/PersonaCard/Row.tsx
@@ -52,7 +52,7 @@ export const PersonaRowCard = memo(() => {
             onConnect={connectPersona}
             onDisconnect={disconnectPersona}
             onRename={renamePersona}
-            definedSocialNetworks={definedSocialNetworks.filter((x) => !x.networkIdentifier.includes('instagram'))}
+            definedSocialNetworks={definedSocialNetworks}
         />
     )
 })

diff --git a/packages/dashboard/src/pages/Personas/components/PersonaLine/index.tsx b/packages/dashboard/src/pages/Personas/components/PersonaLine/index.tsx
@@ -3,9 +3,8 @@ import { Box, Button, Link, Typography } from '@material-ui/core'
 import { getMaskColor, MaskColorVar } from '@masknet/theme'
 import { useDashboardI18N } from '../../../../locales'
 import { makeStyles } from '@masknet/theme'
-import { SOCIAL_MEDIA_ICON_MAPPING } from '../../../../constants'
 import { DisconnectProfileDialog } from '../DisconnectProfileDialog'
-import type { ProfileIdentifier } from '@masknet/shared'
+import { ProfileIdentifier, SOCIAL_MEDIA_ICON_MAPPING } from '@masknet/shared'
 import { PersonaContext } from '../../hooks/usePersonaContext'
 
 const useStyles = makeStyles()((theme) => ({

diff --git a/packages/dashboard/src/pages/Personas/components/PersonaStateBar/index.tsx b/packages/dashboard/src/pages/Personas/components/PersonaStateBar/index.tsx
@@ -35,7 +35,8 @@ export const PersonaStateBar = memo<PersonaStateBarProps>(({ nickname, toggleDra
     const { classes } = useStyles()
 
     return (
-        <Box display="flex" alignItems="center">
+        // magic number of z-index: https://next.material-ui.com/customization/z-index/#main-content
+        <Box display="flex" alignItems="center" sx={{ zIndex: 1201 }}>
             <MaskAvatar onClick={toggleDrawer} />
             <Stack sx={{ px: 2 }} justifyContent="space-around">
                 <Typography variant="body1" lineHeight={1.2}>

diff --git a/packages/dashboard/src/pages/SignIn/index.tsx b/packages/dashboard/src/pages/SignIn/index.tsx
@@ -8,18 +8,22 @@ import { Restore } from '../../components/Restore'
 import { UserProvider } from '../Settings/hooks/UserContext'
 import { useLocation } from 'react-router-dom'
 import { useMemo } from 'react'
+import type { Search } from 'history'
 
 export default function SignIn() {
     const t = useDashboardI18N()
     const navigate = useNavigate()
-    const { state } = useLocation() as { state: { from: string } }
+
+    const { state, search } = useLocation() as { state: { from: string }; search: Search }
+
+    const from = new URLSearchParams(search).get('from')
 
     const action = useMemo(
         () =>
-            state?.from
+            state?.from || from === 'popups'
                 ? {
                       name: t.close(),
-                      callback: () => navigate(state.from),
+                      callback: () => (state?.from ? navigate(state.from) : navigate(RoutePaths.Personas)),
                   }
                 : {
                       name: t.sign_in_account_sign_up_button(),

diff --git a/packages/dashboard/src/pages/SignUp/steps/ConnectSocialMedia.tsx b/packages/dashboard/src/pages/SignUp/steps/ConnectSocialMedia.tsx
@@ -12,15 +12,13 @@ import { useDashboardI18N } from '../../../locales'
 import { PersonaContext } from '../../Personas/hooks/usePersonaContext'
 import { upperFirst } from 'lodash-es'
 import { Button, Stack } from '@material-ui/core'
-import { SOCIAL_MEDIA_ICON_MAPPING } from '../../../constants'
+import { SOCIAL_MEDIA_ICON_MAPPING } from '@masknet/shared'
 import { ActionCard } from '../../../components/ActionCard'
 
-const ICON_MAPPING = Object.entries(SOCIAL_MEDIA_ICON_MAPPING).map(([type, icon]) => ({ type, icon }))
-
 export const ConnectSocialMedia = () => {
     const navigate = useNavigate()
     const t = useDashboardI18N()
-    const { currentPersona, connectPersona } = PersonaContext.useContainer()
+    const { currentPersona, connectPersona, definedSocialNetworks } = PersonaContext.useContainer()
 
     useEffect(() => {
         if (currentPersona && currentPersona?.linkedProfiles.length > 0) {
@@ -49,15 +47,17 @@ export const ConnectSocialMedia = () => {
                             {t.go_back()}
                         </Button>
                     </Stack>
-                    {ICON_MAPPING.map((d) => (
+                    {definedSocialNetworks.map(({ networkIdentifier }) => (
                         <ActionCard
-                            key={d.type}
-                            title={t.create_account_connect_social_media({ type: upperFirst(d.type) })}
-                            icon={d.icon}
+                            key={networkIdentifier}
+                            title={t.create_account_connect_social_media({
+                                type: upperFirst(networkIdentifier),
+                            })}
+                            icon={SOCIAL_MEDIA_ICON_MAPPING[networkIdentifier]}
                             action={{
                                 type: 'primary',
                                 text: t.connect(),
-                                handler: () => handleConnect(d.type),
+                                handler: () => handleConnect(networkIdentifier),
                             }}
                         />
                     ))}

diff --git a/packages/icons/general/Delete.tsx b/packages/icons/general/Delete.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from '../utils'
+
+export const DeleteIcon = createIcon(
+    'DeleteIcon',
+    <g fill="none">
+        <path
+            d="M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.334h2.666a1.334 1.334 0 011.334 1.334V4m2 0v9.333a1.334 1.334 0 01-1.334 1.334H4.667a1.333 1.333 0 01-1.334-1.334V4h9.334zM6.667 7.333v4M9.333 7.333v4"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </g>,
+    '0 0 16 16',
+)
diff --git a/packages/icons/general/GrayMasks.tsx b/packages/icons/general/GrayMasks.tsx
@@ -0,0 +1,78 @@
+import { createIcon } from '../utils'
+
+export const GrayMasks = createIcon(
+    'GrayMasks',
+    <g fill="none">
+        <path d="M0 10C0 4.477 4.477 0 10 0s10 4.477 10 10-4.477 10-10 10S0 15.523 0 10Z" fill="#F7F9FA" />
+        <rect
+            x="3.033"
+            y="10.905"
+            width="1.25"
+            height="6.25"
+            rx=".625"
+            transform="rotate(-30 3.033 10.905)"
+            fill="url(#gray_masks_a)"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.362 10.787c-.808.258-1.682.122-2.475-.371a.361.361 0 0 0-.309-.037.371.371 0 0 0-.235.219c-.355.85-.997 1.47-1.804 1.729-1.293.412-2.76-.204-3.66-1.536a4.585 4.585 0 0 1-.57-1.174 5.638 5.638 0 0 1-.156-.62l-.138-.778.645.455a.478.478 0 0 0 .42.07.623.623 0 0 0 .111-.053l.163-.18.01-.02.022-.04a3.537 3.537 0 0 1 4.122-1.4 3.537 3.537 0 0 1 1.807-1.323 3.561 3.561 0 0 1 2.363.076l.04.02c.031.016.07.03.108.043l.01.005a.46.46 0 0 0 .268-.01.467.467 0 0 0 .303-.3l.254-.742.338.714c.098.198.17.396.233.596.135.423.206.858.216 1.287.053 1.602-.794 2.957-2.086 3.37ZM6.385 10.3c-.108.034-.22.053-.336.064-.631.04-1.218-.39-1.488-.626.194-.215.582-.593 1.066-.748a1.56 1.56 0 0 1 .336-.065c.631-.04 1.218.391 1.488.627-.202.217-.59.595-1.066.748ZM9.02 9.05c.283.063.826.144 1.303-.009a1.5 1.5 0 0 0 .31-.141c.53-.33.767-1.025.85-1.374-.282-.062-.825-.143-1.302.01a1.501 1.501 0 0 0-.31.141c-.531.33-.767 1.024-.85 1.373Z"
+            fill="url(#gray_masks_b)"
+        />
+        <g filter="url(#gray_masks_c)">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="m11.691 7.184.136-.226 6.382 2.107-.027.262a7.5 7.5 0 0 1-.362 1.7c-.443 1.328-1.202 2.467-2.133 3.208-.696.552-1.447.841-2.16.841-.281 0-.552-.036-.814-.127-.94-.316-1.637-1.147-1.953-2.35-.307-1.148-.235-2.513.208-3.842.18-.56.425-1.084.723-1.573Zm.814 3.734c.135.063.28.09.443.09.144 0 .307-.027.479-.072.185-.062.333-.139.398-.172l.036-.018.18-.108-.099-.19c-.009-.027-.298-.579-.868-.832-.57-.253-1.175-.09-1.202-.081l-.208.054.045.208c.003.003.008.022.018.053.023.078.068.232.145.4.163.325.38.56.633.668Zm2.811.958a.91.91 0 0 0 .226.027c.217 0 .452-.063.678-.18.235-.118.389-.254.398-.263l.163-.144-.127-.172c-.018-.027-.407-.524-1.012-.66-.561-.125-1.083.098-1.179.139a.356.356 0 0 1-.015.006l-.19.09.082.199c0 .009.081.208.235.416.217.29.47.479.741.542Z"
+                fill="url(#gray_masks_d)"
+                fillOpacity=".3"
+            />
+        </g>
+        <defs>
+            <linearGradient
+                id="gray_masks_a"
+                x1="3.033"
+                y1="17.155"
+                x2="4.283"
+                y2="17.155"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#AFC3E1" />
+                <stop offset="1" stopColor="#C3D7F5" />
+            </linearGradient>
+            <linearGradient
+                id="gray_masks_b"
+                x1="2.444"
+                y1="12.774"
+                x2="13.862"
+                y2="11.699"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#AFC3E1" />
+                <stop offset="1" stopColor="#C3D7F5" />
+            </linearGradient>
+            <linearGradient
+                id="gray_masks_d"
+                x1="10.573"
+                y1="15.076"
+                x2="18.209"
+                y2="15.076"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#B0CFEB" />
+                <stop offset="1" stopColor="#C4E1FB" />
+            </linearGradient>
+            <filter
+                id="gray_masks_c"
+                x="6.573"
+                y="2.958"
+                width="15.636"
+                height="16.118"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feGaussianBlur in="BackgroundImage" stdDeviation="2" />
+                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur" />
+                <feBlend in="SourceGraphic" in2="effect1_backgroundBlur" result="shape" />
+            </filter>
+        </defs>
+    </g>,
+    '0 0 20 20',
+)
diff --git a/packages/icons/general/InstagramColored.tsx b/packages/icons/general/InstagramColored.tsx
@@ -0,0 +1,47 @@
+import { createIcon } from '../utils'
+
+export const InstagramColoredIcon = createIcon(
+    'InstagramColoredIcon',
+    <g fill="none">
+        <g clipPath="url(#instagram_colored_a)">
+            <path
+                d="M6.086 23.915a8.083 8.083 0 0 1-2.718-.503 4.549 4.549 0 0 1-1.684-1.095 4.512 4.512 0 0 1-1.096-1.683 8.08 8.08 0 0 1-.502-2.718C.014 16.373 0 15.91 0 12c0-3.91.016-4.371.085-5.915a8.126 8.126 0 0 1 .503-2.717 4.565 4.565 0 0 1 1.095-1.685A4.52 4.52 0 0 1 3.367.588 8.08 8.08 0 0 1 6.085.085C7.63.015 8.092 0 12 0s4.371.016 5.915.085a8.126 8.126 0 0 1 2.718.503 4.531 4.531 0 0 1 1.684 1.095c.486.472.86 1.048 1.095 1.684.323.87.493 1.79.503 2.718.07 1.544.085 2.007.085 5.916 0 3.908-.014 4.37-.085 5.915a8.118 8.118 0 0 1-.503 2.718 4.848 4.848 0 0 1-2.779 2.778c-.87.323-1.79.493-2.718.503-1.543.07-2.007.085-5.915.085-3.91 0-4.372-.013-5.914-.085"
+                fill="url(#instagram_colored_b)"
+            />
+            <path
+                d="M6.086 23.915a8.083 8.083 0 0 1-2.718-.503 4.549 4.549 0 0 1-1.684-1.095 4.512 4.512 0 0 1-1.096-1.683 8.08 8.08 0 0 1-.502-2.718C.014 16.373 0 15.91 0 12c0-3.91.016-4.371.085-5.915a8.126 8.126 0 0 1 .503-2.717 4.565 4.565 0 0 1 1.095-1.685A4.52 4.52 0 0 1 3.367.588 8.08 8.08 0 0 1 6.085.085C7.63.015 8.092 0 12 0s4.371.016 5.915.085a8.126 8.126 0 0 1 2.718.503 4.531 4.531 0 0 1 1.684 1.095c.486.472.86 1.048 1.095 1.684.323.87.493 1.79.503 2.718.07 1.544.085 2.007.085 5.916 0 3.908-.014 4.37-.085 5.915a8.118 8.118 0 0 1-.503 2.718 4.848 4.848 0 0 1-2.779 2.778c-.87.323-1.79.493-2.718.503-1.543.07-2.007.085-5.915.085-3.91 0-4.372-.013-5.914-.085"
+                fill="url(#instagram_colored_c)"
+            />
+            <path
+                d="M9.054 12.051a2.972 2.972 0 1 1 5.943 0 2.972 2.972 0 0 1-5.943 0Zm-1.607 0a4.578 4.578 0 1 0 9.157 0 4.578 4.578 0 0 0-9.157 0Zm8.268-4.76a1.07 1.07 0 1 0 2.139.001 1.07 1.07 0 0 0-2.138 0h-.001ZM8.424 19.31a4.927 4.927 0 0 1-1.656-.306 2.951 2.951 0 0 1-1.693-1.692c-.196-.53-.3-1.09-.305-1.656-.044-.94-.052-1.222-.052-3.603 0-2.38.01-2.662.052-3.603a4.96 4.96 0 0 1 .305-1.656 2.95 2.95 0 0 1 1.693-1.692c.53-.197 1.09-.3 1.656-.306.94-.043 1.222-.052 3.602-.052s2.662.01 3.603.052a4.96 4.96 0 0 1 1.656.306 2.95 2.95 0 0 1 1.692 1.692c.197.53.3 1.09.306 1.656.043.941.052 1.222.052 3.603 0 2.382-.009 2.663-.052 3.604a4.948 4.948 0 0 1-.306 1.655 2.953 2.953 0 0 1-1.692 1.692c-.53.197-1.09.3-1.656.306-.94.043-1.222.052-3.603.052-2.381 0-2.663-.009-3.602-.052ZM8.35 3.189a6.538 6.538 0 0 0-2.165.414 4.558 4.558 0 0 0-2.608 2.608 6.54 6.54 0 0 0-.414 2.165c-.044.95-.054 1.255-.054 3.676 0 2.421.01 2.725.054 3.676a6.54 6.54 0 0 0 .414 2.165A4.558 4.558 0 0 0 6.185 20.5c.693.26 1.425.4 2.165.415.95.043 1.254.053 3.676.053 2.421 0 2.725-.01 3.676-.053a6.543 6.543 0 0 0 2.164-.415 4.557 4.557 0 0 0 2.608-2.607c.26-.693.4-1.425.414-2.165.044-.951.054-1.255.054-3.676 0-2.421-.01-2.725-.054-3.676a6.535 6.535 0 0 0-.414-2.165 4.56 4.56 0 0 0-2.607-2.608 6.53 6.53 0 0 0-2.165-.414c-.95-.043-1.254-.054-3.675-.054-2.42 0-2.725.01-3.677.054"
+                fill="#fff"
+            />
+        </g>
+        <defs>
+            <radialGradient
+                id="instagram_colored_b"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(1.553 23.474) scale(30.4711)">
+                <stop offset=".09" stopColor="#FA8F21" />
+                <stop offset=".78" stopColor="#D82D7E" />
+            </radialGradient>
+            <radialGradient
+                id="instagram_colored_c"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(16.624 22.703) scale(26.8148)">
+                <stop offset=".64" stopColor="#8C3AAA" stopOpacity="0" />
+                <stop offset="1" stopColor="#8C3AAA" />
+            </radialGradient>
+            <clipPath id="instagram_colored_a">
+                <path fill="#fff" d="M0 0h24v24H0z" />
+            </clipPath>
+        </defs>
+    </g>,
+    '0 0 24 24',
+)
diff --git a/packages/icons/general/Tip.tsx b/packages/icons/general/Tip.tsx
@@ -0,0 +1,10 @@
+import { createIcon } from '../utils'
+
+export const TipIcon = createIcon(
+    'TipIcon',
+    <g>
+        <path opacity=".2" d="M24 4C12.954 4 4 12.954 4 24s8.954 20 20 20 20-8.954 20-20S35.046 4 24 4z" />
+        <path d="M22 26a2 2 0 104 0V16a2 2 0 10-4 0v10zM22 32a2 2 0 104 0 2 2 0 00-4 0z" />
+    </g>,
+    '0 0 48 48',
+)
diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts
@@ -47,6 +47,7 @@ export * from './TwitterColored'
 export * from './Facebook'
 export * from './FacebookColored'
 export * from './Instagram'
+export * from './InstagramColored'
 export * from './RestoreBlue'
 export * from './Loading'
 export * from './Minds'
@@ -59,5 +60,8 @@ export * from './FileMessage'
 export * from './ITO'
 export * from './NFTRedPacket'
 export * from './Poll'
+export * from './Tip'
+export * from './Delete'
+export * from './GrayMasks'
 export * from './Loader'
 export * from './CircleClose'
diff --git a/packages/maskbook/src/extension/background-script/IdentityService.ts b/packages/maskbook/src/extension/background-script/IdentityService.ts
@@ -169,8 +169,9 @@ export async function queryOwnedPersonaInformation(): Promise<PersonaInformation
             linkedProfiles: map,
         })
         for (const [profile] of persona.linkedProfiles) {
-            const nickname = (await queryProfile(profile)).nickname
-            map.push({ identifier: profile, nickname })
+            const linkedProfile = await queryProfile(profile)
+
+            map.push({ identifier: profile, nickname: linkedProfile.nickname, avatar: linkedProfile.avatar })
         }
     }
     return result

diff --git a/packages/maskbook/src/extension/popups/components/PasswordField/index.tsx b/packages/maskbook/src/extension/popups/components/PasswordField/index.tsx
@@ -0,0 +1,33 @@
+import { forwardRef, memo, useState } from 'react'
+import { IconButton, InputAdornment, TextFieldProps } from '@mui/material'
+import { StyledInput } from '../StyledInput'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
+import Visibility from '@mui/icons-material/Visibility'
+
+export const PasswordField = memo(
+    forwardRef<{}, TextFieldProps>((props, ref) => {
+        const [showPassword, setShowPassword] = useState(false)
+
+        return (
+            <StyledInput
+                {...props}
+                type={showPassword ? 'text' : 'password'}
+                ref={ref}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton
+                                aria-label="toggle password visibility"
+                                onClick={() => setShowPassword(!showPassword)}
+                                onMouseDown={(event) => event.preventDefault()}
+                                edge="end"
+                                size="small">
+                                {showPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                }}
+            />
+        )
+    }),
+)
diff --git a/packages/maskbook/src/extension/popups/hook/useEnterDashboard.ts b/packages/maskbook/src/extension/popups/hook/useEnterDashboard.ts
@@ -7,13 +7,11 @@ export const useEnterDashboard = () => {
                 active: true,
                 url: browser.runtime.getURL('/debug.html'),
             })
-        } else if (process.env.NODE_ENV === 'development' && event.ctrlKey) {
+        } else {
             browser.tabs.create({
                 active: true,
                 url: browser.runtime.getURL('/next.html'),
             })
-        } else {
-            browser.runtime.openOptionsPage()
         }
     }, [])
 }
diff --git a/packages/maskbook/src/extension/popups/index.tsx b/packages/maskbook/src/extension/popups/index.tsx
@@ -19,6 +19,8 @@ export enum PopupRoutes {
     Unlock = '/wallet/unlock',
     Transfer = '/wallet/transfer',
     Personas = '/personas',
+    Logout = '/personas/logout',
+    PersonaRename = '/personas/rename',
     PermissionAwareRedirect = '/redirect',
     RequestPermission = '/request-permission',
     ThirdPartyRequestPermission = '/3rd-request-permission',