feat: mf-6673 lens v3 follow/unfollow

Author: swkatmask

eslint.config.js

@@ -447,6 +447,12 @@ const codeStyleRules = {
     // 'unicorn/no-unused-properties': 'warn',
     // '@typescript-eslint/no-unused-expressions': 'warn',
     // '@typescript-eslint/no-unused-vars': 'warn',
+    'react-hooks/exhaustive-deps': [
+        'warn',
+        {
+            additionalHooks: '(useAsync|useAsyncFn)\\b',
+        },
+    ],
 }
 const moduleSystemRules = {
     '@typescript-eslint/no-restricted-imports': [

packages/mask/shared-ui/initialization/fetch.ts

@@ -8,7 +8,7 @@ const { fetch: original_fetch } = globalThis
 function contentFetch(input: RequestInfo | URL, init?: RequestInit) {
     const request = new Request(input, init)
 
-    if (canAccessAsContent(request.url)) {
+    if (shouldAccessViaContent(request.url)) {
         if (
             navigator.userAgent.includes('Firefox') &&
             browser.runtime.getManifest().manifest_version === 2 &&
@@ -48,14 +48,15 @@ function fetchingTwitterResource(target: URL) {
 
 function fetchingInsResource(target: URL) {
     // cspell:disable-next-line
-    return location.origin.endsWith('instagram.com') && target.origin.match(/(fbcdn\.net|cdninstagram\.com)$/)
+    if (location.origin.endsWith('instagram.com') && target.origin.match(/(fbcdn\.net|cdninstagram\.com)$/)) return true
+    return target.host === 'api.lens.xyz'
 }
 
 function fetchingGoogleDriveResource(target: URL) {
     return target.origin === 'https://www.googleapis.com'
 }
 
-function canAccessAsContent(url: string) {
+function shouldAccessViaContent(url: string) {
     const target = new URL(url, location.href)
     if (fetchingTwitterResource(target) || fetchingInsResource(target) || fetchingGoogleDriveResource(target))
         return true

packages/plugins/Web3Profile/package.json

@@ -16,6 +16,7 @@
     }
   },
   "dependencies": {
+    "@lens-protocol/client": "0.0.0-canary-20250408064617",
     "@masknet/icons": "workspace:^",
     "@masknet/plugin-infra": "workspace:^",
     "@masknet/shared": "workspace:^",

packages/plugins/Web3Profile/src/SiteAdaptor/Web3ProfileGlobalInjection.tsx

@@ -19,10 +19,7 @@ export const Web3ProfileGlobalInjection = memo(function Web3ProfileGlobalInjecti
     const { open: lensOpen, closeDialog: closeLensDialog } = useRemoteControlledDialog(
         CrossIsolationMessages.events.followLensDialogEvent,
         (ev) => {
-            if (!ev.open) {
-                setHandle('')
-            }
-            setHandle(ev.handle)
+            setHandle(ev.open ? ev.handle : '')
         },
     )
 

packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx

@@ -1,3 +1,4 @@
+import type { Account, AccountAvailable } from '@lens-protocol/client'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { SelectProviderModal, WalletIcon } from '@masknet/shared'
@@ -11,11 +12,10 @@ import {
     useWallet,
     useWeb3Utils,
 } from '@masknet/web3-hooks-base'
-import type { LensBaseAPI } from '@masknet/web3-providers/types'
 import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { Box, Button, Typography } from '@mui/material'
 import { memo, useMemo, useState } from 'react'
-import { getProfileAvatar } from '../../../utils.js'
+import { getAccountAvatar } from '../../../utils.js'
 import { ProfilePopup } from '../ProfilePopup.js'
 
 const useStyles = makeStyles()((theme) => ({
@@ -54,14 +54,14 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface HandlerDescriptionProps extends withClasses<'container'> {
-    currentProfile?: LensBaseAPI.Profile
-    profiles?: LensBaseAPI.Profile[]
-    onChange: (profile: LensBaseAPI.Profile) => void
+    currentAccount?: Account
+    accounts?: AccountAvailable[]
+    onChange: (profile: Account) => void
 }
 
 export const HandlerDescription = memo<HandlerDescriptionProps>(function HandlerDescription({
-    profiles,
-    currentProfile,
+    accounts,
+    currentAccount,
     onChange,
     ...props
 }) {
@@ -80,9 +80,9 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(function Handler
         if (domain) return domain
         if (providerType === ProviderType.MaskWallet && wallet?.name) return wallet?.name
         return providerDescriptor?.name
-    }, [account, domain, providerType, wallet?.name, providerDescriptor?.name])
+    }, [domain, providerType, wallet?.name, providerDescriptor?.name])
 
-    if (!profiles?.length || !currentProfile) {
+    if (!accounts?.length || !currentAccount) {
         return (
             <Box className={classes.container}>
                 <Box className={classes.description}>
@@ -105,8 +105,8 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(function Handler
             </Box>
         )
     }
-    const avatar = getProfileAvatar(currentProfile) || new URL('../../assets/Lens.png', import.meta.url).href
-    const displayName = currentProfile.metadata?.displayName ?? currentProfile.handle.localName
+    const avatar = getAccountAvatar(currentAccount) || new URL('../../assets/Lens.png', import.meta.url).href
+    const displayName = currentAccount.metadata?.name ?? currentAccount.username?.localName
     return (
         <Box className={classes.container}>
             <Box className={classes.description}>
@@ -121,11 +121,11 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(function Handler
             <Icons.ArrowDrop size={18} onClick={(e) => setAnchorEl(e.currentTarget)} />
             <ProfilePopup
                 walletName={walletName}
-                profiles={profiles}
+                accounts={accounts}
                 anchorEl={anchorEl}
                 open={!!anchorEl}
                 onClose={() => setAnchorEl(null)}
-                currentProfile={currentProfile}
+                currentAccount={currentAccount}
                 onChange={onChange}
             />
         </Box>

packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx

@@ -1,11 +1,10 @@
+import type { Account, AccountAvailable, EvmAddress } from '@lens-protocol/client'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { Image, SelectProviderModal, WalletIcon } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { useChainContext, useProviderDescriptor, useWeb3Utils } from '@masknet/web3-hooks-base'
-import type { LensBaseAPI } from '@masknet/web3-providers/types'
-import { isSameAddress } from '@masknet/web3-shared-base'
 import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import {
     Box,
@@ -20,7 +19,7 @@ import {
     Typography,
 } from '@mui/material'
 import { memo } from 'react'
-import { getProfileAvatar } from '../../utils.js'
+import { getAccountAvatar } from '../../utils.js'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -38,6 +37,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     avatar: {
         borderRadius: 99,
+        overflow: 'hidden',
     },
     primary: {
         color: theme.palette.maskColor.main,
@@ -81,6 +81,7 @@ const useStyles = makeStyles()((theme) => ({
         maxHeight: 200,
         overflow: 'auto',
         marginBottom: theme.spacing(1.5),
+        scrollbarWidth: 'none',
         '::-webkit-scrollbar': {
             backgroundColor: 'transparent',
             width: 18,
@@ -113,29 +114,28 @@ const useStyles = makeStyles()((theme) => ({
 interface ProfilePopupProps {
     anchorEl: HTMLElement | null
     open: boolean
-    profiles: LensBaseAPI.Profile[]
+    accounts: AccountAvailable[]
     onClose: () => void
-    onChange: (profile: LensBaseAPI.Profile) => void
-    currentProfile: LensBaseAPI.Profile
+    onChange: (profile: Account) => void
+    currentAccount: Account
     walletName?: string
 }
 
 export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
     anchorEl,
     open,
-    profiles,
+    accounts: availableAccounts,
     onClose,
-    currentProfile,
+    currentAccount,
     onChange,
     walletName,
 }) {
-    const Utils = useWeb3Utils()
-
     const { classes } = useStyles()
+    const Utils = useWeb3Utils()
 
-    const { account } = useChainContext()
-
+    const { account: walletAddress } = useChainContext()
     const providerDescriptor = useProviderDescriptor()
+    const currentAccountId = currentAccount.username?.id
 
     return usePortalShadowRoot((container) => (
         <Popover
@@ -155,20 +155,24 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                 horizontal: 'right',
             }}>
             <List disablePadding className={classes.list}>
-                {profiles.map((profile) => {
-                    const avatar = getProfileAvatar(profile)
+                {availableAccounts.map((available) => {
+                    const account = available.account
+                    const avatar = getAccountAvatar(account)
+                    const name = account.metadata?.name || account.username?.localName
+                    const ownerAddress: EvmAddress = account.username?.ownedBy
+                    const accountId = account.username?.id
                     return (
                         <ListItemButton
                             className={classes.item}
-                            key={profile.id}
+                            key={accountId}
                             onClick={() => {
-                                if (currentProfile.id === profile.id) return
-                                onChange(profile)
+                                if (currentAccountId && currentAccountId === accountId) return
+                                onChange(account)
                             }}>
                             <ListItemIcon>
                                 {avatar ?
                                     <Image
-                                        className={classes.avatar}
+                                        rounded
                                         size={36}
                                         src={avatar}
                                         fallback={<Icons.DarkLens size={36} className={classes.avatar} />}
@@ -177,13 +181,14 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                             </ListItemIcon>
                             <ListItemText
                                 classes={{ primary: classes.primary, root: classes.listItemText }}
-                                primary={profile.metadata?.displayName ?? profile.handle?.localName}
+                                primary={name}
+                                secondaryTypographyProps={{ component: 'div' }}
                                 secondary={
                                     <div className={classes.second}>
                                         <Typography component="div" className={classes.address}>
-                                            {formatEthereumAddress(profile.ownedBy.address, 4)}
+                                            {formatEthereumAddress(ownerAddress, 4)}
                                         </Typography>
-                                        {!isSameAddress(profile.ownedBy.address, account) ?
+                                        {available.__typename === 'AccountManaged' ?
                                             <Typography component="span" className={classes.managedTag}>
                                                 Managed
                                             </Typography>
@@ -192,7 +197,7 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                                 }
                             />
                             <ListItemSecondaryAction>
-                                <Radio checked={currentProfile.id === profile.id} />
+                                <Radio checked={currentAccountId === accountId} />
                             </ListItemSecondaryAction>
                         </ListItemButton>
                     )
@@ -203,7 +208,7 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                     <WalletIcon size={36} mainIcon={providerDescriptor?.icon} />
                     <Box>
                         <Typography className={classes.name}>{walletName}</Typography>
-                        <Typography className={classes.address}>{Utils.formatAddress(account, 4)}</Typography>
+                        <Typography className={classes.address}>{Utils.formatAddress(walletAddress, 4)}</Typography>
                     </Box>
                 </Box>
                 <Button

packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx

@@ -1,9 +1,9 @@
-import { memo, useRef, useEffect } from 'react'
-import { IconButton } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
 import { Plugin } from '@masknet/plugin-infra'
+import { makeStyles } from '@masknet/theme'
 import type { FireflyConfigAPI } from '@masknet/web3-providers/types'
+import { IconButton } from '@mui/material'
+import { memo, useEffect, useRef } from 'react'
 import { closePopup, openPopup } from '../../emitter.js'
 
 const BadgesIconSizeMap: Record<Plugin.SiteAdaptor.BadgesSlot, number> = {
@@ -77,7 +77,7 @@ export const SocialBadges = memo(function SocialBadges({ slot, lensAccounts, far
             hide()
             ob.disconnect()
         }
-        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [buttonRef.current])
 
     const size = BadgesIconSizeMap[slot]