From 1ed80b882e551988818001063601d6d849d19432 Mon Sep 17 00:00:00 2001
From: Tche <45823872+tcheee@users.noreply.github.com>
Date: Mon, 7 Oct 2024 16:56:27 +0200
Subject: [PATCH 1/2] chore: fix first point on progress bar (#1376)
---
.../ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx b/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
index f07902f82..5219bf036 100644
--- a/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
+++ b/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
@@ -13,7 +13,11 @@ export const QuestCarouselNumericItems = () => {
key={`available-mission-${index}`}
title={numericQuest.displayName}
image={numericQuest.image}
- points={numericQuest.nextRangeXP - numericQuest.currentRangeXP}
+ points={
+ numericQuest.currentValue < numericQuest.min
+ ? numericQuest.currentRangeXP
+ : numericQuest.nextRangeXP - numericQuest.currentRangeXP
+ }
rewardsProgress={{
min: numericQuest.min,
max: numericQuest.max,
From dd16218ff95bbda73b0ab9240f40e44f1c4b3982 Mon Sep 17 00:00:00 2001
From: dennyscode <43956540+dennyscode@users.noreply.github.com>
Date: Mon, 7 Oct 2024 19:22:27 +0200
Subject: [PATCH 2/2] fix: loading state and translation (#1377)
---
.../LevelBox/LevelIndicatorsSkeleton.tsx | 19 ++++++
.../ProfilePage/LevelBox/ProgressionBar.tsx | 60 ++++++++++++-------
.../ProfilePage/LevelBox/TierBox.tsx | 6 +-
.../QuestCardDetailled/QuestCardDetailled.tsx | 14 ++++-
.../QuestCardDetailled/XPRewardsInfo.tsx | 2 +-
.../QuestCarouseNumericItems.tsx | 20 +++++++
src/i18n/resources.d.ts | 10 +++-
src/i18n/translations/en/translation.json | 10 +++-
8 files changed, 109 insertions(+), 32 deletions(-)
create mode 100644 src/components/ProfilePage/LevelBox/LevelIndicatorsSkeleton.tsx
diff --git a/src/components/ProfilePage/LevelBox/LevelIndicatorsSkeleton.tsx b/src/components/ProfilePage/LevelBox/LevelIndicatorsSkeleton.tsx
new file mode 100644
index 000000000..5c2a39660
--- /dev/null
+++ b/src/components/ProfilePage/LevelBox/LevelIndicatorsSkeleton.tsx
@@ -0,0 +1,19 @@
+import Skeleton from '@mui/material/Skeleton';
+import { LevelIndicatorWrapper } from './ProgressionBar.style';
+
+export const LevelIndicatorsSkeleton = () => {
+ return (
+ <LevelIndicatorWrapper>
+ <Skeleton
+ width={135}
+ height={32}
+ sx={{ transform: 'unset', borderRadius: '16px' }}
+ />
+ <Skeleton
+ width={135}
+ height={32}
+ sx={{ transform: 'unset', borderRadius: '16px' }}
+ />
+ </LevelIndicatorWrapper>
+ );
+};
diff --git a/src/components/ProfilePage/LevelBox/ProgressionBar.tsx b/src/components/ProfilePage/LevelBox/ProgressionBar.tsx
index 0d9291d45..58f1bfa80 100644
--- a/src/components/ProfilePage/LevelBox/ProgressionBar.tsx
+++ b/src/components/ProfilePage/LevelBox/ProgressionBar.tsx
@@ -1,5 +1,8 @@
import type { LevelData } from '@/types/loyaltyPass';
+import { Box } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
import { LevelIndicator } from './LevelIndicator';
+import { LevelIndicatorsSkeleton } from './LevelIndicatorsSkeleton';
import {
LevelIndicatorWrapper,
ProgressionChart,
@@ -12,12 +15,14 @@ interface ProgressionBarProps {
ongoingValue?: number;
levelData?: LevelData;
hideLevelIndicator?: boolean;
+ loading?: boolean;
}
export const ProgressionBar = ({
ongoingValue,
levelData,
hideLevelIndicator,
+ loading,
}: ProgressionBarProps) => {
const calcWidth =
ongoingValue && levelData
@@ -30,30 +35,39 @@ export const ProgressionBar = ({
return (
<ProgressionContainer hideLevelIndicator={hideLevelIndicator}>
- {levelData ? (
- <>
- <ProgressionChart>
- <ProgressionChartScore
- ongoingValue={ongoingValue}
- calcWidth={calcWidth}
- levelData={levelData}
- />
- <ProgressionChartBg />
- </ProgressionChart>
- {!hideLevelIndicator && levelData.level && (
- <LevelIndicatorWrapper>
- <LevelIndicator
- level={levelData.level}
- bound={levelData.minPoints}
+ {!loading && !!levelData ? (
+ !!levelData && (
+ <>
+ <ProgressionChart>
+ <ProgressionChartScore
+ ongoingValue={ongoingValue}
+ calcWidth={calcWidth}
+ levelData={levelData}
/>
- <LevelIndicator
- level={levelData.level + 1}
- bound={levelData.maxPoints}
- />
- </LevelIndicatorWrapper>
- )}
- </>
- ) : null}
+ <ProgressionChartBg />
+ </ProgressionChart>
+ {hideLevelIndicator ? null : levelData ? (
+ <LevelIndicatorWrapper>
+ <LevelIndicator
+ level={levelData.level ?? 0}
+ bound={levelData.minPoints}
+ />
+ <LevelIndicator
+ level={(levelData.level ?? 0) + 1}
+ bound={levelData.maxPoints}
+ />
+ </LevelIndicatorWrapper>
+ ) : (
+ <LevelIndicatorsSkeleton />
+ )}
+ </>
+ )
+ ) : (
+ <Box>
+ <Skeleton width={'100%'} height={16} sx={{ transform: 'unset' }} />
+ {!hideLevelIndicator && <LevelIndicatorsSkeleton />}
+ </Box>
+ )}
</ProgressionContainer>
);
};
diff --git a/src/components/ProfilePage/LevelBox/TierBox.tsx b/src/components/ProfilePage/LevelBox/TierBox.tsx
index 33a7bd115..472fd7648 100644
--- a/src/components/ProfilePage/LevelBox/TierBox.tsx
+++ b/src/components/ProfilePage/LevelBox/TierBox.tsx
@@ -37,7 +37,11 @@ export const TierBox = ({ points, loading }: TierBoxProps) => {
<PointsBox points={points} />
<LevelBox level={levelData.level} loading={loading} />
</TierInfoBox>
- <ProgressionBar ongoingValue={points} levelData={levelData} />
+ <ProgressionBar
+ ongoingValue={points}
+ levelData={levelData}
+ loading={loading}
+ />
</Box>
</TierMainBox>
);
diff --git a/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx b/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx
index d694680d5..26be8df65 100644
--- a/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx
+++ b/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx
@@ -49,6 +49,7 @@ interface QuestCardProps {
points?: number;
link?: string;
startDate?: string;
+ action?: string;
endDate?: string;
platformName?: string;
platformImage?: string;
@@ -67,6 +68,7 @@ interface QuestCardProps {
export const QuestCardDetailled = ({
title,
image,
+ action,
points,
link,
slug,
@@ -170,6 +172,7 @@ export const QuestCardDetailled = ({
label={`${rewardsProgress?.earnedXP}`}
tooltip={t('questCard.earnedXPDescription', {
earnedXP: rewardsProgress?.earnedXP,
+ action: action,
})}
active={true}
>
@@ -220,9 +223,13 @@ export const QuestCardDetailled = ({
<XPRewardsInfo
bgColor={!completed ? '#31007A' : '#42B852'}
label={`+${points}`}
- tooltip={t('questCard.xpToEarnDescription', {
- xpToEarn: points,
- })}
+ tooltip={
+ rewardsProgress &&
+ t('questCard.xpToEarnDescription', {
+ xpToEarn: points,
+ action: action,
+ })
+ }
active={true}
>
{!completed ? (
@@ -237,6 +244,7 @@ export const QuestCardDetailled = ({
{rewardsProgress && (
<ProgressionBar
ongoingValue={rewardsProgress.currentValue}
+ loading={false}
levelData={{
maxPoints: rewardsProgress.max,
minPoints: rewardsProgress.min,
diff --git a/src/components/ProfilePage/QuestCardDetailled/XPRewardsInfo.tsx b/src/components/ProfilePage/QuestCardDetailled/XPRewardsInfo.tsx
index c8a45435b..7fe88cb32 100644
--- a/src/components/ProfilePage/QuestCardDetailled/XPRewardsInfo.tsx
+++ b/src/components/ProfilePage/QuestCardDetailled/XPRewardsInfo.tsx
@@ -5,7 +5,7 @@ import { XPDisplayBox } from './QuestCard.style';
interface XPRewardsInfoProps {
bgColor: string;
label: string;
- tooltip: string;
+ tooltip?: string;
active?: boolean;
}
diff --git a/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx b/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
index 5219bf036..5600b1f04 100644
--- a/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
+++ b/src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx
@@ -1,15 +1,35 @@
+import { useTranslation } from 'react-i18next';
import { useOngoingNumericQuests } from 'src/hooks/useOngoingNumericQuests';
import { QuestCardSkeleton } from '../QuestCard/QuestCardSkeleton';
import { QuestCardDetailled } from '../QuestCardDetailled/QuestCardDetailled';
+type NumericAction = 'chain_oor' | 'transact_oor' | 'swap_oor' | 'bridge_oor';
+
export const QuestCarouselNumericItems = () => {
+ const { t } = useTranslation();
+
const {
data: ongoingNumericQuests,
isLoading: isongoingNumericQuestsLoading,
} = useOngoingNumericQuests();
+
+ const getNumericAction = (type: NumericAction) => {
+ switch (type) {
+ case 'chain_oor':
+ return `${t('questCard.action.chain_oor')}`;
+ case 'transact_oor':
+ return `${t('questCard.action.transact_oor')}`;
+ case 'swap_oor':
+ return `${t('questCard.action.swap_oor')}`;
+ default:
+ return `${t('questCard.action.bridge_oor')}`;
+ }
+ };
+
return !isongoingNumericQuestsLoading
? ongoingNumericQuests?.map((numericQuest, index) => (
<QuestCardDetailled
+ action={getNumericAction(numericQuest.type as NumericAction)}
key={`available-mission-${index}`}
title={numericQuest.displayName}
image={numericQuest.image}
diff --git a/src/i18n/resources.d.ts b/src/i18n/resources.d.ts
index e65a980c2..45281546c 100644
--- a/src/i18n/resources.d.ts
+++ b/src/i18n/resources.d.ts
@@ -123,8 +123,14 @@ interface Resources {
questCard: {
completed: 'Completed';
join: 'Join';
- xpToEarnDescription: 'Complete the progress bar to earn +{{xpToEarn}} addtional XP this month.';
- earnedXPDescription: "You've unlocked {{earnedXP}}XP so far this month and this has been added to your total XP balance";
+ xpToEarnDescription: 'Complete the progress bar by {{action}} to earn +{{xpToEarn}} addtional XP this month.';
+ earnedXPDescription: "You've unlocked {{earnedXP}}XP by {{action}} so far this month and this has been added to your total XP balance.";
+ action: {
+ chain_oor: 'exploring chains';
+ transact_oor: 'trading';
+ swap_oor: 'swapping';
+ bridge_oor: 'bridging';
+ };
};
missions: {
available: 'Available Missions';
diff --git a/src/i18n/translations/en/translation.json b/src/i18n/translations/en/translation.json
index 514c6b726..fb6cf4be8 100644
--- a/src/i18n/translations/en/translation.json
+++ b/src/i18n/translations/en/translation.json
@@ -116,8 +116,14 @@
"questCard": {
"completed": "Completed",
"join": "Join",
- "xpToEarnDescription": "Complete the progress bar to earn +{{xpToEarn}} addtional XP this month.",
- "earnedXPDescription": "You've unlocked {{earnedXP}}XP so far this month and this has been added to your total XP balance."
+ "xpToEarnDescription": "Complete the progress bar by {{action}} to earn +{{xpToEarn}} addtional XP this month.",
+ "earnedXPDescription": "You've unlocked {{earnedXP}}XP by {{action}} so far this month and this has been added to your total XP balance.",
+ "action": {
+ "chain_oor": "exploring chains",
+ "transact_oor": "trading",
+ "swap_oor": "swapping",
+ "bridge_oor": "bridging"
+ }
},
"missions": {
"available": "Available Missions",