From d6bd2b79909e0009358c335580912b80b7c893f7 Mon Sep 17 00:00:00 2001
From: lelenei <zwpsky@gmail.com>
Date: Mon, 14 Feb 2022 10:00:53 +0800
Subject: [PATCH] fix: remove rainbow border in svg

---
 .../Avatar/SNSAdaptor/NFTAvatarRing.tsx       | 119 ++++++++----------
 .../injection/NFT/NFTAvatarInTwitter.tsx      |  10 +-
 2 files changed, 58 insertions(+), 71 deletions(-)

diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
index e57002a35d68..bf078bfb030d 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from '@masknet/theme'
-import { RainbowBox } from './RainbowBox'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -27,75 +26,61 @@ export function NFTAvatarRing(props: NFTAvatarRingProps) {
     const y1 = R
     const x2 = R + path_r
     return (
-        <RainbowBox>
-            <svg
-                className={classes.root}
-                width="100%"
-                height="100%"
-                viewBox={`0 0 ${avatarSize} ${avatarSize}`}
-                id={id}>
-                <defs>
-                    <path
-                        id={`${id}-path-name`}
-                        fill="none"
-                        stroke="none"
-                        strokeWidth="0"
-                        d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 1 ${x2} ${y1}`}
-                    />
-                    <path
-                        id={`${id}-path-price`}
-                        fill="none"
-                        stroke="none"
-                        strokeWidth="0"
-                        d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 0 ${x2} ${y1}`}
-                    />
-                    <linearGradient id={`${id}-gradient`} x1="0%" y1="0%" x2="100%" y2="0">
-                        <stop offset="0%" stopColor="#00f8ff" />
-                        <stop offset="20%" stopColor="#a4ff00" />
-                        <stop offset="40%" stopColor="#f7275e" />
-                        <stop offset="60%" stopColor="#ffd300" />
-                        <stop offset="80%" stopColor="#ff8a00" />
-                        <stop offset="100%" stopColor="#00f8ff" />
-                    </linearGradient>
-                </defs>
-
-                <circle
-                    cx={R}
-                    cy={R}
-                    r={R - strokeWidth / 2 + 1}
+        <svg className={classes.root} width="100%" height="100%" viewBox={`0 0 ${avatarSize} ${avatarSize}`} id={id}>
+            <defs>
+                <path
+                    id={`${id}-path-name`}
                     fill="none"
-                    stroke={stroke}
-                    strokeWidth={strokeWidth}
+                    stroke="none"
+                    strokeWidth="0"
+                    d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 1 ${x2} ${y1}`}
                 />
-                <pattern id={`${id}-pattern`} x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
-                    <circle cx={R} cy={R} r={R} fill={`url(#${id}-gradient)`}>
-                        <animateTransform
-                            attributeName="transform"
-                            type="rotate"
-                            dur="10s"
-                            repeatCount="indefinite"
-                            from={`0 ${R} ${R}`}
-                            to={`360 ${R} ${R}`}
-                        />
-                    </circle>
-                </pattern>
+                <path
+                    id={`${id}-path-price`}
+                    fill="none"
+                    stroke="none"
+                    strokeWidth="0"
+                    d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 0 ${x2} ${y1}`}
+                />
+                <linearGradient id={`${id}-gradient`} x1="0%" y1="0%" x2="100%" y2="0">
+                    <stop offset="0%" stopColor="#00f8ff" />
+                    <stop offset="20%" stopColor="#a4ff00" />
+                    <stop offset="40%" stopColor="#f7275e" />
+                    <stop offset="60%" stopColor="#ffd300" />
+                    <stop offset="80%" stopColor="#ff8a00" />
+                    <stop offset="100%" stopColor="#00f8ff" />
+                </linearGradient>
+            </defs>
+
+            <circle cx={R} cy={R} r={R - strokeWidth / 2 + 1} fill="none" stroke={stroke} strokeWidth={strokeWidth} />
+            <pattern id={`${id}-pattern`} x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
+                <circle cx={R} cy={R} r={R} fill={`url(#${id}-gradient)`}>
+                    <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        dur="10s"
+                        repeatCount="indefinite"
+                        from={`0 ${R} ${R}`}
+                        to={`360 ${R} ${R}`}
+                    />
+                </circle>
+            </pattern>
 
-                <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
-                    <textPath xlinkHref={`#${id}-path-name`} startOffset="50%" rotate="auto">
-                        <tspan fontWeight="bold" fontSize={fontSize}>
-                            {text}
-                        </tspan>
-                    </textPath>
-                </text>
+            <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
+                <textPath xlinkHref={`#${id}-path-name`} startOffset="50%" rotate="auto">
+                    <tspan fontWeight="bold" fontSize={fontSize}>
+                        {text}
+                    </tspan>
+                </textPath>
+            </text>
 
-                <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
-                    <textPath xlinkHref={`#${id}-path-price`} startOffset="50%" rotate="auto">
-                        <tspan fontWeight="bold" fontSize={fontSize} dy="0.5em">
-                            {price}
-                        </tspan>
-                    </textPath>
-                </text>
-            </svg>
-        </RainbowBox>
+            <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
+                <textPath xlinkHref={`#${id}-path-price`} startOffset="50%" rotate="auto">
+                    <tspan fontWeight="bold" fontSize={fontSize} dy="0.5em">
+                        {price}
+                    </tspan>
+                </textPath>
+            </text>
+        </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 6274a9451929..fc34690f3159 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
@@ -23,14 +23,14 @@ export function injectNFTAvatarInTwitter(signal: AbortSignal) {
 
 const useStyles = makeStyles()(() => ({
     root: {
-        transform: 'scale(1.025)',
+        transform: 'scale(1.022)',
         position: 'absolute',
         textAlign: 'center',
         color: 'white',
         zIndex: 2,
         width: '100%',
         height: '100%',
-        top: 0,
+        top: 2,
         left: 0,
         right: 0,
         bottom: 0,
@@ -158,8 +158,8 @@ function NFTAvatarInTwitter() {
                     border: 2px solid #00f8ff;
                 }
             `
-                rainBowElement.current = linkDom.firstElementChild
-                if (showAvatar) linkDom.firstElementChild.classList.add('rainbowBorder')
+                rainBowElement.current = linkDom.firstElementChild.nextElementSibling
+                linkDom.firstElementChild.nextElementSibling?.classList.add('rainbowBorder')
                 linkDom.appendChild(style)
             }
         }
@@ -171,6 +171,8 @@ function NFTAvatarInTwitter() {
 
             if (borderElement.current && linkDom?.firstElementChild !== borderElement.current) {
                 linkDom?.insertBefore(borderElement.current, linkDom.firstChild)
+            }
+            if (rainBowElement.current) {
                 rainBowElement.current?.classList.remove('rainbowBorder')
             }
         }