diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx index 51a71109b6fd..dd7dd0244d46 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx @@ -31,6 +31,7 @@ interface StyleProps { } const useStyles = makeStyles()((theme, { width, height, radius = '100%' }) => ({ root: { + transform: 'scale(0.97)', animation: `${rainbowBorderKeyFrames} 6s linear infinite`, width, height, diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarClip.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarClip.tsx index d4502d4a1f54..cfcfcac58b0c 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarClip.tsx +++ b/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() 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]) 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 c50ef6a2484a..b9c2411d9924 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 @@ -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 ( diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts index aef488835659..9459c06de3eb 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts @@ -52,9 +52,7 @@ export const searchNewTweetButtonSelector: () => LiveSelector = () => { export const searchNickNameSelector: () => LiveSelector = () => querySelector('[data-testid="UserProfileHeader_Items"]') export const searchAvatarSelector: () => LiveSelector = () => - querySelector( - '[data-testid="primaryColumn"] a[role="link"][href$="/header_photo"] + [class] img[src*="profile_images"]', - ) + querySelector('[data-testid="primaryColumn"] a[href$="/photo"] img[src*="profile_images"]') export const searchAvatarMetaSelector: () => LiveSelector = () => querySelector('head > meta[property="og:image"]:last-child')