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

Author: swkatmask

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/index.tsx

@@ -8,7 +8,7 @@ import {
     PopupRoutes,
     TimeoutError,
 } from '@masknet/shared-base'
-import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+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'
@@ -17,20 +17,29 @@ import { QRCode } from 'react-qrcode-logo'
 import { useNavigate } from 'react-router-dom'
 import urlcat from 'urlcat'
 import { useTitle } from '../../../hooks/index.js'
-import { useMount } from 'react-use'
+import { useAsyncFn, useMount } from 'react-use'
 import { createAccountByRelayService } from './createAccountByRelayService.js'
 
 const useStyles = makeStyles()({
     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 useCallback(
+    return useAsyncFn(
         async function login(createAccount: () => Promise<FireflyAccount>, options?: Omit<AccountOptions, 'source'>) {
             try {
                 const account = await createAccount()
@@ -76,14 +85,15 @@ export const Component = memo(function ConnectFireflyPage() {
     const [url, setUrl] = useState('')
 
     const navigate = useNavigate()
-    const login = useLogin()
+    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)
@@ -103,6 +113,11 @@ export const Component = memo(function ConnectFireflyPage() {
     return (
         <Box className={classes.container}>
             <QRCode value={url} ecLevel="L" size={220} quietZone={16} eyeRadius={100} qrStyle="dots" />
+            {loading ?
+                <div className={classes.loading}>
+                    <LoadingBase size={30} />
+                </div>
+            :   null}
         </Box>
     )
 })