fix(ui): the web3 tab abnormal style

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

@@ -1,6 +1,7 @@
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
 
 const PluginRenderer = createInjectHooksRenderer(useActivatedPluginsSNSAdaptor, (x) => x.SearchBoxComponent)
+
 export interface SearchResultBoxProps {}
 
 export function SearchResultBox(props: SearchResultBoxProps) {

packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfile.tsx

@@ -19,46 +19,48 @@ function injectEnhancedProfilePageState(signal: AbortSignal) {
     startWatch(watcher, signal)
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(<EnhancedProfilePageAtTwitter />)
 }
+
 export function injectEnhancedProfileAtTwitter(signal: AbortSignal) {
     injectEnhancedProfilePageForEmptyState(signal)
     injectEnhancedProfilePageState(signal)
 }
 
-const EMPTY_STYLE = {} as CSSStyleDeclaration
-interface StyleProps {
-    backgroundColor: string
-    fontFamily: string
+function getStyleProps() {
+    const newTweetButton = searchNewTweetButtonSelector().evaluate()
+    return {
+        backgroundColor: newTweetButton ? window.getComputedStyle(newTweetButton).backgroundColor : undefined,
+        fontFamily: newTweetButton?.firstChild
+            ? window.getComputedStyle(newTweetButton.firstChild as HTMLElement).fontFamily
+            : undefined,
+    }
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, props) => ({
-    text: {
-        paddingTop: 29,
-        paddingBottom: 29,
-        '& > p': {
-            fontSize: 28,
-            fontFamily: props.fontFamily,
-            fontWeight: 700,
-            color: getMaskColor(theme).textPrimary,
+const useStyles = makeStyles()((theme) => {
+    const props = getStyleProps()
+
+    return {
+        text: {
+            paddingTop: 29,
+            paddingBottom: 29,
+            '& > p': {
+                fontSize: 28,
+                fontFamily: props.fontFamily,
+                fontWeight: 700,
+                color: getMaskColor(theme).textPrimary,
+            },
         },
-    },
-    button: {
-        backgroundColor: props.backgroundColor,
-        color: 'white',
-        marginTop: 18,
-        '&:hover': {
+        button: {
             backgroundColor: props.backgroundColor,
+            color: 'white',
+            marginTop: 18,
+            '&:hover': {
+                backgroundColor: props.backgroundColor,
+            },
         },
-    },
-}))
+    }
+})
 
 export function EnhancedProfilePageAtTwitter() {
-    const newTweetButton = searchNewTweetButtonSelector().evaluate()
-    const style = newTweetButton ? window.getComputedStyle(newTweetButton) : EMPTY_STYLE
-    const fontStyle = newTweetButton?.firstChild
-        ? window.getComputedStyle(newTweetButton.firstChild as HTMLElement)
-        : EMPTY_STYLE
-
-    const { classes } = useStyles({ backgroundColor: style.backgroundColor, fontFamily: fontStyle.fontFamily })
-
+    const { classes } = useStyles()
     return <EnhancedProfilePage classes={classes} />
 }

packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfileTab.tsx

@@ -1,3 +1,5 @@
+import Color from 'color'
+import { makeStyles } from '@masknet/theme'
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../utils'
 import {
@@ -9,70 +11,78 @@ import {
     searchProfileTabPageSelector,
     searchProfileTabSelector,
 } from '../utils/selector'
-import Color from 'color'
-import { makeStyles } from '@masknet/theme'
 import { EnhancedProfileTab } from '../../../plugins/Profile/SNSAdaptor/EnhancedProfileTab'
-import { useLocationChange } from '../../../utils/hooks/useLocationChange'
-import { useState } from 'react'
 
 export function injectEnhancedProfileTabAtTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector())
     startWatch(watcher, signal)
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(<EnhancedProfileTabAtTwitter />)
 }
 
-interface StyleProps {
-    color: string
-    font: string
-    fontSize: string
-    padding: string
-    height: string
-    hover: string
-    line: string
+function getStyleProps() {
+    const EMPTY_STYLE = {} as CSSStyleDeclaration
+    const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
+    const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE
+    const eleNewTweetButton = searchNewTweetButtonSelector().evaluate()
+    const newTweetButtonColorStyle = eleNewTweetButton ? window.getComputedStyle(eleNewTweetButton) : EMPTY_STYLE
+    const eleBackButton = searchAppBarBackSelector().evaluate()
+    const backButtonColorStyle = eleBackButton ? window.getComputedStyle(eleBackButton) : EMPTY_STYLE
+
+    return {
+        color: style.color,
+        font: style.font,
+        fontSize: style.fontSize,
+        padding: style.paddingBottom,
+        height: style.height,
+        hover: backButtonColorStyle.color,
+        line: newTweetButtonColorStyle.backgroundColor,
+    }
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, props) => ({
-    tab: {
-        '&:hover': {
-            backgroundColor: new Color(props.hover).alpha(0.1).toString(),
-            cursor: 'pointer',
+const useStyles = makeStyles()((theme) => {
+    const props = getStyleProps()
+
+    return {
+        tab: {
+            '&:hover': {
+                backgroundColor: new Color(props.hover).alpha(0.1).toString(),
+                cursor: 'pointer',
+            },
+            height: props.height,
         },
-        height: props.height,
-    },
-    button: {
-        zIndex: 1,
-        position: 'relative',
-        display: 'flex',
-        minWidth: 56,
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center',
-        padding: theme.spacing(0, props.padding),
-        color: props.color,
-        font: props.font,
-        fontSize: props.fontSize,
-        fontWeight: 500,
-        '&:hover': {
+        button: {
+            zIndex: 1,
+            position: 'relative',
+            display: 'flex',
+            minWidth: 56,
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center',
+            padding: theme.spacing(0, props.padding),
             color: props.color,
+            font: props.font,
+            fontSize: props.fontSize,
+            fontWeight: 500,
+            '&:hover': {
+                color: props.color,
+            },
+            height: props.height,
         },
-        height: props.height,
-    },
-    selected: {
-        color: `${props.hover} !important`,
-        fontWeight: 700,
-    },
-    line: {
-        borderRadius: 9999,
-        position: 'absolute',
-        bottom: 0,
-        minWidth: 56,
-        alignSelf: 'center',
-        height: 4,
-        backgroundColor: props.line,
-    },
-}))
-
-const EMPTY_STYLE = {} as CSSStyleDeclaration
+        selected: {
+            color: `${props.hover} !important`,
+            fontWeight: 700,
+        },
+        line: {
+            borderRadius: 9999,
+            position: 'absolute',
+            bottom: 0,
+            minWidth: 56,
+            alignSelf: 'center',
+            height: 4,
+            backgroundColor: props.line,
+        },
+    }
+})
 
 async function clear() {
     const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
@@ -113,33 +123,8 @@ function reset() {
     })
 }
 
-function getStyle() {
-    const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
-    const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE
-    const eleNewTweetButton = searchNewTweetButtonSelector().evaluate()
-    const newTweetButtonColorStyle = eleNewTweetButton ? window.getComputedStyle(eleNewTweetButton) : EMPTY_STYLE
-    const eleBackButton = searchAppBarBackSelector().evaluate()
-    const backButtonColorStyle = eleBackButton ? window.getComputedStyle(eleBackButton) : EMPTY_STYLE
-
-    return {
-        color: style.color,
-        font: style.font,
-        fontSize: style.fontSize,
-        padding: style.paddingBottom,
-        height: style.height,
-        hover: backButtonColorStyle.color,
-        line: newTweetButtonColorStyle.backgroundColor,
-    } as StyleProps
-}
-
 export function EnhancedProfileTabAtTwitter() {
-    const [style, setStyle] = useState<StyleProps>(getStyle())
-
-    const { classes } = useStyles(style)
-
-    useLocationChange(() => {
-        setStyle(getStyle())
-    })
+    const { classes } = useStyles()
 
     return (
         <EnhancedProfileTab

packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts

@@ -32,7 +32,7 @@ export const searchProfileTabListLastChildSelector: () => LiveSelector<E, true>
 }
 
 export const searchProfileTabPageSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>('[data-testid="primaryColumn"] [role="region"] [aria-label]')
+    querySelector<E>('[data-testid="primaryColumn"] [role="navigation"] ~ div [role="heading"] ~ div[aria-label]')
 export const searchProfileEmptySelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[data-testid="primaryColumn"] [data-testid="emptyState"]')
 export const searchProfileActiveTabSelector: () => LiveSelector<E, true> = () =>