new reward activities + ui fixes (#1889)

src/blocks/notification/Notification.tsx

@@ -4,6 +4,7 @@ import { Cross } from '../icons';
 import { NotificationProps } from './Notification.types';
 import { toast, Toaster } from 'sonner';
 import { getTextVariantStyles } from 'blocks/Blocks.utils';
+import { deviceMediaQ } from 'blocks/theme';
 
 const NotificationContainer = styled.div`
   position: relative;
@@ -13,12 +14,15 @@ const NotificationContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  max-height: 111px;
-  min-width: 397px;
-  max-width: 100%;
+  height: 111px;
+  width: 397px;
   cursor: pointer;
   box-sizing: border-box;
   border: var(--border-sm) solid var(--components-in-app-notification-stroke-bg);
+  overflow: hidden;
+  @media${deviceMediaQ.mobileL} {
+    width: -webkit-fill-available;
+  }
 `;
 
 const TextContainer = styled.div`
@@ -62,7 +66,6 @@ const CloseButton = styled.div`
 `;
 
 const NotificationItem: FC<NotificationProps> = ({ onClose, title, description, image, onClick }) => {
-
   const handleNotificationClick = () => onClick?.();
 
   const handleNotificationClose = () => {
@@ -92,22 +95,19 @@ const NotificationItem: FC<NotificationProps> = ({ onClose, title, description,
 const Notification = () => {
   return (
     <Toaster
-      style={{ minWidth: '397px', height: '111px' }}
       offset={15}
       visibleToasts={5}
     />
   );
 };
 
-
 // Store the toastId(s) in an array to manage multiple notifications
 const toastIds: Array<string | number> = [];
 
 // Export the notification object with show and hide methods
 const notification = {
   show: (config: NotificationProps) => {
     const toastId = toast.custom(() => <NotificationItem {...config} />, {
-
       duration: config.duration || Infinity,
       position: config.position || 'bottom-right',
     });
@@ -122,4 +122,3 @@ const notification = {
 };
 
 export { notification, Notification };
-

src/common/index.ts

@@ -5,3 +5,4 @@ export * from './Common.utils';
 export * from './Common.form';
 export * from './Common.localStorageKeys';
 export * from './Common.types';
+export * from './Common.baseLogos';

src/modules/dashboard/Dashboard.tsx

@@ -34,6 +34,7 @@ const Dashboard: FC<DashboardProps> = () => {
         display="flex"
         flexDirection="column"
         gap="spacing-md"
+        width={{ mm: '340px' }}
       >
         <FeaturedChannels />
         <ChannelVariantsSection />

src/modules/dashboard/components/FeaturedChannelsListItem.tsx

@@ -75,7 +75,7 @@ const FeaturedChannelsListItem: FC<FeaturedChannelsListItemProps> = (props) => {
         padding={{ initial: 'spacing-md', ml: 'spacing-md spacing-sm', tb: 'spacing-sm', lp: 'spacing-sm' }}
         borderRadius="radius-md"
         gap="spacing-xs"
-        width={{ initial: '290px', ml: 'auto', tb: '278px', lp: '278px' }}
+        width={{ initial: '290px', mm: '258px', ml: 'auto', tb: '278px', lp: '278px' }}
         css={css`
           flex-shrink: 0;
         `}

src/modules/dashboard/components/StakingPools.tsx

@@ -116,7 +116,7 @@ const StakingPools: FC<StakingPoolsProps> = () => {
               </Text>
             </Box>
             <Box
-              display="flex"
+              display={{ initial: 'flex', ml: 'block' }}
               gap="spacing-lg"
             >
               <Box

src/modules/rewards/Rewards.constants.ts

@@ -3,14 +3,14 @@ import { RewardsTabsList } from './Rewards.types';
 export const rewardsTabsList: RewardsTabsList = [
   {
     value: 'dashboard',
-    label: 'Dashboard'
+    label: 'Dashboard',
   },
   {
     value: 'activity',
-    label: 'Reward Activities'
+    label: 'Reward Activities',
   },
   {
     value: 'leaderboard',
-    label: 'Leaderboard'
-  }
+    label: 'Leaderboard',
+  },
 ];

src/modules/rewards/components/ActivityVerificationButton.tsx

@@ -14,6 +14,7 @@ import { useVerifyRewards } from '../hooks/useVerifyRewards';
 // helpers
 import {
   bonusRewardActivities,
+  channelSubscriptionActivities,
   dailyRewardActivities,
   otherRewardActivities,
   stakeRewardActivities,
@@ -91,7 +92,8 @@ export const ActivityVerificationButton = ({
     if (
       otherRewardActivities.includes(activityType) ||
       bonusRewardActivities.includes(activityType) ||
-      stakeRewardActivities.includes(activityType)
+      stakeRewardActivities.includes(activityType) ||
+      channelSubscriptionActivities.includes(activityType)
     ) {
       return {
         isLoading: verifyingRewards,

src/modules/rewards/components/RewardsActivitiesList.tsx

@@ -29,14 +29,18 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
   const activityList = rewardActivitiesResponse?.activities?.map((page) => page) || [];
 
   // Filter activities based on the index
-  const firstGroupActivities = isLoading
+  const socialActivities = isLoading
     ? Array(2).fill(0)
     : activityList.filter((activity) => activity.index.startsWith(`social-activity`) && activity?.status === 'ENABLED');
 
-  const secondGroupActivities = isLoading
+  const platformRewardActivities = isLoading
     ? Array(7).fill(0)
     : activityList.filter((activity) => activity.index.startsWith(`reward-activity`) && activity?.status === 'ENABLED');
 
+  const channelSubscriptionActivities = activityList.filter(
+    (activity) => activity.index.startsWith(`channel-subscription`) && activity?.status === 'ENABLED'
+  );
+
   const { isLocked } = useRewardsContext();
 
   return (
@@ -45,7 +49,8 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
       flexDirection="column"
       gap="spacing-sm"
     >
-      {firstGroupActivities.map((activity: Activity) => (
+      {/* These are the social activites Twitter and discord */}
+      {socialActivities.map((activity: Activity) => (
         <RewardsActivitiesListItem
           key={activity.activityType}
           userId={userDetails?.userId || ''}
@@ -90,7 +95,19 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
         </Box>
       )}
 
-      {secondGroupActivities.map((activity: Activity) => (
+      {/* Activites related specific channel subscription */}
+      {channelSubscriptionActivities.map((activity: Activity) => (
+        <RewardsActivitiesListItem
+          key={activity.activityType}
+          userId={userDetails?.userId || ''}
+          activity={activity}
+          isLoadingItem={isLoading}
+          isLocked={isLocked}
+        />
+      ))}
+
+      {/* These are other platform specifc reward activities */}
+      {platformRewardActivities.map((activity: Activity) => (
         <RewardsActivitiesListItem
           key={activity.activityType}
           userId={userDetails?.userId || ''}

src/modules/rewards/components/RewardsActivityIcon.tsx

@@ -29,6 +29,7 @@ import {
   YellowBonusActivitySubscribers,
   PushAlpha,
 } from 'blocks';
+import { quickSwapLogo, priceTrackerLogo, walletTrackerLogo } from 'common';
 import { ActvityType } from 'queries';
 
 type RewardsActivityIconProp = {
@@ -162,6 +163,39 @@ const RewardsActivityIcon: FC<RewardsActivityIconProp> = ({ type }) => {
     );
   }
 
+  if (type === 'channel_specific_subscriptions:QUICKSWAP_CHANNEL') {
+    return (
+      <img
+        width={48}
+        height={48}
+        src={quickSwapLogo}
+        style={{ borderRadius: 'var(--radius-round)' }}
+      />
+    );
+  }
+
+  if (type === 'channel_specific_subscriptions:PRICETRACKER_CHANNEL') {
+    return (
+      <img
+        width={48}
+        height={48}
+        src={priceTrackerLogo}
+        style={{ borderRadius: 'var(--radius-round)' }}
+      />
+    );
+  }
+
+  if (type === 'channel_specific_subscriptions:WALLETTRACKER_CHANNEL') {
+    return (
+      <img
+        width={48}
+        height={48}
+        src={walletTrackerLogo}
+        style={{ borderRadius: 'var(--radius-round)' }}
+      />
+    );
+  }
+
   if (type === 'stake_1_uni_v2_lp_epoch' || type === 'stake_1k_push_epoch') {
     return (
       <StakePushGreyCoin

src/modules/rewards/utils/activityTypeArray.ts

@@ -10,6 +10,12 @@ export const otherRewardActivities: ActvityType[] = [
   'hold_push_rockstar_nft',
 ];
 
+export const channelSubscriptionActivities: ActvityType[] = [
+  'channel_specific_subscriptions:PRICETRACKER_CHANNEL',
+  'channel_specific_subscriptions:QUICKSWAP_CHANNEL',
+  'channel_specific_subscriptions:WALLETTRACKER_CHANNEL',
+];
+
 export const bonusRewardActivities: ActvityType[] = [
   'create_channel_push',
   'reach_100_subscribers',

src/queries/services/rewards/getRewardsActivities.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import { getRewardsActivitiesModelCreator } from '../../models/rewards';
 import { getRewardsBaseURL } from '../../baseURL';
 
-const pageSize = 50;
+const pageSize = 100;
 
 export const getRewardsActivities = () =>
   axios({

src/queries/types/rewards.ts

@@ -31,6 +31,9 @@ export type ActvityType =
   | 'daily_check_in_7_days_day5'
   | 'daily_check_in_7_days_day6'
   | 'daily_check_in_7_days_day7'
+  | 'channel_specific_subscriptions:QUICKSWAP_CHANNEL'
+  | 'channel_specific_subscriptions:WALLETTRACKER_CHANNEL'
+  | 'channel_specific_subscriptions:PRICETRACKER_CHANNEL'
   | 'stake_1k_push_epoch'
   | 'stake_5k_push_epoch'
   | 'stake_10k_push_epoch'