fix: mf-3301 respect to scoped domains (#8749)

packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx

@@ -41,6 +41,7 @@ import { usePersonasFromDB } from '../DataSource/usePersonasFromDB.js'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { currentPersonaIdentifier } from '../../../shared/legacy-settings/settings.js'
 import Services from '../../extension/service.js'
+import { ScopedDomainsContainer } from '@masknet/web3-hooks-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -113,6 +114,14 @@ const useStyles = makeStyles()((theme) => ({
 export interface ProfileTabContentProps extends withClasses<'text' | 'button' | 'root'> {}
 
 export function ProfileTabContent(props: ProfileTabContentProps) {
+    return (
+        <ScopedDomainsContainer.Provider>
+            <Content {...props} />
+        </ScopedDomainsContainer.Provider>
+    )
+}
+
+function Content(props: ProfileTabContentProps) {
     const { classes } = useStyles(undefined, { props })
 
     const { t } = useI18N()
@@ -152,6 +161,12 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     const [selectedAddress = first(socialAccounts)?.address, setSelectedAddress] = useState<string | undefined>()
 
     const selectedSocialAccount = socialAccounts.find((x) => isSameAddress(x.address, selectedAddress))
+    const { setPair } = ScopedDomainsContainer.useContainer()
+    useEffect(() => {
+        if (selectedSocialAccount?.address && selectedSocialAccount?.label) {
+            setPair(selectedSocialAccount.address, selectedSocialAccount.label)
+        }
+    }, [selectedSocialAccount?.address, selectedSocialAccount?.label])
 
     useEffect(() => {
         return MaskMessages.events.ownProofChanged.on(() => {

packages/mask/src/components/InjectedComponents/SearchResultInspector.tsx

@@ -1,23 +1,24 @@
-import { useMemo } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { first } from 'lodash-es'
-import { Tab } from '@mui/material'
-import { TabContext } from '@mui/lab'
-import type { Web3Helper } from '@masknet/web3-helpers'
-import type { SearchResult, SocialIdentity } from '@masknet/web3-shared-base'
-import { EMPTY_LIST, PluginID } from '@masknet/shared-base'
-import { DSearch } from '@masknet/web3-providers'
-import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
 import {
     getSearchResultContent,
     getSearchResultTabContent,
     getSearchResultTabs,
-    usePluginI18NField,
     useActivatedPluginsSNSAdaptor,
+    usePluginI18NField,
 } from '@masknet/plugin-infra/content-script'
-import { useSearchedKeyword } from '../DataSource/useSearchedKeyword.js'
+import { EMPTY_LIST, PluginID } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
+import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import { ScopedDomainsContainer } from '@masknet/web3-hooks-base'
+import { DSearch } from '@masknet/web3-providers'
+import type { SearchResult, SocialIdentity } from '@masknet/web3-shared-base'
+import { TabContext } from '@mui/lab'
+import { Tab } from '@mui/material'
+import { first } from 'lodash-es'
+import { useMemo } from 'react'
+import { useAsyncRetry } from 'react-use'
 import { decentralizedSearchSettings } from '../../../shared/legacy-settings/settings.js'
+import { useSearchedKeyword } from '../DataSource/useSearchedKeyword.js'
 
 const useStyles = makeStyles()(() => ({
     contentWrapper: {
@@ -91,21 +92,23 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
 
     return (
         <div className={classes.root}>
-            <div className={classes.contentWrapper}>
-                <div className={classes.content}>{contentComponent}</div>
-                {tabs.length ? (
-                    <div className={classes.tabs}>
-                        <TabContext value={currentTab}>
-                            <MaskTabList variant="base" onChange={onChange} aria-label="Web3Tabs">
-                                {tabs.map((tab) => (
-                                    <Tab key={tab.id} label={tab.label} value={tab.id} />
-                                ))}
-                            </MaskTabList>
-                        </TabContext>
-                    </div>
-                ) : null}
-            </div>
-            {tabContentComponent ? <div className={classes.tabContent}>{tabContentComponent}</div> : null}
+            <ScopedDomainsContainer.Provider>
+                <div className={classes.contentWrapper}>
+                    <div className={classes.content}>{contentComponent}</div>
+                    {tabs.length ? (
+                        <div className={classes.tabs}>
+                            <TabContext value={currentTab}>
+                                <MaskTabList variant="base" onChange={onChange} aria-label="Web3Tabs">
+                                    {tabs.map((tab) => (
+                                        <Tab key={tab.id} label={tab.label} value={tab.id} />
+                                    ))}
+                                </MaskTabList>
+                            </TabContext>
+                        </div>
+                    ) : null}
+                </div>
+                {tabContentComponent ? <div className={classes.tabContent}>{tabContentComponent}</div> : null}
+            </ScopedDomainsContainer.Provider>
         </div>
     )
 }

packages/plugins/Handle/src/SNSAdaptor/SearchResultInspector.tsx

@@ -1,8 +1,8 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { useCopyToClipboard } from 'react-use'
 import { resolveNextIDPlatformLink } from '@masknet/web3-shared-base'
-import { useWeb3State } from '@masknet/web3-hooks-base'
+import { ScopedDomainsContainer, useWeb3State } from '@masknet/web3-hooks-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useSnackbarCallback } from '@masknet/shared'
 import { Box, Typography, Link, alpha } from '@mui/material'
@@ -116,6 +116,13 @@ export function SearchResultInspectorContent() {
     const isShowSocialAccountList = nextIdBindings.length > 3
     const suffix = domain.split('.').pop()!
     const ChainIcon = SuffixToChainIconMap[suffix] ?? Icons.ETH
+
+    const { setPair } = ScopedDomainsContainer.useContainer()
+    useEffect(() => {
+        if (!reversedAddress) return
+        setPair(reversedAddress, domain)
+    }, [reversedAddress, domain])
+
     return (
         <>
             <PluginHeader />

packages/plugins/RSS3/src/SNSAdaptor/FeedsPage.tsx

@@ -3,7 +3,7 @@ import { range } from 'lodash-es'
 import { Icons } from '@masknet/icons'
 import { ElementAnchor } from '@masknet/shared'
 import { LoadingBase, makeStyles } from '@masknet/theme'
-import { useReverseAddress, useWeb3State } from '@masknet/web3-hooks-base'
+import { ScopedDomainsContainer, useReverseAddress, useWeb3State } from '@masknet/web3-hooks-base'
 import type { RSS3BaseAPI } from '@masknet/web3-providers/types'
 import { Box, Skeleton, Typography } from '@mui/material'
 import { useI18N } from '../locales/index.js'
@@ -37,10 +37,12 @@ export const FeedsPage = memo(function FeedsPage({ address, tag }: FeedPageProps
 
     const { feeds, loading: loadingFeeds, next } = useFeeds(address, tag)
 
-    const { value: name, loading: loadingENS } = useReverseAddress(undefined, address)
+    const { value: reversedName, loading: loadingENS } = useReverseAddress(undefined, address)
+    const { getDomain } = ScopedDomainsContainer.useContainer()
 
     const loading = loadingFeeds || loadingENS
 
+    const name = address ? getDomain(address) || reversedName : reversedName
     const feedOwner = useMemo((): FeedOwnerOptions | undefined => {
         if (!address) return
         const showDomain = !!name && !!Others?.formatDomainName

packages/plugins/RSS3/src/SNSAdaptor/hooks/useAddressLabel.ts

@@ -1,10 +1,11 @@
 import type { NetworkPluginID } from '@masknet/shared-base'
-import { useReverseAddress, useWeb3State } from '@masknet/web3-hooks-base'
+import { ScopedDomainsContainer, useReverseAddress, useWeb3State } from '@masknet/web3-hooks-base'
 
 export function useAddressLabel(address: string, pluginID?: NetworkPluginID): string {
     const { Others } = useWeb3State()
+    const { getDomain } = ScopedDomainsContainer.useContainer()
 
     const { value } = useReverseAddress(pluginID, address)
-    const label = value ?? Others?.formatAddress(address, 4) ?? address
+    const label = getDomain(address) || value || Others?.formatAddress(address, 4) || address
     return label
 }

packages/web3-hooks/base/package.json

@@ -11,8 +11,8 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@masknet/shared-base": "workspace:^",
     "@masknet/plugin-infra": "workspace:^",
+    "@masknet/shared-base": "workspace:^",
     "@masknet/web3-helpers": "workspace:^",
     "@masknet/web3-providers": "workspace:^",
     "@masknet/web3-shared-base": "workspace:^",
@@ -25,6 +25,7 @@
     "ethereum-blockies": "^0.1.1",
     "lru-cache": "^7.10.1",
     "react-use": "^17.4.0",
+    "unstated-next": "^1.1.0",
     "use-subscription": "^1.8.0",
     "web3": "1.8.0"
   }

packages/web3-hooks/base/src/ScopedDomains/index.tsx

@@ -0,0 +1,26 @@
+import { createContainer } from 'unstated-next'
+import { useCallback, useState } from 'react'
+
+function useMap() {
+    const [map, setMap] = useState<Record<string, string>>({})
+
+    const setPair = useCallback((address: string, domain: string) => {
+        setMap((map) => {
+            const key = address.toLowerCase()
+            if (map[key] === domain) return map
+            return { ...map, [key]: domain }
+        })
+    }, [])
+    const getDomain = useCallback(
+        (address: string) => {
+            return map[address.toLowerCase()]
+        },
+        [map],
+    )
+
+    return { setPair, getDomain }
+}
+
+export const ScopedDomainsContainer = createContainer(useMap)
+
+ScopedDomainsContainer.Provider.displayName = 'ScopedDomainsContainer.Provider'

packages/web3-hooks/base/src/index.ts

@@ -97,3 +97,4 @@ export * from './useWeb3State.js'
 export * from './useWeb3UI.js'
 export * from './useZeroAddress.js'
 export * from './usePageableAsync.js'
+export * from './ScopedDomains/index.js'