feat: add prime total rewards card

cuzz-venus · cuzz-venus · commit 4f5780cafdb8 · 2026-06-16T14:37:01.000+08:00
diff --git a/apps/evm/src/components/Icon/icons/dotShortcut.tsx b/apps/evm/src/components/Icon/icons/dotShortcut.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+
+const SvgDotShortcut = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
+    <path
+      d="M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgDotShortcut;
diff --git a/apps/evm/src/components/Icon/icons/index.ts b/apps/evm/src/components/Icon/icons/index.ts
@@ -39,6 +39,7 @@ export { default as checkInlineDotted } from './checkInlineDotted';
 export { default as mark } from './mark';
 export { default as arrowShaft } from './arrowShaft';
 export { default as notice } from './notice';
+export { default as dotShortcut } from './dotShortcut';
 export { default as dots } from './dots';
 export { default as exclamation } from './exclamation';
 export { default as comment } from './comment';
@@ -66,6 +67,7 @@ export { default as shield2 } from './shield2';
 export { default as lightning2 } from './lightning2';
 export { default as graph } from './graph';
 export { default as star } from './star';
+export { default as sparkle } from './sparkle';
 export { default as download } from './download';
 export { default as arrowUpFull2 } from './arrowUpFull2';
 export { default as transactionFile } from './transactionFile';
diff --git a/apps/evm/src/components/Icon/icons/sparkle.tsx b/apps/evm/src/components/Icon/icons/sparkle.tsx
@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+const SvgSparkle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.73138 8.51568C3.84319 8.29954 4.15265 8.29967 4.26459 8.51568L5.31732 10.5528C5.34582 10.6078 5.39121 10.6522 5.44623 10.6807L7.48236 11.7344C7.69864 11.8463 7.69864 12.1548 7.48236 12.2667L5.44623 13.3204C5.39121 13.3489 5.34582 13.3933 5.31732 13.4483L4.26459 15.4854C4.15265 15.7014 3.84319 15.7015 3.73138 15.4854L2.67865 13.4483C2.6501 13.3933 2.60481 13.3488 2.54974 13.3204L0.51361 12.2667C0.297547 12.1548 0.297547 11.8463 0.51361 11.7344L2.54974 10.6807C2.60481 10.6522 2.6501 10.6078 2.67865 10.5528L3.73138 8.51568ZM10.2236 1.62505C10.3287 1.38611 10.6673 1.38614 10.7724 1.62505L11.8652 4.10845C12.0667 4.56644 12.4325 4.93239 12.8906 5.13384L15.374 6.22564C15.6129 6.33074 15.6129 6.67034 15.374 6.77544L12.8906 7.86724C12.4325 8.06869 12.0667 8.43463 11.8652 8.89263L10.7724 11.376C10.6673 11.6149 10.3287 11.615 10.2236 11.376L9.13177 8.89263C8.93027 8.43455 8.5635 8.06872 8.10541 7.86724L5.62298 6.77544C5.38403 6.67034 5.38403 6.33074 5.62298 6.22564L8.10541 5.13384C8.5635 4.93236 8.93027 4.56653 9.13177 4.10845L10.2236 1.62505ZM3.90912 0.171926C3.94641 0.100177 4.04943 0.10031 4.08685 0.171926L4.66498 1.29107C4.67443 1.30923 4.68979 1.32358 4.70795 1.33306L5.82611 1.91216C5.8982 1.94944 5.8982 2.05164 5.82611 2.08892L4.70795 2.66802C4.68979 2.6775 4.67443 2.69184 4.66498 2.71001L4.08685 3.82915C4.04943 3.90077 3.94641 3.9009 3.90912 3.82915L3.33099 2.71001C3.32147 2.69182 3.30627 2.67746 3.28802 2.66802L2.16986 2.08892C2.09819 2.05156 2.09819 1.94952 2.16986 1.91216L3.28802 1.33306C3.30627 1.32362 3.32147 1.30926 3.33099 1.29107L3.90912 0.171926Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgSparkle;
diff --git a/apps/evm/src/libs/translations/translations/en.json b/apps/evm/src/libs/translations/translations/en.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "Refreshed hourly · Last refresh: {{date, distanceToNow}} ago",
-    "title": "Prime leaderboard"
+    "title": "Prime leaderboard",
+    "totalRewards": {
+      "title": "Total Prime rewards distributed this cycle"
+    },
+    "userRewards": {
+      "marketActions": "Open market actions",
+      "title": "Your Prime rewards this cycle"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "You can now become a Prime user",
diff --git a/apps/evm/src/libs/translations/translations/ja.json b/apps/evm/src/libs/translations/translations/ja.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "1時間ごとに更新 · 最終更新：{{date, distanceToNow}}前",
-    "title": "Prime リーダーボード"
+    "title": "Prime リーダーボード",
+    "totalRewards": {
+      "title": "今サイクルに分配された Prime 報酬の総額"
+    },
+    "userRewards": {
+      "marketActions": "マーケット操作を開く",
+      "title": "今サイクルのあなたの Prime 報酬"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "Primeユーザーになれるようになりました",
diff --git a/apps/evm/src/libs/translations/translations/th.json b/apps/evm/src/libs/translations/translations/th.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "รีเฟรชทุกชั่วโมง · รีเฟรชล่าสุด: {{date, distanceToNow}} ที่แล้ว",
-    "title": "กระดานผู้นำ Prime"
+    "title": "กระดานผู้นำ Prime",
+    "totalRewards": {
+      "title": "รางวัล Prime ทั้งหมดที่แจกในรอบนี้"
+    },
+    "userRewards": {
+      "marketActions": "เปิดการดำเนินการของตลาด",
+      "title": "รางวัล Prime ของคุณในรอบนี้"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "ตอนนี้คุณสามารถเป็นผู้ใช้ Prime ได้แล้ว",
diff --git a/apps/evm/src/libs/translations/translations/tr.json b/apps/evm/src/libs/translations/translations/tr.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "Saatlik yenilenir · Son yenileme: {{date, distanceToNow}} önce",
-    "title": "Prime lider tablosu"
+    "title": "Prime lider tablosu",
+    "totalRewards": {
+      "title": "Bu döngüde dağıtılan toplam Prime ödülü"
+    },
+    "userRewards": {
+      "marketActions": "Piyasa işlemlerini aç",
+      "title": "Bu döngüdeki Prime ödülleriniz"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "Artık Prime kullanıcısı olabilirsiniz",
diff --git a/apps/evm/src/libs/translations/translations/vi.json b/apps/evm/src/libs/translations/translations/vi.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "Làm mới mỗi giờ · Lần làm mới cuối: {{date, distanceToNow}} trước",
-    "title": "Bảng xếp hạng Prime"
+    "title": "Bảng xếp hạng Prime",
+    "totalRewards": {
+      "title": "Tổng thưởng Prime đã phân phối trong chu kỳ này"
+    },
+    "userRewards": {
+      "marketActions": "Mở thao tác thị trường",
+      "title": "Phần thưởng Prime của bạn trong chu kỳ này"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "Bạn đã có thể trở thành người dùng Prime",
diff --git a/apps/evm/src/libs/translations/translations/zh-Hans.json b/apps/evm/src/libs/translations/translations/zh-Hans.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "每小时刷新 · 上次刷新：{{date, distanceToNow}}前",
-    "title": "Prime 排行榜"
+    "title": "Prime 排行榜",
+    "totalRewards": {
+      "title": "本周期已分配的 Prime 总奖励"
+    },
+    "userRewards": {
+      "marketActions": "打开市场操作",
+      "title": "你本周期的 Prime 奖励"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "你现在可以成为 Prime 用户",
diff --git a/apps/evm/src/libs/translations/translations/zh-Hant.json b/apps/evm/src/libs/translations/translations/zh-Hant.json
@@ -1276,7 +1276,14 @@
       }
     },
     "tablesRefreshNote": "每小時刷新 · 上次刷新：{{date, distanceToNow}}前",
-    "title": "Prime 排行榜"
+    "title": "Prime 排行榜",
+    "totalRewards": {
+      "title": "本週期已分配的 Prime 總獎勵"
+    },
+    "userRewards": {
+      "marketActions": "開啟市場操作",
+      "title": "你本週期的 Prime 獎勵"
+    }
   },
   "primeStatusBanner": {
     "becomePrimeTitle": "你現在可以成為 Prime 用戶",
diff --git a/apps/evm/src/pages/PrimeLeaderboard/MarketRewardRow/__tests__/index.spec.tsx b/apps/evm/src/pages/PrimeLeaderboard/MarketRewardRow/__tests__/index.spec.tsx
@@ -0,0 +1,19 @@
+import { screen } from '@testing-library/react';
+
+import { usdc } from '__mocks__/models/tokens';
+import { renderComponent } from 'testUtils/render';
+import { MarketRewardRow } from '..';
+
+describe('pages/PrimeLeaderboard/MarketRewardRow', () => {
+  it('renders the token, reward amount and trailing content', () => {
+    renderComponent(
+      <MarketRewardRow token={usdc} rewardsCents={28_040_000} totalRewardsCents={46_230_000}>
+        <span>3.78%</span>
+      </MarketRewardRow>,
+    );
+
+    expect(screen.getByText(usdc.symbol)).toBeInTheDocument();
+    expect(screen.getByText('$280.4K')).toBeInTheDocument();
+    expect(screen.getByText('3.78%')).toBeInTheDocument();
+  });
+});
diff --git a/apps/evm/src/pages/PrimeLeaderboard/MarketRewardRow/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/MarketRewardRow/index.tsx
@@ -0,0 +1,36 @@
+import { TokenIconWithSymbol } from 'components';
+import type { Token } from 'types';
+import { formatCentsToReadableValue } from 'utilities';
+
+export interface MarketRewardRowProps {
+  token: Token;
+  rewardsCents: number;
+  totalRewardsCents: number;
+  children?: React.ReactNode;
+}
+
+export const MarketRewardRow: React.FC<MarketRewardRowProps> = ({
+  token,
+  rewardsCents,
+  totalRewardsCents,
+  children,
+}) => {
+  const progressPercentage =
+    totalRewardsCents > 0 ? Math.min(100, (rewardsCents / totalRewardsCents) * 100) : 0;
+
+  return (
+    <div className="flex items-center">
+      <TokenIconWithSymbol token={token} className="shrink-0 text-b1s text-white" />
+
+      <span className="ml-auto text-p3r text-white">
+        {formatCentsToReadableValue({ value: rewardsCents })}
+      </span>
+
+      <div className="ml-1 h-1.5 w-1/4 shrink-0 overflow-hidden rounded-full bg-lightGrey">
+        <div className="h-full rounded-full bg-green" style={{ width: `${progressPercentage}%` }} />
+      </div>
+
+      {children}
+    </div>
+  );
+};
diff --git a/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/__tests__/index.spec.tsx b/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/__tests__/index.spec.tsx
@@ -0,0 +1,26 @@
+import { screen } from '@testing-library/react';
+
+import { usdc, xvs } from '__mocks__/models/tokens';
+import { renderComponent } from 'testUtils/render';
+import { TotalRewardsCard } from '..';
+
+describe('pages/PrimeLeaderboard/TotalRewardsCard', () => {
+  it('renders the total and per-market rewards', () => {
+    renderComponent(
+      <TotalRewardsCard
+        totalRewardsCents={46_230_000}
+        marketRewards={[
+          { token: usdc, rewardsCents: 28_040_000 },
+          { token: xvs, rewardsCents: 17_190_000 },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Total Prime rewards distributed this cycle')).toBeInTheDocument();
+    expect(screen.getByText('$462.3K')).toBeInTheDocument();
+    expect(screen.getByText('$280.4K')).toBeInTheDocument();
+    expect(screen.getByText('$171.9K')).toBeInTheDocument();
+    expect(screen.getByText(usdc.symbol)).toBeInTheDocument();
+    expect(screen.getByText(xvs.symbol)).toBeInTheDocument();
+  });
+});
diff --git a/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/index.tsx
@@ -1,16 +1,54 @@
 import { cn } from '@venusprotocol/ui';
 
+import { useTranslation } from 'libs/translations';
+import type { Token } from 'types';
+import { formatCentsToReadableValue } from 'utilities';
+
+import { MarketRewardRow } from '../MarketRewardRow';
+
+export interface MarketReward {
+  token: Token;
+  rewardsCents: number;
+}
+
 export interface TotalRewardsCardProps {
+  totalRewardsCents: number;
+  marketRewards: MarketReward[];
   className?: string;
 }
 
-export const TotalRewardsCard: React.FC<TotalRewardsCardProps> = ({ className }) => (
-  <div
-    className={cn(
-      'flex h-58 items-center justify-center rounded-lg bg-background-active text-p3s text-light-grey',
-      className,
-    )}
-  >
-    Total Prime Rewards Card
-  </div>
-);
+export const TotalRewardsCard: React.FC<TotalRewardsCardProps> = ({
+  totalRewardsCents,
+  marketRewards,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        'flex h-58 flex-col justify-between rounded-lg bg-background-active p-4',
+        className,
+      )}
+    >
+      <div>
+        <p className="text-b1r text-light-grey">{t('primeLeaderboard.totalRewards.title')}</p>
+
+        <p className="text-h5 text-white">
+          {formatCentsToReadableValue({ value: totalRewardsCents })}
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {marketRewards.map(({ token, rewardsCents }) => (
+          <MarketRewardRow
+            key={token.address}
+            token={token}
+            rewardsCents={rewardsCents}
+            totalRewardsCents={totalRewardsCents}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsSection/__tests__/index.spec.tsx b/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();
+  });
+});
diff --git a/apps/evm/src/pages/PrimeLeaderboard/TotalRewardsSection/index.tsx b/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}
+    />
+  );
+};
diff --git a/apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/__tests__/index.spec.tsx b/apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/__tests__/index.spec.tsx
@@ -0,0 +1,24 @@
+import { screen } from '@testing-library/react';
+
+import { usdc, xvs } from '__mocks__/models/tokens';
+import { renderComponent } from 'testUtils/render';
+import { UserRewardsCard } from '..';
+
+describe('pages/PrimeLeaderboard/UserRewardsCard', () => {
+  it('renders the user total, per-market rewards and Prime APYs', () => {
+    renderComponent(
+      <UserRewardsCard
+        totalRewardsCents={1_840_000}
+        marketRewards={[
+          { token: usdc, rewardsCents: 1_140_000, apyPercentage: 3.78 },
+          { token: xvs, rewardsCents: 700_000, apyPercentage: 4.2 },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Your Prime rewards this cycle')).toBeInTheDocument();
+    expect(screen.getByText('$18.4K')).toBeInTheDocument();
+    expect(screen.getByText(usdc.symbol)).toBeInTheDocument();
+    expect(screen.getByText('3.78%')).toBeInTheDocument();
+  });
+});
diff --git a/apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/index.tsx
diff --git a/apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/__tests__/index.spec.tsx b/apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/__tests__/index.spec.tsx
diff --git a/apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/UserRewardsSection/index.tsx
diff --git a/apps/evm/src/pages/PrimeLeaderboard/__tests__/index.spec.tsx b/apps/evm/src/pages/PrimeLeaderboard/__tests__/index.spec.tsx
diff --git a/apps/evm/src/pages/PrimeLeaderboard/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/index.tsx
diff --git a/apps/evm/src/pages/PrimeLeaderboard/useGetPrimeTotalRewards/index.ts b/apps/evm/src/pages/PrimeLeaderboard/useGetPrimeTotalRewards/index.ts
diff --git a/apps/evm/src/pages/PrimeLeaderboard/useGetPrimeUserRewards/index.ts b/apps/evm/src/pages/PrimeLeaderboard/useGetPrimeUserRewards/index.ts
