fix: mf-6741 handle missing x-oauth token and show error snackbar (#12297)

Author: swkatmask

packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx

@@ -2,7 +2,7 @@ import Services from '#services'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { PopupRoutes } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
 import { memo, useState } from 'react'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
@@ -113,31 +113,47 @@ const useStyles = makeStyles()((theme) => ({
 export const Component = memo(function CreateWalletForm() {
     const { classes, cx } = useStyles()
     const [open, setOpen] = useState(false)
+    const { showSnackbar } = useCustomSnackbar()
 
-    const { retry, value: hasPermission } = useAsyncRetry(() => {
-        const hasPermission = browser.permissions.contains({
+    const {
+        retry,
+        loading: loadingPermissions,
+        value: hasPermission,
+    } = useAsyncRetry(async () => {
+        const hasPermission = await browser.permissions.contains({
             origins: XOAuthRequestOrigins,
         })
         setOpen(!hasPermission)
         return hasPermission
     }, [])
 
-    const [{ loading }, request] = useAsyncFn(async () => {
+    const [{ loading: requesting }, request] = useAsyncFn(async () => {
         if (!hasPermission) {
             setOpen(true)
             return
         }
         try {
-            const data = await Services.Helper.loginFireflyViaTwitter()
-            if (!data) return
-            await Services.Helper.openPopupWindow(PopupRoutes.CreateWallet, {
-                creatingFireflyWallet: true,
-            })
+            await Services.Helper.loginFireflyViaTwitter()
         } catch (err) {
-            console.error('Failed to login firefly', err)
+            if ((err as Error).message === 'X OAuth token not found') {
+                const result = await Services.Helper.requestXOAuthToken()
+                if (result) await Services.Helper.loginFireflyViaTwitter()
+            } else {
+                showSnackbar(<Trans>Failed to login firefly</Trans>, {
+                    variant: 'error',
+                    content: (err as Error).message,
+                })
+                console.error('Failed to login firefly', err)
+            }
         }
+        await Services.Helper.openPopupWindow(PopupRoutes.CreateWallet, {
+            creatingFireflyWallet: true,
+        })
+        window.close()
     }, [hasPermission])
 
+    const loading = requesting || loadingPermissions
+
     return (
         <div className={classes.container}>
             <Typography className={cx(classes.title, classes.bold)}>

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

@@ -63,25 +63,25 @@ export const Component = memo(function Welcome() {
             Services.Settings.setTelemetryEnabled(true)
         }
         setAgreed(true)
-        const from = params.get('from')
-        const hasRedirect = from && from !== DashboardRoutes.Personas
-        if (hasRedirect) {
-            const search = params.get('search') || ''
-            navigate(from + search)
-            return
-        }
 
         try {
             const granted = await requestPermissionFromExtensionPage(
                 [...definedSiteAdaptors.values()].flatMap((x) => x.declarativePermissions.origins),
             )
             if (!granted) return
             if (!userGuideStatus[EnhanceableSite.Twitter].value) userGuideStatus[EnhanceableSite.Twitter].value = '1'
-            navigate(DashboardRoutes.SignUpPersona, { replace: true })
         } catch (err) {
             snackbar.showSnackbar(t`Failed to get permissions`, { variant: 'error' })
             throw err
         }
+        const from = params.get('from')
+        const hasRedirect = from && from !== DashboardRoutes.Personas
+        if (hasRedirect) {
+            const search = params.get('search') || ''
+            navigate(from + search)
+            return
+        }
+        navigate(DashboardRoutes.SignUpPersona, { replace: true })
     }, [params, allowedToCollect])
 
     return (