fix: backup/recover related issues. (#12187)

* fix: mf-6675 adjust background color of file table

* fix: mf-6677 back up => backup

* fix: mf-6678 backup dialog

* refactor: replace merge modal with restore modal

* fix: mf-6680 handle failed restore backup

* fix: mf-6681 navigate to onboarding page after recovery

* fix: mf-6674 mf-6679 adjust login and logout

* fix: mf-6682 format datetime

* fixup! fix: mf-6674 mf-6679 adjust login and logout

* fix: mf-6683 scrollbar in collectible card

* fix: mf-6676 actively request drive permission

Author: swkatmask

packages/mask/background/services/backup/google_drive.ts

@@ -1,22 +1,11 @@
-import { checkAndRequestPermission } from '../../../shared/helpers/index.js'
+import { checkAndRequestPermission, requestDriveAccessToken } from '../../../shared/helpers/index.js'
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 export async function getAccessToken(interactive = false) {
     const granted = await checkAndRequestPermission()
     if (!granted) return
 
-    return new Promise<string>((resolve, reject) => {
-        // @ts-expect-error
-        chrome.identity.getAuthToken({ interactive }, (token, error) => {
-            // @ts-expect-error
-            if (chrome.runtime.lastError) {
-                // @ts-expect-error
-                reject(new Error(chrome.runtime.lastError.message))
-                return
-            }
-            resolve(token)
-        })
-    })
+    return requestDriveAccessToken(interactive)
 }
 
 export async function clearAccessToken() {

packages/mask/background/services/backup/restore.ts

@@ -1,4 +1,4 @@
-import { getBackupSummary, normalizeBackup } from '@masknet/backup-format'
+import { getBackupSummary, normalizeBackup, type BackupSummary } from '@masknet/backup-format'
 import { restoreNormalizedBackup } from './internal_restore.js'
 import { Result } from 'ts-results-es'
 import { SmartPayBundler, SmartPayOwner } from '@masknet/web3-providers'
@@ -7,7 +7,7 @@ import { bytesToHex, privateToPublic, publicToAddress } from '@ethereumjs/util'
 import { fromBase64URL } from '@masknet/shared-base'
 
 export async function generateBackupSummary(raw: string) {
-    return Result.wrapAsync(async () => {
+    return Result.wrapAsync(async (): Promise<BackupSummary> => {
         const backupObj: unknown = JSON.parse(raw)
         const backup = await normalizeBackup(backupObj)
 

packages/mask/dashboard/components/GoogleDriveFileTable.tsx

@@ -26,6 +26,7 @@ const useStyles = makeStyles()((theme) => ({
         border: `1px solid ${theme.palette.maskColor.line}`,
         borderRadius: 8,
         overflow: 'hidden',
+        backgroundColor: theme.palette.maskColor.bottom,
     },
     table: {
         borderRadius: 8,

packages/mask/dashboard/components/GoogleDriveLogin.tsx

@@ -6,7 +6,7 @@ import { Box, Typography } from '@mui/material'
 import { memo, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { UserContext } from '../../shared-ui/index.js'
-import { checkAndRequestPermission } from '../../shared/helpers/index.js'
+import { checkAndRequestPermission, requestDriveAccessToken } from '../../shared/helpers/index.js'
 import { clearGoogleDriveAccessToken, getGoogleDriveAccessToken } from '../utils/api.js'
 
 const useStyles = makeStyles()((theme) => ({
@@ -43,11 +43,15 @@ export const GoogleDriveLogin = memo(function GoogleDriveLogin() {
             if (!granted) return
 
             const userInfo = await googleDriveClient.login(true)
+            await requestDriveAccessToken(true) // request permission to manipulate files
             updateUser({
                 googleAccount: userInfo.email || '',
             })
         } catch (err) {
-            showSnackbar(t`Failed to login: ${(err as Error).message}`, { variant: 'error' })
+            showSnackbar(t`Authorization Failed`, {
+                variant: 'warning',
+                message: t`Failed to authorize Google Drive. Please try again.`,
+            })
         }
     }, [googleDriveClient, updateUser, showSnackbar])
     return (

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

@@ -63,8 +63,9 @@ export interface BackupPreviewDialogProps {
     type: BackupAccountType
     account: string
     abstract?: string
-    onClose: () => void
+    title?: React.ReactNode | string
     uploadButtonLabel?: React.ReactNode | string
+    onClose: () => void
     onUpload?: (content: ArrayBuffer, signal: AbortSignal) => Promise<void>
 }
 export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function BackupPreviewDialog({
@@ -74,8 +75,9 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
     type,
     account,
     abstract,
-    onClose,
+    title,
     uploadButtonLabel,
+    onClose,
     onUpload,
 }) {
     const { _ } = useLingui()
@@ -259,7 +261,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
     ])
 
     return (
-        <InjectedDialog title={<Trans>Upload backup</Trans>} open={open} onClose={handleClose}>
+        <InjectedDialog title={title ?? <Trans>Upload backup</Trans>} open={open} onClose={handleClose}>
             <DialogContent data-hide-scrollbar>{content}</DialogContent>
             <DialogActions>{action}</DialogActions>
         </InjectedDialog>

packages/mask/dashboard/modals/MergeBackupModal/MergeBackupDialog.tsx

@@ -1,12 +1,12 @@
 import Services from '#services'
 import { Trans, useLingui } from '@lingui/react/macro'
-import { decryptBackup } from '@masknet/backup-format'
+import { decryptBackup, type BackupSummary } from '@masknet/backup-format'
 import { Icons } from '@masknet/icons'
 import { formatFileSize, InjectedDialog } from '@masknet/shared'
 import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { decode, encode } from '@msgpack/msgpack'
 import { Box, DialogActions, DialogContent, LinearProgress, Typography } from '@mui/material'
-import { format as formatDateTime, fromUnixTime } from 'date-fns'
+import { format as formatDateTime } from 'date-fns'
 import { memo, useCallback, useState, type ReactNode } from 'react'
 import { useAsync, useAsyncFn } from 'react-use'
 import PasswordField from '../../components/PasswordField/index.js'
@@ -54,7 +54,7 @@ export interface RestoreBackupDialogProps {
      * and return the content of the downloaded file at the end
      */
     download: () => AsyncGenerator<number, ArrayBuffer | undefined>
-    onClose: () => void
+    onClose: (summary?: BackupSummary) => void
 }
 
 export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function RestoreBackupDialog({
@@ -124,7 +124,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                         <Trans>Your file has been successfully restore into the browser data.</Trans>
                     :   <Trans>Your file has been successfully merged into the browser data.</Trans>),
             })
-            onClose()
+            onClose(backupSummary)
         } catch (err) {
             if (isImport) {
                 showSnackbar(<Trans>Restore Failed</Trans>, {
@@ -133,10 +133,11 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                         <Trans>Failed to restore the backup: {(err as Error).message}</Trans>
                     ),
                 })
+            } else {
+                showSnackbar(<Trans>Failed to download and merge the backup: {(err as Error).message}</Trans>, {
+                    variant: 'error',
+                })
             }
-            showSnackbar(<Trans>Failed to download and merge the backup: {(err as Error).message}</Trans>, {
-                variant: 'error',
-            })
         }
     }, [
         encrypted,
@@ -158,7 +159,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                 :   <Trans>Merge data to local database</Trans>
             }
             open={open}
-            onClose={onClose}>
+            onClose={() => onClose()}>
             <DialogContent>
                 <Typography className={classes.account}>{account}</Typography>
                 <Box className={classes.box}>
@@ -189,7 +190,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                                         fontSize={12}
                                         lineHeight="16px"
                                         color={theme.palette.maskColor.third}>
-                                        {formatDateTime(fromUnixTime(Number(uploadedAt)), 'yyyy-MM-dd HH:mm')}
+                                        {formatDateTime(new Date(Number(uploadedAt)), 'yyyy-mm-dd HH:mm')}
                                     </Typography>
                                 </>
                             }