feat: support last cycle modal open

Author: cuzz-venus

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

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 
 import { renderComponent } from 'testUtils/render';
 import { EndOfCycle } from '..';
@@ -13,6 +13,14 @@ describe('pages/PrimeLeaderboard/EndOfCycle', () => {
     expect(screen.getByText("See last cycle's Prime summary")).toBeInTheDocument();
   });
 
+  it('opens the last cycle summary modal from the helper link', async () => {
+    renderComponent(<EndOfCycle endDate={new Date(Date.now() + 5 * ONE_DAY_MS)} />);
+
+    fireEvent.click(screen.getByText("See last cycle's Prime summary"));
+
+    expect(await screen.findByText('Last Cycle Prime Summary')).toBeInTheDocument();
+  });
+
   it('renders the ended state for a past end date', () => {
     renderComponent(<EndOfCycle endDate={new Date(Date.now() - ONE_DAY_MS)} />);
 

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

@@ -1,9 +1,11 @@
 import { Button, cn } from '@venusprotocol/ui';
+import { useState } from 'react';
 import ReactCountdown from 'react-countdown';
 
 import { Card } from 'components';
 import { useTranslation } from 'libs/translations';
 
+import { LastCycleSummaryModal } from '../LastCycleSummaryModal';
 import { Timer } from './Timer';
 
 export interface EndOfCycleProps {
@@ -21,6 +23,7 @@ interface CountdownState {
 
 export const EndOfCycle: React.FC<EndOfCycleProps> = ({ endDate, className }) => {
   const { t, Trans } = useTranslation();
+  const [isSummaryModalOpen, setIsSummaryModalOpen] = useState(false);
 
   const deadline = t('primeLeaderboard.endOfCycle.deadline', { date: endDate });
 
@@ -49,9 +52,12 @@ export const EndOfCycle: React.FC<EndOfCycleProps> = ({ endDate, className }) =>
             values={{ deadline }}
             components={{
               bold: <span className="text-b1s text-white" />,
-              // TODO: open the last cycle summary modal once it's available
               summaryLink: (
-                <Button variant="text" className="h-auto p-0 text-b1s text-blue underline" />
+                <Button
+                  variant="text"
+                  onClick={() => setIsSummaryModalOpen(true)}
+                  className="h-auto p-0 text-b1s text-blue underline"
+                />
               ),
             }}
           />
@@ -60,5 +66,13 @@ export const EndOfCycle: React.FC<EndOfCycleProps> = ({ endDate, className }) =>
     </Card>
   );
 
-  return <ReactCountdown date={endDate} renderer={renderCard} />;
+  return (
+    <>
+      <ReactCountdown date={endDate} renderer={renderCard} />
+
+      {isSummaryModalOpen && (
+        <LastCycleSummaryModal isOpen handleClose={() => setIsSummaryModalOpen(false)} />
+      )}
+    </>
+  );
 };