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/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx index af8eeb4ceb2c..d6921d9de2f1 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' @@ -46,14 +46,24 @@ const ConnectedWallets = memo(() => { return { ...x, - name: `${x.platform} wallet ${index + 1}`, + name: '', } } return null }), ) - return compact(results) + return sortBy(compact(results), (x) => Number(x.created_at)) + .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 5dcacabe3b81..f2ab79bd9940 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,8 @@ 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 } from '@masknet/icons' import { formatPersonaFingerprint, PopupRoutes, formatPersonaName } from '@masknet/shared-base' import { CopyIconButton } from '../../../components/CopyIconButton' import { useI18N } from '../../../../../utils' @@ -56,6 +56,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 +90,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..9caee6303efd 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,12 @@ 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' +import { useTitle } from '../../../hook/useTitle' 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 +17,25 @@ 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}`), + }) + }, []) + + useTitle('') + return ( { walletsCount={wallets.length} onEdit={onEdit} fetchProofsLoading={fetchProofsLoading} + onCreatePersona={onCreatePersona} + onRestore={onRestore} /> ) })