fix: show double border in nft avatar

packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx

@@ -31,6 +31,7 @@ interface StyleProps {
 }
 const useStyles = makeStyles<StyleProps>()((theme, { width, height, radius = '100%' }) => ({
     root: {
+        transform: 'scale(0.97)',
         animation: `${rainbowBorderKeyFrames} 6s linear infinite`,
         width,
         height,

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

@@ -1,7 +1,7 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { makeStyles } from '@masknet/theme'
 import { isZero } from '@masknet/web3-shared-base'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useLocation, useWindowSize } from 'react-use'
 import { NFTAvatarClip } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatarClip'
 import { createReactRootShadowed, startWatch } from '../../../../utils'
@@ -29,6 +29,7 @@ function NFTAvatarClipInTwitter() {
     const { classes } = useStyles()
     const windowSize = useWindowSize()
     const location = useLocation()
+    const borderElement = useRef<Element | null>()
 
     const size = useMemo(() => {
         const ele = searchTwitterAvatarNFTSelector().evaluate()
@@ -47,13 +48,21 @@ function NFTAvatarClipInTwitter() {
     }, [location])
 
     useEffect(() => {
-        const link = searchTwitterAvatarNFTLinkSelector().evaluate()?.firstChild as HTMLElement
-        if (!link) return
-        link.style.width = ''
-        link.style.height = ''
+        const linkDom = searchTwitterAvatarNFTLinkSelector().evaluate()
+        if (linkDom?.firstElementChild && linkDom.childNodes.length === 4) {
+            borderElement.current = linkDom.firstElementChild
+            // remove useless border
+            linkDom.removeChild(linkDom.firstElementChild)
+        }
+
+        const first = linkDom?.firstChild as HTMLDivElement
+        first.style.width = ''
+        first.style.height = ''
+
         return () => {
-            link.style.height = 'calc(100% - 4px)'
-            link.style.width = 'calc(100% - 4px)'
+            if (borderElement.current && borderElement.current !== linkDom?.firstElementChild) {
+                linkDom?.insertBefore(borderElement.current, linkDom.firstChild)
+            }
         }
     }, [location])
 

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

@@ -29,6 +29,10 @@ const useStyles = makeStyles()(() => ({
         zIndex: 2,
         width: '100%',
         height: '100%',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
     },
     text: {
         fontSize: '20px !important',
@@ -128,6 +132,7 @@ function NFTAvatarInTwitter() {
     }, [onUpdate])
 
     useEffect(() => {
+        if (!showAvatar) return
         const linkDom = searchTwitterAvatarLinkSelector().evaluate()
 
         if (linkDom?.firstElementChild && linkDom.childNodes.length === 4) {
@@ -157,25 +162,18 @@ function NFTAvatarInTwitter() {
                 linkDom.appendChild(style)
             }
         }
-    }, [location.pathname])
 
-    useEffect(() => {
-        const linkDom = searchTwitterAvatarLinkSelector().evaluate()
-        if (showAvatar) {
-            if (borderElement.current && linkDom?.firstElementChild === borderElement.current) {
-                linkDom?.removeChild(linkDom.firstElementChild)
+        return () => {
+            if (linkDom?.lastElementChild?.tagName === 'STYLE') {
+                linkDom.removeChild(linkDom.lastElementChild)
             }
 
-            rainBowElement.current?.classList.add('rainbowBorder')
-        } else {
-            // recovery Twitter profile avatar style
             if (borderElement.current && linkDom?.firstElementChild !== borderElement.current) {
                 linkDom?.insertBefore(borderElement.current, linkDom.firstChild)
+                rainBowElement.current?.classList.remove('rainbowBorder')
             }
-
-            rainBowElement.current?.classList.remove('rainbowBorder')
         }
-    }, [showAvatar])
+    }, [location.pathname, showAvatar])
 
     useUpdateEffect(() => {
         if (

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

@@ -52,9 +52,7 @@ export const searchNewTweetButtonSelector: () => LiveSelector<E, true> = () => {
 export const searchNickNameSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[data-testid="UserProfileHeader_Items"]')
 export const searchAvatarSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>(
-        '[data-testid="primaryColumn"] a[role="link"][href$="/header_photo"] + [class] img[src*="profile_images"]',
-    )
+    querySelector<E>('[data-testid="primaryColumn"] a[href$="/photo"] img[src*="profile_images"]')
 export const searchAvatarMetaSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('head > meta[property="og:image"]:last-child')