Activities tab UI - Rewards page

[corlard3y]

Pull Request Template

1649

Description

Rewards activities UI page implementation in the new Rewards feature.

• Problem/Feature: Rewards activities UI page implementation in the new Rewards feature.

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Code refactor
• [ ] Documentation update
• [ ] Other (please describe):

Checklist

• [ ] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [x] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

https://www.figma.com/design/FvJL0JWHlsVohsHTERB1Lh/Push-Design-Foundations-%5BFuture%5D?node-id=3120-35384&t=VgrToosyrSqCX9mw-0

Review & Approvals

• [ ] Self-review completed
• [ ] Code review by at least one other engineer
• [ ] Documentation updates if applicable

Notes

[github-actions[bot]]

It looks like there is an issue in the code structure. The RewardActivities component is defined twice in the same file. The second RewardActivities component definition should be removed as it is a duplicate.

Here is the updated code snippet:

import { RewardsTabsList } from './Rewards.types';

export const rewardsTabsList: RewardsTabsList = [
  {
    value: 'dashboard',
    label: 'Dashboard',
  },
  {
    value: 'activities',
    label: 'Reward Activities',
  },
  {
    value: 'leaderboard',
    label: 'Leaderboard',
  },
];

import React, { FC } from 'react';
import { css } from 'styled-components';
import { Box, Button, Text } from 'blocks';
import { RewardActivitiesProps } from './RewardActivities';

const RewardActivities: FC<RewardActivitiesProps> = ({ onGetStarted }) => {
  const rewardsArray = [
    {
      title: 'Follow @PushProtocol on X',
      points: 10000,
      buttonText: 'Follow'
    },
    // Additional reward activities data
  ];

  return (
    // RewardActivities component JSX
  );
};

export { RewardActivities };

import { Box } from 'blocks';
import { FC } from 'react';
import { RewardsTabs } from './RewardsTabs';
import { RewardsTabs as RewardsTabsType } from '../Rewards.types';
import { DashboardSection } from './DashboardSection';
import { RewardActivities } from './RewardActivities';

export type RewardsTabsContainerProps = {
  activeTab: RewardsTabsType;
  handleSetActiveTab: (tab: RewardsTabsType) => void;
};

const RewardsTabsContainer: FC<RewardsTabsContainerProps> = ({ activeTab, handleSetActiveTab }) => {
  return (
    // RewardsTabsContainer component JSX
  );
};

export { RewardsTabsContainer };

Please ensure to remove the duplicate definition of the RewardActivities component so that the code remains clean and error-free.

All looks good.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

All looks good.