From 07073a7677e88296c1258a004f9a00016cd7084d Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Tue, 28 Dec 2021 14:26:53 +0800 Subject: [PATCH 1/4] fix: recovery normal style when user doesn't have an NFT avatar --- .../injection/NFT/NFTAvatarInTwitter.tsx | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) 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 b47839b2006f..899c91f19e13 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 @@ -12,7 +12,7 @@ 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 { useMount, useWindowSize } from 'react-use' import { rainbowBorderKeyFrames } from '../../../../plugins/Avatar/SNSAdaptor/RainbowBox' export function injectNFTAvatarInTwitter(signal: AbortSignal) { @@ -42,6 +42,7 @@ const useStyles = makeStyles()(() => ({ function NFTAvatarInTwitter() { const rainBowElement = useRef() + const borderElement = useRef() const identity = useCurrentVisitingIdentity() const wallet = useWallet() const { value: _avatar } = useNFTAvatar(identity.identifier.userId) @@ -49,6 +50,11 @@ function NFTAvatarInTwitter() { const windowSize = useWindowSize() + const showAvatar = useMemo( + () => getAvatarId(identity.avatar ?? '') === avatar?.avatarId && avatar.avatarId, + [avatar?.avatarId, identity.avatar], + ) + const size = useMemo(() => { const ele = searchTwitterAvatarSelector().evaluate() if (ele) { @@ -112,6 +118,8 @@ function NFTAvatarInTwitter() { if (linkParentDom) linkParentDom.style.overflow = 'visible' + borderElement.current = linkDom.firstElementChild + // remove useless border linkDom.removeChild(linkDom.firstElementChild) @@ -129,25 +137,35 @@ function NFTAvatarInTwitter() { } ` rainBowElement.current = linkDom.firstElementChild - linkDom.firstElementChild.classList.add('rainbowBorder') + if (showAvatar) linkDom.firstElementChild.classList.add('rainbowBorder') linkDom.insertBefore(style, linkDom.firstChild) } } }) - useUpdateEffect(() => { - if (!avatar) { - rainBowElement.current?.classList.remove('rainbowBorder') - } else { + useEffect(() => { + const linkDom = searchTwitterAvatarLinkSelector().evaluate() + if (showAvatar) { + if (borderElement.current && linkDom?.firstElementChild === borderElement.current) { + linkDom?.removeChild(linkDom.firstElementChild) + } + 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') } - }, [avatar]) + }, [showAvatar]) if (!avatar || !size) return null return ( <> - {getAvatarId(identity.avatar ?? '') === avatar.avatarId && avatar.avatarId ? ( + {showAvatar ? ( Date: Tue, 28 Dec 2021 16:46:31 +0800 Subject: [PATCH 2/4] fix: bugfix --- .../injection/NFT/NFTAvatarInTwitter.tsx | 60 +++++++++++-------- 1 file changed, 35 insertions(+), 25 deletions(-) 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 899c91f19e13..61b48b6bc58e 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 @@ -3,7 +3,6 @@ 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 type { AvatarMetaDB } from '../../../../plugins/Avatar/types' @@ -12,8 +11,9 @@ 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, 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()) @@ -47,8 +47,8 @@ function NFTAvatarInTwitter() { const wallet = useWallet() const { value: _avatar } = useNFTAvatar(identity.identifier.userId) const [avatar, setAvatar] = useState() - const windowSize = useWindowSize() + const location = useLocation() const showAvatar = useMemo( () => getAvatarId(identity.avatar ?? '') === avatar?.avatarId && avatar.avatarId, @@ -71,7 +71,7 @@ function NFTAvatarInTwitter() { setNFTEvent(data) } - useEffect(() => { + useAsync(async () => { if (!wallet || !NFTAvatar) return if (!NFTEvent?.address || !NFTEvent?.tokenId) { @@ -85,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]) @@ -110,7 +111,7 @@ function NFTAvatarInTwitter() { return MaskMessages.events.NFTAvatarUpdated.on((data) => onUpdate(data)) }, [onUpdate]) - useMount(() => { + useEffect(() => { const linkDom = searchTwitterAvatarLinkSelector().evaluate() if (linkDom?.firstElementChild && linkDom.childNodes.length === 4) { @@ -118,13 +119,12 @@ function NFTAvatarInTwitter() { if (linkParentDom) linkParentDom.style.overflow = 'visible' - borderElement.current = linkDom.firstElementChild - - // 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} @@ -138,10 +138,10 @@ function NFTAvatarInTwitter() { ` rainBowElement.current = linkDom.firstElementChild if (showAvatar) linkDom.firstElementChild.classList.add('rainbowBorder') - linkDom.insertBefore(style, linkDom.firstChild) + linkDom.appendChild(style) } } - }) + }, [location.pathname]) useEffect(() => { const linkDom = searchTwitterAvatarLinkSelector().evaluate() @@ -161,6 +161,16 @@ function NFTAvatarInTwitter() { } }, [showAvatar]) + useUpdateEffect(() => { + if ( + location.pathname && + location.pathname.split('/').length === 2 && + trim(location.pathname, '/') !== identity.identifier.userId + ) { + setAvatar(undefined) + } + }, [location, identity]) + if (!avatar || !size) return null return ( From 5f3a53240d7553b111931a4b7e62f7cd8c6cdc13 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 29 Dec 2021 13:52:50 +0800 Subject: [PATCH 3/4] fix: open opensea link when user click nft avatar --- .../src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 8 +++----- .../injection/NFT/NFTAvatarInTwitter.tsx | 18 +++++++++++++++++- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index c101d720a8a0..e21c25c31aa2 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/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,7 +39,7 @@ 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( @@ -48,9 +47,8 @@ export function NFTBadge(props: NFTBadgeProps) { 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 (
{ + 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 ( From 20febeac75144a4dfb5220532d023416f39fb39d Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 29 Dec 2021 15:54:51 +0800 Subject: [PATCH 4/4] chore: reply review --- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1f261225390e..e56fed2ab7a4 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 @@ -122,8 +122,8 @@ function NFTAvatarInTwitter() { // create rainbow shadow border if (linkDom.lastElementChild?.tagName !== 'STYLE') { borderElement.current = linkDom.firstElementChild - // remove useless border + // remove useless border linkDom.removeChild(linkDom.firstElementChild) const style = document.createElement('style') style.innerText = `