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) => (