fix: pet, trending card, and network in popup (#11301)

* fix: mf-6001 hide pet when the plugin gets disabled

* fix: mf-5999 don't show trending card if trader gets disabled

* fix: mf-6002 current network

* fixup! fix: mf-5999 don't show trending card if trader gets disabled

* fix: mf-6000 update description for SwitchLogo

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

@@ -1,10 +1,10 @@
-import { memo, useEffect, useRef } from 'react'
+import { memo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Icons } from '@masknet/icons'
 import { ImageIcon, NetworkIcon, ProgressiveText } from '@masknet/shared'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
-import { useBalance, useNetwork, useNetworks, useWeb3State } from '@masknet/web3-hooks-base'
+import { useBalance, useChainContext, useNetwork, useNetworks, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { formatBalance, type ReasonableNetwork } from '@masknet/web3-shared-base'
 import { ProviderType, type ChainId, type NetworkType, type SchemaType } from '@masknet/web3-shared-evm'
@@ -66,15 +66,9 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
     const { classes, theme } = useStyles()
     const { closeModal } = useActionModal()
     const chainId = network.chainId
-    const liRef = useRef<HTMLLIElement>(null)
     const selected = network.ID === currentNetworkId
     const { Network } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
-    useEffect(() => {
-        if (!selected) return
-        liRef.current?.scrollIntoView()
-    }, [selected, liRef.current])
-
     const providerURL = network.isCustomized ? network.rpcUrl : undefined
     const { data: balance, isPending: loadingBalance } = useBalance(NetworkPluginID.PLUGIN_EVM, {
         chainId,
@@ -86,7 +80,10 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
         <li
             className={classes.network}
             role="option"
-            ref={liRef}
+            ref={(element) => {
+                if (!element || !selected) return
+                element.scrollIntoView()
+            }}
             onClick={async () => {
                 await Network?.switchNetwork(network.ID)
                 await EVMWeb3.switchChain?.(chainId, {
@@ -132,7 +129,8 @@ export const ChooseNetworkModal = memo(function ChooseNetworkModal(props: Action
     const t = useMaskSharedTrans()
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const network = useNetwork(NetworkPluginID.PLUGIN_EVM)
+    const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const network = useNetwork(NetworkPluginID.PLUGIN_EVM, chainId)
     const networks = useNetworks(NetworkPluginID.PLUGIN_EVM)
 
     const action = (

packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx

@@ -22,7 +22,7 @@ export const Link = memo(function Anchor(props: RenderFragmentsContextType.LinkP
 })
 
 export function useTagEnhancer(kind: 'hash' | 'cash', content: string) {
-    const plugin = useActivatedPluginsSiteAdaptor('any')
+    const plugin = useActivatedPluginsSiteAdaptor(true)
         .filter((x) => x.enhanceTag)
         .at(0)
 

packages/plugin-infra/src/entry-content-script.ts

@@ -5,6 +5,7 @@ export {
     useActivatedPluginsSiteAdaptor,
     useActivatedPluginSiteAdaptor,
     useIsMinimalMode,
+    checkIsMinimalMode,
 } from './manager/site-adaptor.js'
 
 export {

packages/plugin-infra/src/manager/site-adaptor.ts

@@ -37,6 +37,11 @@ export function useIsMinimalMode(pluginID: string) {
     return useValueRef(minimalModeSub).includes(pluginID)
 }
 
+export async function checkIsMinimalMode(pluginID: string) {
+    await minimalModeSub.readyPromise
+    return minimalModeSub.value.includes(pluginID)
+}
+
 /**
  *
  * @param pluginID Get the plugin ID

packages/plugins/Pets/src/SiteAdaptor/Animate.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { useEssay, useDefaultEssay, useCurrentVisitingUser } from '../hooks/index.js'
+import { useEssay, useDefaultEssay, useCurrentVisitingUser, DEFAULT_USER } from '../hooks/index.js'
 import { NormalNFT } from './NormalNFT.js'
 import { PluginPetMessages } from '../messages.js'
 import { petShowSettings } from '../settings.js'
@@ -19,11 +19,8 @@ function AnimatePic() {
 
     const petShow = useValueRef<boolean>(petShowSettings)
 
-    const [start, setStart] = useState(true)
-    const [refresh, setRefresh] = useState(0)
-
-    const visitor = useCurrentVisitingUser(refresh)
-    const visitorMeta = useEssay(visitor, refresh)
+    const { value: visitor = DEFAULT_USER, retry: retryUser } = useCurrentVisitingUser()
+    const { value: visitorMeta, retry: retryEssay } = useEssay(visitor)
     const defMeta = useDefaultEssay(visitor)
     const showMeta = visitorMeta ?? defMeta
 
@@ -34,18 +31,10 @@ function AnimatePic() {
     const handleMouseLeave = () => setInfoShow(false)
 
     useEffect(() => {
-        const refreshHandle = async (data: number) => setRefresh(data)
-        PluginPetMessages.setResult.on(refreshHandle)
-        let count = 0
-        const timer = setInterval(() => {
-            const check = count % 9 < 5
-            setStart(check)
-            count += 1
-        }, 1000)
-        return () => {
-            clearInterval(timer)
-            PluginPetMessages.setResult.off(refreshHandle)
-        }
+        return PluginPetMessages.setResult.on(() => {
+            retryUser()
+            retryEssay()
+        })
     }, [])
     if (!petShow || !visitor.userId || visitor.userId === '$unknown' || !showMeta?.image) return null
     return (
@@ -54,7 +43,7 @@ function AnimatePic() {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             key={visitor.userId}>
-            <NormalNFT start={start} infoShow={infoShow} showMeta={showMeta} handleClose={handleClose} />
+            <NormalNFT infoShow={infoShow} showMeta={showMeta} handleClose={handleClose} />
         </div>
     )
 }

packages/plugins/Pets/src/SiteAdaptor/NormalNFT.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react'
+import { Image } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import { Box } from '@mui/material'
-import { useStyles as useBoxStyles } from './PreviewBox.js'
-import Drag from './Drag.js'
-import type { ShowMeta } from '../types.js'
+import { useState } from 'react'
 import { CloseIcon } from '../constants.js'
-import { Image } from '@masknet/shared'
+import type { ShowMeta } from '../types.js'
+import Drag from './Drag.js'
+import { useStyles as useBoxStyles } from './PreviewBox.js'
 
 const useStyles = makeStyles()(() => ({
     imgContent: {
@@ -36,6 +36,12 @@ const useStyles = makeStyles()(() => ({
     wordContent: {
         display: 'flex',
         justifyContent: 'center',
+        animation: 'words-toggle 9s linear infinite',
+        '@keyframes words-toggle': {
+            '50%, 100%': {
+                display: 'none',
+            },
+        },
     },
     wordBox: {
         position: 'absolute',
@@ -45,7 +51,6 @@ const useStyles = makeStyles()(() => ({
 }))
 
 interface NormalNFTProps {
-    start: boolean
     infoShow: boolean
     showMeta: ShowMeta | undefined
     handleClose: () => void
@@ -55,7 +60,7 @@ function handleMenuShow(e: React.MouseEvent) {
     e.preventDefault()
 }
 export function NormalNFT(props: NormalNFTProps) {
-    const { start, infoShow, showMeta, handleClose } = props
+    const { infoShow, showMeta, handleClose } = props
     const { classes, cx } = useStyles()
     const { classes: boxClasses } = useBoxStyles()
 
@@ -66,18 +71,9 @@ export function NormalNFT(props: NormalNFTProps) {
 
     return (
         <Drag moveHandle={moveHandle} baseWidth={150} baseHeight={150}>
-            {start && showMeta?.word ?
+            {showMeta?.word ?
                 <Box className={classes.wordContent}>
-                    <Box
-                        className={cx(
-                            {
-                                [boxClasses.msgBox]: true,
-                                [boxClasses.wordShow]: true,
-                            },
-                            classes.wordBox,
-                        )}>
-                        {showMeta.word}
-                    </Box>
+                    <Box className={cx(boxClasses.msgBox, boxClasses.wordShow, classes.wordBox)}>{showMeta.word}</Box>
                 </Box>
             :   null}
             <Box className={classes.imgContent} onContextMenu={handleMenuShow}>

packages/plugins/Pets/src/SiteAdaptor/PetsGlobalInjection.tsx

@@ -3,9 +3,13 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { PluginPetMessages } from '../messages.js'
 import AnimatePic from './Animate.js'
 import { PetDialog } from './PetDialog.js'
+import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
+import { PetsPluginID } from '../constants.js'
 
 export const PetsGlobalInjection = memo(function PetsGlobalInjection() {
-    const { open, closeDialog } = useRemoteControlledDialog(PluginPetMessages.essayDialogUpdated, () => {})
+    const { open, closeDialog } = useRemoteControlledDialog(PluginPetMessages.essayDialogUpdated)
+    const isMinimalMode = useIsMinimalMode(PetsPluginID)
+    if (isMinimalMode) return false
     return (
         <>
             <AnimatePic />

packages/plugins/Pets/src/hooks/useEssay.ts

@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
-import { useAsync } from 'react-use'
+import { useAsyncRetry } from 'react-use'
 import { Web3Storage } from '@masknet/web3-providers'
 import { ImageType } from '../types.js'
 import type { User, ShowMeta, EssayRSSNode } from '../types.js'
 import { MASK_TWITTER, PunkIcon, Punk3D } from '../constants.js'
 import { useUser } from './useUser.js'
 import { usePetsTrans } from '../locales/i18n_generated.js'
 
-export function useEssay(user: User, refresh?: number) {
-    const { value } = useAsync(async () => {
+export function useEssay(user: User) {
+    return useAsyncRetry(async () => {
         if (!user.address) return null
         const stringStorage = Web3Storage.createFireflyStorage('Pets', user.address)
         let result: EssayRSSNode | undefined = await stringStorage.get<EssayRSSNode>('pet')
@@ -17,9 +17,7 @@ export function useEssay(user: User, refresh?: number) {
             result = await rss3Storage.get<EssayRSSNode>('_pet')
         }
         return result?.essay.userId === user.userId ? result.essay : null
-    }, [user, refresh])
-
-    return value
+    }, [user.userId, user.address])
 }
 
 export function useDefaultEssay(user: User) {

packages/plugins/Pets/src/hooks/useUser.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useAsync } from 'react-use'
+import { useAsyncRetry } from 'react-use'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { Web3Storage } from '@masknet/web3-providers'
@@ -19,27 +19,26 @@ export function useUser() {
     }, [account, whoAmI])
 }
 
-const DEFAULT_USER = { userId: '', address: '' }
+export const DEFAULT_USER = { userId: '', address: '' }
 
-export function useCurrentVisitingUser(flag?: number) {
+export function useCurrentVisitingUser() {
     const identity = useCurrentVisitingIdentity()
-    const { value: user = DEFAULT_USER } = useAsync(async () => {
+    return useAsyncRetry(async () => {
         const userId =
-            location.href?.endsWith(identity?.identifier?.userId ?? '') ? identity?.identifier?.userId ?? '' : ''
+            location.href.endsWith(identity?.identifier?.userId ?? '') ? identity?.identifier?.userId ?? '' : ''
         try {
             if (!userId || userId === '$unknown') return DEFAULT_USER
             const storage = Web3Storage.createKVStorage(PetsPluginID)
-            const address = (await storage.get<string>(userId)) ?? ''
+            const address = await storage.get<string>(userId)
             return {
                 userId,
-                address,
+                address: address ?? '',
             }
         } catch {
             return {
                 userId,
                 address: '',
             }
         }
-    }, [identity, flag, location.href])
-    return user
+    }, [identity, location.href])
 }

packages/plugins/SwitchLogo/src/locales/en-US.json

@@ -1,5 +1,5 @@
 {
-    "title": "Switch Twitter Logo",
+    "title": "Switch X Logo",
     "save_tip": "Share and recommend this feature after saving.",
     "reset": "Reset",
     "save": "Save",

packages/plugins/SwitchLogo/src/locales/zh-CN.json

@@ -1,5 +1,5 @@
 {
-    "title": "切换 Twitter 标志",
+    "title": "切换 X 标志",
     "save_tip": "保存后分享并推荐此功能。",
     "reset": "重置",
     "save": "保存",
@@ -9,7 +9,7 @@
     "mask_network": "Mask Network",
     "share_text": "我刚刚使用 Mask Network 插件把T witter X 图标替换成了原来的蓝鸟图标。",
     "share_mask": "下载 https://mask.io，在Twitter上尝试更强大的工具。",
-    "description": "在经典的Twitter标志和新标志之间切换。",
+    "description": "在经典的 Twitter 标志和新的 X 标志之间切换。",
     "switch_logo_title": "切换 Twitter 标志",
     "switch_logo_save_tip": "保存后分享并推荐此功能。",
     "switch_logo_classics_logo": "经典标志",

packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx

@@ -1,11 +1,15 @@
-import { PluginTraderMessages } from '../messages.js'
-import { TrendingAPI } from '@masknet/web3-providers/types'
 import type { Plugin } from '@masknet/plugin-infra'
+import { checkIsMinimalMode } from '@masknet/plugin-infra/content-script'
+import { PluginID } from '@masknet/shared-base'
+import { TrendingAPI } from '@masknet/web3-providers/types'
+import { PluginTraderMessages } from '../messages.js'
 
 export const enhanceTag: Plugin.SiteAdaptor.Definition['enhanceTag'] = {
     onHover(kind, content, event) {
         const element = event.currentTarget
         const timer = setTimeout(async () => {
+            const isMinimalMode = await checkIsMinimalMode(PluginID.Web3ProfileCard)
+            if (isMinimalMode) return
             const type = kind === 'cash' ? TrendingAPI.TagType.CASH : TrendingAPI.TagType.HASH
 
             PluginTraderMessages.trendingAnchorObserved.sendToLocal({