DAPP-1967-bonus-activity-container-position-fix (#1968)

* DAPP-1967-bonus-activity-container-position-fix * DAPP-1967 added lozenge tags support in staking activities
push-protocol · Nov 12, 2024 · f769f86 · f769f86
1 parent 66344c3
commit f769f86
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/src/modules/rewards/components/BonusActivitiesSection.tsx b/src/modules/rewards/components/BonusActivitiesSection.tsx
@@ -18,7 +18,7 @@ import { useRewardsContext } from 'contexts/RewardsContext';
 import { walletToCAIP10 } from 'helpers/w2w';
 
 // components
-import { Alert, Box, Text } from 'blocks';
+import { Alert, Box, Lozenge, Star, Text } from 'blocks';
 import { BonusActivitiesItem } from './BonusActivitiesItem';
 
 export type BonusActivitiesSectionProps = {};
@@ -69,12 +69,20 @@ const BonusActivities: FC<BonusActivitiesSectionProps> = () => {
       flexDirection="column"
       gap="spacing-sm"
     >
-      <Text
-        variant="h4-bold"
-        color="text-primary"
+      <Box
+        display="flex"
+        flexDirection="row"
+        gap="spacing-xs"
+        alignItems="center"
       >
-        Bonus Activities
-      </Text>
+        <Text
+          variant="h4-bold"
+          color="text-primary"
+        >
+          Bonus Activities
+        </Text>
+        <Lozenge icon={<Star />}>NEW</Lozenge>
+      </Box>
 
       {errorMessage && (
         <Box width="-webkit-fill-available">

diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx
@@ -28,8 +28,6 @@ const RewardsActivitiesBottomSection: FC<RewardsActivitiesBottomSectionProps> =
         <RewardsActivitiesSection />
       </Box>
 
-      <BonusActivities />
-
       <Box
         backgroundColor="surface-primary"
         borderRadius="radius-md"
@@ -50,14 +48,15 @@ const RewardsActivitiesBottomSection: FC<RewardsActivitiesBottomSectionProps> =
         display="flex"
         flexDirection="column"
         padding={{ ml: 'spacing-sm', initial: 'spacing-md' }}
-        margin="spacing-none spacing-none spacing-md spacing-none"
       >
         <StakePushSection
           lifeTime={true}
           title="Stake Push to Earn Multipliers"
           subtitle="Visit [app.push.org/yield](https://app.push.org/yield) and stake tokens in the Fee Pool or LP Pool to activate multipliers."
         />
       </Box>
+
+      <BonusActivities />
     </Box>
   );
 };

diff --git a/src/modules/rewards/components/StakePushActivitiesListItem.tsx b/src/modules/rewards/components/StakePushActivitiesListItem.tsx
@@ -6,7 +6,7 @@ import { Activity, StakeActivityResponse, UsersActivity } from 'queries';
 import { useAccount } from 'hooks';
 
 // components
-import { Box, Button, Lock, Multiplier, RewardsBell, Skeleton, Text } from 'blocks';
+import { Box, Button, Lock, Lozenge, Multiplier, RewardsBell, Skeleton, Star, Text } from 'blocks';
 import { RewardsActivityIcon } from './RewardsActivityIcon';
 import { ActivityButton } from './ActivityButton';
 
@@ -93,23 +93,46 @@ const StakePushActivitiesListItem: FC<StakeActivitiesItemProps> = ({
             gap={{ ml: 'spacing-sm', initial: 'spacing-xxxs' }}
             alignItems={{ ml: 'center' }}
           >
-            <Box display={{ ml: 'block', initial: 'none' }}>
+            <Box
+              display={{ ml: 'flex', initial: 'none' }}
+              flexDirection="column"
+              alignItems="center"
+            >
               <Text
                 color="text-primary"
                 variant="h6-bold"
                 textAlign="center"
               >
                 {activity?.activityTitle}
               </Text>
+              {activity?.tags?.map((tag) => (
+                <Lozenge
+                  size="small"
+                  icon={<Star />}
+                >
+                  {tag}
+                </Lozenge>
+              ))}
             </Box>
-            <Box display={{ ml: 'none', initial: 'block' }}>
+            <Box
+              display={{ ml: 'none', initial: 'flex' }}
+              gap="spacing-xs"
+            >
               <Text
                 color="text-primary"
                 variant="bl-semibold"
                 textAlign="center"
               >
                 {activity?.activityTitle}
               </Text>
+              {activity?.tags?.map((tag) => (
+                <Lozenge
+                  size="small"
+                  icon={<Star />}
+                >
+                  {tag}
+                </Lozenge>
+              ))}
             </Box>
 
             {activity.points > 0 && (