From f224cb5d7736fa1a553b15dc33b5ccd22fbb9417 Mon Sep 17 00:00:00 2001 From: UncleBill Date: Mon, 22 Jan 2024 12:00:41 +0800 Subject: [PATCH] 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 --- .../modals/ChooseNetworkModal/index.tsx | 18 +++++------ .../TypedMessageRender/Components/Text.tsx | 2 +- .../plugin-infra/src/entry-content-script.ts | 1 + .../plugin-infra/src/manager/site-adaptor.ts | 5 +++ .../plugins/Pets/src/SiteAdaptor/Animate.tsx | 27 +++++----------- .../Pets/src/SiteAdaptor/NormalNFT.tsx | 32 ++++++++----------- .../src/SiteAdaptor/PetsGlobalInjection.tsx | 6 +++- packages/plugins/Pets/src/hooks/useEssay.ts | 10 +++--- packages/plugins/Pets/src/hooks/useUser.ts | 17 +++++----- .../plugins/SwitchLogo/src/locales/en-US.json | 2 +- .../plugins/SwitchLogo/src/locales/zh-CN.json | 4 +-- .../Trader/src/SiteAdaptor/cashTag.tsx | 8 +++-- 12 files changed, 63 insertions(+), 69 deletions(-) diff --git a/packages/mask/popups/modals/ChooseNetworkModal/index.tsx b/packages/mask/popups/modals/ChooseNetworkModal/index.tsx index 0d5ec5637b6..960e47298b3 100644 --- a/packages/mask/popups/modals/ChooseNetworkModal/index.tsx +++ b/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(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
  • { + 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() + const network = useNetwork(NetworkPluginID.PLUGIN_EVM, chainId) const networks = useNetworks(NetworkPluginID.PLUGIN_EVM) const action = ( diff --git a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx index bad742c4443..384f0d81e86 100644 --- a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx +++ b/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) diff --git a/packages/plugin-infra/src/entry-content-script.ts b/packages/plugin-infra/src/entry-content-script.ts index 6613ca356a0..c0f7a296267 100644 --- a/packages/plugin-infra/src/entry-content-script.ts +++ b/packages/plugin-infra/src/entry-content-script.ts @@ -5,6 +5,7 @@ export { useActivatedPluginsSiteAdaptor, useActivatedPluginSiteAdaptor, useIsMinimalMode, + checkIsMinimalMode, } from './manager/site-adaptor.js' export { diff --git a/packages/plugin-infra/src/manager/site-adaptor.ts b/packages/plugin-infra/src/manager/site-adaptor.ts index 762cb5476e4..a0bd2a8fc76 100644 --- a/packages/plugin-infra/src/manager/site-adaptor.ts +++ b/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 diff --git a/packages/plugins/Pets/src/SiteAdaptor/Animate.tsx b/packages/plugins/Pets/src/SiteAdaptor/Animate.tsx index ff02b6e3368..739870e8503 100644 --- a/packages/plugins/Pets/src/SiteAdaptor/Animate.tsx +++ b/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(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}> - + ) } diff --git a/packages/plugins/Pets/src/SiteAdaptor/NormalNFT.tsx b/packages/plugins/Pets/src/SiteAdaptor/NormalNFT.tsx index 2d2d6bc27c1..fa3fa8354d8 100644 --- a/packages/plugins/Pets/src/SiteAdaptor/NormalNFT.tsx +++ b/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 ( - {start && showMeta?.word ? + {showMeta?.word ? - - {showMeta.word} - + {showMeta.word} : null} diff --git a/packages/plugins/Pets/src/SiteAdaptor/PetsGlobalInjection.tsx b/packages/plugins/Pets/src/SiteAdaptor/PetsGlobalInjection.tsx index c90e3ed7abe..74aade7ca6a 100644 --- a/packages/plugins/Pets/src/SiteAdaptor/PetsGlobalInjection.tsx +++ b/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 ( <> diff --git a/packages/plugins/Pets/src/hooks/useEssay.ts b/packages/plugins/Pets/src/hooks/useEssay.ts index e2181e5177c..c11b92c257a 100644 --- a/packages/plugins/Pets/src/hooks/useEssay.ts +++ b/packages/plugins/Pets/src/hooks/useEssay.ts @@ -1,5 +1,5 @@ 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' @@ -7,8 +7,8 @@ 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('pet') @@ -17,9 +17,7 @@ export function useEssay(user: User, refresh?: number) { result = await rss3Storage.get('_pet') } return result?.essay.userId === user.userId ? result.essay : null - }, [user, refresh]) - - return value + }, [user.userId, user.address]) } export function useDefaultEssay(user: User) { diff --git a/packages/plugins/Pets/src/hooks/useUser.ts b/packages/plugins/Pets/src/hooks/useUser.ts index aa503a0d0cc..c816edd4d0a 100644 --- a/packages/plugins/Pets/src/hooks/useUser.ts +++ b/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,20 +19,20 @@ 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(userId)) ?? '' + const address = await storage.get(userId) return { userId, - address, + address: address ?? '', } } catch { return { @@ -40,6 +40,5 @@ export function useCurrentVisitingUser(flag?: number) { address: '', } } - }, [identity, flag, location.href]) - return user + }, [identity, location.href]) } diff --git a/packages/plugins/SwitchLogo/src/locales/en-US.json b/packages/plugins/SwitchLogo/src/locales/en-US.json index f4f5d64fb02..c9e163a939d 100644 --- a/packages/plugins/SwitchLogo/src/locales/en-US.json +++ b/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", diff --git a/packages/plugins/SwitchLogo/src/locales/zh-CN.json b/packages/plugins/SwitchLogo/src/locales/zh-CN.json index f2b00a13f23..2fb55e5a298 100644 --- a/packages/plugins/SwitchLogo/src/locales/zh-CN.json +++ b/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": "经典标志", diff --git a/packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx b/packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx index 9eaeecb77ee..89ce2243644 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx +++ b/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({