Staging Release

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>
+  );
+};

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>
   );
 };

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>
   );

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,

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;
 }
 

src/components/ProfilePage/QuestCarousel/QuestCarouseNumericItems.tsx

@@ -1,19 +1,43 @@
+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}
-          points={numericQuest.nextRangeXP - numericQuest.currentRangeXP}
+          points={
+            numericQuest.currentValue < numericQuest.min
+              ? numericQuest.currentRangeXP
+              : numericQuest.nextRangeXP - numericQuest.currentRangeXP
+          }
           rewardsProgress={{
             min: numericQuest.min,
             max: numericQuest.max,

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';

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",