fix: bugfix for persona context (#10803)

packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
 import { useDrop } from 'react-use'
-import { MaskTextField, makeStyles } from '@masknet/theme'
-import { Grid, Typography } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { Grid, TextField, Typography } from '@mui/material'
 
 const useStyles = makeStyles()((theme) => ({
     input: {
@@ -50,14 +50,15 @@ export const DesktopMnemonicConfirm = memo(function DesktopMnemonicConfirm(props
                 const no = i + 1
                 return (
                     <Grid item xs={3} key={i}>
-                        <MaskTextField
+                        <TextField
                             sx={{ width: '100%', userSelect: 'none' }}
                             value={word}
                             autoFocus={i === 0}
                             InputProps={{
                                 disableUnderline: true,
                                 className: classes.input,
                                 startAdornment: <Typography className={classes.no}>{no}.</Typography>,
+                                size: 'small',
                                 inputProps: {
                                     style: {
                                         textAlign: 'center',

packages/mask/dashboard/components/Restore/RestoreFromCloud/EmailField.tsx

@@ -1,5 +1,5 @@
-import { MaskTextField, SendingCodeField, useCustomSnackbar } from '@masknet/theme'
-import { Box } from '@mui/material'
+import { SendingCodeField, useCustomSnackbar } from '@masknet/theme'
+import { Box, TextField } from '@mui/material'
 import { memo, useCallback, useLayoutEffect, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { usePersonaRecovery } from '../../../contexts/RecoveryContext.js'
@@ -79,7 +79,7 @@ export const EmailField = memo(function EmailField() {
 
     return (
         <>
-            <MaskTextField
+            <TextField
                 fullWidth
                 value={account}
                 autoFocus
@@ -99,6 +99,7 @@ export const EmailField = memo(function EmailField() {
             />
             <Box mt={1.5}>
                 <SendingCodeField
+                    fullWidth
                     value={code}
                     onChange={setCode}
                     errorMessage={sendCodeError?.message || codeError}

packages/mask/dashboard/components/Restore/RestoreFromCloud/PhoneField.tsx

@@ -92,6 +92,7 @@ export const PhoneField = memo(function PhoneField() {
             />
             <Box mt={1.5}>
                 <SendingCodeField
+                    fullWidth
                     value={code}
                     onChange={(code) => {
                         setCodeError('')

packages/mask/dashboard/components/Restore/RestoreFromCloud/index.tsx

@@ -14,10 +14,10 @@ import { RestoreContext } from './RestoreProvider.js'
 import { RestoreStep } from './restoreReducer.js'
 import { InputForm } from './InputForm.js'
 import { ConfirmBackupInfo } from './ConfirmBackupInfo.js'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 import { UserContext } from '../../../../shared-ui/index.js'
 import { AccountType } from '../../../type.js'
 import { BackupPreview } from '../../BackupPreview/index.js'
+import { PersonaContext } from '@masknet/shared'
 
 interface RestoreProps {
     onRestore: () => Promise<void>
@@ -46,12 +46,14 @@ const RestoreFromCloudInner = memo(function RestoreFromCloudInner() {
     const navigate = useNavigate()
     const { showSnackbar } = useCustomSnackbar()
     const { user, updateUser } = UserContext.useContainer()
-    const { currentPersona, changeCurrentPersona } = PersonaContext.useContainer()
+    const { currentPersona } = PersonaContext.useContainer()
     const { state, dispatch } = RestoreContext.useContainer()
     const { account, accountType, backupSummary, password, backupDecrypted } = state
 
     const [openSynchronizePasswordDialog, toggleSynchronizePasswordDialog] = useState(false)
 
+    const changeCurrentPersona = useCallback(Services.Settings.setCurrentPersonaIdentifier, [])
+
     const restoreCallback = useCallback(async () => {
         if (!currentPersona) {
             const lastedPersona = await Services.Identity.queryLastPersonaCreated()
@@ -67,7 +69,7 @@ const RestoreFromCloudInner = memo(function RestoreFromCloudInner() {
             }
         }
         toggleSynchronizePasswordDialog(true)
-    }, [currentPersona, account, accountType, user, toggleSynchronizePasswordDialog, updateUser])
+    }, [currentPersona, account, accountType, user, toggleSynchronizePasswordDialog, updateUser, changeCurrentPersona])
 
     const handleRestore = useCallback(async () => {
         dispatch({ type: 'SET_LOADING', loading: true })

packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx

@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Controller, useForm } from 'react-hook-form'
 import type { UseFormSetError, SubmitHandler } from 'react-hook-form'
-import { MaskTextField, makeStyles } from '@masknet/theme'
-import { Box } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { Box, TextField } from '@mui/material'
 import { memo, useCallback, useLayoutEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { z } from 'zod'
@@ -73,11 +73,12 @@ export const RestoreFromPrivateKey = memo(function RestoreFromPrivateKey({
             <Controller
                 control={control}
                 render={({ field }) => (
-                    <MaskTextField
+                    <TextField
                         {...field}
                         autoFocus
                         InputProps={{
                             className: classes.input,
+                            disableUnderline: true,
                         }}
                         multiline={multiline}
                         rows={multiline ? 6 : undefined}

packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx

@@ -13,7 +13,6 @@ import { SetupFrameController } from '../../../components/SetupFrame/index.js'
 import { useCreatePersonaV2 } from '../../../hooks/useCreatePersonaV2.js'
 import { useMnemonicWordsPuzzle } from '../../../hooks/useMnemonicWordsPuzzle.js'
 import { useDashboardI18N } from '../../../locales/index.js'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 import { ComponentToPrint } from './ComponentToPrint.js'
 import { Words } from './Words.js'
 import urlcat from 'urlcat'
@@ -92,7 +91,7 @@ export const SignUpMnemonic = memo(function SignUpMnemonic() {
     const navigate = useNavigate()
     const t = useDashboardI18N()
     const createPersona = useCreatePersonaV2()
-    const { changeCurrentPersona } = PersonaContext.useContainer()
+
     const { classes } = useStyles()
     const { state } = useLocation() as {
         state: {
@@ -117,6 +116,8 @@ export const SignUpMnemonic = memo(function SignUpMnemonic() {
         link.click()
     }, [])
 
+    const changeCurrentPersona = useCallback(Services.Settings.setCurrentPersonaIdentifier, [])
+
     const [{ loading }, handleCreate] = useAsyncFn(async () => {
         try {
             const identifier = await createPersona(words.join(' '), state.personaName)
@@ -125,7 +126,7 @@ export const SignUpMnemonic = memo(function SignUpMnemonic() {
         } catch (error) {
             showSnackbar((error as Error).message, { variant: 'error' })
         }
-    }, [words])
+    }, [words, changeCurrentPersona])
 
     const handleRecovery = useCallback(() => {
         navigate(DashboardRoutes.RecoveryPersona)

packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx

@@ -14,11 +14,11 @@ import { RestoreFromCloud } from '../../../components/Restore/RestoreFromCloud/i
 import { RecoveryProvider, RecoveryContext } from '../../../contexts/index.js'
 import { RestoreFromMnemonic } from '../../../components/Restore/RestoreFromMnemonic.js'
 import Services from '#services'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 import { delay } from '@masknet/kit'
 
 import urlcat from 'urlcat'
 import { SignUpRoutePath } from '../../SignUp/routePath.js'
+import { PersonaContext } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     header: {
@@ -78,13 +78,15 @@ const useStyles = makeStyles()((theme) => ({
 export const Recovery = memo(function Recovery() {
     const t = useDashboardI18N()
     const { classes } = useStyles()
-    const { currentPersona, changeCurrentPersona } = PersonaContext.useContainer()
+    const { currentPersona } = PersonaContext.useContainer()
     const tabPanelClasses = useMemo(() => ({ root: classes.panels }), [classes.panels])
     const navigate = useNavigate()
     const [error, setError] = useState('')
 
     const [currentTab, onChange, tabs] = useTabs('mnemonic', 'privateKey', 'local', 'cloud')
 
+    const changeCurrentPersona = useCallback(Services.Settings.setCurrentPersonaIdentifier, [])
+
     const handleRestoreFromMnemonic = useCallback(
         async (values: string[]) => {
             try {
@@ -104,7 +106,7 @@ export const Recovery = memo(function Recovery() {
                 setError(t.incorrect_identity_mnemonic())
             }
         },
-        [t, navigate],
+        [t, navigate, changeCurrentPersona],
     )
 
     const handleRestoreFromPrivateKey = useCallback(

packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx

@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom'
 import Services from '#services'
 import { useDashboardI18N } from '../../../locales/i18n_generated.js'
 import { delay } from '@masknet/kit'
-import { MaskTextField, makeStyles } from '@masknet/theme'
-import { Typography, Button } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { Typography, Button, TextField } from '@mui/material'
 import { Box } from '@mui/system'
 import { PrimaryButton } from '../../../components/PrimaryButton/index.js'
 import { SecondaryButton } from '../../../components/SecondaryButton/index.js'
@@ -97,15 +97,15 @@ export const SignUp = memo(function SignUp() {
             <Typography className={classes.second} mt={3} mb={2}>
                 {t.persona_name()}
             </Typography>
-            <MaskTextField
+            <TextField
                 onChange={(e) => {
                     if (error) setError('')
                     setPersonaName(e.target.value)
                 }}
                 autoFocus
                 placeholder={t.persona_setup_persona_example()}
                 required
-                InputProps={{ disableUnderline: true }}
+                InputProps={{ disableUnderline: true, size: 'large' }}
                 inputProps={{ maxLength: 24 }}
                 error={!!error}
                 helperText={error}

packages/mask/dashboard/pages/SignUp/steps/ConnectSocialMedia.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import { upperFirst } from 'lodash-es'
 import { DashboardRoutes } from '@masknet/shared-base'
 import { Button, Stack } from '@mui/material'
-import { SOCIAL_MEDIA_ICON_MAPPING } from '@masknet/shared'
+import { PersonaContext, SOCIAL_MEDIA_ICON_MAPPING } from '@masknet/shared'
 import {
     Body,
     ColumnContentLayout,
@@ -12,13 +12,18 @@ import {
 } from '../../../components/RegisterFrame/ColumnContentLayout.js'
 import { Header } from '../../../components/RegisterFrame/ColumnContentHeader.js'
 import { useDashboardI18N } from '../../../locales/index.js'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 import { ActionCard } from '../../../components/ActionCard/index.js'
+import { useConnectSite } from '../../../hooks/useConnectSite.js'
+import { type SiteAdaptor, useSupportedSocialNetworkSites } from '../../../../shared-ui/index.js'
 
 export function ConnectSocialMedia() {
     const navigate = useNavigate()
     const t = useDashboardI18N()
-    const { currentPersona, connectPersona, definedSocialNetworkAdaptors } = PersonaContext.useContainer()
+    const { currentPersona } = PersonaContext.useContainer()
+
+    const definedSocialNetworkAdaptors: SiteAdaptor[] = useSupportedSocialNetworkSites()
+
+    const [, connectPersona] = useConnectSite()
 
     const handleConnect = async (networkIdentifier: string) => {
         if (currentPersona) {

packages/mask/dashboard/pages/SignUp/steps/MnemonicRevealForm.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Button, Stack, Box, IconButton, FormControlLabel, Checkbox } from '@mui/material'
 import { Refresh as RefreshIcon, Print as PrintIcon } from '@mui/icons-material'
@@ -17,15 +17,14 @@ import { SignUpRoutePath } from '../routePath.js'
 import { ButtonContainer } from '../../../components/RegisterFrame/ButtonContainer.js'
 import { useMnemonicWordsPuzzle } from '../../../hooks/useMnemonicWordsPuzzle.js'
 import { useCreatePersonaV2 } from '../../../hooks/useCreatePersonaV2.js'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 import Services from '#services'
 import { PreviewDialog } from './PreviewDialog.js'
 import { Icons } from '@masknet/icons'
 import { useAsync } from 'react-use'
 
 export const MnemonicRevealForm = memo(() => {
     const createPersona = useCreatePersonaV2()
-    const { changeCurrentPersona } = PersonaContext.useContainer()
+
     const t = useDashboardI18N()
     const navigate = useNavigate()
     const { state } = useLocation() as {
@@ -46,6 +45,8 @@ export const MnemonicRevealForm = memo(() => {
     const [privateKey, setPrivateKey] = useState('')
     const [checked, setChecked] = useState(false)
 
+    const changeCurrentPersona = useCallback(Services.Settings.setCurrentPersonaIdentifier, [])
+
     const create = async () => {
         try {
             const identifier = await createPersona(words.join(' '), state.personaName)

packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx

@@ -1,5 +1,5 @@
-import { MaskTextField, makeStyles } from '@masknet/theme'
-import { Box, Typography } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { Box, TextField, Typography } from '@mui/material'
 import { useState } from 'react'
 import { PrimaryButton } from '../../../components/PrimaryButton/index.js'
 import { SetupFrameController } from '../../../components/SetupFrame/index.js'
@@ -52,7 +52,7 @@ export function PersonaNameUI({ onNext, error, loading }: PersonaNameUIProps) {
             <Typography className={classes.second} mt={3} mb={2}>
                 {t.persona_name()}
             </Typography>
-            <MaskTextField
+            <TextField
                 onChange={(e) => {
                     setPersonaName(e.target.value)
                 }}

packages/mask/dashboard/pages/SignUp/steps/PersonaRecovery.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useCustomSnackbar } from '@masknet/theme'
 import { DashboardRoutes, EMPTY_LIST, type ECKeyIdentifier, type EC_Public_JsonWebKey } from '@masknet/shared-base'
@@ -10,7 +10,6 @@ import { delay } from '@masknet/kit'
 import { useAsync, useAsyncFn } from 'react-use'
 import { SmartPayBundler, SmartPayOwner } from '@masknet/web3-providers'
 import urlcat from 'urlcat'
-import { PersonaContext } from '../../../hooks/usePersonaContext.js'
 
 export function PersonaRecovery() {
     const t = useDashboardI18N()
@@ -19,7 +18,7 @@ export function PersonaRecovery() {
     const createPersona = useCreatePersonaV2()
     const createPersonaByPrivateKey = useCreatePersonaByPrivateKey()
     const { showSnackbar } = useCustomSnackbar()
-    const { changeCurrentPersona } = PersonaContext.useContainer()
+
     const state = useLocation().state as {
         mnemonic?: string[]
         privateKey?: string
@@ -33,6 +32,8 @@ export function PersonaRecovery() {
         navigate(DashboardRoutes.SignUp, { replace: true })
     }, [state.mnemonic, state.privateKey])
 
+    const changeCurrentPersona = useCallback(Services.Settings.setCurrentPersonaIdentifier, [])
+
     const [{ loading }, onNext] = useAsyncFn(
         async (personaName: string) => {
             setError('')
@@ -84,7 +85,7 @@ export function PersonaRecovery() {
                 setError((error as Error).message)
             }
         },
-        [state?.mnemonic, state?.privateKey],
+        [state?.mnemonic, state?.privateKey, changeCurrentPersona],
     )
 
     return <PersonaNameUI onNext={onNext} error={error} loading={loading} />