From 12934272dd322377b4e010fdb5bebb0670123eea Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Thu, 21 Apr 2022 10:43:46 +0800 Subject: [PATCH 1/4] feat: new intial persona page --- packages/icons/general/AddUser.tsx | 24 +++ packages/icons/general/PopupRestore.tsx | 20 +++ packages/icons/general/index.ts | 2 + packages/mask/shared-ui/locales/en-US.json | 2 + .../popups/components/PopupFrame/index.tsx | 11 +- .../popups/pages/Personas/Home/UI.tsx | 160 +++++++++++++----- .../popups/pages/Personas/Home/index.tsx | 22 ++- 7 files changed, 185 insertions(+), 56 deletions(-) create mode 100644 packages/icons/general/AddUser.tsx create mode 100644 packages/icons/general/PopupRestore.tsx diff --git a/packages/icons/general/AddUser.tsx b/packages/icons/general/AddUser.tsx new file mode 100644 index 000000000000..f1f47acad83f --- /dev/null +++ b/packages/icons/general/AddUser.tsx @@ -0,0 +1,24 @@ +import { createIcon } from '../utils' +import type { SvgIcon } from '@mui/material' + +export const AddUserIcon: typeof SvgIcon = createIcon( + 'AddUserIcon', + + + + + , + '0 0 18 18', +) diff --git a/packages/icons/general/PopupRestore.tsx b/packages/icons/general/PopupRestore.tsx new file mode 100644 index 000000000000..5c547e586216 --- /dev/null +++ b/packages/icons/general/PopupRestore.tsx @@ -0,0 +1,20 @@ +import { createIcon } from '../utils' +import type { SvgIcon } from '@mui/material' + +export const PopupRestoreIcon: typeof SvgIcon = createIcon( + 'PopupRestoreIcon', + + + + + , + '0 0 18 18', +) diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts index 4876d780b06e..6cf41f94ce5f 100644 --- a/packages/icons/general/index.ts +++ b/packages/icons/general/index.ts @@ -109,3 +109,5 @@ export * from './FacebookRound' export * from './InstagramRound' export * from './MindsRound' export * from './CircleLoading' +export * from './AddUser' +export * from './PopupRestore' diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 7a648fc21824..2b7317ca63aa 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -916,6 +916,8 @@ "popups_add_wallet": "Add Wallet", "popups_profile_photo": "Profile Photo", "popups_public_key": "Public Key", + "popups_create_persona": "Create Persona", + "popups_restore_and_login": "Restore or Login", "popups_name": "Name", "popups_social_account": "Social Accounts", "popups_connected_wallets": "Connected Wallets", diff --git a/packages/mask/src/extension/popups/components/PopupFrame/index.tsx b/packages/mask/src/extension/popups/components/PopupFrame/index.tsx index bb6b918abab3..b4e58e3618e9 100644 --- a/packages/mask/src/extension/popups/components/PopupFrame/index.tsx +++ b/packages/mask/src/extension/popups/components/PopupFrame/index.tsx @@ -1,10 +1,6 @@ import { memo } from 'react' -import { useMatch } from 'react-router-dom' import { Box, GlobalStyles, Paper } from '@mui/material' import { makeStyles } from '@masknet/theme' -import { PopupRoutes } from '@masknet/shared-base' -import { useMyPersonas } from '../../../../components/DataSource/useMyPersonas' -import { InitialPlaceholder } from '../InitialPlaceholder' function GlobalCss() { return ( @@ -39,17 +35,12 @@ export interface PopupFrameProps extends React.PropsWithChildren<{}> {} export const PopupFrame = memo((props) => { const { classes } = useStyles() - const personas = useMyPersonas() - - const matchRecovery = [useMatch(PopupRoutes.WalletRecovered), useMatch(PopupRoutes.Unlock)].some(Boolean) return ( <> - - {personas.length === 0 && !matchRecovery ? : props.children} - + {props.children} ) diff --git a/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx index 5dcacabe3b81..74fad2b153d6 100644 --- a/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx @@ -7,8 +7,15 @@ import { memo } from 'react' import { makeStyles } from '@masknet/theme' import { Navigator } from '../../../components/Navigator' -import { Avatar, Typography } from '@mui/material' -import { ArrowRightIosIcon, MenuPersonasActiveIcon } from '@masknet/icons' +import { Avatar, Button, Typography } from '@mui/material' +import { + AddUserIcon, + ArrowRightIosIcon, + EmptyIcon, + MenuPersonasActiveIcon, + PopupRestoreIcon, + RestoreIcon, +} from '@masknet/icons' import { formatPersonaFingerprint, PopupRoutes, formatPersonaName } from '@masknet/shared-base' import { CopyIconButton } from '../../../components/CopyIconButton' import { useI18N } from '../../../../../utils' @@ -56,6 +63,31 @@ const useStyles = makeStyles()({ color: '#7B8192', fontSize: 24, }, + placeholder: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: 318, + }, + controller: { + display: 'flex', + flexDirection: 'column', + rowGap: 12, + padding: '0 16px 16px 16px', + }, + button: { + padding: '11px 0', + borderRadius: 8, + fontWeight: 700, + fontSize: 14, + width: '100%', + + '& > svg': { + marginLeft: 4, + fontSize: 18, + }, + }, }) export interface PersonaHomeUIProps { @@ -65,58 +97,98 @@ export interface PersonaHomeUIProps { accountsCount: number walletsCount: number onEdit: () => void + onCreatePersona: () => void + onRestore: () => void fetchProofsLoading: boolean + isEmpty?: boolean } export const PersonaHomeUI = memo( - ({ avatar, fingerprint, nickname, accountsCount, walletsCount, onEdit, fetchProofsLoading }) => { + ({ + avatar, + fingerprint, + nickname, + accountsCount, + walletsCount, + onEdit, + fetchProofsLoading, + isEmpty, + onCreatePersona, + onRestore, + }) => { const { t } = useI18N() const { classes } = useStyles() return ( <>
-
- {t('popups_profile_photo')} - {avatar ? ( - - ) : ( - - )} -
-
- {t('popups_public_key')} - {fingerprint ? ( - - {formatPersonaFingerprint(fingerprint, 4)} - - - ) : null} -
- - {t('popups_name')} - - {formatPersonaName(nickname)} - - - - - {t('popups_social_account')} - - {accountsCount} - - - - - {t('popups_connected_wallets')} - - {!fetchProofsLoading ? walletsCount : '...'} - - - + {!isEmpty ? ( + <> +
+ {t('popups_profile_photo')} + {avatar ? ( + + ) : ( + + )} +
+
+ {t('popups_public_key')} + {fingerprint ? ( + + {formatPersonaFingerprint(fingerprint, 4)} + + + ) : null} +
+ + {t('popups_name')} + + {formatPersonaName(nickname)} + + + + + {t('popups_social_account')} + + {accountsCount} + + + + + {t('popups_connected_wallets')} + + {!fetchProofsLoading ? walletsCount : '...'} + + + + + ) : ( + <> +
+ +
+
+ + +
+ + )}
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 2e24a42d6d53..3661b978ee99 100644 --- a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx @@ -1,10 +1,11 @@ import { memo, useCallback, useMemo } from 'react' import { PersonaHomeUI } from './UI' import { PersonaContext } from '../hooks/usePersonaContext' -import { NextIDPlatform } from '@masknet/shared-base' +import { DashboardRoutes, NextIDPlatform } from '@masknet/shared-base' const PersonaHome = memo(() => { - const { avatar, currentPersona, proofs, setSelectedPersona, fetchProofsLoading } = PersonaContext.useContainer() + const { avatar, currentPersona, proofs, setSelectedPersona, fetchProofsLoading, personas } = + PersonaContext.useContainer() const wallets = useMemo(() => { if (!proofs) return [] @@ -15,8 +16,23 @@ const PersonaHome = memo(() => { setSelectedPersona(currentPersona) }, [currentPersona]) + const onCreatePersona = useCallback(() => { + browser.tabs.create({ + active: true, + url: browser.runtime.getURL(`/dashboard.html#${DashboardRoutes.SignUp}`), + }) + }, []) + + const onRestore = useCallback(() => { + browser.tabs.create({ + active: true, + url: browser.runtime.getURL(`/dashboard.html#${DashboardRoutes.SignIn}`), + }) + }, []) + return ( { walletsCount={wallets.length} onEdit={onEdit} fetchProofsLoading={fetchProofsLoading} + onCreatePersona={onCreatePersona} + onRestore={onRestore} /> ) }) From f1c4677d826661bb3a603301c766f34b26551e1a Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Fri, 22 Apr 2022 10:33:13 +0800 Subject: [PATCH 2/4] fix: bugfix --- .../popups/pages/Personas/ConnectedWallets/index.tsx | 12 +++++++++++- .../src/extension/popups/pages/Personas/Home/UI.tsx | 9 +-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx index af8eeb4ceb2c..a9bc9f828ca1 100644 --- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx @@ -46,7 +46,7 @@ const ConnectedWallets = memo(() => { return { ...x, - name: `${x.platform} wallet ${index + 1}`, + name: '', } } return null @@ -54,6 +54,16 @@ const ConnectedWallets = memo(() => { ) return compact(results) + .map((x, index) => { + if (!x.name) + return { + ...x, + name: `${x.platform} wallet ${index + 1}`, + } + + return x + }) + .reverse() }, [wallets, NameService, proofs]) const [confirmState, onConfirmRelease] = useAsyncFn( diff --git a/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx index 74fad2b153d6..f2ab79bd9940 100644 --- a/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx @@ -8,14 +8,7 @@ import { memo } from 'react' import { makeStyles } from '@masknet/theme' import { Navigator } from '../../../components/Navigator' import { Avatar, Button, Typography } from '@mui/material' -import { - AddUserIcon, - ArrowRightIosIcon, - EmptyIcon, - MenuPersonasActiveIcon, - PopupRestoreIcon, - RestoreIcon, -} from '@masknet/icons' +import { AddUserIcon, ArrowRightIosIcon, EmptyIcon, MenuPersonasActiveIcon, PopupRestoreIcon } from '@masknet/icons' import { formatPersonaFingerprint, PopupRoutes, formatPersonaName } from '@masknet/shared-base' import { CopyIconButton } from '../../../components/CopyIconButton' import { useI18N } from '../../../../../utils' From fc8bf27e86845aa19aec7478b2e6939ce194cbec Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Fri, 22 Apr 2022 11:20:55 +0800 Subject: [PATCH 3/4] fix: sort wallet by create time --- .../popups/pages/Personas/ConnectedWallets/index.tsx | 6 +++--- .../mask/src/extension/popups/pages/Personas/Home/index.tsx | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx index a9bc9f828ca1..eb682a5245e9 100644 --- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx @@ -7,7 +7,7 @@ import { useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3 import { isSameAddress } from '@masknet/web3-shared-evm' import { NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base' import { useAsync, useAsyncFn } from 'react-use' -import { compact } from 'lodash-unified' +import { compact, sortBy } from 'lodash-unified' import type { ConnectedWalletInfo } from '../type' import { NextIDProof } from '@masknet/web3-providers' import Service from '../../../../service' @@ -53,7 +53,8 @@ const ConnectedWallets = memo(() => { }), ) - return compact(results) + return sortBy(compact(results), (x) => Number(x.created_at)) + .reverse() .map((x, index) => { if (!x.name) return { @@ -63,7 +64,6 @@ const ConnectedWallets = memo(() => { return x }) - .reverse() }, [wallets, NameService, proofs]) const [confirmState, onConfirmRelease] = useAsyncFn( 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 3661b978ee99..9caee6303efd 100644 --- a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx @@ -2,6 +2,7 @@ import { memo, useCallback, useMemo } from 'react' import { PersonaHomeUI } from './UI' import { PersonaContext } from '../hooks/usePersonaContext' import { DashboardRoutes, NextIDPlatform } from '@masknet/shared-base' +import { useTitle } from '../../../hook/useTitle' const PersonaHome = memo(() => { const { avatar, currentPersona, proofs, setSelectedPersona, fetchProofsLoading, personas } = @@ -30,6 +31,8 @@ const PersonaHome = memo(() => { }) }, []) + useTitle('') + return ( Date: Fri, 22 Apr 2022 13:54:30 +0800 Subject: [PATCH 4/4] fix: bugfix --- .../extension/popups/pages/Personas/ConnectedWallets/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx index eb682a5245e9..d6921d9de2f1 100644 --- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx @@ -54,7 +54,6 @@ const ConnectedWallets = memo(() => { ) return sortBy(compact(results), (x) => Number(x.created_at)) - .reverse() .map((x, index) => { if (!x.name) return { @@ -64,6 +63,7 @@ const ConnectedWallets = memo(() => { return x }) + .reverse() }, [wallets, NameService, proofs]) const [confirmState, onConfirmRelease] = useAsyncFn(