From dc00df45e1edcc7713f812a79a8560b842656218 Mon Sep 17 00:00:00 2001 From: zcelbir Date: Wed, 9 Oct 2024 15:49:50 +0300 Subject: [PATCH 1/3] bugfix/ fix level card profile picture while taking screenshot --- .../Global/LevelsCard/LevelsCard.tsx | 26 +++++++++++++++++-- src/pages/platformAmbient/Level/Level.tsx | 17 +++++++++--- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/components/Global/LevelsCard/LevelsCard.tsx b/src/components/Global/LevelsCard/LevelsCard.tsx index 813a161fb9..f6f91b4a86 100644 --- a/src/components/Global/LevelsCard/LevelsCard.tsx +++ b/src/components/Global/LevelsCard/LevelsCard.tsx @@ -1,3 +1,4 @@ +import * as d3 from 'd3'; import { FlexContainer, Text } from '../../../styled/Common'; import styles from './LevelsCard.module.css'; import { LuCopy, LuExternalLink } from 'react-icons/lu'; @@ -26,6 +27,7 @@ interface LevelsCardPropsIF { retroPoints: string; }[]; jazziconsToDisplay: JSX.Element | null; + jazziconsToClip: { clip: string; display: string }; truncatedAccountAddressOrEnsName: string; pointsRemainingToNextLevel: number | undefined; isViewMoreActive?: boolean; @@ -41,6 +43,7 @@ export default function LevelsCard(props: LevelsCardPropsIF) { progressPercentage, pointsData, jazziconsToDisplay, + jazziconsToClip, truncatedAccountAddressOrEnsName, pointsRemainingToNextLevel, resolvedAddress, @@ -74,6 +77,16 @@ export default function LevelsCard(props: LevelsCardPropsIF) { const [hideLevelCardScroll, setHideLevelCardScroll] = useState(false); const copyCardToClipboard = async () => { if (levelsCanvasRef.current) { + const jazz = d3 + .select(levelsCanvasRef.current) + .select('img') + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .node() as any; + + if (jazz) { + jazz.src = jazziconsToClip.clip; + } + setHideLevelCardScroll(true); const blob = await printDomToImage( levelsCanvasRef.current, @@ -84,6 +97,7 @@ export default function LevelsCard(props: LevelsCardPropsIF) { if (blob) { copy(blob); openSnackbar('Card image copied to clipboard', 'info'); + jazz.src = jazziconsToClip.display; } } @@ -99,7 +113,11 @@ export default function LevelsCard(props: LevelsCardPropsIF) { alignItems='center' justifyContent='center' > - + {jazziconsToDisplay} @@ -157,7 +175,11 @@ export default function LevelsCard(props: LevelsCardPropsIF) { if (isViewMoreActive) return pointsHistoryOnly; return ( -
+
{header} {`Level ${ diff --git a/src/pages/platformAmbient/Level/Level.tsx b/src/pages/platformAmbient/Level/Level.tsx index aabba18a46..9175633f07 100644 --- a/src/pages/platformAmbient/Level/Level.tsx +++ b/src/pages/platformAmbient/Level/Level.tsx @@ -48,6 +48,10 @@ export default function Level(props: propsIF) { const { xpLeaders } = useContext(XpLeadersContext); const [shownAvatar, setShownAvatar] = useState(<>); + const [jazziconsToClip, setJazziconsToClip] = useState<{ + clip: string; + display: string; + }>({ clip: '', display: '' }); useEffect(() => { (async () => { @@ -57,9 +61,15 @@ export default function Level(props: propsIF) { ? userAddress : ''; const avatarData = await getAvatarRest(walletID); - setShownAvatar( - getAvatarComponent(walletID, avatarData, 50, false, true), - ); + + setJazziconsToClip(() => { + return { + clip: avatarData.avatarCompressed, + display: avatarData.avatarImage, + }; + }); + + setShownAvatar(getAvatarComponent(walletID, avatarData, 50)); })(); }, [resolvedAddress, userAddress]); @@ -153,6 +163,7 @@ export default function Level(props: propsIF) { progressPercentage, pointsData, jazziconsToDisplay, + jazziconsToClip, resolvedAddress, pointsRemainingToNextLevel: xpData?.data?.pointsRemainingToNextLevel, isViewMoreActive, From bfa2b1709e7301340a04d52ce9178f5c63b1f0d2 Mon Sep 17 00:00:00 2001 From: zcelbir Date: Thu, 10 Oct 2024 10:19:12 +0300 Subject: [PATCH 2/3] Add thumbnail picture for level card --- .../Global/LevelsCard/LevelsCard.tsx | 21 +------------------ src/pages/platformAmbient/Level/Level.tsx | 14 +------------ 2 files changed, 2 insertions(+), 33 deletions(-) diff --git a/src/components/Global/LevelsCard/LevelsCard.tsx b/src/components/Global/LevelsCard/LevelsCard.tsx index f6f91b4a86..df656cf7e9 100644 --- a/src/components/Global/LevelsCard/LevelsCard.tsx +++ b/src/components/Global/LevelsCard/LevelsCard.tsx @@ -1,4 +1,3 @@ -import * as d3 from 'd3'; import { FlexContainer, Text } from '../../../styled/Common'; import styles from './LevelsCard.module.css'; import { LuCopy, LuExternalLink } from 'react-icons/lu'; @@ -27,7 +26,6 @@ interface LevelsCardPropsIF { retroPoints: string; }[]; jazziconsToDisplay: JSX.Element | null; - jazziconsToClip: { clip: string; display: string }; truncatedAccountAddressOrEnsName: string; pointsRemainingToNextLevel: number | undefined; isViewMoreActive?: boolean; @@ -43,7 +41,6 @@ export default function LevelsCard(props: LevelsCardPropsIF) { progressPercentage, pointsData, jazziconsToDisplay, - jazziconsToClip, truncatedAccountAddressOrEnsName, pointsRemainingToNextLevel, resolvedAddress, @@ -77,16 +74,6 @@ export default function LevelsCard(props: LevelsCardPropsIF) { const [hideLevelCardScroll, setHideLevelCardScroll] = useState(false); const copyCardToClipboard = async () => { if (levelsCanvasRef.current) { - const jazz = d3 - .select(levelsCanvasRef.current) - .select('img') - // eslint-disable-next-line @typescript-eslint/no-explicit-any - .node() as any; - - if (jazz) { - jazz.src = jazziconsToClip.clip; - } - setHideLevelCardScroll(true); const blob = await printDomToImage( levelsCanvasRef.current, @@ -97,7 +84,6 @@ export default function LevelsCard(props: LevelsCardPropsIF) { if (blob) { copy(blob); openSnackbar('Card image copied to clipboard', 'info'); - jazz.src = jazziconsToClip.display; } } @@ -113,11 +99,7 @@ export default function LevelsCard(props: LevelsCardPropsIF) { alignItems='center' justifyContent='center' > - + {jazziconsToDisplay} @@ -176,7 +158,6 @@ export default function LevelsCard(props: LevelsCardPropsIF) { return (
diff --git a/src/pages/platformAmbient/Level/Level.tsx b/src/pages/platformAmbient/Level/Level.tsx index 9175633f07..7eb7462969 100644 --- a/src/pages/platformAmbient/Level/Level.tsx +++ b/src/pages/platformAmbient/Level/Level.tsx @@ -48,10 +48,6 @@ export default function Level(props: propsIF) { const { xpLeaders } = useContext(XpLeadersContext); const [shownAvatar, setShownAvatar] = useState(<>); - const [jazziconsToClip, setJazziconsToClip] = useState<{ - clip: string; - display: string; - }>({ clip: '', display: '' }); useEffect(() => { (async () => { @@ -62,14 +58,7 @@ export default function Level(props: propsIF) { : ''; const avatarData = await getAvatarRest(walletID); - setJazziconsToClip(() => { - return { - clip: avatarData.avatarCompressed, - display: avatarData.avatarImage, - }; - }); - - setShownAvatar(getAvatarComponent(walletID, avatarData, 50)); + setShownAvatar(getAvatarComponent(walletID, avatarData, 50, true)); })(); }, [resolvedAddress, userAddress]); @@ -163,7 +152,6 @@ export default function Level(props: propsIF) { progressPercentage, pointsData, jazziconsToDisplay, - jazziconsToClip, resolvedAddress, pointsRemainingToNextLevel: xpData?.data?.pointsRemainingToNextLevel, isViewMoreActive, From 5811b1763ab60a00e59b368ec374faae0595ac1a Mon Sep 17 00:00:00 2001 From: zcelbir Date: Tue, 15 Oct 2024 16:20:39 +0300 Subject: [PATCH 3/3] bugfix/ fit nft in level card nft holder place --- src/components/Global/LevelsCard/LevelsCard.module.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Global/LevelsCard/LevelsCard.module.css b/src/components/Global/LevelsCard/LevelsCard.module.css index 98b3341231..d2d9b388df 100644 --- a/src/components/Global/LevelsCard/LevelsCard.module.css +++ b/src/components/Global/LevelsCard/LevelsCard.module.css @@ -30,15 +30,15 @@ border-radius: 4px; .user_image{ width: 50px; -height: 50px; + height: 50px; -border-radius: 50%; + border-radius: 50%; } .user_image img{ max-height: 100%; -max-width: 100%; - object-fit: contain; + max-width: 100%; + /* object-fit: contain; */ border-radius: 50%; }