fix: bugfix for backup (#10870)

* fix: bugfix for backup and release

* refactor: remove logs

---------

Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>

packages/mask/dashboard/hooks/useBackupFormState.ts

@@ -35,12 +35,14 @@ export function useBackupFormState() {
         },
         resolver: zodResolver(
             z.object({
-                backupPassword: z
-                    .string()
-                    .min(8, t.incorrect_password())
-                    .max(20, t.incorrect_password())
-                    .refine((password) => password === user.backupPassword, t.incorrect_password())
-                    .refine((password) => passwordRegexp.test(password), t.incorrect_password()),
+                backupPassword: backupPersonas
+                    ? z
+                          .string()
+                          .min(8, t.incorrect_password())
+                          .max(20, t.incorrect_password())
+                          .refine((password) => password === user.backupPassword, t.incorrect_password())
+                          .refine((password) => passwordRegexp.test(password), t.incorrect_password())
+                    : z.string().optional(),
                 paymentPassword:
                     backupWallets && hasPassword
                         ? z

packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx

@@ -14,7 +14,7 @@ import { encode } from '@msgpack/msgpack'
 import { Controller } from 'react-hook-form'
 import { PersonasBackupPreview, WalletsBackupPreview } from '../../components/BackupPreview/index.js'
 import PasswordField from '../../components/PasswordField/index.js'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DashboardRoutes } from '@masknet/shared-base'
 import formatDateTime from 'date-fns/format'
 import { UserContext } from '../../../shared-ui/index.js'
@@ -75,6 +75,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
 }) {
     const controllerRef = useRef<AbortController | null>(null)
     const { classes, theme } = useStyles()
+    const [params, setParams] = useSearchParams()
     const navigate = useNavigate()
     const t = useDashboardI18N()
     const { updateUser } = UserContext.useContainer()
@@ -129,6 +130,13 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                     const now = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
                     showSnackbar(t.settings_alert_backup_success(), { variant: 'success' })
                     updateUser({ cloudBackupAt: now, cloudBackupMethod: type })
+                    if (!params.get('downloadURL')) navigate(DashboardRoutes.CloudBackup, { replace: true })
+                    setParams((params) => {
+                        params.set('size', encrypted.byteLength.toString())
+                        params.set('abstract', name)
+                        params.set('uploadedAt', Date.now().toString())
+                        return params.toString()
+                    })
                 }
                 return true
             } catch (error) {

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

@@ -133,7 +133,7 @@ const CloudBackupInner = memo(function CloudBackupInner() {
             )
 
         return t.cloud_backup_no_exist_tips()
-    }, [user, DashboardTrans])
+    }, [user, DashboardTrans, t])
     return (
         <>
             <Box>

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

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useDashboardI18N } from '../../../locales/i18n_generated.js'
 import { ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
@@ -55,12 +55,10 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
     const t = useDashboardI18N()
 
     const { classes, theme, cx } = useStyles()
-
+    const [code, setCode] = useState('')
     const [params] = useSearchParams()
     const location = useLocation()
 
-    const code = location.state?.code as string
-
     const navigate = useNavigate()
 
     const previewInfo = useMemo(() => {
@@ -72,7 +70,7 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
             size: params.get('size'),
             type: params.get('type'),
         }
-    }, [])
+    }, [params])
 
     const [{ loading: mergeLoading }, handleMergeClick] = useAsyncFn(async () => {
         if (
@@ -129,9 +127,10 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
         })
     }, [t, previewInfo])
 
+    // cache the code to state
     useEffect(() => {
-        if (!code) navigate(DashboardRoutes.CloudBackup, { replace: true })
-    }, [code, navigate])
+        if (location.state?.code) setCode(location.state.code)
+    }, [location.state?.code])
 
     return (
         <>

packages/mask/src/extension/popups/hooks/useFriends.ts

@@ -19,27 +19,36 @@ export type Friend = {
 
 export function useFriendsPaged() {
     const currentPersona = useCurrentPersona()
+
     const {
         data: records = EMPTY_LIST,
         isLoading: recordsLoading,
         refetch: refetchRecords,
-    } = useQuery(['relation-records', currentPersona?.identifier.rawPublicKey], async () => {
-        return Services.Identity.queryRelationPaged(
-            currentPersona?.identifier,
-            {
-                network: 'all',
-                pageOffset: 0,
-            },
-            3000,
-        )
-    })
+        status: fetchRelationStatus,
+    } = useQuery(
+        ['relation-records', currentPersona?.identifier.rawPublicKey],
+        async () => {
+            return Services.Identity.queryRelationPaged(
+                currentPersona?.identifier,
+                {
+                    network: 'all',
+                    pageOffset: 0,
+                },
+                3000,
+            )
+        },
+        {
+            enabled: !!currentPersona,
+        },
+    )
     const {
         data,
         hasNextPage,
         fetchNextPage,
         isLoading,
         isFetchingNextPage,
         refetch: refetchFriends,
+        status,
     } = useInfiniteQuery({
         queryKey: ['friends', currentPersona?.identifier.rawPublicKey],
         enabled: !recordsLoading,
@@ -74,12 +83,15 @@ export function useFriendsPaged() {
         refetchFriends()
         refetchRecords()
     }, [refetchFriends, refetchRecords])
+
     return {
         data,
         isLoading: isLoading || recordsLoading,
         hasNextPage,
         fetchNextPage,
         isFetchingNextPage,
         refetch,
+        status,
+        fetchRelationStatus,
     }
 }

packages/mask/src/extension/popups/pages/Friends/Home/UI.tsx

@@ -63,7 +63,7 @@ export const FriendsHomeUI = memo<FriendsHomeUIProps>(function FriendsHomeUI({
             <Box padding="16px">
                 <Search setSearchValue={setSearchValue} />
             </Box>
-            {loading && !(searchValue ? searchResult.length : friends.length) ? (
+            {loading ? (
                 <div className={cx(classes.empty, classes.mainText)}>
                     <LoadingBase />
                     <Typography>{t('loading')}</Typography>

packages/mask/src/extension/popups/pages/Friends/Home/index.tsx

@@ -11,13 +11,14 @@ const FriendsHome = memo(function FriendsHome() {
     const { t } = useI18N()
     useTitle(t('popups_encrypted_friends'))
 
-    const { data, fetchNextPage, isLoading, refetch } = useFriendsPaged()
+    const { data, fetchNextPage, isLoading, refetch, status, fetchRelationStatus } = useFriendsPaged()
     const friends = useMemo(() => data?.pages.flatMap((x) => x.friends) ?? EMPTY_LIST, [data])
     const [searchValue, setSearchValue] = useState('')
     const type = resolveNextIDPlatform(searchValue)
     const { loading: resolveLoading, value: keyword = '' } = useSearchValue(searchValue, type)
     const {
         isLoading: searchLoading,
+        isInitialLoading,
         data: searchResultArray,
         fetchNextPage: fetchNextSearchPage,
     } = useInfiniteQuery(
@@ -40,7 +41,13 @@ const FriendsHome = memo(function FriendsHome() {
     return (
         <FriendsHomeUI
             friends={data?.pages ?? EMPTY_LIST}
-            loading={isLoading || resolveLoading || searchLoading}
+            loading={
+                isLoading ||
+                resolveLoading ||
+                (!!keyword && !!type ? searchLoading : isInitialLoading) ||
+                status === 'loading' ||
+                fetchRelationStatus === 'loading'
+            }
             setSearchValue={setSearchValue}
             searchValue={searchValue}
             searchResult={searchedList}

packages/mask/src/extension/popups/pages/Settings/index.tsx

@@ -64,13 +64,16 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         padding: theme.spacing(1.5, 0),
         borderBottom: `1px solid ${theme.palette.maskColor.line}`,
-        '&:first-child': {
+        '&:first-of-type': {
             paddingTop: 0,
         },
-        '&:last-child': {
+        '&:last-of-type': {
             paddingBottom: 0,
             borderBottom: 'none',
         },
+        '&:hover > span': {
+            color: theme.palette.maskColor.main,
+        },
     },
     listItemText: {
         margin: 0,
@@ -360,7 +363,11 @@ const Settings = memo(function Settings() {
                         </Box>
                     </Box>
                     <List className={classes.list}>
-                        <ListItem className={classes.listItem}>
+                        <ListItem
+                            className={classes.listItem}
+                            onClick={() =>
+                                openWindow('https://github.com/DimensionDev/Maskbook', '_blank', { referrer: false })
+                            }>
                             <ListItemText
                                 classes={itemClasses}
                                 primary={t('popups_settings_version')}

packages/mask/src/extension/popups/pages/Wallet/SetPaymentPassword/index.tsx

@@ -212,7 +212,8 @@ const SetPaymentPassword = memo(function SetPaymentPassword() {
                     const from = params.get('from')
                     showSnackbar(t('popups_wallet_set_payment_password_successfully'), { variant: 'success' })
                     CrossIsolationMessages.events.passwordStatusUpdated.sendToAll(true)
-                    navigate({ pathname: from || PopupRoutes.Wallet }, { replace: true })
+                    params.delete('from')
+                    navigate({ pathname: from || PopupRoutes.Wallet, search: params.toString() }, { replace: true })
                 }
             } catch (error) {
                 if (error instanceof Error) {

packages/mask/src/extension/popups/pages/Wallet/WalletGuard/index.tsx

@@ -1,7 +1,7 @@
 import { PopupRoutes } from '@masknet/shared-base'
 import { useWallet, useWallets } from '@masknet/web3-hooks-base'
 import { memo } from 'react'
-import { Navigate, Outlet, useOutletContext } from 'react-router-dom'
+import { Navigate, Outlet, useLocation, useOutletContext, useSearchParams } from 'react-router-dom'
 import Unlock from '../Unlock/index.js'
 import { WalletStartUp } from '../components/StartUp/index.js'
 import { WalletSetupHeaderUI } from '../components/WalletHeader/WalletSetupHeaderUI.js'
@@ -14,12 +14,17 @@ export const WalletGuard = memo(function WalletGuard() {
     const wallet = useWallet()
     const wallets = useWallets()
     const outletContext = useOutletContext()
+    const location = useLocation()
+    const [params] = useSearchParams()
     const { isLocked, loading } = useWalletLockStatus()
 
     const hitPaymentPasswordGuard = usePaymentPasswordGuard()
     const hitMessageGuard = useMessageGuard()
 
-    if (hitPaymentPasswordGuard) return <Navigate to={PopupRoutes.SetPaymentPassword} />
+    if (hitPaymentPasswordGuard) {
+        params.set('from', location.pathname)
+        return <Navigate to={{ pathname: PopupRoutes.SetPaymentPassword, search: params.toString() }} />
+    }
     if (isLocked && !loading) {
         return (
             <>

packages/plugins/Avatar/src/Application/UploadAvatarDialog.tsx

@@ -26,11 +26,9 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
     },
     cancel: {
-        backgroundColor: theme.palette.background.default,
-        color: theme.palette.mode === 'dark' ? '#FFFFFF' : '#111418',
-        border: 'none',
         '&:hover': {
             border: 'none',
+            background: theme.palette.maskColor.bottom,
         },
     },
     content: {

packages/plugins/RedPacket/src/SiteAdaptor/hooks/useCreateCallback.tsx

@@ -163,7 +163,11 @@ export function useCreateCallback(
             },
         )
 
-        const hash = await Web3.sendTransaction(tx, { paymentToken: gasOption?.gasCurrency, chainId })
+        const hash = await Web3.sendTransaction(tx, {
+            paymentToken: gasOption?.gasCurrency,
+            chainId,
+            gasOptionType: gasOption?.gasOptionType,
+        })
         const receipt = await Web3.getTransactionReceipt(hash, { chainId })
         if (receipt) {
             const events = decodeEvents(redPacketContract.options.jsonInterface, receipt)

packages/plugins/RedPacket/src/SiteAdaptor/hooks/useCreateNftRedpacketCallback.ts

@@ -74,7 +74,10 @@ export function useCreateNftRedpacketCallback(
                 },
             )
 
-            const hash = await Web3.sendTransaction(tx, { paymentToken: gasOption?.gasCurrency })
+            const hash = await Web3.sendTransaction(tx, {
+                paymentToken: gasOption?.gasCurrency,
+                gasOptionType: gasOption?.gasOptionType,
+            })
             const receipt = await Web3.getTransactionReceipt(hash)
             if (receipt) {
                 const events = decodeEvents(nftRedPacketContract.options.jsonInterface, receipt)

packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     active: {
         boxShadow: '0px 2px 5px 1px rgba(0, 0, 0, 0.05)',
-        background: theme.palette.background.paper,
+        background: theme.palette.maskColor.bottom,
         fontWeight: 700,
     },
     link: {

packages/shared-base/src/i18n/instance.ts

@@ -27,6 +27,12 @@ if (!i18NextInstance.isInitialized) {
         detection: {
             order: ['navigator'],
         },
+        react: {
+            bindI18n: 'languageChanged loaded',
+            // We'll be getting bundles in different languages from the remote, and we'll need to trigger re-rendering.
+            // https://react.i18next.com/latest/i18next-instance
+            bindI18nStore: 'added removed',
+        },
     })
 }
 export function updateLanguage(next: LanguageOptions) {

packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx

@@ -163,7 +163,11 @@ export function SelectGasSettingsToolbarUI({
 
     const [approveDialogOpen, setApproveDialogOpen] = useState(false)
     const [isCustomGas, setIsCustomGas] = useState(false)
-    const [currentGasOptionType, setCurrentGasOptionType] = useState<GasOptionType>(GasOptionType.NORMAL)
+    const [currentGasOptionType, setCurrentGasOptionType] = useState<GasOptionType>(
+        gasOption?.gasOptionType && gasOption.gasOptionType !== GasOptionType.CUSTOM
+            ? gasOption.gasOptionType
+            : GasOptionType.NORMAL,
+    )
     const [currentGasCurrency, setCurrentGasCurrency] = useState(gasOption?.gasCurrency)
     const { chainId } = useChainContext()
     const Others = useWeb3Others()
@@ -178,14 +182,16 @@ export function SelectGasSettingsToolbarUI({
                           maxPriorityFeePerGas,
                           gasCurrency: currentGasCurrency,
                           gas: new BigNumber(gasLimit).toString(),
+                          gasOptionType: isCustomGas ? GasOptionType.CUSTOM : currentGasOptionType,
                       }
                     : {
                           gasPrice: new BigNumber(maxFeePerGas).gt(0) ? maxFeePerGas : gasPrice,
                           gasCurrency: currentGasCurrency,
                           gas: new BigNumber(gasLimit).toString(),
+                          gasOptionType: isCustomGas ? GasOptionType.CUSTOM : currentGasOptionType,
                       },
             ),
-        [isSupportEIP1559, chainId, onChange, currentGasCurrency, gasLimit],
+        [isSupportEIP1559, chainId, onChange, currentGasCurrency, gasLimit, currentGasOptionType, isCustomGas],
     )
 
     const openCustomGasSettingsDialog = useCallback(async () => {

packages/web3-shared/evm/src/libs/GasEditor.ts

@@ -55,6 +55,7 @@ export class GasEditor {
                     this.EIP1559GasOptionConfig.gas && !isZero(this.EIP1559GasOptionConfig.gas)
                         ? toHex(this.EIP1559GasOptionConfig.gas)
                         : undefined,
+                gasOptionType: this.config.gasOptionType ?? config?.gasOptionType,
             }
         }
 
@@ -64,6 +65,7 @@ export class GasEditor {
             gasPrice: toHex(this.priorEIP1559GasOptionConfig.gasPrice) || toHex(priorConfig?.gasPrice || '0'),
             maxFeePerGas: undefined,
             maxPriorityFeePerGas: undefined,
+            gasOptionType: this.config.gasOptionType ?? priorConfig?.gasOptionType,
         }
     }