feat(mask): fw-6740 centralize extension permissions & add request UI

move permission constants to shared defs, use them in oauth helper and
firefly wallet flow, and add a runtime permission dialog to request origins.

Author: swkatmask

packages/mask/background/services/helper/oauth-x.ts

@@ -1,5 +1,6 @@
 import { timeout } from '@masknet/kit'
 import { requestExtensionPermissionFromContentScript } from './request-permission.js'
+import { XOAuthRequestOrigins } from '../../../shared/definitions/extension.js'
 
 /** Modified from https://github.com/ddo/oauth-1.0a/blob/master/oauth-1.0a.js */
 class OAuth {
@@ -184,15 +185,7 @@ const client = new OAuth(process.env.FIREFLY_X_CLIENT_ID, process.env.FIREFLY_X_
 let pendingOAuth: PromiseWithResolvers<{ oauth_verifier: string; oauth_token: string }> | undefined
 export async function requestXOAuthToken() {
     await requestExtensionPermissionFromContentScript({
-        origins: [
-            // In order to send API request without CORS limit
-            'https://api.twitter.com/*',
-            // In order to run content script on it
-            'https://firefly.social/api/mask/delegate-x-token',
-            'https://firefly.social/api/auth/callback/twitter',
-            'https://canary.firefly.social/api/mask/delegate-x-token',
-            'https://canary.firefly.social/api/auth/callback/twitter',
-        ],
+        origins: XOAuthRequestOrigins,
     })
     await Promise.all([
         fetch('https://firefly.social/api/mask/delegate-x-token'),

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

@@ -1,13 +1,14 @@
 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 { Typography } from '@mui/material'
-import { memo } from 'react'
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import { memo, useState } from 'react'
+import { useAsyncFn, useAsyncRetry } from 'react-use'
 import { PrimaryButton } from '../../../components/PrimaryButton/index.js'
 import { SetupFrameController } from '../../../components/SetupFrame/index.js'
-import { useAsyncFn } from 'react-use'
-import { PopupRoutes } from '@masknet/shared-base'
+import { XOAuthRequestOrigins } from '../../../../shared/definitions/extension.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -63,20 +64,79 @@ const useStyles = makeStyles()((theme) => ({
             listStyle: 'disc',
         },
     },
+    dialog: {
+        width: 600,
+        boxSizing: 'border-box',
+        padding: 24,
+        borderRadius: 12,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24,
+    },
+    dialogTitle: {
+        color: theme.palette.maskColor.main,
+        fontSize: 18,
+        fontWeight: 700,
+        lineHeight: '22px',
+        padding: 0,
+    },
+    dialogContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        padding: 0,
+    },
+    permissions: {
+        backgroundColor: theme.palette.maskColor.bg,
+        padding: 12,
+        borderRadius: 8,
+        height: 212,
+        boxSizing: 'border-box',
+        minHeight: 0,
+        flexGrow: 1,
+        overflow: 'auto',
+    },
+    dialogActions: {
+        display: 'flex',
+        justifyContent: 'center',
+        gap: 12,
+        padding: 0,
+    },
+    actionButton: {
+        minWidth: 110,
+        '&&': {
+            marginLeft: 0,
+        },
+    },
 }))
 
 export const Component = memo(function CreateWalletForm() {
     const { classes, cx } = useStyles()
+    const [open, setOpen] = useState(false)
+
+    const { retry, value: hasPermission } = useAsyncRetry(() => {
+        const hasPermission = browser.permissions.contains({
+            origins: XOAuthRequestOrigins,
+        })
+        setOpen(!hasPermission)
+        return hasPermission
+    }, [])
+
     const [{ loading }, request] = useAsyncFn(async () => {
+        if (!hasPermission) {
+            setOpen(true)
+            return
+        }
         try {
             const data = await Services.Helper.loginFireflyViaTwitter()
-            console.log('login data', data)
             if (!data) return
-            await Services.Helper.openPopupWindow(PopupRoutes.CreateWallet, undefined)
+            await Services.Helper.openPopupWindow(PopupRoutes.CreateWallet, {
+                creatingFireflyWallet: true,
+            })
         } catch (err) {
-            console.log('login error', err)
+            console.error('Failed to login firefly', err)
         }
-    }, [])
+    }, [hasPermission])
 
     return (
         <div className={classes.container}>
@@ -121,6 +181,41 @@ export const Component = memo(function CreateWalletForm() {
                     <Trans>Continue</Trans>
                 </PrimaryButton>
             </SetupFrameController>
+            <Dialog
+                open={open}
+                PaperProps={{
+                    elevation: 0,
+                    className: classes.dialog,
+                }}>
+                <DialogTitle className={classes.dialogTitle}>
+                    <Trans>Mask needs the following permissions</Trans>
+                </DialogTitle>
+                <DialogContent className={classes.dialogContent}>
+                    <Typography>
+                        <Trans>Sites</Trans>
+                    </Typography>
+                    <div className={classes.permissions} data-hide-scrollbar>
+                        {XOAuthRequestOrigins.map((origin) => (
+                            <Typography key={origin} lineHeight="18px">
+                                {origin}
+                            </Typography>
+                        ))}
+                    </div>
+                </DialogContent>
+                <DialogActions className={classes.dialogActions}>
+                    <Button onClick={() => setOpen(false)} variant="outlined" className={classes.actionButton}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            browser.permissions.request({ origins: XOAuthRequestOrigins }).finally(retry)
+                        }}
+                        variant="contained"
+                        className={classes.actionButton}>
+                        <Trans>Approve</Trans>
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </div>
     )
 })

packages/mask/dashboard/pages/routes.tsx

@@ -10,7 +10,6 @@ const routes: RouteObject[] = [
     { path: DashboardRoutes.Setup, element: <PersonaFrame />, children: personaRoutes },
     { path: DashboardRoutes.SignUp, element: <SignUpFrame />, children: signUpRoutes },
     { path: DashboardRoutes.CreateMaskWallet, element: <WalletFrame />, children: walletRoutes },
-    { path: DashboardRoutes.CreateFireflyWallet, element: <WalletFrame />, children: walletRoutes },
 ]
 const rootElement = (
     <>

packages/mask/popups/pages/RequestPermission/index.tsx

@@ -2,15 +2,10 @@ import { Box } from '@mui/material'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useAsyncRetry } from 'react-use'
-import { RequestPermission } from './RequestPermission.js'
 import type { Manifest } from 'webextension-polyfill'
+import { CanRequestDynamically } from '../../../shared/definitions/extension.js'
+import { RequestPermission } from './RequestPermission.js'
 
-const CanRequestDynamically: readonly Manifest.OptionalPermission[] = [
-    'clipboardRead',
-    'clipboardWrite',
-    'notifications',
-    'webRequestBlocking',
-]
 function canRequestDynamically(x: string): x is Manifest.OptionalPermission {
     return (CanRequestDynamically as string[]).includes(x)
 }

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

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { Navigate, Outlet, useLocation, useSearchParams } from 'react-router-dom'
+import { Navigate, Outlet, useLocation, useMatch, useSearchParams } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
 import { ChainContextProvider, useWallets } from '@masknet/web3-hooks-base'
 import Unlock from '../Unlock/index.js'
@@ -19,8 +19,9 @@ export const WalletGuard = memo(function WalletGuard() {
 
     const hitPaymentPasswordGuard = usePaymentPasswordGuard()
     const hitMessageGuard = useMessageGuard()
+    const matchCreateWallet = useMatch(PopupRoutes.CreateWallet)
 
-    if (!wallets.length) {
+    if (!wallets.length || matchCreateWallet) {
         return <WalletStartUp />
     }
 

packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx

@@ -1,15 +1,19 @@
 import Services from '#services'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
+import { useWallets } from '@privy-io/react-auth'
 import { timeout } from '@masknet/kit'
 import { LoadingStatus } from '@masknet/shared'
-import { DashboardRoutes } from '@masknet/shared-base'
+import { DashboardRoutes, type NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { alpha, Box, Typography, type BoxProps } from '@mui/material'
-import { memo, useEffect } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { useAsyncFn } from 'react-use'
+import { memo, useCallback } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useAsync, useAsyncFn } from 'react-use'
 import urlcat from 'urlcat'
+import { useChainContext } from '@masknet/web3-hooks-base'
+import { EVMWeb3 } from '@masknet/web3-providers'
+import { ProviderType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -76,7 +80,9 @@ async function loginFirefly() {
 }
 export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onChoose, ...props }) {
     const { classes, cx, theme } = useStyles()
-    const [params, setParams] = useSearchParams()
+    const [params] = useSearchParams()
+    const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const navigate = useNavigate()
     const [, handleChoose] = useAsyncFn(
         async (route: DashboardRoutes) => {
             const hasPassword = await Services.Wallet.hasPassword()
@@ -97,12 +103,28 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
         return timeout(loginFirefly(), 3 * 60 * 1000, timeoutMessage)
     }, [])
 
-    const isCreatingFireflyWallet = !!params.get('isCreating')
-    useEffect(() => {
+    const isCreatingFireflyWallet = !!params.get('creatingFireflyWallet')
+    const { wallets } = useWallets()
+    const selectPrivyWallet = useCallback(async () => {
+        if (!wallets.length) return
+        if (wallets.length > 1) {
+            navigate(PopupRoutes.SelectWallet)
+            return
+        }
+        await EVMWeb3.connect({
+            account: wallets[0].address,
+            chainId,
+            providerType: ProviderType.MaskWallet,
+        })
+        navigate(PopupRoutes.Wallet)
+    }, [wallets, chainId])
+
+    useAsync(async () => {
         if (!isCreatingFireflyWallet) return
-        createPrivyWallet()
-        setParams({}, { replace: true })
-    }, [isCreatingFireflyWallet])
+        await createPrivyWallet()
+        await selectPrivyWallet()
+    }, [isCreatingFireflyWallet, selectPrivyWallet])
+
     const oauthTimeout = error?.message === timeoutMessage
 
     return (

packages/mask/popups/pages/Wallet/components/StartUp/index.tsx

@@ -47,6 +47,7 @@ const useStyles = makeStyles()((theme) => ({
 export const WalletStartUp = memo(function WalletStartUp() {
     const { classes } = useStyles()
     const matchResetWallet = useMatch(PopupRoutes.ResetWallet)
+    const matchCreateWallet = useMatch(PopupRoutes.CreateWallet)
 
     const [, onEnterCreateWallet] = useAsyncFn(async () => {
         if (Sniffings.is_firefox) {
@@ -58,7 +59,7 @@ export const WalletStartUp = memo(function WalletStartUp() {
 
     return (
         <Box className={classes.container} data-hide-scrollbar>
-            <WalletSetupHeaderUI showBack={!!matchResetWallet}>
+            <WalletSetupHeaderUI showBack={!!matchResetWallet || !!matchCreateWallet}>
                 <Box className={classes.titleWrapper}>
                     <Typography className={classes.title}>
                         <Trans>Add Wallet</Trans>