fix: mf-5997 access k/v state before initialization finished (#11300)

DimensionDev · Jan 30, 2024 · 89fd021 · 89fd021
1 parent 6930e2d
commit 89fd021
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/FollowLensDialog.tsx
@@ -1,29 +1,30 @@
-import { useMemo, useState, type MouseEvent, useCallback } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { first } from 'lodash-es'
 import { Icons } from '@masknet/icons'
 import {
     ChainBoundary,
     EthereumERC20TokenApprovedBoundary,
     InjectedDialog,
     WalletConnectedBoundary,
 } from '@masknet/shared'
-import { NetworkPluginID } from '@masknet/shared-base'
+import { EMPTY_STRING, NetworkPluginID } from '@masknet/shared-base'
 import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { useChainContext, useFungibleTokenBalance, useNetworkContext, useWallet } from '@masknet/web3-hooks-base'
 import { Lens } from '@masknet/web3-providers'
 import { FollowModuleType, type LensBaseAPI } from '@masknet/web3-providers/types'
-import { formatBalance, isLessThan, isSameAddress, ZERO } from '@masknet/web3-shared-base'
-import { ChainId, createERC20Token, formatAmount, ProviderType } from '@masknet/web3-shared-evm'
-import { Avatar, Box, Button, buttonClasses, CircularProgress, DialogContent, Typography } from '@mui/material'
-import { useWeb3ProfileTrans, Web3ProfileTrans } from '../../locales/i18n_generated.js'
+import { ZERO, formatBalance, isLessThan, isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, ProviderType, createERC20Token, formatAmount } from '@masknet/web3-shared-evm'
+import { Avatar, Box, Button, CircularProgress, DialogContent, Typography, buttonClasses } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
+import { first } from 'lodash-es'
+import { useCallback, useMemo, useState, type MouseEvent } from 'react'
+import { useAsyncRetry } from 'react-use'
+import { useSubscription } from 'use-subscription'
+import { Web3ProfileTrans, useWeb3ProfileTrans } from '../../locales/i18n_generated.js'
 import { getLensterLink } from '../../utils.js'
+import { lensStorage } from '../context.js'
+import { useConfettiExplosion } from '../hooks/ConfettiExplosion/index.js'
 import { useFollow } from '../hooks/Lens/useFollow.js'
 import { useUnfollow } from '../hooks/Lens/useUnfollow.js'
-import { useQuery } from '@tanstack/react-query'
 import { HandlerDescription } from './HandlerDescription.js'
-import { useConfettiExplosion } from '../hooks/ConfettiExplosion/index.js'
-import { lensStorage } from '../context.js'
 
 const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
     container: {
@@ -122,6 +123,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
 
     const { showSnackbar } = useCustomSnackbar()
 
+    const latestProfile = useSubscription(lensStorage.latestProfile?.subscription ?? EMPTY_STRING)
     // #region profile information
     const { value, loading } = useAsyncRetry(async () => {
         if (!handle || !open || !open) return
@@ -134,8 +136,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
         const profiles = await Lens.queryProfilesByAddress(account)
 
         setCurrentProfile((prev) => {
-            const profile =
-                defaultProfile ?? profiles.find((x) => x.id === lensStorage.latestProfile?.value) ?? first(profiles)
+            const profile = defaultProfile ?? profiles.find((x) => x.id === latestProfile) ?? first(profiles)
             if (!prev && profile) {
                 if (!lensStorage.latestProfile?.value) lensStorage.latestProfile?.setValue(profile.id)
                 return profile
@@ -148,7 +149,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
             profiles,
             defaultProfile: defaultProfile ?? first(profiles),
         }
-    }, [handle, open, account])
+    }, [handle, open, account, latestProfile])
 
     const { profile, defaultProfile, isSelf, profiles } = value ?? {}
 

diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/LensList.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/LensList.tsx
@@ -1,15 +1,16 @@
 import { Icons } from '@masknet/icons'
 import { Image } from '@masknet/shared'
-import { CrossIsolationMessages, EMPTY_LIST } from '@masknet/shared-base'
+import { CrossIsolationMessages, EMPTY_LIST, EMPTY_STRING } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
-import type { FireflyBaseAPI } from '@masknet/web3-providers/types'
-import { List, ListItem, Typography, type ListProps } from '@mui/material'
-import { memo } from 'react'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { Lens } from '@masknet/web3-providers'
+import type { FireflyBaseAPI } from '@masknet/web3-providers/types'
 import { isSameAddress } from '@masknet/web3-shared-base'
+import { List, ListItem, Typography, type ListProps } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { compact, first } from 'lodash-es'
+import { memo } from 'react'
+import { useSubscription } from 'use-subscription'
 import { useWeb3ProfileTrans } from '../../locales/i18n_generated.js'
 import { lensStorage } from '../context.js'
 
@@ -82,12 +83,12 @@ export const LensList = memo(({ className, accounts, ...rest }: Props) => {
     const { classes, cx } = useStyles()
     const { account: wallet } = useChainContext()
 
+    const latestProfile = useSubscription(lensStorage.latestProfile?.subscription ?? EMPTY_STRING)
     const { data = accounts, isPending } = useQuery({
-        queryKey: ['Lens', 'Popup-List', accounts.map((x) => x.handle).join(''), wallet],
+        queryKey: ['Lens', 'Popup-List', accounts.map((x) => x.handle).join(''), wallet, latestProfile],
         queryFn: async () => {
             if (!accounts.length) return EMPTY_LIST
-            let currentProfileId =
-                lensStorage.latestProfile?.value ?? (await Lens.queryDefaultProfileByAddress(wallet))?.id
+            let currentProfileId = latestProfile ?? (await Lens.queryDefaultProfileByAddress(wallet))?.id
             if (!currentProfileId) {
                 const profiles = await Lens.queryProfilesByAddress(wallet)
                 currentProfileId = first(profiles)?.id