feat: add support for lens social network integration

Author: swkatmask

packages/mask/package.json

@@ -36,6 +36,7 @@
     "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f",
     "@ethereumjs/util": "^9.0.3",
     "@hookform/resolvers": "^3.6.0",
+    "@lens-protocol/client": "0.0.0-canary-20250408064617",
     "@masknet/backup-format": "workspace:^",
     "@masknet/encryption": "workspace:^",
     "@masknet/flags": "workspace:^",

packages/mask/popups/Popup.tsx

@@ -1,10 +1,10 @@
 import { PageUIProvider, PersonaContext } from '@masknet/shared'
-import { jsxCompose, MaskMessages, PopupRoutes } from '@masknet/shared-base'
+import { MaskMessages, PopupRoutes } from '@masknet/shared-base'
 import { PopupSnackbarProvider } from '@masknet/theme'
 import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Box } from '@mui/material'
-import { Suspense, cloneElement, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Suspense, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useIdleTimer } from 'react-idle-timer'
 import {
     createHashRouter,
@@ -30,6 +30,7 @@ import { WalletFrame, walletRoutes } from './pages/Wallet/index.js'
 import { ContactsFrame, contactsRoutes } from './pages/Friends/index.js'
 import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/ErrorBoundary/ErrorBoundary.js'
 import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
+import { InteractionWalletContext } from './pages/Wallet/Interaction/InteractionContext.js'
 
 const personaInitialState = {
     queryOwnedPersonaInformation: Services.Identity.queryOwnedPersonaInformation,
@@ -108,23 +109,31 @@ export default function Popups() {
         throttle: 10000,
     })
 
-    return jsxCompose(
-        <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
-        // eslint-disable-next-line react-compiler/react-compiler
-        <PageUIProvider useTheme={usePopupTheme} />,
-        <PopupSnackbarProvider children={null!} />,
-        <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet} />,
-        <PopupContext />,
-        <PageTitleContext value={titleContext} />,
-    )(
-        cloneElement,
-        <>
-            {/* https://github.com/TanStack/query/issues/5417 */}
-            {process.env.NODE_ENV === 'development' ?
-                <ReactQueryDevtools buttonPosition="bottom-right" />
-            :   null}
-            <RouterProvider router={router} fallbackElement={pending} future={{ v7_startTransition: true }} />
-        </>,
+    return (
+        <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions}>
+            {/* eslint-disable-next-line react-compiler/react-compiler */}
+            <PageUIProvider useTheme={usePopupTheme}>
+                <PopupSnackbarProvider>
+                    <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet}>
+                        <InteractionWalletContext>
+                            <PopupContext>
+                                <PageTitleContext value={titleContext}>
+                                    {/* https://github.com/TanStack/query/issues/5417 */}
+                                    {process.env.NODE_ENV === 'development' ?
+                                        <ReactQueryDevtools buttonPosition="bottom-right" />
+                                    :   null}
+                                    <RouterProvider
+                                        router={router}
+                                        fallbackElement={pending}
+                                        future={{ v7_startTransition: true }}
+                                    />
+                                </PageTitleContext>
+                            </PopupContext>
+                        </InteractionWalletContext>
+                    </EVMWeb3ContextProvider>
+                </PopupSnackbarProvider>
+            </PageUIProvider>
+        </PersistQueryClientProvider>
     )
 }
 

packages/mask/popups/components/SocialAccounts/index.tsx

@@ -91,7 +91,7 @@ export const SocialAccounts = memo<SocialAccountsProps>(function SocialAccounts(
                 <Box className={classes.accountItem} key={index} onClick={() => onAccountClick(account)}>
                     <AccountAvatar
                         avatar={account.avatar}
-                        network={account.identifier.network}
+                        network={account.identifier.network as EnhanceableSite}
                         isValid={account.is_valid}
                         classes={{ avatar: classes.avatar }}
                     />

packages/mask/popups/constants.ts

@@ -13,4 +13,5 @@ export const SOCIAL_MEDIA_ICON_FILTER_COLOR: Record<EnhanceableSite, string> = {
     [EnhanceableSite.Localhost]: '',
     [EnhanceableSite.Firefly]: '',
     [EnhanceableSite.Farcaster]: '',
+    [EnhanceableSite.Lens]: '',
 }

packages/mask/popups/hooks/useSupportSocialNetworks.ts

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 
 export function useSupportSocialNetworks() {
     return useQuery({
-        queryKey: ['@@Service.SiteAdaptor.getSupportedSites({ isSocialNetwork: true })'],
+        queryKey: ['Service.SiteAdaptor.getSupportedSites({ isSocialNetwork: true })'],
         queryFn: async () => {
             const sites = await Service.SiteAdaptor.getSupportedSites({ isSocialNetwork: true })
             return sites.map((x) => x.networkIdentifier as EnhanceableSite)

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

@@ -21,8 +21,9 @@ export const ConnectSocialAccountModal = memo<ActionModalBaseProps>(function Con
     const handleConnect = useCallback(
         async (networkIdentifier: EnhanceableSite) => {
             if (networkIdentifier === EnhanceableSite.Farcaster) {
-                navigate(PopupRoutes.ConnectFirefly)
-                return
+                return navigate(PopupRoutes.ConnectFirefly)
+            } else if (networkIdentifier === EnhanceableSite.Lens) {
+                return navigate(PopupRoutes.ConnectLens)
             }
             if (!currentPersona) return
             if (!(await requestPermissionFromExtensionPage(networkIdentifier))) return

packages/mask/popups/pages/Personas/AccountDetail/UI.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react/macro'
-import type { BindingProof, ProfileAccount } from '@masknet/shared-base'
+import type { BindingProof, EnhanceableSite, ProfileAccount } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { memo, useCallback } from 'react'
@@ -52,7 +52,7 @@ export const AccountDetailUI = memo<AccountDetailUIProps>(function AccountDetail
                 <Box className={classes.account}>
                     <AccountAvatar
                         avatar={account.avatar}
-                        network={account.identifier.network}
+                        network={account.identifier.network as EnhanceableSite}
                         isValid={account.is_valid}
                         classes={{ avatar: classes.avatar }}
                     />

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

@@ -1,9 +1,11 @@
+import { FireflyAlreadyBoundError } from '@masknet/shared-base'
 import {
     FarcasterSession,
     FIREFLY_ROOT_URL,
     fireflySessionHolder,
     patchFarcasterSessionRequired,
     resolveFireflyResponseData,
+    type LensSession,
 } from '@masknet/web3-providers'
 import { SessionType, type FireflyConfigAPI, type Session } from '@masknet/web3-providers/types'
 import urlcat from 'urlcat'
@@ -39,14 +41,36 @@ async function bindFarcasterSessionToFirefly(session: FarcasterSession, signal?:
         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.')
+        throw new FireflyAlreadyBoundError('Farcaster')
     }
 
     const data = resolveFireflyResponseData(response)
     patchFarcasterSessionRequired(session, data.fid, data.farcaster_signer_private_key)
     return data
 }
 
+async function bindLensToFirefly(session: LensSession, signal?: AbortSignal) {
+    const response = await fireflySessionHolder.fetch<FireflyConfigAPI.BindResponse>(
+        urlcat(FIREFLY_ROOT_URL, '/v3/user/bindLens'),
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                accessToken: session.token,
+                isForce: false,
+                version: 'v3',
+            }),
+            signal,
+        },
+    )
+
+    if (response.error?.some((x) => x.includes('This wallet already bound to the other account'))) {
+        throw new FireflyAlreadyBoundError('Lens')
+    }
+
+    const data = resolveFireflyResponseData(response)
+    return data
+}
+
 /**
  * Bind a lens or farcaster session to the currently logged-in Firefly session.
  * @param session
@@ -58,6 +82,8 @@ export async function bindFireflySession(session: Session, signal?: AbortSignal)
     fireflySessionHolder.assertSession()
     if (session.type === SessionType.Farcaster) {
         return bindFarcasterSessionToFirefly(session as FarcasterSession, signal)
+    } else if (session.type === SessionType.Lens) {
+        return bindLensToFirefly(session as LensSession, signal)
     } else if (session.type === SessionType.Firefly) {
         throw new Error('Not allowed')
     }

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

@@ -48,7 +48,6 @@ function useLogin() {
                 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
@@ -92,26 +91,19 @@ export const Component = memo(function ConnectFireflyPage() {
     const { currentPersona } = PersonaContext.useContainer()
 
     useMount(async () => {
-        login(async () => {
-            try {
-                const account = await createAccountByRelayService((url) => {
-                    setUrl(url)
-                })
-                console.log('account', account)
-                if (currentPersona) {
-                    await Services.Identity.attachProfile(
-                        ProfileIdentifier.of(EnhanceableSite.Farcaster, account.session.profileId).unwrap(),
-                        currentPersona.identifier,
-                        { connectionConfirmState: 'pending' },
-                        { token: account.session.token },
-                    )
-                }
-                console.log('account', account)
-                return account
-            } catch (err) {
-                console.log('error', err)
-                throw err
+        await login(async () => {
+            const account = await createAccountByRelayService((url) => {
+                setUrl(url)
+            })
+            if (currentPersona) {
+                await Services.Identity.attachProfile(
+                    ProfileIdentifier.of(EnhanceableSite.Farcaster, account.session.profileId).unwrap(),
+                    currentPersona.identifier,
+                    { connectionConfirmState: 'pending' },
+                    { token: account.session.token },
+                )
             }
+            return account
         })
     })
 

packages/mask/popups/pages/Personas/ConnectLens/createLensSession.ts

@@ -0,0 +1,27 @@
+import type { SessionClient } from '@lens-protocol/client'
+import { LensSession } from '@masknet/web3-providers'
+import { ZERO_ADDRESS } from '@masknet/web3-shared-evm'
+
+const SEVEN_DAYS = 1000 * 60 * 60 * 24 * 7
+
+export function createLensSession(profileId: string, sessionClient: SessionClient) {
+    const now = Date.now()
+    const credentialsRe = sessionClient.getCredentials()
+    if (credentialsRe.isErr()) {
+        throw new Error(credentialsRe.error.message ?? 'Failed to get lens credentials')
+    }
+    const credentials = credentialsRe.value
+    if (!credentials) throw new Error('Failed to get lens credentials')
+
+    const authenticatedRes = sessionClient.getAuthenticatedUser()
+    if (!authenticatedRes.isOk()) {
+        throw new Error(authenticatedRes.error.message)
+    }
+    const authenticated = authenticatedRes.value
+
+    const address = authenticated.address
+
+    const { accessToken, refreshToken } = credentials
+
+    return new LensSession(profileId, accessToken, now, now + SEVEN_DAYS, refreshToken, address ?? ZERO_ADDRESS)
+}