feat: support last cycle prime summary modal

Author: cuzz-venus

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

@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/react';
+
+import { renderComponent } from 'testUtils/render';
+
+import { LastCycleSummaryModal } from '..';
+
+describe('pages/PrimeLeaderboard/LastCycleSummaryModal', () => {
+  it('renders the last cycle total and user Prime rewards', async () => {
+    renderComponent(<LastCycleSummaryModal isOpen handleClose={() => {}} />);
+
+    expect(await screen.findByText('Last Cycle Prime Summary')).toBeInTheDocument();
+    expect(
+      screen.getByText('Total Prime rewards distributed during the last cycle'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Your Prime rewards this cycle')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,96 @@
+import { cn } from '@venusprotocol/ui';
+
+import { Icon, Modal } from 'components';
+import { useGetTokens } from 'libs/tokens';
+import { useTranslation } from 'libs/translations';
+
+import { PrimeRewardBadge } from '../PrimeRewardBadge';
+import { TotalRewardsCard } from '../TotalRewardsCard';
+import { UserRewardsCard } from '../UserRewardsCard';
+
+// TODO: replace these placeholder values with the data returned by the API
+const placeholderTotalRewardsCents = 46_230_000;
+const placeholderTotalMarketRewardsCents = [28_040_000, 17_190_000];
+const placeholderUserRewardsCents = 1_840_000;
+const placeholderUserMarketRewardsCents = [1_140_000, 700_000];
+const placeholderApyPercentage = 3.78;
+const placeholderHasRewards = true;
+const placeholderIsEligible = true;
+
+export interface LastCycleSummaryModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+}
+
+export const LastCycleSummaryModal: React.FC<LastCycleSummaryModalProps> = ({
+  isOpen,
+  handleClose,
+}) => {
+  const { t } = useTranslation();
+  const tokens = useGetTokens();
+
+  // TODO: replace these placeholder tokens with the real Prime markets returned by the API
+  const markets = tokens.slice(0, placeholderTotalMarketRewardsCents.length);
+
+  const totalMarketRewards = markets.map((token, index) => ({
+    token,
+    rewardsCents: placeholderTotalMarketRewardsCents[index],
+  }));
+
+  const userMarketRewards = markets.map((token, index) => ({
+    token,
+    rewardsCents: placeholderUserMarketRewardsCents[index],
+    apyPercentage: placeholderApyPercentage,
+  }));
+
+  let userRewardsContent: React.ReactNode;
+
+  if (!placeholderHasRewards) {
+    userRewardsContent = (
+      <div className="flex items-center gap-x-3">
+        {placeholderIsEligible ? (
+          <PrimeRewardBadge />
+        ) : (
+          <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-dark-blue-hover">
+            <Icon name="person" className="text-light-grey" />
+          </span>
+        )}
+
+        <p
+          className={cn(
+            'flex-1 text-b1r',
+            placeholderIsEligible ? 'text-light-grey' : 'text-yellow',
+          )}
+        >
+          {placeholderIsEligible
+            ? t('primeLeaderboard.lastCycleSummary.eligibleMessage')
+            : t('primeLeaderboard.lastCycleSummary.notEligibleMessage')}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      handleClose={handleClose}
+      title={t('primeLeaderboard.lastCycleSummary.title')}
+      className="max-w-113"
+    >
+      <div className="flex flex-col gap-3">
+        <TotalRewardsCard
+          title={t('primeLeaderboard.lastCycleSummary.totalRewardsTitle')}
+          totalRewardsCents={placeholderTotalRewardsCents}
+          marketRewards={totalMarketRewards}
+        />
+
+        <UserRewardsCard
+          totalRewardsCents={placeholderUserRewardsCents}
+          marketRewards={userMarketRewards}
+          content={userRewardsContent}
+          showMarketActions={false}
+        />
+      </div>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { cn } from '@venusprotocol/ui';
+
+import primeLogoSrc from 'assets/img/primeLogo.svg';
+
+export interface PrimeRewardBadgeProps {
+  className?: string;
+}
+
+export const PrimeRewardBadge: React.FC<PrimeRewardBadgeProps> = ({ className }) => (
+  <span
+    className={cn(
+      'flex size-10 shrink-0 items-center justify-center rounded-lg border border-[#805c4e]',
+      className,
+    )}
+  >
+    <img src={primeLogoSrc} alt="" className="h-5" />
+  </span>
+);

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

@@ -14,12 +14,14 @@ export interface MarketReward {
 export interface TotalRewardsCardProps {
   totalRewardsCents: number;
   marketRewards: MarketReward[];
+  title?: React.ReactNode;
   className?: string;
 }
 
 export const TotalRewardsCard: React.FC<TotalRewardsCardProps> = ({
   totalRewardsCents,
   marketRewards,
+  title,
   className,
 }) => {
   const { t } = useTranslation();
@@ -32,7 +34,9 @@ export const TotalRewardsCard: React.FC<TotalRewardsCardProps> = ({
       )}
     >
       <div>
-        <p className="text-b1r text-light-grey">{t('primeLeaderboard.totalRewards.title')}</p>
+        <p className="text-b1r text-light-grey">
+          {title ?? t('primeLeaderboard.totalRewards.title')}
+        </p>
 
         <p className="text-h5 text-white">
           {formatCentsToReadableValue({ value: totalRewardsCents })}

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

@@ -19,15 +19,20 @@ export interface UserMarketReward {
 export interface UserRewardsCardProps {
   totalRewardsCents: number;
   marketRewards: UserMarketReward[];
+  title?: React.ReactNode;
   // Replaces the default headline (Prime badge + total amount), e.g. an eligibility message
   content?: React.ReactNode;
+  // Toggles the per-market Prime APY and actions menu, hidden when the card is a read-only summary
+  showMarketActions?: boolean;
   className?: string;
 }
 
 export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({
   totalRewardsCents,
   marketRewards,
+  title,
   content,
+  showMarketActions = true,
   className,
 }) => {
   const { t } = useTranslation();
@@ -42,7 +47,9 @@ export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({
       )}
     >
       <div className={cn(content && 'flex flex-col gap-1')}>
-        <p className="text-b1r text-light-grey">{t('primeLeaderboard.userRewards.title')}</p>
+        <p className="text-b1r text-light-grey">
+          {title ?? t('primeLeaderboard.userRewards.title')}
+        </p>
 
         {content ?? (
           <div className="flex items-center gap-x-3">
@@ -72,9 +79,13 @@ export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({
               rewardsCents={rewardsCents}
               totalRewardsCents={totalRewardsCents}
             >
-              {asset && <Apy asset={asset} type="supply" className="ml-2" />}
+              {showMarketActions && (
+                <>
+                  {asset && <Apy asset={asset} type="supply" className="ml-2" />}
 
-              <MarketActions token={token} />
+                  <MarketActions token={token} />
+                </>
+              )}
             </MarketRewardRow>
           );
         })}