fix: bugfix for wallet setting dialog (#10607)

DimensionDev · Aug 24, 2023 · 6f2280d · 6f2280d
1 parent 3d136be
commit 6f2280d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/packages/dashboard/src/pages/SignUp/steps/PersonaRecovery.tsx b/packages/dashboard/src/pages/SignUp/steps/PersonaRecovery.tsx
@@ -74,7 +74,12 @@ export function PersonaRecovery() {
                 showSnackbar(t.create_account_persona_successfully(), { variant: 'success' })
 
                 await delay(300)
-                navigate(urlcat(DashboardRoutes.SignUpPersonaOnboarding, { count: accounts.length }), { replace: true })
+                navigate(
+                    urlcat(DashboardRoutes.SignUpPersonaOnboarding, {
+                        count: accounts.filter((x) => x.deployed).length,
+                    }),
+                    { replace: true },
+                )
             } catch (error) {
                 setError((error as Error).message)
             }

diff --git a/packages/mask/src/extension/popups/components/BottomDrawer/index.tsx b/packages/mask/src/extension/popups/components/BottomDrawer/index.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { TextOverflowTooltip, makeStyles } from '@masknet/theme'
 import { Box, Drawer, Typography } from '@mui/material'
-import { memo, type PropsWithChildren } from 'react'
+import { memo, type ReactNode } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -26,14 +26,15 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export interface BottomDrawerProps extends PropsWithChildren {
+export interface BottomDrawerProps extends withClasses<'title' | 'root' | 'header'> {
     open: boolean
+    children?: ReactNode
     title: string
     onClose?: () => void
 }
 
-export const BottomDrawer = memo<BottomDrawerProps>(function BottomDrawer({ open, onClose, children, title }) {
-    const { classes } = useStyles()
+export const BottomDrawer = memo<BottomDrawerProps>(function BottomDrawer({ open, onClose, children, title, ...rest }) {
+    const { classes } = useStyles(undefined, { props: rest })
     const handleClose = () => onClose?.()
     return (
         <Drawer anchor="bottom" onClose={handleClose} open={open} classes={{ paper: classes.root }}>

diff --git a/packages/mask/src/extension/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/src/extension/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -4,11 +4,16 @@ import { useI18N } from '../../../../utils/i18n-next-ui.js'
 import { Box, Typography, useTheme } from '@mui/material'
 import { useAsyncFn } from 'react-use'
 import { type SingletonModalRefCreator } from '@masknet/shared-base'
-import { ActionButton, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import { PasswordField } from '../../components/PasswordField/index.js'
 import { WalletServiceRef } from '@masknet/plugin-infra/dom'
 
+const useStyles = makeStyles()((theme) => ({
+    title: {
+        paddingLeft: theme.spacing(3),
+    },
+}))
 interface ChangePaymentPasswordDrawer extends BottomDrawerProps {
     oldPassword: string
     newPassword: string
@@ -41,6 +46,7 @@ function ChangePaymentPasswordDrawer({
 }: ChangePaymentPasswordDrawer) {
     const { t } = useI18N()
     const theme = useTheme()
+    const { classes } = useStyles()
 
     const { showSnackbar } = usePopupCustomSnackbar()
 
@@ -62,7 +68,7 @@ function ChangePaymentPasswordDrawer({
         }
     }, [oldPassword, newPassword, confirmNewPassword, t])
     return (
-        <BottomDrawer {...rest}>
+        <BottomDrawer {...rest} classes={{ title: classes.title }}>
             <Typography
                 fontWeight={700}
                 textAlign="center"

diff --git a/packages/mask/src/extension/popups/modals/ChooseToken/index.tsx b/packages/mask/src/extension/popups/modals/ChooseToken/index.tsx
@@ -5,7 +5,7 @@ import { forwardRef, memo, useState } from 'react'
 import { useI18N } from '../../../../utils/index.js'
 import { BottomDrawer, TokenPicker, type BottomDrawerProps, type TokenPickerProps } from '../../components/index.js'
 
-interface ChooseTokenModalProps extends BottomDrawerProps, Omit<TokenPickerProps, 'title'> {}
+interface ChooseTokenModalProps extends BottomDrawerProps, Omit<TokenPickerProps, 'title' | 'classes'> {}
 const ChooseTokenDrawer = memo(function ChooseTokenDrawer({ title, open, onClose, ...others }: ChooseTokenModalProps) {
     return (
         <BottomDrawer title={title} open={open} onClose={onClose}>

diff --git a/packages/mask/src/extension/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/src/extension/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -11,6 +11,7 @@ import Services from '../../../service.js'
 import { BottomDrawer, type BottomDrawerProps } from '../../components/index.js'
 import { useI18N } from '../../../../utils/i18n-next-ui.js'
 import { useWalletAutoLockTime } from '../../pages/Wallet/hooks/useWalletAutoLockTime.js'
+import { isPositive } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     list: {
@@ -115,14 +116,22 @@ function WalletAutoLockSettingDrawer(props: BottomDrawerProps) {
                     fullWidth
                     placeholder={'15'}
                     value={time ?? initialTime}
-                    onChange={(e) => setTime(e.target.value)}
+                    onChange={(e) => {
+                        if (!e.target.value) setTime('')
+                        if (!isPositive(e.target.value)) return
+                        setTime(e.target.value)
+                    }}
                     InputProps={{
                         endAdornment: (
                             <Typography color={theme.palette.maskColor.third}>
                                 {t('popups_wallet_settings_minutes')}
                             </Typography>
                         ),
                         disableUnderline: true,
+                        inputProps: {
+                            min: 0,
+                            type: 'number',
+                        },
                     }}
                 />
             </Box>