feat(firefly): add firefly session bind and restore with farcaster integration

Author: swkatmask

cspell.json

@@ -1,14 +1,7 @@
 {
     "version": "0.2",
     "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
-    "dictionaries": [
-        "typescript",
-        "node",
-        "npm",
-        "html",
-        "css",
-        "fonts"
-    ],
+    "dictionaries": ["typescript", "node", "npm", "html", "css", "fonts"],
     "ignorePaths": [
         "./packages/gun-utils/gun.js",
         "./packages/icons/**",
@@ -34,11 +27,7 @@
         "pnpm-workspace.yaml",
         "qya-aa.json"
     ],
-    "TODO: fix those words": [
-        "bridgable",
-        "clonable",
-        "sniffings"
-    ],
+    "TODO: fix those words": ["bridgable", "clonable", "sniffings"],
     "ignoreWords": [
         "aeth",
         "algr",
@@ -252,15 +241,12 @@
         "zksync",
         "zora"
     ],
-    "ignoreRegExpList": [
-        "/[A-Za-z0-9]{44}/",
-        "/[A-Za-z0-9]{46}/",
-        "/[A-Za-z0-9]{59}/"
-    ],
+    "ignoreRegExpList": ["/[A-Za-z0-9]{44}/", "/[A-Za-z0-9]{46}/", "/[A-Za-z0-9]{59}/"],
     "overrides": [],
     "words": [
         "arbitrum",
         "boba",
+        "Bsky",
         "cashtags",
         "celo",
         "deeplink",
@@ -269,6 +255,7 @@
         "linkedin",
         "luma",
         "muln",
+        "pathnames",
         "reposted",
         "reposts",
         "sepolia",
@@ -278,6 +265,8 @@
         "txid",
         "waitlist",
         "WARPCAST",
+        "webm",
         "youtube"
     ]
-}
+}
+

packages/mask/background/database/persona/type.ts

@@ -139,6 +139,7 @@ export interface PersonaRecord {
     createdAt: Date
     updatedAt: Date
     hasLogout?: boolean
+    fireflyToken?: string
     /**
      * create a dummy persona which should hide to the user until
      * connected at least one website

packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { BindingDialog, LoadingStatus, SOCIAL_MEDIA_ROUND_ICON_MAPPING, type BindingDialogProps } from '@masknet/shared'
 import { Sniffings, SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
@@ -6,7 +7,6 @@ import { Box, Button, Typography } from '@mui/material'
 import { memo } from 'react'
 import { activatedSiteAdaptorUI } from '../../../site-adaptor-infra/ui.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => {
     return {

packages/mask/popups/modals/ConnectSocialAccountModal/index.tsx

@@ -5,12 +5,12 @@ import { EMPTY_LIST, EnhanceableSite, PopupRoutes } from '@masknet/shared-base'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType } from '@masknet/web3-telemetry/types'
 import { memo, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { requestPermissionFromExtensionPage } from '../../../shared-ui/index.js'
 import { EventMap } from '../../../shared/definitions/event.js'
 import { ConnectSocialAccounts } from '../../components/ConnectSocialAccounts/index.js'
 import { ActionModal, type ActionModalBaseProps } from '../../components/index.js'
 import { useSupportSocialNetworks } from '../../hooks/index.js'
-import { useNavigate } from 'react-router-dom'
 
 export const ConnectSocialAccountModal = memo<ActionModalBaseProps>(function ConnectSocialAccountModal(props) {
     const { data: definedSocialNetworks = EMPTY_LIST } = useSupportSocialNetworks()

packages/mask/popups/pages/Personas/ConnectFirefly/bindFireflySession.ts

@@ -0,0 +1,65 @@
+import {
+    FarcasterSession,
+    FIREFLY_ROOT_URL,
+    fireflySessionHolder,
+    patchFarcasterSessionRequired,
+    resolveFireflyResponseData,
+} from '@masknet/web3-providers'
+import { SessionType, type FireflyConfigAPI, type Session } from '@masknet/web3-providers/types'
+import urlcat from 'urlcat'
+
+async function bindFarcasterSessionToFirefly(session: FarcasterSession, signal?: AbortSignal) {
+    const isGrantByPermission = FarcasterSession.isGrantByPermission(session, true)
+    const isRelayService = FarcasterSession.isRelayService(session)
+
+    if (!isGrantByPermission && !isRelayService)
+        throw new Error(
+            '[bindFarcasterSessionToFirefly] Only grant-by-permission or relay service sessions are allowed.',
+        )
+
+    const response = await fireflySessionHolder.fetch<FireflyConfigAPI.BindResponse>(
+        urlcat(FIREFLY_ROOT_URL, '/v3/user/bindFarcaster'),
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                token: isGrantByPermission ? session.signerRequestToken : undefined,
+                channelToken: isRelayService ? session.channelToken : undefined,
+                isForce: false,
+            }),
+            signal,
+        },
+    )
+
+    if (response.error?.some((x) => x.includes('Farcaster binding timed out'))) {
+        throw new Error('Bind Farcaster account to Firefly timeout.')
+    }
+
+    // If the farcaster is already bound to another account, throw an error.
+    if (
+        isRelayService &&
+        response.error?.some((x) => x.includes('This farcaster already bound to the other account'))
+    ) {
+        throw new Error('This Farcaster account has already bound to another Firefly account.')
+    }
+
+    const data = resolveFireflyResponseData(response)
+    patchFarcasterSessionRequired(session, data.fid, data.farcaster_signer_private_key)
+    return data
+}
+
+/**
+ * Bind a lens or farcaster session to the currently logged-in Firefly session.
+ * @param session
+ * @param signal
+ * @returns
+ */
+export async function bindFireflySession(session: Session, signal?: AbortSignal) {
+    // Ensure that the Firefly session is resumed before calling this function.
+    fireflySessionHolder.assertSession()
+    if (session.type === SessionType.Farcaster) {
+        return bindFarcasterSessionToFirefly(session as FarcasterSession, signal)
+    } else if (session.type === SessionType.Firefly) {
+        throw new Error('Not allowed')
+    }
+    throw new Error(`Unknown session type: ${session.type}`)
+}

packages/mask/popups/pages/Personas/ConnectFirefly/bindOrRestoreFireflySession.ts

@@ -0,0 +1,22 @@
+import { fireflySessionHolder } from '@masknet/web3-providers'
+import type { Session } from '@masknet/web3-providers/types'
+import { bindFireflySession } from './bindFireflySession'
+import { restoreFireflySession } from './restoreFireflySession'
+
+export async function bindOrRestoreFireflySession(session: Session, signal?: AbortSignal) {
+    try {
+        if (fireflySessionHolder.session) {
+            await bindFireflySession(session, signal)
+
+            // this will return the existing session
+            return fireflySessionHolder.assertSession(
+                '[bindOrRestoreFireflySession] Failed to bind farcaster session with firefly.',
+            )
+        } else {
+            throw new Error('[bindOrRestoreFireflySession] Firefly session is not available.')
+        }
+    } catch (error) {
+        // this will create a new session
+        return restoreFireflySession(session, signal)
+    }
+}

packages/mask/popups/pages/Personas/ConnectFirefly/createAccountByRelayService.ts

@@ -1,7 +1,7 @@
-import type { Account } from '@masknet/shared-base'
 import { fetchJSON } from '@masknet/web3-providers/helpers'
-import { FarcasterSession } from '@masknet/web3-providers'
+import { FarcasterSession, getFarcasterProfileById, type FireflyAccount } from '@masknet/web3-providers'
 import urlcat from 'urlcat'
+import { bindOrRestoreFireflySession } from './bindOrRestoreFireflySession'
 
 const FARCASTER_REPLY_URL = 'https://relay.farcaster.xyz'
 const NOT_DEPEND_SECRET = '[TO_BE_REPLACED_LATER]'
@@ -20,9 +20,13 @@ async function createSession(signal?: AbortSignal) {
     const url = urlcat(FARCASTER_REPLY_URL, '/v1/channel')
     const response = await fetchJSON<FarcasterReplyResponse>(url, {
         method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
         body: JSON.stringify({
-            siteUri: 'https://www.mask.io',
-            domain: 'www.mask.io',
+            // cspell: disable-next-line
+            siweUri: 'https://firefly.social',
+            domain: 'firefly.social',
         }),
         signal,
     })
@@ -51,6 +55,7 @@ export async function createAccountByRelayService(callback?: (url: string) => vo
 
     // polling for the session to be ready
     const fireflySession = await bindOrRestoreFireflySession(session, signal)
+    console.log('fireflySession', fireflySession)
 
     // profile id is available after the session is ready
     const profile = await getFarcasterProfileById(session.profileId)
@@ -60,5 +65,5 @@ export async function createAccountByRelayService(callback?: (url: string) => vo
         session,
         profile,
         fireflySession,
-    } satisfies Account
+    } satisfies FireflyAccount
 }

packages/mask/popups/pages/Personas/ConnectFirefly/index.tsx

@@ -1,23 +1,106 @@
-import { useLingui } from '@lingui/react/macro'
+import { Trans, useLingui } from '@lingui/react/macro'
 import { PopupHomeTabType } from '@masknet/shared'
-import { QRCode } from 'react-qrcode-logo'
-import { PopupRoutes } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import {
+    AbortError,
+    FarcasterPatchSignerError,
+    FireflyAlreadyBoundError,
+    FireflyBindTimeoutError,
+    PopupRoutes,
+    TimeoutError,
+} from '@masknet/shared-base'
+import { LoadingBase, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { addAccount, type AccountOptions, type FireflyAccount } from '@masknet/web3-providers'
+import { Social } from '@masknet/web3-providers/types'
 import { Box } from '@mui/material'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useState } from 'react'
+import { QRCode } from 'react-qrcode-logo'
 import { useNavigate } from 'react-router-dom'
 import urlcat from 'urlcat'
 import { useTitle } from '../../../hooks/index.js'
+import { useAsyncFn, useMount } from 'react-use'
+import { createAccountByRelayService } from './createAccountByRelayService.js'
 
 const useStyles = makeStyles()({
-    container: {},
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    loading: {
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
 })
 
+function useLogin() {
+    const { showSnackbar } = usePopupCustomSnackbar()
+    return useAsyncFn(
+        async function login(createAccount: () => Promise<FireflyAccount>, options?: Omit<AccountOptions, 'source'>) {
+            try {
+                const account = await createAccount()
+
+                const done = await addAccount(account, options)
+                console.log('created account', account)
+                if (done) showSnackbar(<Trans>Your {Social.Source.Farcaster} account is now connected.</Trans>)
+            } catch (error) {
+                // skip if the error is abort error
+                if (AbortError.is(error)) return
+
+                // if login timed out, let the user refresh the QR code
+                if (error instanceof TimeoutError || error instanceof FireflyBindTimeoutError) {
+                    showSnackbar(<Trans>This QR code is longer valid. Please scan a new one to continue.</Trans>)
+                    return
+                }
+
+                // failed to patch the signer
+                if (error instanceof FarcasterPatchSignerError) throw error
+
+                // if any error occurs, close the modal
+                // by this we don't need to do error handling in UI part.
+                // if the account is already bound to another account, show a warning message
+                if (error instanceof FireflyAlreadyBoundError) {
+                    showSnackbar(
+                        <Trans>
+                            The account you are trying to log in with is already linked to a different Firefly account.
+                        </Trans>,
+                    )
+                    return
+                }
+
+                throw error
+            }
+        },
+        [showSnackbar],
+    )
+}
+
 export const Component = memo(function ConnectFireflyPage() {
     const { t } = useLingui()
     const { classes } = useStyles()
+    const [url, setUrl] = useState('')
 
     const navigate = useNavigate()
+    const [{ loading }, login] = useLogin()
+
+    useMount(async () => {
+        login(async () => {
+            try {
+                const account = await createAccountByRelayService((url) => {
+                    setUrl(url)
+                })
+                console.log('account', account)
+                return account
+            } catch (err) {
+                console.log('error', err)
+                throw err
+            }
+        })
+    })
 
     const handleBack = useCallback(() => {
         navigate(urlcat(PopupRoutes.Personas, { tab: PopupHomeTabType.ConnectedWallets }), {
@@ -29,7 +112,12 @@ export const Component = memo(function ConnectFireflyPage() {
 
     return (
         <Box className={classes.container}>
-            <QRCode value="hello" ecLevel="L" size={220} quietZone={16} eyeRadius={100} qrStyle="dots" />
+            <QRCode value={url} ecLevel="L" size={220} quietZone={16} eyeRadius={100} qrStyle="dots" />
+            {loading ?
+                <div className={classes.loading}>
+                    <LoadingBase size={30} />
+                </div>
+            :   null}
         </Box>
     )
 })