fix: bugfix for send verification send (#10807)

* fix: bugfix for send verification send * fix: bugfix for cloud backup progress
DimensionDev · Sep 20, 2023 · ca853df · ca853df
1 parent 9888735
commit ca853df
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 52 deletions.
diff --git a/packages/mask/dashboard/components/Restore/RestorePersonaFromLocal.tsx b/packages/mask/dashboard/components/Restore/RestorePersonaFromLocal.tsx
@@ -174,6 +174,7 @@ export const RestorePersonaFromLocal = memo(function RestorePersonaFromLocal({ o
             {restoreStatus === RestoreStatus.Decrypting ? (
                 <Box mt={4}>
                     <PasswordField
+                        fullWidth
                         placeholder={t.sign_in_account_cloud_backup_password()}
                         type="password"
                         onChange={(e) => setPassword(e.target.value)}

diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -77,7 +77,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
     const { classes, theme } = useStyles()
     const navigate = useNavigate()
     const t = useDashboardI18N()
-    const { updateUser } = UserContext.useContainer()
+    const { updateUser, user } = UserContext.useContainer()
     const {
         hasPassword,
         previewInfo,

diff --git a/packages/mask/dashboard/modals/MergeBackupModal/MergeBackupDialog.tsx b/packages/mask/dashboard/modals/MergeBackupModal/MergeBackupDialog.tsx
@@ -12,7 +12,6 @@ import { formatFileSize } from '@masknet/kit'
 import formatDateTime from 'date-fns/format'
 import fromUnixTime from 'date-fns/fromUnixTime'
 import PasswordField from '../../components/PasswordField/index.js'
-import { setPassword } from '../../../background/services/wallet/services/index.js'
 import { passwordRegexp } from '../../utils/regexp.js'
 import { decryptBackup } from '@masknet/backup-format'
 import { decode, encode } from '@msgpack/msgpack'
@@ -89,7 +88,7 @@ export const MergeBackupDialog = memo<MergeBackupDialogProps>(function MergeBack
         onClose()
     }, [onClose])
 
-    const { value: encrypted } = useAsync(async () => {
+    const { value: encrypted, error } = useAsync(async () => {
         if (!downloadLink) return
 
         const response = await fetch(downloadLink, { method: 'GET' })
@@ -104,7 +103,7 @@ export const MergeBackupDialog = memo<MergeBackupDialogProps>(function MergeBack
 
         if (!contentLength || !reader) return
         let received = 0
-
+        const chunks: number[] = []
         // eslint-disable-next-line no-constant-condition
         while (true) {
             const { done, value } = await reader.read()
@@ -113,12 +112,12 @@ export const MergeBackupDialog = memo<MergeBackupDialogProps>(function MergeBack
                 setProcess(100)
                 break
             }
-
+            chunks.push(...value)
             received += value.length
+
             setProcess((received / Number(contentLength)) * 100)
         }
-
-        return response.arrayBuffer()
+        return Uint8Array.from(chunks).buffer
     }, [downloadLink, handleClose])
 
     const fileName = useMemo(() => {
@@ -236,7 +235,7 @@ export const MergeBackupDialog = memo<MergeBackupDialogProps>(function MergeBack
                     value={backupPassword}
                     placeholder={t.settings_label_backup_password()}
                     onChange={(e) => {
-                        setPassword(e.target.value)
+                        setBackupPassword(e.target.value)
                         setBackupPasswordError('')
                     }}
                     onBlur={(e) => {

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/PhoneForm.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/PhoneForm.tsx
@@ -38,7 +38,7 @@ export const PhoneForm = memo(function PhoneForm() {
 
     const handleSendVerificationCode = useCallback(async () => {
         const response = await sendCode({
-            account: phone,
+            account: countryCode + phone,
             type: AccountType.Phone,
             scenario: user.phone ? Scenario.change : Scenario.create,
             locale: lang.includes('zh') ? Locale.zh : Locale.en,
@@ -49,7 +49,7 @@ export const PhoneForm = memo(function PhoneForm() {
         if (response) {
             showSnackbar(t.settings_alert_validation_code_sent(), { variant: 'success' })
         }
-    }, [phone, user, lang])
+    }, [phone, user, lang, countryCode])
 
     return (
         <Box component="form" width="100%" display="flex" flexDirection="column" rowGap={2}>

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx
@@ -66,8 +66,6 @@ const CloudBackupInner = memo(function CloudBackupInner() {
 
     const { currentTab, onChange, tabs, formState } = CloudBackupFormContext.useContainer()
 
-    console.log(formState)
-
     const [{ loading }, handleSubmit] = useAsyncFn(
         async (data: CloudBackupFormInputs) => {
             const response = await fetchDownloadLink({

diff --git a/packages/mask/shared-ui/hooks/useUserContext.ts b/packages/mask/shared-ui/hooks/useUserContext.ts
@@ -11,7 +11,7 @@ function useUserContext() {
             await PersistentStorages.Settings.storage.backupConfig.setValue({
                 ...user,
                 ...obj,
-                backupPassword: btoa(obj.backupPassword ?? ''),
+                backupPassword: obj.backupPassword ? btoa(obj.backupPassword) : user.backupPassword,
             })
         },
         [user],

diff --git a/packages/mask/src/extension/popups/modals/SwitchPersonaModal/index.tsx b/packages/mask/src/extension/popups/modals/SwitchPersonaModal/index.tsx
@@ -65,7 +65,7 @@ export const SwitchPersonaModal = memo<ActionModalBaseProps>(function SwitchPers
                 size="small"
                 variant="outlined"
                 startIcon={<Icons.History size={18} />}
-                onClick={() => handleOpenDashboard(DashboardRoutes.Settings)}>
+                onClick={() => handleOpenDashboard(DashboardRoutes.LocalBackup)}>
                 {t('backup')}
             </ActionButton>
             <ActionButton

diff --git a/packages/mask/src/extension/popups/pages/Settings/index.tsx b/packages/mask/src/extension/popups/pages/Settings/index.tsx
@@ -23,6 +23,20 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         rowGap: theme.spacing(2),
+        '::-webkit-scrollbar': {
+            backgroundColor: 'transparent',
+            width: 20,
+        },
+        '::-webkit-scrollbar-thumb': {
+            borderRadius: '20px',
+            width: 5,
+            borderBottom: '64px solid rgba(0, 0, 0, 0)',
+            borderTop: '64px solid rgba(0,0,0,0)',
+            borderLeft: '7px solid rgba(0,0,0,0)',
+            borderRight: '7px solid rgba(0,0,0,0)',
+            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundClip: 'padding-box',
+        },
     },
     header: {
         display: 'flex',
@@ -87,6 +101,9 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '16px',
         fontWeight: 700,
     },
+    arrow: {
+        color: theme.palette.maskColor.second,
+    },
 }))
 
 const FEEDBACK_MAIL = 'Support@mask.io'
@@ -192,7 +209,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_language')}
                                 secondary={LANGUAGE_OPTIONS_MAP[lang]}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -202,7 +219,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_appearance')}
                                 secondary={APPEARANCE_OPTIONS_MAP[mode]}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -220,7 +237,7 @@ const Settings = memo(function Settings() {
                                     />
                                 }
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                     </List>
                 </Box>
@@ -252,7 +269,7 @@ const Settings = memo(function Settings() {
                                     }
                                 }}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -268,15 +285,15 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_local_backup')}
                                 secondary={localBackupTip}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem className={classes.listItem}>
                             <ListItemText
                                 classes={itemClasses}
                                 primary={t('popups_settings_restore_database')}
                                 secondary={t('popups_settings_restore_database_description')}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -296,7 +313,7 @@ const Settings = memo(function Settings() {
                                         : t('popups_settings_not_set')
                                 }
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                     </List>
                 </Box>
@@ -319,7 +336,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_feedback')}
                                 secondary={FEEDBACK_MAIL}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -329,7 +346,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_faq')}
                                 secondary={FAQ_LINK}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -339,7 +356,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_website')}
                                 secondary={HOME_LINK}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                     </List>
                 </Box>
@@ -359,7 +376,7 @@ const Settings = memo(function Settings() {
                                 primary={t('popups_settings_version')}
                                 secondary={env.VERSION}
                             />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -371,7 +388,7 @@ const Settings = memo(function Settings() {
                                 )
                             }>
                             <ListItemText classes={itemClasses} secondary={t('popups_settings_service_agreement')} />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                         <ListItem
                             className={classes.listItem}
@@ -381,7 +398,7 @@ const Settings = memo(function Settings() {
                                 })
                             }>
                             <ListItemText classes={itemClasses} secondary={t('popups_settings_primary_policy')} />
-                            <Icons.ArrowRight size={24} />
+                            <Icons.ArrowRight size={24} className={classes.arrow} />
                         </ListItem>
                     </List>
                 </Box>

diff --git a/packages/shared/src/UI/components/CountryCodePicker/index.tsx b/packages/shared/src/UI/components/CountryCodePicker/index.tsx
@@ -1,5 +1,5 @@
 import { List, ListItemButton, ListItemIcon, ListItemText, Popover, TextField, Typography } from '@mui/material'
-import { memo, useDeferredValue, useMemo, useState } from 'react'
+import { memo, useDeferredValue, useEffect, useMemo, useState } from 'react'
 
 import { Icons } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
@@ -64,24 +64,29 @@ export interface CountryCodePickerProps {
 export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl, onClose, code }) => {
     const t = useSharedI18N()
     const { classes } = useStyles()
-    const [query, setQuery] = useState('')
+    const [query, setQuery] = useState<string>()
     const deferredQuery = useDeferredValue(query)
 
     const regions = useMemo(() => {
         if (!deferredQuery) return COUNTRIES
         const fuse = new Fuse(COUNTRIES, {
-            shouldSort: false,
             isCaseSensitive: false,
-            threshold: 0.45,
-            minMatchCharLength: 1,
+            includeMatches: true,
+            threshold: 0.8,
+            minMatchCharLength: 2,
             findAllMatches: true,
-            keys: ['country_region', 'iso_code', 'dialing_code'],
+            keys: ['country_region', 'dialing_code'],
         })
 
         const filtered = fuse.search(deferredQuery)
+
         return filtered.map((x) => x.item)
     }, [deferredQuery])
 
+    useEffect(() => {
+        setQuery(undefined)
+    }, [open])
+
     return (
         <Popover
             disableScrollLock
@@ -99,6 +104,7 @@ export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl,
             <TextField
                 fullWidth
                 value={query}
+                autoFocus
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t.search_area()}
                 InputProps={{ disableUnderline: true, startAdornment: <Icons.Search size={16} />, size: 'small' }}
@@ -114,10 +120,10 @@ export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl,
                             onClick={() => {
                                 onClose(data.dialing_code)
                             }}
-                            key={data.iso_code}
+                            key={`${data.iso_code}+${data.dialing_code}`}
                             className={classes.listItem}
-                            autoFocus={selected}
-                            selected={selected}>
+                            selected={query === undefined ? selected : undefined}
+                            autoFocus={query === undefined ? selected : undefined}>
                             <ListItemIcon className={classes.listItemIcon}>
                                 <img src={icon} className={classes.icon} />
                             </ListItemIcon>

diff --git a/packages/shared/src/UI/components/PhoneNumberField/index.tsx b/packages/shared/src/UI/components/PhoneNumberField/index.tsx
@@ -1,5 +1,5 @@
-import { useMemo, useState } from 'react'
-import { Button, TextField, type FilledTextFieldProps, Typography, ClickAwayListener } from '@mui/material'
+import { forwardRef, useMemo, useState } from 'react'
+import { Button, TextField, type FilledTextFieldProps, Typography } from '@mui/material'
 import { COUNTRIES } from '@masknet/shared-base-ui'
 import { getCountryFlag, useSharedI18N } from '../../../index.js'
 import { Icons } from '@masknet/icons'
@@ -10,7 +10,10 @@ export interface PhoneNumberFieldProps extends Omit<FilledTextFieldProps, 'varia
     onCodeChange: (code: string) => void
 }
 
-export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFieldProps) {
+export const PhoneNumberField = forwardRef<HTMLDivElement, PhoneNumberFieldProps>(function PhoneNumberField(
+    { code, onCodeChange, ...rest },
+    ref,
+) {
     const t = useSharedI18N()
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
@@ -24,6 +27,7 @@ export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFie
     return (
         <>
             <TextField
+                ref={ref}
                 placeholder={t.mobile_number()}
                 type="tel"
                 {...rest}
@@ -33,23 +37,24 @@ export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFie
                     startAdornment: (
                         <Button variant="text" onClick={(event) => setAnchorEl(event.currentTarget)}>
                             <img src={countryIcon} style={{ width: 16, height: 12 }} />
-                            <Typography component="span">+{code}</Typography>
+                            <Typography component="span" sx={{ minWidth: 32, mx: 0.5, textAlign: 'right' }}>
+                                +{code}
+                            </Typography>
                             <Icons.ArrowDrop size={16} />
                         </Button>
                     ),
                 }}
             />
-            <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
-                <CountryCodePicker
-                    open={!!anchorEl}
-                    anchorEl={anchorEl}
-                    code={code}
-                    onClose={(code) => {
-                        if (code) onCodeChange(code)
-                        setAnchorEl(null)
-                    }}
-                />
-            </ClickAwayListener>
+
+            <CountryCodePicker
+                open={!!anchorEl}
+                anchorEl={anchorEl}
+                code={code}
+                onClose={(code) => {
+                    if (code) onCodeChange(code)
+                    setAnchorEl(null)
+                }}
+            />
         </>
     )
-}
+})