DApp-1881 new reward activities + ui fixes

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'