From 3b9468651354510704ba1cc6649f83066ac9c270 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Fri, 25 Feb 2022 00:21:38 -0800
Subject: [PATCH] feat: add limit about create wallet and persona (#5701)

* feat: add limit about create wallet and persona

* chore: reply review

* fix: bugfix

* fix: bugfix
---
 .../Personas/components/PersonaDrawer/index.tsx  |  7 ++++++-
 .../WelcomeServices/restoreBackup.ts             |  6 ++++--
 .../popups/pages/Personas/Home/index.tsx         | 16 +++++++++++-----
 .../popups/pages/Wallet/SwitchWallet/index.tsx   | 13 ++++++++++---
 packages/shared/src/constants.tsx                |  3 +++
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/src/pages/Personas/components/PersonaDrawer/index.tsx b/packages/dashboard/src/pages/Personas/components/PersonaDrawer/index.tsx
index d81ebe3293ae..3804da3758dc 100644
--- a/packages/dashboard/src/pages/Personas/components/PersonaDrawer/index.tsx
+++ b/packages/dashboard/src/pages/Personas/components/PersonaDrawer/index.tsx
@@ -6,6 +6,7 @@ import { PersonaCard } from '../PersonaCard'
 import { useDashboardI18N } from '../../../../locales'
 import { PersonaIdentifier, PersonaInformation, DashboardRoutes } from '@masknet/shared-base'
 import { useNavigate } from 'react-router-dom'
+import { MAX_PERSONA_LIMIT } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -97,7 +98,11 @@ export const PersonaDrawerUI = memo<PersonaDrawerUIProps>(
                             )
                         })}
                         <Box className={classes.buttons}>
-                            <Button onClick={() => navigate(DashboardRoutes.SignUp)}>{t.personas_add_persona()}</Button>
+                            <Button
+                                onClick={() => navigate(DashboardRoutes.SignUp)}
+                                disabled={personas.length >= MAX_PERSONA_LIMIT}>
+                                {t.personas_add_persona()}
+                            </Button>
                             <Button
                                 color="warning"
                                 onClick={() =>
diff --git a/packages/mask/src/extension/background-script/WelcomeServices/restoreBackup.ts b/packages/mask/src/extension/background-script/WelcomeServices/restoreBackup.ts
index a65d02c986ba..1117c89495d6 100644
--- a/packages/mask/src/extension/background-script/WelcomeServices/restoreBackup.ts
+++ b/packages/mask/src/extension/background-script/WelcomeServices/restoreBackup.ts
@@ -55,9 +55,10 @@ export async function restoreBackup(json: object, whoAmI?: ProfileIdentifier) {
     }
 
     for (const [_, x] of data.wallets.entries()) {
-        const record = WalletRecordFromJSONFormat(x)
-        const name = record.name
         try {
+            const record = WalletRecordFromJSONFormat(x)
+            const name = record.name
+
             if (record.storedKeyInfo && record.derivationPath)
                 await addWallet(record.address, name, record.derivationPath, record.storedKeyInfo)
             else if (record.privateKey) await recoverWalletFromPrivateKey(name, record.privateKey)
@@ -73,6 +74,7 @@ export async function restoreBackup(json: object, whoAmI?: ProfileIdentifier) {
             }
         } catch (error) {
             console.error(error)
+            continue
         }
     }
     {
diff --git a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
index 63167387b8ae..03bdb8a180bb 100644
--- a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
@@ -4,7 +4,7 @@ import { PersonaContext } from '../hooks/usePersonaContext'
 import { useHistory } from 'react-router-dom'
 import { DeleteIcon, MasksIcon, EditIcon } from '@masknet/icons'
 import { Button, Typography } from '@mui/material'
-import { formatFingerprint } from '@masknet/shared'
+import { formatFingerprint, MAX_PERSONA_LIMIT } from '@masknet/shared'
 import { PopupRoutes } from '@masknet/shared-base'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { ProfileList } from '../components/ProfileList'
@@ -12,6 +12,7 @@ import { EnterDashboard } from '../../../components/EnterDashboard'
 import { PersonaList } from '../components/PersonaList'
 import { useI18N } from '../../../../../utils'
 import urlcat from 'urlcat'
+import classNames from 'classnames'
 
 const useStyles = makeStyles()({
     content: {
@@ -83,15 +84,20 @@ const useStyles = makeStyles()({
         marginLeft: 10,
         cursor: 'pointer',
     },
+    secondaryButton: {
+        backgroundColor: '#F7F9FA',
+        color: '#1C68F3',
+    },
 })
 
 const PersonaHome = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
     const [isExpand, setExpand] = useState(true)
-    const { currentPersona, setDeletingPersona } = PersonaContext.useContainer()
+    const { currentPersona, setDeletingPersona, personas } = PersonaContext.useContainer()
     const history = useHistory()
 
+    console.log(personas)
     return (
         <>
             <div className={classes.content}>
@@ -136,14 +142,14 @@ const PersonaHome = memo(() => {
                 <div className={classes.controller}>
                     <Button
                         variant="contained"
-                        className={classes.button}
+                        className={classNames(classes.button, classes.secondaryButton)}
+                        disabled={personas && personas.length >= MAX_PERSONA_LIMIT - 1}
                         onClick={() => {
                             browser.tabs.create({
                                 active: true,
                                 url: browser.runtime.getURL('/dashboard.html#/sign-up'),
                             })
-                        }}
-                        style={{ backgroundColor: '#F7F9FA', color: '#1C68F3' }}>
+                        }}>
                         {t('create')}
                     </Button>
                     <Button
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
index 9187a8c5acee..a15cf7fbdd07 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
@@ -10,6 +10,8 @@ import { useCopyToClipboard } from 'react-use'
 import { NetworkSelector } from '../../../components/NetworkSelector'
 import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
 import { WalletItem } from './WalletItem'
+import { MAX_WALLET_LIMIT } from '@masknet/shared'
+import classNames from 'classnames'
 
 const useStyles = makeStyles()({
     header: {
@@ -72,6 +74,10 @@ const useStyles = makeStyles()({
         fontSize: 14,
         lineHeight: '20px',
     },
+    secondaryButton: {
+        backgroundColor: '#F7F9FA',
+        color: '#1C68F3',
+    },
 })
 
 const SwitchWallet = memo(() => {
@@ -137,13 +143,14 @@ const SwitchWallet = memo(() => {
             <div className={classes.controller}>
                 <Button
                     variant="contained"
-                    className={classes.button}
-                    onClick={handleClickCreate}
-                    style={{ backgroundColor: '#F7F9FA', color: '#1C68F3' }}>
+                    className={classNames(classes.button, classes.secondaryButton)}
+                    disabled={wallets.length >= MAX_WALLET_LIMIT}
+                    onClick={handleClickCreate}>
                     {t('create')}
                 </Button>
                 <Button
                     variant="contained"
+                    disabled={wallets.length >= MAX_WALLET_LIMIT}
                     className={classes.button}
                     onClick={() => history.push(PopupRoutes.ImportWallet)}>
                     {t('import')}
diff --git a/packages/shared/src/constants.tsx b/packages/shared/src/constants.tsx
index 4e68dd0ec764..b11fc21698e8 100644
--- a/packages/shared/src/constants.tsx
+++ b/packages/shared/src/constants.tsx
@@ -16,3 +16,6 @@ export const SOCIAL_MEDIA_ICON_MAPPING: Record<string, ReactNode> = {
 }
 
 export const mediaViewerUrl = 'https://media-viewer.r2d2.to/index.html'
+
+export const MAX_WALLET_LIMIT = 100
+export const MAX_PERSONA_LIMIT = 10