From 5747f14ce834863e6fbece37b68e0298952d6cb5 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Mon, 27 Dec 2021 21:51:23 +0800
Subject: [PATCH] fix: hidden rainbow when nft avatar isn't exist

---
 .../Avatar/SNSAdaptor/NFTAvatarRing.tsx       | 34 +-------------
 .../injection/NFT/NFTAvatarInTwitter.tsx      | 47 +++++++++++++++++--
 2 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
index 360faf38bc08..bd20c64ce021 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
@@ -1,7 +1,5 @@
 import { makeStyles } from '@masknet/theme'
-import { rainbowBorderKeyFrames, RainbowBox } from './RainbowBox'
-import { useMount } from 'react-use'
-import { searchTwitterAvatarLinkSelector } from '../../../social-network-adaptor/twitter.com/utils/selector'
+import { RainbowBox } from './RainbowBox'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -28,36 +26,6 @@ export function NFTAvatarRing(props: NFTAvatarRingProps) {
     const y1 = R + Math.sqrt(Math.pow(path_r, 2) - Math.pow(path_r / 2, 2))
     const x2 = R + path_r / 2
 
-    useMount(() => {
-        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') {
-                const style = document.createElement('style')
-                style.innerText = `
-                ${rainbowBorderKeyFrames.styles}
-
-                .rainbowBorder {
-                    animation: ${rainbowBorderKeyFrames.name} 6s linear infinite;
-                    box-shadow: 0 5px 15px rgba(0, 248, 255, 0.4), 0 10px 30px rgba(37, 41, 46, 0.2);
-                    transition: .125s ease;
-                    border: 2px solid #00f8ff;
-                }
-            `
-                linkDom.firstElementChild.classList.add('rainbowBorder')
-                linkDom.insertBefore(style, linkDom.firstChild)
-            }
-        }
-    })
-
     return (
         <RainbowBox>
             <svg
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
index e76385eadcd3..b47839b2006f 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
@@ -1,8 +1,8 @@
 import { createReactRootShadowed, MaskMessages, NFTAvatarEvent, startWatch } from '../../../../utils'
-import { searchTwitterAvatarSelector } from '../../utils/selector'
+import { searchTwitterAvatarLinkSelector, searchTwitterAvatarSelector } from '../../utils/selector'
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { makeStyles } from '@masknet/theme'
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 
 import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI'
 import { useWallet } from '@masknet/web3-shared-evm'
@@ -12,7 +12,8 @@ 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 { useWindowSize } from 'react-use'
+import { useMount, useUpdateEffect, useWindowSize } from 'react-use'
+import { rainbowBorderKeyFrames } from '../../../../plugins/Avatar/SNSAdaptor/RainbowBox'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -40,6 +41,7 @@ const useStyles = makeStyles()(() => ({
 }))
 
 function NFTAvatarInTwitter() {
+    const rainBowElement = useRef<Element | null>()
     const identity = useCurrentVisitingIdentity()
     const wallet = useWallet()
     const { value: _avatar } = useNFTAvatar(identity.identifier.userId)
@@ -102,6 +104,45 @@ function NFTAvatarInTwitter() {
         return MaskMessages.events.NFTAvatarUpdated.on((data) => onUpdate(data))
     }, [onUpdate])
 
+    useMount(() => {
+        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') {
+                const style = document.createElement('style')
+                style.innerText = `
+                ${rainbowBorderKeyFrames.styles}
+
+                .rainbowBorder {
+                    animation: ${rainbowBorderKeyFrames.name} 6s linear infinite;
+                    box-shadow: 0 5px 15px rgba(0, 248, 255, 0.4), 0 10px 30px rgba(37, 41, 46, 0.2);
+                    transition: .125s ease;
+                    border: 2px solid #00f8ff;
+                }
+            `
+                rainBowElement.current = linkDom.firstElementChild
+                linkDom.firstElementChild.classList.add('rainbowBorder')
+                linkDom.insertBefore(style, linkDom.firstChild)
+            }
+        }
+    })
+
+    useUpdateEffect(() => {
+        if (!avatar) {
+            rainBowElement.current?.classList.remove('rainbowBorder')
+        } else {
+            rainBowElement.current?.classList.add('rainbowBorder')
+        }
+    }, [avatar])
+
     if (!avatar || !size) return null
 
     return (