feat: support total rewards

Author: cuzz-venus

apps/evm/src/pages/PrimeLeaderboard/TotalRewardsSection/__tests__/index.spec.tsx

@@ -0,0 +1,14 @@
+import { screen } from '@testing-library/react';
+
+import { renderComponent } from 'testUtils/render';
+
+import { TotalRewardsSection } from '..';
+
+describe('pages/PrimeLeaderboard/TotalRewardsSection', () => {
+  it('renders the total Prime rewards from the data hook', () => {
+    renderComponent(<TotalRewardsSection />);
+
+    expect(screen.getByText('Total Prime rewards distributed this cycle')).toBeInTheDocument();
+    expect(screen.getByText('$462.3K')).toBeInTheDocument();
+  });
+});

apps/evm/src/pages/PrimeLeaderboard/TotalRewardsSection/index.tsx

@@ -0,0 +1,18 @@
+import { TotalRewardsCard } from '../TotalRewardsCard';
+import { useGetPrimeTotalRewards } from '../useGetPrimeTotalRewards';
+
+export interface TotalRewardsSectionProps {
+  className?: string;
+}
+
+export const TotalRewardsSection: React.FC<TotalRewardsSectionProps> = ({ className }) => {
+  const { totalRewardsCents, marketRewards } = useGetPrimeTotalRewards();
+
+  return (
+    <TotalRewardsCard
+      totalRewardsCents={totalRewardsCents}
+      marketRewards={marketRewards}
+      className={className}
+    />
+  );
+};

apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/__tests__/index.spec.tsx

@@ -0,0 +1,14 @@
+import { screen } from '@testing-library/react';
+
+import { renderComponent } from 'testUtils/render';
+
+import { UserRewardsSection } from '..';
+
+describe('pages/PrimeLeaderboard/UserRewardsSection', () => {
+  it('renders the user Prime rewards from the data hook', () => {
+    renderComponent(<UserRewardsSection />);
+
+    expect(screen.getByText('Your Prime rewards this cycle')).toBeInTheDocument();
+    expect(screen.getByText('$18.4K')).toBeInTheDocument();
+  });
+});

apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/index.tsx

@@ -0,0 +1,18 @@
+import { UserRewardsCard } from '../UserRewardsCard';
+import { useGetPrimeUserRewards } from '../useGetPrimeUserRewards';
+
+export interface UserRewardsSectionProps {
+  className?: string;
+}
+
+export const UserRewardsSection: React.FC<UserRewardsSectionProps> = ({ className }) => {
+  const { totalRewardsCents, marketRewards } = useGetPrimeUserRewards();
+
+  return (
+    <UserRewardsCard
+      totalRewardsCents={totalRewardsCents}
+      marketRewards={marketRewards}
+      className={className}
+    />
+  );
+};

apps/evm/src/pages/PrimeLeaderboard/__tests__/index.spec.tsx

@@ -17,12 +17,12 @@ vi.mock('../EndOfCycle', () => ({
   EndOfCycle: () => <div data-testid="end-of-cycle" />,
 }));
 
-vi.mock('../TotalRewardsCard', () => ({
-  TotalRewardsCard: () => <div data-testid="total-rewards-card" />,
+vi.mock('../TotalRewardsSection', () => ({
+  TotalRewardsSection: () => <div data-testid="total-rewards-section" />,
 }));
 
-vi.mock('../UserRewardsCard', () => ({
-  UserRewardsCard: () => <div data-testid="user-rewards-card" />,
+vi.mock('../UserRewardsSection', () => ({
+  UserRewardsSection: () => <div data-testid="user-rewards-section" />,
 }));
 
 vi.mock('../RewardTable', () => ({
@@ -43,8 +43,8 @@ describe('pages/PrimeLeaderboard', () => {
 
     expect(screen.getByTestId('hero')).toBeInTheDocument();
     expect(screen.getByTestId('end-of-cycle')).toBeInTheDocument();
-    expect(screen.getByTestId('total-rewards-card')).toBeInTheDocument();
-    expect(screen.getByTestId('user-rewards-card')).toBeInTheDocument();
+    expect(screen.getByTestId('total-rewards-section')).toBeInTheDocument();
+    expect(screen.getByTestId('user-rewards-section')).toBeInTheDocument();
     expect(screen.getByTestId('reward-table')).toBeInTheDocument();
     expect(screen.getByTestId('rank-card')).toBeInTheDocument();
     expect(screen.getByTestId('rank-table')).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('pages/PrimeLeaderboard', () => {
   it('hides the user rewards card when the wallet is not connected', () => {
     renderComponent(<PrimeLeaderboard />);
 
-    expect(screen.getByTestId('total-rewards-card')).toBeInTheDocument();
-    expect(screen.queryByTestId('user-rewards-card')).not.toBeInTheDocument();
+    expect(screen.getByTestId('total-rewards-section')).toBeInTheDocument();
+    expect(screen.queryByTestId('user-rewards-section')).not.toBeInTheDocument();
   });
 });

apps/evm/src/pages/PrimeLeaderboard/index.tsx

@@ -1,42 +1,16 @@
 import { Card, Page } from 'components';
-import { useGetTokens } from 'libs/tokens';
 import { useAccountAddress } from 'libs/wallet';
 
 import { EndOfCycle } from './EndOfCycle';
 import { Hero } from './Hero';
 import { RankCard } from './RankCard';
 import { RankTable } from './RankTable';
 import { RewardTable } from './RewardTable';
-import { TotalRewardsCard } from './TotalRewardsCard';
-import { UserRewardsCard } from './UserRewardsCard';
-
-// TODO: use the reward pool data returned by the API
-const placeholderTotalRewardsCents = 46_230_000;
-const placeholderUserRewardsCents = 1_840_000;
-const placeholderMarketRewardsCents = [28_040_000, 17_190_000];
-const placeholderApyPercentage = 3.78;
+import { TotalRewardsSection } from './TotalRewardsSection';
+import { UserRewardsSection } from './UserRewardsSection';
 
 const PrimeLeaderboard: React.FC = () => {
   const { accountAddress } = useAccountAddress();
-  const tokens = useGetTokens();
-
-  // TODO: replace these placeholder tokens (currently the first tokens from the list, unrelated
-  // to the actual Prime reward markets) with the real markets returned by the API
-  const marketRewards = tokens
-    .slice(0, placeholderMarketRewardsCents.length)
-    .map((token, index) => ({ token, rewardsCents: placeholderMarketRewardsCents[index] }));
-
-  const userMarketRewards = marketRewards.map(reward => ({
-    ...reward,
-    apyPercentage: placeholderApyPercentage,
-  }));
-
-  const totalRewardsCard = (
-    <TotalRewardsCard
-      totalRewardsCents={placeholderTotalRewardsCents}
-      marketRewards={marketRewards}
-    />
-  );
 
   return (
     <Page>
@@ -61,15 +35,12 @@ const PrimeLeaderboard: React.FC = () => {
         <Card className="flex flex-col gap-2.5 border-dark-grey bg-background p-3 lg:grow">
           {accountAddress ? (
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              {totalRewardsCard}
+              <TotalRewardsSection />
 
-              <UserRewardsCard
-                totalRewardsCents={placeholderUserRewardsCents}
-                marketRewards={userMarketRewards}
-              />
+              <UserRewardsSection />
             </div>
           ) : (
-            totalRewardsCard
+            <TotalRewardsSection />
           )}
 
           <RewardTable />

apps/evm/src/pages/PrimeLeaderboard/useGetPrimeTotalRewards/index.ts

@@ -0,0 +1,26 @@
+import { useGetTokens } from 'libs/tokens';
+
+import type { MarketReward } from '../TotalRewardsCard';
+
+export interface UseGetPrimeTotalRewardsOutput {
+  totalRewardsCents: number;
+  marketRewards: MarketReward[];
+}
+
+// TODO: replace these placeholder values with the data returned by the API
+const placeholderTotalRewardsCents = 46_230_000;
+const placeholderMarketRewardsCents = [28_040_000, 17_190_000];
+
+export const useGetPrimeTotalRewards = (): UseGetPrimeTotalRewardsOutput => {
+  const tokens = useGetTokens();
+
+  // TODO: replace these placeholder tokens with the real Prime markets returned by the API
+  const marketRewards = tokens
+    .slice(0, placeholderMarketRewardsCents.length)
+    .map((token, index) => ({ token, rewardsCents: placeholderMarketRewardsCents[index] }));
+
+  return {
+    totalRewardsCents: placeholderTotalRewardsCents,
+    marketRewards,
+  };
+};

apps/evm/src/pages/PrimeLeaderboard/useGetPrimeUserRewards/index.ts

@@ -0,0 +1,31 @@
+import { useGetTokens } from 'libs/tokens';
+
+import type { UserMarketReward } from '../UserRewardsCard';
+
+export interface UseGetPrimeUserRewardsOutput {
+  totalRewardsCents: number;
+  marketRewards: UserMarketReward[];
+}
+
+// TODO: replace these placeholder values with the data returned by the API
+const placeholderTotalRewardsCents = 1_840_000;
+const placeholderMarketRewardsCents = [1_140_000, 700_000];
+const placeholderApyPercentage = 3.78;
+
+export const useGetPrimeUserRewards = (): UseGetPrimeUserRewardsOutput => {
+  const tokens = useGetTokens();
+
+  // TODO: replace these placeholder tokens with the real Prime markets returned by the API
+  const marketRewards = tokens
+    .slice(0, placeholderMarketRewardsCents.length)
+    .map((token, index) => ({
+      token,
+      rewardsCents: placeholderMarketRewardsCents[index],
+      apyPercentage: placeholderApyPercentage,
+    }));
+
+  return {
+    totalRewardsCents: placeholderTotalRewardsCents,
+    marketRewards,
+  };
+};