fix: recovery normal style when user doesn't have an NFT avatar

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

@@ -4,7 +4,6 @@ import Link from '@mui/material/Link'
 import BigNumber from 'bignumber.js'
 import { useNFT } from '../hooks'
 import { useNFTVerified } from '../hooks/useNFTVerified'
-import { useUserOwnerAddress } from '../hooks/useUserOwnerAddress'
 import type { AvatarMetaDB } from '../types'
 import { NFTAvatarRing } from './NFTAvatarRing'
 
@@ -40,17 +39,16 @@ function formatText(symbol: string, length: number) {
 }
 
 export function NFTBadge(props: NFTBadgeProps) {
-    const { avatar, size = 140, width = 15 } = props
+    const { avatar, size = 140 } = props
     const classes = useStylesExtends(useStyles(), props)
 
     const { value = { amount: '0', symbol: 'ETH', name: '', owner: '' }, loading } = useNFT(
         avatar.address,
         avatar.tokenId,
     )
 
-    const address = useUserOwnerAddress(avatar.userId)
-    const { amount, symbol, name, owner } = value
-    const { loading: loadingNFTVerified, value: NFTVerified } = useNFTVerified(avatar.address)
+    const { amount, symbol, name } = value
+    const { loading: loadingNFTVerified } = useNFTVerified(avatar.address)
 
     return (
         <div

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

@@ -3,17 +3,17 @@ import { searchTwitterAvatarLinkSelector, searchTwitterAvatarSelector } from '..
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { makeStyles } from '@masknet/theme'
 import { useState, useEffect, useMemo, useRef } from 'react'
-
 import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI'
-import { useWallet } from '@masknet/web3-shared-evm'
+import { resolveOpenSeaLink, useWallet } from '@masknet/web3-shared-evm'
 import type { AvatarMetaDB } from '../../../../plugins/Avatar/types'
 import { useNFTAvatar } from '../../../../plugins/Avatar/hooks'
 import { getAvatarId } from '../../utils/user'
 import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages'
 import { NFTBadge } from '../../../../plugins/Avatar/SNSAdaptor/NFTBadge'
 import { NFTAvatar } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatar'
-import { useMount, useUpdateEffect, useWindowSize } from 'react-use'
+import { useAsync, useLocation, useUpdateEffect, useWindowSize } from 'react-use'
 import { rainbowBorderKeyFrames } from '../../../../plugins/Avatar/SNSAdaptor/RainbowBox'
+import { trim } from 'lodash-unified'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -42,12 +42,18 @@ const useStyles = makeStyles()(() => ({
 
 function NFTAvatarInTwitter() {
     const rainBowElement = useRef<Element | null>()
+    const borderElement = useRef<Element | null>()
     const identity = useCurrentVisitingIdentity()
     const wallet = useWallet()
     const { value: _avatar } = useNFTAvatar(identity.identifier.userId)
     const [avatar, setAvatar] = useState<AvatarMetaDB | undefined>()
-
     const windowSize = useWindowSize()
+    const location = useLocation()
+
+    const showAvatar = useMemo(
+        () => getAvatarId(identity.avatar ?? '') === avatar?.avatarId && avatar.avatarId,
+        [avatar?.avatarId, identity.avatar],
+    )
 
     const size = useMemo(() => {
         const ele = searchTwitterAvatarSelector().evaluate()
@@ -65,7 +71,7 @@ function NFTAvatarInTwitter() {
         setNFTEvent(data)
     }
 
-    useEffect(() => {
+    useAsync(async () => {
         if (!wallet || !NFTAvatar) return
 
         if (!NFTEvent?.address || !NFTEvent?.tokenId) {
@@ -79,20 +85,21 @@ function NFTAvatarInTwitter() {
             return
         }
 
-        PluginNFTAvatarRPC.saveNFTAvatar(wallet.address, {
+        const avatar = await PluginNFTAvatarRPC.saveNFTAvatar(wallet.address, {
             ...NFTEvent,
             avatarId: getAvatarId(identity.avatar ?? ''),
-        } as AvatarMetaDB).then((avatar: AvatarMetaDB | undefined) => {
-            setAvatar(avatar)
-            MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll(
-                avatar ?? {
-                    userId: identity.identifier.userId,
-                    avatarId: getAvatarId(identity.avatar ?? ''),
-                    address: '',
-                    tokenId: '',
-                },
-            )
-        })
+        } as AvatarMetaDB)
+
+        setAvatar(avatar)
+        MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll(
+            avatar ?? {
+                userId: identity.identifier.userId,
+                avatarId: getAvatarId(identity.avatar ?? ''),
+                address: '',
+                tokenId: '',
+            },
+        )
+
         setNFTEvent(undefined)
     }, [identity.avatar])
 
@@ -104,19 +111,20 @@ function NFTAvatarInTwitter() {
         return MaskMessages.events.NFTAvatarUpdated.on((data) => onUpdate(data))
     }, [onUpdate])
 
-    useMount(() => {
+    useEffect(() => {
         const linkDom = searchTwitterAvatarLinkSelector().evaluate()
 
         if (linkDom?.firstElementChild && linkDom.childNodes.length === 4) {
             const linkParentDom = linkDom.closest('div')
 
             if (linkParentDom) linkParentDom.style.overflow = 'visible'
 
-            // remove useless border
-            linkDom.removeChild(linkDom.firstElementChild)
-
             // create rainbow shadow border
-            if (linkDom.firstElementChild.tagName !== 'style') {
+            if (linkDom.lastElementChild?.tagName !== 'STYLE') {
+                borderElement.current = linkDom.firstElementChild
+
+                // remove useless border
+                linkDom.removeChild(linkDom.firstElementChild)
                 const style = document.createElement('style')
                 style.innerText = `
                 ${rainbowBorderKeyFrames.styles}
@@ -129,25 +137,61 @@ function NFTAvatarInTwitter() {
                 }
             `
                 rainBowElement.current = linkDom.firstElementChild
-                linkDom.firstElementChild.classList.add('rainbowBorder')
-                linkDom.insertBefore(style, linkDom.firstChild)
+                if (showAvatar) linkDom.firstElementChild.classList.add('rainbowBorder')
+                linkDom.appendChild(style)
             }
         }
-    })
+    }, [location.pathname])
+
+    useEffect(() => {
+        const linkDom = searchTwitterAvatarLinkSelector().evaluate()
+        if (showAvatar) {
+            if (borderElement.current && linkDom?.firstElementChild === borderElement.current) {
+                linkDom?.removeChild(linkDom.firstElementChild)
+            }
 
-    useUpdateEffect(() => {
-        if (!avatar) {
-            rainBowElement.current?.classList.remove('rainbowBorder')
-        } else {
             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')
+        }
+    }, [showAvatar])
+
+    useUpdateEffect(() => {
+        if (
+            location.pathname &&
+            location.pathname.split('/').length === 2 &&
+            trim(location.pathname, '/') !== identity.identifier.userId
+        ) {
+            setAvatar(undefined)
+        }
+    }, [location, identity])
+
+    useUpdateEffect(() => {
+        const linkParentDom = searchTwitterAvatarLinkSelector().evaluate()?.closest('div')
+
+        if (!avatar || !linkParentDom) return
+
+        const handler = () => {
+            window.open(resolveOpenSeaLink(avatar.address, avatar.tokenId), '_blank')
+        }
+
+        linkParentDom.addEventListener('click', handler)
+
+        return () => {
+            linkParentDom.removeEventListener('click', handler)
         }
     }, [avatar])
 
     if (!avatar || !size) return null
 
     return (
         <>
-            {getAvatarId(identity.avatar ?? '') === avatar.avatarId && avatar.avatarId ? (
+            {showAvatar ? (
                 <NFTBadge
                     avatar={avatar}
                     size={size}