fix(lens): mf-6729 update lens follow logic (#12252)

swkatmask · web-flow · commit 6c55180c8866 · 2025-07-04T16:11:33.000+08:00
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
@@ -7,7 +7,7 @@ import {
     setMyLensAccountAddress,
     useAvailableLensAccounts,
     useLensClient,
-    useMyLensAccountAddress,
+    useMyLensAccount,
     WalletConnectedBoundary,
 } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
@@ -119,7 +119,8 @@ export function FollowLensDialog({ handle, onClose }: Props) {
 
     const { showSnackbar } = useCustomSnackbar()
     const lensClient = useLensClient()
-    const myLensAccount = useMyLensAccountAddress(true)
+    const myLensAccount = useMyLensAccount()
+    const myLensAddress = myLensAccount?.account.address
 
     const { data: lensAccount, isLoading } = useQuery({
         enabled: !!handle && !!open,
@@ -133,13 +134,15 @@ export function FollowLensDialog({ handle, onClose }: Props) {
     const { data: accounts } = useAvailableLensAccounts()
     const isSelf = isSameAddress(lensAccount?.username?.ownedBy as string, walletAccount)
 
-    const currentAccount = accounts?.find((p) => isSameAddress(p.account.address, myLensAccount)) || first(accounts)
-    const targetAccountAddress: EvmAddress | undefined = lensAccount?.address
+    const currentAccount = accounts?.find((p) => isSameAddress(p.account.address, myLensAddress)) || first(accounts)
+    const targetLensAddress: EvmAddress | undefined = lensAccount?.address
     const { isPending, data: isFollowing } = useQuery({
-        queryKey: ['lens', 'following-status', myLensAccount, targetAccountAddress, !lensClient],
+        queryKey: ['lens', 'following-status', myLensAddress, targetLensAddress, !lensClient],
         queryFn: async () => {
-            if (!targetAccountAddress || !myLensAccount || !lensClient) return false
-            const res = await lensClient.getFollowStatus([{ account: targetAccountAddress, follower: myLensAccount }])
+            if (!targetLensAddress || !myLensAddress || !lensClient) return false
+            const res = await lensClient.getFollowStatus([
+                { account: targetLensAddress, follower: myLensAddress as EvmAddress },
+            ])
             const status = res[0].isFollowing
             return status.onChain
         },
@@ -154,14 +157,14 @@ export function FollowLensDialog({ handle, onClose }: Props) {
         accountAddress: lensAccount?.address,
         onSuccess: (width: number, height: number) => {
             showConfettiExplosion(width, height)
-            updateFollowingStatus(myLensAccount, targetAccountAddress, true)
+            updateFollowingStatus(myLensAddress, targetLensAddress, true)
         },
-        onFailed: () => updateFollowingStatus(myLensAccount, targetAccountAddress, false),
+        onFailed: () => updateFollowingStatus(myLensAddress, targetLensAddress, false),
     })
     const { loading: unfollowLoading, handleUnfollow } = useUnfollow({
         accountAddress: lensAccount?.address as string,
-        onSuccess: () => updateFollowingStatus(myLensAccount, targetAccountAddress, false),
-        onFailed: () => updateFollowingStatus(myLensAccount, targetAccountAddress, true),
+        onSuccess: () => updateFollowingStatus(myLensAddress, targetLensAddress, false),
+        onFailed: () => updateFollowingStatus(myLensAddress, targetLensAddress, true),
     })
     // #endregion
 
@@ -217,9 +220,12 @@ export function FollowLensDialog({ handle, onClose }: Props) {
 
     const avatar = lensAccount?.metadata?.picture
 
-    const handleProfileChange = useCallback((profile: Account) => {
-        setMyLensAccountAddress(profile.address)
-    }, [])
+    const handleProfileChange = useCallback(
+        (profile: Account) => {
+            setMyLensAccountAddress(walletAccount, profile.address)
+        },
+        [walletAccount],
+    )
 
     const loading = followLoading || unfollowLoading || isLoading || isPending
 
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
@@ -159,15 +159,12 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                 horizontal: 'right',
             }}>
             <List disablePadding className={classes.list}>
-                {availableAccounts.map((available) => {
-                    const account = available.account
+                {availableAccounts.map(({ account, __typename: accountType }) => {
                     const avatar = LensV3.getAccountAvatar(account)
                     const name = account.metadata?.name || account.username?.localName
                     const ownerAddress: EvmAddress = account.username?.ownedBy
                     const accountId = account.username?.id
-                    const disabled =
-                        (currentAccountId && currentAccountId === accountId) ||
-                        available.__typename !== 'AccountManaged'
+                    const disabled = accountId === currentAccountId
                     return (
                         <ListItemButton
                             className={cx(classes.item, { [classes.disabled]: disabled })}
@@ -196,7 +193,7 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                                         <Typography component="div" className={classes.address}>
                                             {formatEthereumAddress(ownerAddress, 4)}
                                         </Typography>
-                                        {available.__typename === 'AccountManaged' ?
+                                        {accountType === 'AccountManaged' ?
                                             <Typography component="span" className={classes.managedTag}>
                                                 Managed
                                             </Typography>
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx
@@ -1,7 +1,7 @@
 import { evmAddress } from '@lens-protocol/client'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { Image, useLensClient, useMyLensAccountAddress } from '@masknet/shared'
+import { Image, useLensClient, useMyLensAccount } from '@masknet/shared'
 import { CrossIsolationMessages, EMPTY_LIST } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
@@ -80,16 +80,17 @@ interface Props {
 
 export const LensList = memo(function LensList({ accounts }: Props) {
     const lensV3 = useLensClient()
-    const myLensAccount = useMyLensAccountAddress()
+    const myLensAccount = useMyLensAccount()
+    const myLensAddress = myLensAccount?.account.address
 
     const { data = accounts, isPending } = useQuery({
-        queryKey: ['lens', 'popup-list', myLensAccount, accounts.map((x) => x.handle).join('')],
+        queryKey: ['lens', 'popup-list', myLensAddress, accounts.map((x) => x.handle).join('')],
         queryFn: async () => {
             if (!accounts.length) return EMPTY_LIST
             if (!lensV3) return accounts
 
             const nativeAccounts = await lensV3.getAccountsByHandles(accounts.map((x) => x.handle))
-            if (!myLensAccount && nativeAccounts?.length)
+            if (!myLensAddress && nativeAccounts?.length)
                 return compact(
                     nativeAccounts.map((nativeAccount) => {
                         const target = accounts.find(
@@ -106,8 +107,8 @@ export const LensList = memo(function LensList({ accounts }: Props) {
 
             if (!nativeAccounts?.length) return accounts
             const followStatus = await lensV3.getFollowStatus(
-                (myLensAccount ? nativeAccounts || [] : []).map((x) => ({
-                    follower: evmAddress(myLensAccount!),
+                (myLensAddress ? nativeAccounts || [] : []).map((x) => ({
+                    follower: evmAddress(myLensAddress!),
                     account: evmAddress(x.address),
                 })),
             )
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx
@@ -1,6 +1,6 @@
 import { type EvmAddress } from '@lens-protocol/client'
 import { Trans, useLingui } from '@lingui/react/macro'
-import { useLensClient, useMyLensAccountAddress } from '@masknet/shared'
+import { useLensClient, useMyLensAccount } from '@masknet/shared'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { useCustomSnackbar, type ShowSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
@@ -32,15 +32,17 @@ export function useFollow({ accountAddress, onSuccess, onFailed }: FollowOptions
         [showSnackbar, closeSnackbar],
     )
 
-    const myLensAccount = useMyLensAccountAddress()
+    const myLensAccount = useMyLensAccount()
     const lensClient = useLensClient()
 
     const handleFollow = useCallback(
         async (event: React.MouseEvent<HTMLButtonElement>) => {
             try {
                 setLoading(true)
                 if (!accountAddress || chainId !== ChainId.Polygon) return
-                if (!lensClient || !myLensAccount) return
+                if (!lensClient) throw new Error('No lens client')
+                if (!myLensAccount) throw new Error('No lens account')
+
                 await lensClient.login(myLensAccount)
                 const res = await lensClient.follow(accountAddress)
                 if (res.isErr()) {
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts
@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro'
-import { useLensClient, useMyLensAccountAddress } from '@masknet/shared'
+import { useLensClient, useMyLensAccount } from '@masknet/shared'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { useCustomSnackbar, type ShowSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
@@ -31,7 +31,7 @@ export function useUnfollow({ accountAddress, onSuccess, onFailed }: UnfollowOpt
         [showSnackbar, closeSnackbar],
     )
 
-    const myLensAccount = useMyLensAccountAddress()
+    const myLensAccount = useMyLensAccount()
     const lensClient = useLensClient()
     const handleUnfollow = useCallback(async () => {
         try {
diff --git a/packages/shared-base/src/KVStorage/index.ts b/packages/shared-base/src/KVStorage/index.ts
@@ -45,13 +45,13 @@ export const PersistentStorages = {
         debugging: boolean
         /** @deprecated use lastLensAccount instead */
         latestLensProfile: string
-        /** lens account address */
-        lastLensAccount: string
+        /** lens account address, distinct by wallet address */
+        lastLensAccountMap: Record<string, string>
         backupConfig: BackupConfig
-    }>('settings', {
+    }>('settings@v1', {
         debugging: false,
         latestLensProfile: '',
-        lastLensAccount: '',
+        lastLensAccountMap: {},
         backupConfig: {
             backupPassword: '',
             email: '',
diff --git a/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx b/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx
@@ -1,22 +1,22 @@
 import { Icons } from '@masknet/icons'
 // import { CopyButton, Image } from '@masknet/shared'
+import { evmAddress } from '@lens-protocol/client'
+import { Trans } from '@lingui/react/macro'
 import { CrossIsolationMessages, NextIDPlatform, type BindingProof } from '@masknet/shared-base'
 import { openWindow } from '@masknet/shared-base-ui'
 import { ActionButton, MaskColors, makeStyles } from '@masknet/theme'
 import { useChainContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { ENS, EVMWeb3, LensV3 } from '@masknet/web3-providers'
 import { isSameAddress, resolveNextIDPlatformLink } from '@masknet/web3-shared-base'
 import { MenuItem, Typography } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
 import { memo } from 'react'
 import { useAsync } from 'react-use'
-import { SocialTooltip } from './SocialTooltip.js'
-import { resolveNextIDPlatformIcon } from './utils.js'
-import { Trans } from '@lingui/react/macro'
-import { useMyLensAccountAddress } from '../../../hooks/index.js'
+import { useMyLensAccount } from '../../../hooks/index.js'
 import { CopyButton } from '../CopyButton/index.js'
 import { Image } from '../Image/index.js'
-import { useQuery } from '@tanstack/react-query'
-import { evmAddress } from '@lens-protocol/client'
+import { SocialTooltip } from './SocialTooltip.js'
+import { resolveNextIDPlatformIcon } from './utils.js'
 
 const useStyles = makeStyles()((theme) => ({
     listItem: {
@@ -159,7 +159,8 @@ export function SocialAccountListItem({
     const { classes, cx } = useStyles()
     const Utils = useWeb3Utils()
 
-    const myAccountAddress = useMyLensAccountAddress()
+    const myLensAccount = useMyLensAccount()
+    const myAccountAddress = myLensAccount?.account.address
     const { data: statusData, isLoading } = useQuery({
         queryKey: ['lens', 'follow', platform, identity, account, myAccountAddress],
         queryFn: async () => {
diff --git a/packages/shared/src/hooks/index.ts b/packages/shared/src/hooks/index.ts
@@ -8,7 +8,7 @@ export * from './useGasCurrencyMenu.js'
 export * from './useIsImageURL.js'
 export * from './useLensClient.js'
 export * from './useMenu.js'
-export * from './useMyLensAccountAddress.js'
+export * from './useMyLensAccount.js'
 export * from './useOpenApplicationSettings.js'
 export * from './useOpenShareTxDialog.js'
 export * from './usePageTab.js'
diff --git a/packages/shared/src/hooks/useAvailableLensAccounts.ts b/packages/shared/src/hooks/useAvailableLensAccounts.ts
@@ -4,7 +4,7 @@ import { useChainContext } from '@masknet/web3-hooks-base'
 import { useQuery } from '@tanstack/react-query'
 import { useLensClient } from './useLensClient.js'
 
-export function useAvailableLensAccounts(isManaged?: boolean) {
+export function useAvailableLensAccounts() {
     const { account: walletAccount } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const lensClient = useLensClient()
 
@@ -15,11 +15,5 @@ export function useAvailableLensAccounts(isManaged?: boolean) {
             const accounts = await lensClient.getAvailableAccounts(evmAddress(walletAccount))
             return accounts
         },
-        select(data) {
-            if (isManaged === undefined || !data) return data
-            return data.filter((account) =>
-                isManaged ? account.__typename === 'AccountManaged' : account.__typename === 'AccountOwned',
-            )
-        },
     })
 }
diff --git a/packages/shared/src/hooks/useMyLensAccount.ts b/packages/shared/src/hooks/useMyLensAccount.ts
@@ -0,0 +1,35 @@
+import { type NetworkPluginID, PersistentStorages } from '@masknet/shared-base'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { useMemo } from 'react'
+import { useSubscription } from 'use-subscription'
+import { useAvailableLensAccounts } from './useAvailableLensAccounts.js'
+import { first } from 'lodash-es'
+import { useChainContext } from '@masknet/web3-hooks-base'
+
+export function useMyLensAccount() {
+    const { account: walletAccount } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const lastLensAccountMap = useSubscription(PersistentStorages.Settings.storage.lastLensAccountMap.subscription)
+    const { data: lensAccounts } = useAvailableLensAccounts()
+
+    const lastLensAccount = lastLensAccountMap[walletAccount.toLowerCase()]
+    return useMemo(() => {
+        if (!lensAccounts?.length) return
+        // Make sure lastLensAccount is in lensAccounts
+        const lensAccount =
+            lastLensAccount ?
+                lensAccounts.find((x) => isSameAddress(x.account.address, lastLensAccount))
+            :   first(lensAccounts)
+        return lensAccount
+    }, [lastLensAccount, lensAccounts])
+}
+
+export function setMyLensAccountAddress(walletAddress: string, address: string) {
+    const prev = PersistentStorages.Settings.storage.lastLensAccountMap.value
+    const key = walletAddress.toLowerCase()
+    if (isSameAddress(prev[key], address)) return
+
+    PersistentStorages.Settings.storage.lastLensAccountMap.setValue({
+        ...prev,
+        [walletAddress.toLowerCase()]: address,
+    })
+}
diff --git a/packages/shared/src/hooks/useMyLensAccountAddress.ts b/packages/shared/src/hooks/useMyLensAccountAddress.ts
diff --git a/packages/web3-providers/src/LensV3/index.ts b/packages/web3-providers/src/LensV3/index.ts
