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 (
+
+
+
+
+ );
+};
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 (
- {levelData ? (
- <>
-
-
-
-
- {!hideLevelIndicator && levelData.level && (
-
-
+
+
-
-
- )}
- >
- ) : null}
+
+
+ {hideLevelIndicator ? null : levelData ? (
+
+
+
+
+ ) : (
+
+ )}
+ >
+ )
+ ) : (
+
+
+ {!hideLevelIndicator && }
+
+ )}
);
};
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) => {
-
+
);
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 = ({
{!completed ? (
@@ -237,6 +244,7 @@ export const QuestCardDetailled = ({
{rewardsProgress && (
{
+ 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) => (