From bbb03f1124b5df4d5665b55f6b7eb882473d415b Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Thu, 9 Dec 2021 15:34:37 +0800 Subject: [PATCH 1/7] fix: nft avatar --- packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 4 ++-- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 3 +++ .../src/social-network-adaptor/twitter.com/utils/avatar.ts | 2 ++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index 02d6abcfa08e..d4bcdf89eb14 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -15,8 +15,8 @@ interface StyleProps { const useStyles = makeStyles()((theme, props) => ({ root: { position: 'absolute', - left: -1 * (props.width - 1), - top: -1 * (props.width - 1), + left: -1 * (props.width - 3), + top: -1 * (props.width - 3), width: props.size - 4, height: props.size - 4, 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 e304dfd3b3b3..42eac53a59e9 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 @@ -121,6 +121,9 @@ function NFTAvatarInTwitter() { if (!avatar) return null + const avatarParent = searchTwitterAvatarSelector().closest(2).evaluate() as HTMLElement + if (avatarParent) avatarParent.style.clipPath = 'unset' + return ( <> {getAvatarId(identity.avatar ?? '') === avatar.avatarId && avatar.avatarId ? ( diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts index 5102c2d64783..6af624cb0944 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts @@ -8,6 +8,8 @@ export function getInjectNodeInfo(ele: HTMLElement) { if (!nftDom) return nftDom.style.overflow = 'unset' + const avatarParent = nftDom.parentElement + if (avatarParent) avatarParent.style.clipPath = 'unset' const width = Number(window.getComputedStyle(nftDom).width.replace('px', '') ?? 0) const height = Number(window.getComputedStyle(nftDom).height.replace('px', '') ?? 0) From f651f7c4f7fcbe2cc62e01d97b84b8f5699430a1 Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Thu, 9 Dec 2021 20:01:23 +0800 Subject: [PATCH 2/7] fix: nft avatar size --- .../twitter.com/injection/NFT/Avatar.tsx | 8 ++++---- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 2 +- .../twitter.com/injection/NFT/TweetNFTAvatar.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx index 86d1253d124b..15f7a1fc7ef8 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx @@ -35,15 +35,15 @@ function _(main: () => LiveSelector, signal: AbortSignal) {
, ) 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 42eac53a59e9..0d33a3e67c33 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 @@ -56,7 +56,7 @@ function NFTAvatarInTwitter() { let size = 170 if (ele) { const style = window.getComputedStyle(ele) - size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 3 + size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 4 } const [NFTEvent, setNFTEvent] = useState() diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx index f1861c4a62a5..e2222fe01aaf 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx @@ -19,8 +19,8 @@ function _(main: () => LiveSelector, signal: AbortSignal) { proxy.realCurrent = info.element.firstChild as HTMLElement const root = createReactRootShadowed(proxy.afterShadow, { signal }) root.render( -
- +
+
, ) remover = root.destory From 453f35422abb2bd438efc63c37192ff7befb6741 Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Fri, 10 Dec 2021 09:51:03 +0800 Subject: [PATCH 3/7] fix: adjust the position of the nft avatar --- packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 5 +++-- .../twitter.com/injection/NFT/Avatar.tsx | 6 +++--- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 2 +- .../twitter.com/injection/NFT/TweetNFTAvatar.tsx | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index d4bcdf89eb14..771ecd4167f4 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -15,8 +15,8 @@ interface StyleProps { const useStyles = makeStyles()((theme, props) => ({ root: { position: 'absolute', - left: -1 * (props.width - 3), - top: -1 * (props.width - 3), + left: -1 * (props.width - 4), + top: -1 * (props.width - 4), width: props.size - 4, height: props.size - 4, @@ -27,6 +27,7 @@ const useStyles = makeStyles()((theme, props) => ({ left: -27, top: -1 * props.width, }, + zIndex: 2, }, image: { position: 'absolute', diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx index 15f7a1fc7ef8..b7c390e3c5ef 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx @@ -35,9 +35,9 @@ function _(main: () => LiveSelector, signal: AbortSignal) {
() diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx index e2222fe01aaf..2b77410c53db 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx @@ -19,7 +19,7 @@ function _(main: () => LiveSelector, signal: AbortSignal) { proxy.realCurrent = info.element.firstChild as HTMLElement const root = createReactRootShadowed(proxy.afterShadow, { signal }) root.render( -
+
, ) From d5c59023685b19a3b382029c00e7db48aa70a6d9 Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Fri, 10 Dec 2021 14:05:41 +0800 Subject: [PATCH 4/7] fix: adjust position --- .../twitter.com/injection/NFT/Avatar.tsx | 4 ++-- .../twitter.com/injection/NFT/TweetNFTAvatar.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx index b7c390e3c5ef..c1fc9cbc297f 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx @@ -35,8 +35,8 @@ function _(main: () => LiveSelector, signal: AbortSignal) {
LiveSelector, signal: AbortSignal) { proxy.realCurrent = info.element.firstChild as HTMLElement const root = createReactRootShadowed(proxy.afterShadow, { signal }) root.render( -
+
, ) From 0987b21333bbedf670e2fcb66f271e50d7c8fbdf Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Sat, 11 Dec 2021 20:51:50 +0800 Subject: [PATCH 5/7] chore: nft avatar position --- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 19 ++------------- .../injection/NFT/NFTAvatarInTwitter.tsx | 24 +++++++++++++++---- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index 771ecd4167f4..cf4cf0cde495 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -8,26 +8,11 @@ import { useUserOwnerAddress } from '../hooks/useUserOwnerAddress' import type { AvatarMetaDB } from '../types' import { NFTAvatarRing } from './NFTAvatarRing' -interface StyleProps { - width: number - size: number -} -const useStyles = makeStyles()((theme, props) => ({ +const useStyles = makeStyles()((theme) => ({ root: { - position: 'absolute', - left: -1 * (props.width - 4), - top: -1 * (props.width - 4), - width: props.size - 4, - height: props.size - 4, - display: 'flex', justifyContent: 'center', alignItems: 'center', - [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { - left: -27, - top: -1 * props.width, - }, - zIndex: 2, }, image: { position: 'absolute', @@ -56,7 +41,7 @@ function formatText(symbol: string, length: number) { export function NFTBadge(props: NFTBadgeProps) { const { avatar, size = 140, width = 15 } = props - const classes = useStylesExtends(useStyles({ size: size + width * 2, width }), props) + const classes = useStylesExtends(useStyles(/*{ size: size + width * 2, width }*/), props) const { value = { amount: '0', symbol: 'ETH', name: '', owner: '' }, loading } = useNFT( avatar.address, 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 30a009e1f34f..974ef6c7e661 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 @@ -19,14 +19,29 @@ export function injectNFTAvatarInTwitter(signal: AbortSignal) { createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() } -const useStyles = makeStyles()(() => ({ +interface StyleProps { + width: number + size: number +} + +const useStyles = makeStyles()((theme, props) => ({ root: { position: 'absolute', bottom: '-10px !important', - left: 0, textAlign: 'center', color: 'white', minWidth: 134, + zIndex: 2, + + left: -1 * (props.width - 7), + top: -1 * (props.width - 7), + width: props.size - 4, + height: props.size - 4, + + [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { + left: -27, + top: -1 * props.width, + }, }, update: { position: 'absolute', @@ -47,17 +62,18 @@ const useStyles = makeStyles()(() => ({ })) function NFTAvatarInTwitter() { - const { classes } = useStyles() const identity = useCurrentVisitingIdentity() const wallet = useWallet() const { value: _avatar } = useNFTAvatar(identity.identifier.userId) const [avatar, setAvatar] = useState() const ele = searchTwitterAvatarLinkSelector().evaluate() let size = 170 + const width = 15 if (ele) { const style = window.getComputedStyle(ele) - size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 6 + size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 9 } + const { classes } = useStyles({ size: size + width * 2, width }) const [NFTEvent, setNFTEvent] = useState() const onUpdate = (data: NFTAvatarEvent) => { From 283fcbc20e22b30b04cf2574c145c693272ce84f Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Sat, 11 Dec 2021 21:57:21 +0800 Subject: [PATCH 6/7] fix: nft avatar position --- .../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 974ef6c7e661..84a8c91a82c8 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 @@ -71,7 +71,7 @@ function NFTAvatarInTwitter() { const width = 15 if (ele) { const style = window.getComputedStyle(ele) - size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 9 + size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 10 } const { classes } = useStyles({ size: size + width * 2, width }) From 8b161d63c6a93904de09a4bf4a7fa74ddf67b07a Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Sat, 11 Dec 2021 22:33:40 +0800 Subject: [PATCH 7/7] fix: reply review --- .../mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 2 +- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index cf4cf0cde495..c101d720a8a0 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -41,7 +41,7 @@ function formatText(symbol: string, length: number) { export function NFTBadge(props: NFTBadgeProps) { const { avatar, size = 140, width = 15 } = props - const classes = useStylesExtends(useStyles(/*{ size: size + width * 2, width }*/), props) + const classes = useStylesExtends(useStyles(), props) const { value = { amount: '0', symbol: 'ETH', name: '', owner: '' }, loading } = useNFT( avatar.address, 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 84a8c91a82c8..404bd4a2f186 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 @@ -13,6 +13,7 @@ import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages' import { NFTBadge } from '../../../../plugins/Avatar/SNSAdaptor/NFTBadge' import { NFTAvatar } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatar' +const offset = 10 export function injectNFTAvatarInTwitter(signal: AbortSignal) { const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector()) startWatch(watcher, signal) @@ -33,10 +34,10 @@ const useStyles = makeStyles()((theme, props) => ({ minWidth: 134, zIndex: 2, - left: -1 * (props.width - 7), - top: -1 * (props.width - 7), - width: props.size - 4, - height: props.size - 4, + left: -1 * props.width + offset / 2, + top: -1 * props.width + offset / 2, + width: props.size, + height: props.size, [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { left: -27, @@ -71,7 +72,7 @@ function NFTAvatarInTwitter() { const width = 15 if (ele) { const style = window.getComputedStyle(ele) - size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 10 + size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - offset } const { classes } = useStyles({ size: size + width * 2, width })