feat: mf-6648 refine tag render (#12181)

swkatmask · web-flow · commit d13a052d6904 · 2025-04-07T14:04:40.000+08:00
* feat: mf-6648 refine tag render

* refactor: depreate enhanceTag

* feat: search joined name
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx b/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx
@@ -2,7 +2,6 @@ import { useActivatedPluginsSiteAdaptor } from '@masknet/plugin-infra/content-sc
 import type { RenderFragmentsContextType } from '@masknet/typed-message-react'
 import { Link } from '@mui/material'
 import { memo } from 'react'
-import { useTagEnhancer } from '../../../../shared-ui/TypedMessageRender/Components/Text.js'
 
 /**
  * For images that are rendered at the end of the post (parsed by postImagesParser), hide it in the render fragment so it won't render twice.
@@ -11,23 +10,31 @@ export const IMAGE_RENDER_IGNORE = 'IMAGE_RENDER_IGNORE'
 export const TwitterRenderFragments: RenderFragmentsContextType = {
     AtLink: memo(function (props) {
         const target = '/' + props.children.slice(1)
-        return <Link href={target} children={props.children} fontSize="inherit" />
+        const link = <Link href={target} children={props.children} fontSize="inherit" />
+        const MentionModifier = useActivatedPluginsSiteAdaptor(false).find((x) => x.MentionModifier)?.MentionModifier
+        if (!MentionModifier) return link
+        return <MentionModifier {...props} href={target} fallback={link} />
     }),
     HashLink: memo(function (props) {
         const text = props.children.slice(1)
         const target = `/hashtag/${encodeURIComponent(text)}?src=hashtag_click`
-        const { hasMatch, ...events } = useTagEnhancer('hash', text)
-        return (
-            <Link {...events} href={target} fontSize="inherit">
+        const link = (
+            <Link href={target} fontSize="inherit">
                 {props.children}
                 {props.suggestedPostImage}
             </Link>
         )
+        const TagModifier = useActivatedPluginsSiteAdaptor(false).find((x) => x.TagModifier)?.TagModifier
+        if (!TagModifier) return link
+
+        return <TagModifier {...props} href={target} fallback={link} />
     }),
     CashLink: memo(function (props) {
         const target = `/search?q=${encodeURIComponent(props.children)}&src=cashtag_click`
-        const { hasMatch, ...events } = useTagEnhancer('cash', props.children.slice(1))
-        return <Link {...events} href={target} children={props.children} fontSize="inherit" />
+        const link = <Link href={target} children={props.children} fontSize="inherit" />
+        const TagModifier = useActivatedPluginsSiteAdaptor(false).find((x) => x.TagModifier)?.TagModifier
+        if (!TagModifier) return link
+        return <TagModifier {...props} href={target} fallback={link} />
     }),
     Image: memo(function ImageFragment(props: RenderFragmentsContextType.ImageProps) {
         return props.width === 0 || props.meta?.get(IMAGE_RENDER_IGNORE) ?
diff --git a/packages/mask/shared-ui/initialization/storage.ts b/packages/mask/shared-ui/initialization/storage.ts
@@ -25,5 +25,3 @@ const indexedDB: KVStorageBackend = {
 }
 setupMaskKVStorageBackend(indexedDB, memory)
 setupLegacySettingsAtNonBackground(Services.Settings.getLegacySettingsInitialValue)
-
-indexedDB
diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts
@@ -265,17 +265,31 @@ export namespace Plugin.SiteAdaptor {
         /** This UI will be rendered as plugin wrapper page */
         wrapperProps?: PluginWrapperProps
         /**
+         * @deprecated use TagModifier instead.
          * A hook for if this plugin can enhance the #hash or $cash tag.
          */
         enhanceTag?: {
             onClick?: (kind: 'cash' | 'hash', content: string, event: React.MouseEvent<HTMLAnchorElement>) => void
             onHover?: (kind: 'cash' | 'hash', content: string, event: React.MouseEvent<HTMLAnchorElement>) => () => void
         }
+        /** Modifier for the #hash or $cash tag. */
+        TagModifier?: React.ComponentType<{
+            children: string
+            style?: React.CSSProperties
+            href: string
+            fallback?: React.ReactNode
+        }>
         TextModifier?: React.ComponentType<{
             children: string
             style?: React.CSSProperties
             fallback?: React.ReactNode
         }>
+        MentionModifier?: React.ComponentType<{
+            children: string
+            style?: React.CSSProperties
+            href: string
+            fallback?: React.ReactNode
+        }>
         LinkModifier?: React.ComponentType<{
             children: string
             style?: React.CSSProperties
diff --git a/packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx b/packages/plugins/Trader/src/SiteAdaptor/cashTag.tsx
diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/MentionModifier.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/MentionModifier.tsx
@@ -0,0 +1,75 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { PluginTraderMessages } from '@masknet/plugin-trader'
+import { makeStyles } from '@masknet/theme'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import { DSearch } from '@masknet/web3-providers'
+import { TrendingAPI } from '@masknet/web3-providers/types'
+import { SearchResultType, type FungibleTokenResult, type NonFungibleCollectionResult } from '@masknet/web3-shared-base'
+import { Link } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
+import { memo, useRef } from 'react'
+
+const useStyles = makeStyles()(() => ({
+    tag: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        verticalAlign: 'bottom',
+    },
+    icon: {
+        cursor: 'pointer',
+        lineHeight: '16px',
+        width: 16,
+        height: 16,
+        borderRadius: 16,
+        overflow: 'hidden',
+        objectFit: 'cover',
+    },
+}))
+
+type TagSearchResult =
+    | FungibleTokenResult<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
+    | NonFungibleCollectionResult<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
+
+export const MentionModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['MentionModifier']>>(
+    function MentionModifier({ children, href }) {
+        const { classes } = useStyles()
+        const { data } = useQuery({
+            queryKey: ['mention', children],
+            queryFn: async () => {
+                return DSearch.search<TagSearchResult>(
+                    children.slice(1),
+                    SearchResultType.CollectionListByTwitterHandle,
+                )
+            },
+        })
+        const timerRef = useRef<NodeJS.Timeout>(undefined)
+        if (data?.length) {
+            return (
+                <span
+                    className={classes.tag}
+                    onMouseEnter={(event) => {
+                        const element = event.currentTarget
+                        timerRef.current = setTimeout(() => {
+                            PluginTraderMessages.trendingAnchorObserved.sendToLocal({
+                                name: children.slice(1),
+                                type: children.startsWith('#') ? TrendingAPI.TagType.HASH : TrendingAPI.TagType.CASH,
+                                anchorBounding: element.getBoundingClientRect(),
+                                anchorEl: element,
+                                isCollectionProjectPopper: true,
+                            })
+                        }, 300)
+                    }}
+                    onMouseLeave={() => {
+                        clearTimeout(timerRef.current)
+                    }}>
+                    <img width={16} height={16} className={classes.icon} src={data[0].logoURL} />
+                    <Link fontSize="inherit" href={href}>
+                        {children}
+                    </Link>
+                </span>
+            )
+        }
+        return children
+    },
+)
diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx
@@ -0,0 +1,72 @@
+import { memo, useRef } from 'react'
+import type { Plugin } from '@masknet/plugin-infra'
+import { useQuery } from '@tanstack/react-query'
+import { DSearch } from '@masknet/web3-providers'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import type { FungibleTokenResult, NonFungibleCollectionResult } from '@masknet/web3-shared-base'
+import { makeStyles } from '@masknet/theme'
+import { PluginTraderMessages } from '@masknet/plugin-trader'
+import { TrendingAPI } from '@masknet/web3-providers/types'
+import { Link } from '@mui/material'
+
+const useStyles = makeStyles()(() => ({
+    tag: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        verticalAlign: 'bottom',
+    },
+    icon: {
+        cursor: 'pointer',
+        lineHeight: '16px',
+        width: 16,
+        height: 16,
+        borderRadius: 16,
+        overflow: 'hidden',
+        objectFit: 'cover',
+    },
+}))
+
+type TagSearchResult =
+    | FungibleTokenResult<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
+    | NonFungibleCollectionResult<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
+
+export const TagModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['TagModifier']>>(function TagModifier({
+    children,
+    href,
+}) {
+    const { classes } = useStyles()
+    const { data } = useQuery({
+        queryKey: ['tag', children],
+        queryFn: async () => {
+            return DSearch.search<TagSearchResult>(children)
+        },
+    })
+    const timerRef = useRef<NodeJS.Timeout>(undefined)
+    if (data?.length) {
+        return (
+            <span
+                className={classes.tag}
+                onMouseEnter={(event) => {
+                    const element = event.currentTarget
+                    timerRef.current = setTimeout(() => {
+                        PluginTraderMessages.trendingAnchorObserved.sendToLocal({
+                            name: children.slice(1),
+                            type: children.startsWith('#') ? TrendingAPI.TagType.HASH : TrendingAPI.TagType.CASH,
+                            anchorBounding: element.getBoundingClientRect(),
+                            anchorEl: element,
+                        })
+                    }, 300)
+                }}
+                onMouseLeave={() => {
+                    clearTimeout(timerRef.current)
+                }}>
+                <img width={16} height={16} className={classes.icon} src={data[0].logoURL} />
+                <Link fontSize="inherit" href={href}>
+                    {children}
+                </Link>
+            </span>
+        )
+    }
+    return children
+})
diff --git a/packages/plugins/Trader/src/SiteAdaptor/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/index.tsx
@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import type { Plugin } from '@masknet/plugin-infra'
 import { ApplicationEntry } from '@masknet/shared'
@@ -9,13 +10,13 @@ import { SearchResultType } from '@masknet/web3-shared-base'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { base } from '../base.js'
-import { enhanceTag } from './cashTag.js'
+import { TagModifier } from './components/TagModifier.js'
 import { setupStorage, type StorageOptions } from './storage.js'
 import { ExchangeInjection } from './trader/ExchangeInjection.js'
 import { TrendingViewProvider } from './trending/context.js'
 import { TagInspector } from './trending/TagInspector.js'
 import { TrendingView } from './trending/TrendingView.js'
-import { Trans } from '@lingui/react/macro'
+import { MentionModifier } from './components/MentionModifier.js'
 
 function openDialog() {
     return CrossIsolationMessages.events.swapDialogEvent.sendToLocal({
@@ -70,7 +71,8 @@ const site: Plugin.SiteAdaptor.Definition = {
             </>
         )
     },
-    enhanceTag,
+    TagModifier,
+    MentionModifier,
     ApplicationEntries:
         // temporarily disabled
         process.env.MASK_ENABLE_EXCHANGE ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingPopper.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingPopper.tsx
@@ -62,10 +62,10 @@ export const TrendingPopper = memo(function TrendingPopper({ children, locked }:
     const location = useLocation()
     useRenderPhraseCallbackOnDepsChange(() => setActive(false), [location.state?.key, location.href])
 
-    const badgeBoundingBottom = badgeBounding?.bottom ?? 0
-    const badgeBoundingLeft = badgeBounding?.left ?? 0
+    const badgeBoundingBottom = badgeBounding?.bottom || 0
+    const badgeBoundingLeft = badgeBounding?.left || 0
+    const badgeBoundingWidth = badgeBounding?.width || 0
     const positionY_Type = badgeBoundingBottom < 550 ? 'bottom' : 'top'
-    const positionX_Type = window.innerWidth - badgeBoundingLeft < 700 ? 'right' : 'left'
 
     if (!type) return null
 
@@ -78,7 +78,7 @@ export const TrendingPopper = memo(function TrendingPopper({ children, locked }:
                 <div
                     style={{
                         position: 'absolute',
-                        left: positionX_Type === 'left' ? badgeBoundingLeft - 20 : badgeBoundingLeft - 300,
+                        left: badgeBoundingLeft - 300 + badgeBoundingWidth / 2,
                         ...(positionY_Type === 'bottom' ?
                             { top: badgeBoundingBottom + initialOffsetY + 10 }
                         :   { bottom: window.innerHeight - badgeBoundingBottom + 10 - initialOffsetY }),
diff --git a/packages/plugins/Trader/src/messages.ts b/packages/plugins/Trader/src/messages.ts
@@ -1,13 +1,12 @@
 import { getPluginMessage, getPluginRPC, type PluginMessageEmitter } from '@masknet/plugin-infra'
-import type { GasConfig } from '@masknet/web3-shared-evm'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import type { SocialIdentity } from '@masknet/shared-base'
 import { PLUGIN_ID } from './constants/index.js'
 import type { TagType } from './types/index.js'
 
 interface TrendingAnchorEvent {
     name: string
-    type: TagType
+    type?: TagType
     anchorBounding: DOMRect
     anchorEl: HTMLElement | null
     address?: string
@@ -16,22 +15,13 @@ interface TrendingAnchorEvent {
     currentResult?: Web3Helper.TokenResultAll
 }
 
-interface SwapSettingsEvent {
-    open: boolean
-    gasConfig?: GasConfig
-}
-
 export interface TraderMessage {
     /**
+     * TODO Get rid of this, just put popper alongside the triggers, the tags.
      * View a cash tag
      */
     trendingAnchorObserved: TrendingAnchorEvent
 
-    /**
-     * Swap settings dialog
-     */
-    swapSettingsUpdated: SwapSettingsEvent
-
     rpc: unknown
 }
 
diff --git a/packages/web3-providers/src/DSearch/helpers.ts b/packages/web3-providers/src/DSearch/helpers.ts
@@ -4,6 +4,6 @@ import { fetchCachedJSON } from '../helpers/fetchJSON.js'
 export function fetchFromDSearch<T>(request: RequestInfo | URL, init?: RequestInit) {
     return fetchCachedJSON<T>(request, init, {
         squashExpiration: 0,
-        cacheDuration: Duration.THIRTY_MINUTES,
+        cacheDuration: Duration.ONE_DAY,
     })
 }
diff --git a/packages/web3-providers/src/DSearch/index.ts b/packages/web3-providers/src/DSearch/index.ts
diff --git a/packages/web3-shared/base/src/specs/index.ts b/packages/web3-shared/base/src/specs/index.ts

Original file line number	Diff line number	Diff line change
`@@ -25,5 +25,3 @@ const indexedDB: KVStorageBackend = {`
`25`	`25`	`}`
`26`	`26`	`setupMaskKVStorageBackend(indexedDB, memory)`
`27`	`27`	`setupLegacySettingsAtNonBackground(Services.Settings.getLegacySettingsInitialValue)`
`28`		`-`
`29`		`-indexedDB`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@ import { fetchCachedJSON } from '../helpers/fetchJSON.js'`
`4`	`4`	`export function fetchFromDSearch<T>(request: RequestInfo \| URL, init?: RequestInit) {`
`5`	`5`	`return fetchCachedJSON<T>(request, init, {`
`6`	`6`	`squashExpiration: 0,`
`7`		`- cacheDuration: Duration.THIRTY_MINUTES,`
	`7`	`+ cacheDuration: Duration.ONE_DAY,`
`8`	`8`	`})`
`9`	`9`	`}`