feat: support prime user rewards card

cuzz-venus · cuzz-venus · commit 3b75ee765f78 · 2026-06-14T17:49:07.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
@@ -1250,6 +1250,24 @@
     "title": "Prime leaderboard",
     "totalRewards": {
       "title": "Total Prime rewards distributed this cycle"
+    },
+    "userRewards": {
+      "marketActions": "Open market actions",
+      "title": "Your Prime rewards this cycle"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "Wallet",
+        "primeScore": "Prime score"
+      },
+      "walletTooltip": "Users ranked by Prime score. The top 500 wallets become eligible for Prime in the next cycle."
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "Wallet",
+        "totalRewards": "Total rewards",
+        "marketRewards": "{{symbol}} rewards"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/ja.json b/apps/evm/src/libs/translations/translations/ja.json
@@ -1250,6 +1250,24 @@
     "title": "Prime リーダーボード",
     "totalRewards": {
       "title": "今サイクルに分配された Prime 報酬の総額"
+    },
+    "userRewards": {
+      "marketActions": "マーケット操作を開く",
+      "title": "今サイクルのあなたの Prime 報酬"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "ウォレット",
+        "primeScore": "Prime スコア"
+      },
+      "walletTooltip": "Prime スコア順のランキングです。上位 500 のウォレットが次のサイクルで Prime の対象になります。"
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "ウォレット",
+        "totalRewards": "報酬合計",
+        "marketRewards": "{{symbol}} の報酬"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/th.json b/apps/evm/src/libs/translations/translations/th.json
@@ -1250,6 +1250,24 @@
     "title": "กระดานผู้นำ Prime",
     "totalRewards": {
       "title": "รางวัล Prime ทั้งหมดที่แจกในรอบนี้"
+    },
+    "userRewards": {
+      "marketActions": "เปิดการดำเนินการของตลาด",
+      "title": "รางวัล Prime ของคุณในรอบนี้"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "กระเป๋าเงิน",
+        "primeScore": "คะแนน Prime"
+      },
+      "walletTooltip": "ผู้ใช้จัดอันดับตามคะแนน Prime กระเป๋าเงิน 500 อันดับแรกจะมีสิทธิ์รับ Prime ในรอบถัดไป"
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "กระเป๋าเงิน",
+        "totalRewards": "รางวัลทั้งหมด",
+        "marketRewards": "รางวัล {{symbol}}"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/tr.json b/apps/evm/src/libs/translations/translations/tr.json
@@ -1250,6 +1250,24 @@
     "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"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "Cüzdan",
+        "primeScore": "Prime puanı"
+      },
+      "walletTooltip": "Kullanıcılar Prime puanına göre sıralanır. İlk 500 cüzdan bir sonraki döngüde Prime için uygun olur."
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "Cüzdan",
+        "totalRewards": "Toplam ödüller",
+        "marketRewards": "{{symbol}} ödülleri"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/vi.json b/apps/evm/src/libs/translations/translations/vi.json
@@ -1250,6 +1250,24 @@
     "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"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "Ví",
+        "primeScore": "Điểm Prime"
+      },
+      "walletTooltip": "Người dùng được xếp hạng theo điểm Prime. 500 ví dẫn đầu sẽ đủ điều kiện nhận Prime trong chu kỳ tiếp theo."
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "Ví",
+        "totalRewards": "Tổng phần thưởng",
+        "marketRewards": "Phần thưởng {{symbol}}"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/zh-Hans.json b/apps/evm/src/libs/translations/translations/zh-Hans.json
@@ -1250,6 +1250,24 @@
     "title": "Prime 排行榜",
     "totalRewards": {
       "title": "本周期已分配的 Prime 总奖励"
+    },
+    "userRewards": {
+      "marketActions": "打开市场操作",
+      "title": "你本周期的 Prime 奖励"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "钱包",
+        "primeScore": "Prime 分数"
+      },
+      "walletTooltip": "用户按 Prime 分数排名。排名前 500 的钱包将在下个周期获得 Prime 资格。"
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "钱包",
+        "totalRewards": "总奖励",
+        "marketRewards": "{{symbol}} 奖励"
+      }
     }
   },
   "primeStatusBanner": {
diff --git a/apps/evm/src/libs/translations/translations/zh-Hant.json b/apps/evm/src/libs/translations/translations/zh-Hant.json
@@ -1250,6 +1250,24 @@
     "title": "Prime 排行榜",
     "totalRewards": {
       "title": "本週期已分配的 Prime 總獎勵"
+    },
+    "userRewards": {
+      "marketActions": "開啟市場操作",
+      "title": "你本週期的 Prime 獎勵"
+    },
+    "rankTable": {
+      "columns": {
+        "wallet": "錢包",
+        "primeScore": "Prime 分數"
+      },
+      "walletTooltip": "使用者依 Prime 分數排名。排名前 500 的錢包將在下個週期取得 Prime 資格。"
+    },
+    "rewardTable": {
+      "columns": {
+        "wallet": "錢包",
+        "totalRewards": "總獎勵",
+        "marketRewards": "{{symbol}} 獎勵"
+      }
     }
   },
   "primeStatusBanner": {
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
@@ -1,16 +1,77 @@
 import { cn } from '@venusprotocol/ui';
 
+import primeLogoSrc from 'assets/img/primeLogo.svg';
+import { Icon } from 'components';
+import { useTranslation } from 'libs/translations';
+import type { Token } from 'types';
+import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
+
+import { MarketRewardRow } from '../MarketRewardRow';
+
+export interface UserMarketReward {
+  token: Token;
+  rewardsCents: number;
+  apyPercentage: number;
+}
+
 export interface UserRewardsCardProps {
+  totalRewardsCents: number;
+  marketRewards: UserMarketReward[];
   className?: string;
 }
 
-export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({ className }) => (
-  <div
-    className={cn(
-      'flex h-58 items-center justify-center rounded-lg bg-background-active text-p3s text-light-grey',
-      className,
-    )}
-  >
-    Your Prime Rewards Card
-  </div>
-);
+export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({
+  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.userRewards.title')}</p>
+
+        <div className="flex items-center gap-x-3">
+          <span className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-[#805c4e]">
+            <img src={primeLogoSrc} alt="" className="h-5" />
+          </span>
+
+          <p className="text-h5 text-white">
+            {formatCentsToReadableValue({ value: totalRewardsCents })}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {marketRewards.map(({ token, rewardsCents, apyPercentage }) => (
+          <MarketRewardRow
+            key={token.address}
+            token={token}
+            rewardsCents={rewardsCents}
+            totalRewardsCents={totalRewardsCents}
+          >
+            <div className="ml-2 flex items-center gap-x-1 text-green">
+              <Icon name="sparkle" />
+
+              <span className="text-b1s">{formatPercentageToReadableValue(apyPercentage)}</span>
+            </div>
+
+            <button
+              type="button"
+              aria-label={t('primeLeaderboard.userRewards.marketActions')}
+              className="ml-2 shrink-0"
+            >
+              <Icon name="dots" className="text-light-grey" />
+            </button>
+          </MarketRewardRow>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/evm/src/pages/PrimeLeaderboard/index.tsx b/apps/evm/src/pages/PrimeLeaderboard/index.tsx
@@ -12,7 +12,9 @@ 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;
 
 const PrimeLeaderboard: React.FC = () => {
   const { accountAddress } = useAccountAddress();
@@ -24,6 +26,11 @@ const PrimeLeaderboard: React.FC = () => {
     .slice(0, placeholderMarketRewardsCents.length)
     .map((token, index) => ({ token, rewardsCents: placeholderMarketRewardsCents[index] }));
 
+  const userMarketRewards = marketRewards.map(reward => ({
+    ...reward,
+    apyPercentage: placeholderApyPercentage,
+  }));
+
   const totalRewardsCard = (
     <TotalRewardsCard
       totalRewardsCents={placeholderTotalRewardsCents}
@@ -56,7 +63,10 @@ const PrimeLeaderboard: React.FC = () => {
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               {totalRewardsCard}
 
-              <UserRewardsCard />
+              <UserRewardsCard
+                totalRewardsCents={placeholderUserRewardsCents}
+                marketRewards={userMarketRewards}
+              />
             </div>
           ) : (
             totalRewardsCard
