feat: mf-6724 remove mask network backup/recovery (#12240)

removes the Mask Network backup option from the dashboard.

Author: swkatmask

packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/MaskNetwork.tsx

@@ -4,11 +4,11 @@ import { DashboardRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Typography } from '@mui/material'
 import { memo } from 'react'
-import { Outlet, useMatch, useNavigate, useOutletContext } from 'react-router-dom'
+import { Outlet, useNavigate, useOutletContext } from 'react-router-dom'
 import { CloudBackupFormContext } from './CloudBackupFormContext.js'
 import type { PortalContainerProps } from '../../../../components/OutletPortal.js'
 
-const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
+const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -25,11 +25,7 @@ const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
         height: 18,
         color: theme.palette.maskColor.main,
     },
-    activeButton: {
-        backgroundColor: theme.palette.maskColor.input,
-    },
     toggleButton: {
-        backgroundColor: theme.palette.maskColor.bottom,
         cursor: 'pointer',
         boxSizing: 'border-box',
         borderRadius: 18,
@@ -38,35 +34,22 @@ const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
         border: `1px solid ${theme.palette.maskColor.line}`,
         display: 'inline-flex',
         padding: theme.spacing(1, 1.5),
-        [`&.${refs.activeButton}`]: {
-            backgroundColor: theme.palette.maskColor.input,
-        },
+        backgroundColor: theme.palette.maskColor.input,
     },
 }))
 
 export const Component = memo(function CloudBackup() {
     const outletContext = useOutletContext<PortalContainerProps>()
-    const { classes, cx } = useStyles()
+    const { classes } = useStyles()
 
     const navigate = useNavigate()
-    const match = useMatch(DashboardRoutes.BackupCloudGoogleDrive) // MaskBook is index
-    const isGoogleDrive = !!match
 
     return (
         <Box className={classes.container}>
             <Box className={classes.providers}>
                 <button
                     type="button"
-                    className={cx(classes.toggleButton, isGoogleDrive ? null : classes.activeButton)}
-                    onClick={() => navigate(DashboardRoutes.BackupCloudMaskNetwork, { replace: true })}>
-                    <Icons.MaskBlue size={18} />
-                    <Typography className={classes.providerName}>
-                        <Trans>Mask Network</Trans>
-                    </Typography>
-                </button>
-                <button
-                    type="button"
-                    className={cx(classes.toggleButton, isGoogleDrive ? classes.activeButton : null)}
+                    className={classes.toggleButton}
                     onClick={() => navigate(DashboardRoutes.BackupCloudGoogleDrive, { replace: true })}>
                     <Icons.GoogleDrive size={18} />
                     <Typography className={classes.providerName}>

packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/index.tsx

@@ -49,8 +49,8 @@ const tuples: TabPathTuple[] = [
     [
         StorageType.Cloud,
         DashboardRoutes.BackupCloud,
-        DashboardRoutes.BackupCloudMaskNetwork,
         DashboardRoutes.BackupCloudGoogleDrive,
+        (pathname) => (pathname.startsWith(DashboardRoutes.BackupCloud) ? DashboardRoutes.BackupCloud : undefined),
     ],
 ]
 

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

@@ -4,10 +4,10 @@ import { DashboardRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Typography } from '@mui/material'
 import { memo } from 'react'
-import { Outlet, useMatch, useNavigate, useOutletContext } from 'react-router-dom'
+import { Outlet, useNavigate, useOutletContext } from 'react-router-dom'
 import type { PortalContainerProps } from '../../../../components/OutletPortal.js'
 
-const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
+const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -24,11 +24,7 @@ const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
         height: 18,
         color: theme.palette.maskColor.main,
     },
-    activeButton: {
-        backgroundColor: theme.palette.maskColor.input,
-    },
     toggleButton: {
-        backgroundColor: theme.palette.maskColor.bottom,
         cursor: 'pointer',
         boxSizing: 'border-box',
         borderRadius: 18,
@@ -37,35 +33,22 @@ const useStyles = makeStyles<void, 'activeButton'>()((theme, _, refs) => ({
         border: `1px solid ${theme.palette.maskColor.line}`,
         display: 'inline-flex',
         padding: theme.spacing(1, 1.5),
-        [`&.${refs.activeButton}`]: {
-            backgroundColor: theme.palette.maskColor.input,
-        },
+        backgroundColor: theme.palette.maskColor.input,
     },
 }))
 
 export const Component = memo(function CloudBackup() {
     const outletContext = useOutletContext<PortalContainerProps>()
-    const { classes, cx } = useStyles()
+    const { classes } = useStyles()
 
     const navigate = useNavigate()
-    const match = useMatch(DashboardRoutes.RecoveryCloudGoogleDrive) // MaskBook is index
-    const isGoogleDrive = !!match
 
     return (
         <Box className={classes.container}>
             <Box className={classes.providers}>
                 <button
                     type="button"
-                    className={cx(classes.toggleButton, isGoogleDrive ? null : classes.activeButton)}
-                    onClick={() => navigate(DashboardRoutes.RecoveryCloudMaskNetwork, { replace: true })}>
-                    <Icons.MaskBlue size={18} />
-                    <Typography className={classes.providerName}>
-                        <Trans>Mask Network</Trans>
-                    </Typography>
-                </button>
-                <button
-                    type="button"
-                    className={cx(classes.toggleButton, isGoogleDrive ? classes.activeButton : null)}
+                    className={classes.toggleButton}
                     onClick={() => navigate(DashboardRoutes.RecoveryCloudGoogleDrive, { replace: true })}>
                     <Icons.GoogleDrive size={18} />
                     <Typography className={classes.providerName}>