feat: fw-6741 update firefly login flow

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

@@ -0,0 +1,221 @@
+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 { 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 { XOAuthRequestOrigins } from '../../../../shared/definitions/extension.js'
+
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        flex: 1,
+    },
+    title: {
+        fontSize: 30,
+        margin: '12px 0',
+        lineHeight: '120%',
+        color: theme.palette.maskColor.main,
+    },
+    tips: {
+        fontSize: 14,
+        lineHeight: '18px',
+        color: theme.palette.maskColor.second,
+    },
+    bold: {
+        fontWeight: 700,
+    },
+    notes: {
+        display: 'flex',
+        padding: theme.spacing(3, 2),
+        alignItems: 'center',
+        alignContent: 'stretch',
+        borderRadius: 12,
+        marginTop: theme.spacing(3),
+        background:
+            theme.palette.mode === 'dark' ?
+                'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)'
+            :   'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.20) 0%, rgba(59, 153, 252, 0.20) 100%)',
+    },
+    fireflyLogo: {
+        width: 120,
+        height: 120,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    list: {
+        listStyle: 'none',
+        color: theme.palette.maskColor.main,
+        fontSize: '13px',
+        lineHeight: '18px',
+        fontWeight: 400,
+        paddingLeft: 16,
+        margin: 0,
+        '& li': {
+            marginBottom: 12,
+            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()
+            if (!data) return
+            await Services.Helper.openPopupWindow(PopupRoutes.CreateWallet, {
+                creatingFireflyWallet: true,
+            })
+        } catch (err) {
+            console.error('Failed to login firefly', err)
+        }
+    }, [hasPermission])
+
+    return (
+        <div className={classes.container}>
+            <Typography className={cx(classes.title, classes.bold)}>
+                <Trans>Create a Firefly.social wallet</Trans>
+            </Typography>
+            <Typography className={classes.tips}>
+                <Trans>Create a Firefly.social wallet using an X account</Trans>
+            </Typography>
+            <div className={classes.notes}>
+                <div className={classes.fireflyLogo}>
+                    <Icons.Firefly size={60} />
+                </div>
+                <ul className={classes.list}>
+                    <li>
+                        Firefly.social wallet connects your Web3 identity to the entire Mask Network and firefly.social
+                        ecosystem.
+                    </li>
+                    <li>
+                        With a single wallet, you can like, post, collect, and transfer across multiple Web3 social
+                        platforms — all in one seamless flow.
+                    </li>
+                    <li>
+                        Log in securely in seconds with your X account and unify your EVM, Solana, and other chain
+                        identities effortlessly.
+                    </li>
+                    <li>
+                        Firefly.social wallet isn’t just a wallet — it’s your gateway to social, identity, and ownership
+                        in Web3.
+                    </li>
+                </ul>
+            </div>
+            <SetupFrameController>
+                <PrimaryButton
+                    width="125px"
+                    size="large"
+                    color="primary"
+                    className={classes.bold}
+                    startIcon={<Icons.TwitterX size={20} />}
+                    loading={loading}
+                    onClick={request}>
+                    <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/CreateMaskWallet/index.tsx

@@ -11,6 +11,7 @@ export const walletRoutes: RouteObject[] = [
     { path: r(DashboardRoutes.SignUpMaskWalletOnboarding), lazy: () => import('./Onboarding/index.js') },
     { path: r(DashboardRoutes.RecoveryMaskWallet), lazy: () => import('./Recovery/index.js') },
     { path: r(DashboardRoutes.AddDeriveWallet), lazy: () => import('./AddDeriveWallet/index.js') },
+    { path: r(DashboardRoutes.CreateFireflyWallet), lazy: () => import('./FireflyWallet/index.js') },
 ]
 
 export function WalletFrame() {

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

@@ -169,13 +169,7 @@ export const Component = memo(function Onboarding() {
                 <PrimaryButton
                     onClick={onSetupTwitter}
                     size="large"
-                    startIcon={
-                        <Icons.TwitterX
-                            variant={theme.palette.mode === 'dark' ? 'light' : 'dark'}
-                            className={classes.twitter}
-                            size={20}
-                        />
-                    }>
+                    startIcon={<Icons.TwitterX className={classes.twitter} size={20} />}>
                     <Trans>Experience in X</Trans>
                 </PrimaryButton>
                 {!isCreate && count && !isZero(count) ?

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

@@ -139,13 +139,7 @@ export const Component = memo(function Onboarding() {
                 <PrimaryButton
                     onClick={onSetupTwitter}
                     size="large"
-                    startIcon={
-                        <Icons.TwitterX
-                            variant={theme.palette.mode === 'dark' ? 'light' : 'dark'}
-                            className={classes.twitter}
-                            size={20}
-                        />
-                    }>
+                    startIcon={<Icons.TwitterX className={classes.twitter} size={20} />}>
                     <Trans>Experience in X</Trans>
                 </PrimaryButton>
             </SetupFrameController>

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 />
     }