feat: countdown &timer i18n by cuzz-venus · Pull Request #5622 · VenusProtocol/venus-protocol-interface

cuzz-venus · 2026-06-09T18:11:05Z

Jira ticket(s)

VPD-1331

Changes

add count down
update timer

implementation

changeset-bot · 2026-06-09T18:11:10Z

🦋 Changeset detected

Latest commit: 2a34a35

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@venusprotocol/evm	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-06-09T18:11:13Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dapp-preview	Ready	Preview	Jun 16, 2026 8:31am
dapp-testnet	Ready	Preview	Jun 16, 2026 8:31am
venus.io	Ready	Preview	Jun 16, 2026 8:31am

greptile-apps · 2026-06-09T18:14:54Z

Greptile Summary

This PR wires up i18n and a live countdown for the Prime leaderboard's End-of-Cycle card. The placeholder card is replaced with a react-countdown-driven component showing days/hours/minutes/seconds, localized unit labels, and a formatted deadline string across all seven supported locales.

EndOfCycle renders either an active countdown or an ended state depending on whether endDate is provided; a module-level endOfMonth(new Date()) placeholder is left with a TODO for the future API value.
Timer is a new sub-component that renders four zero-padded segments with translated labels.
Translation keys are added to all seven locale files, including a deadline key with an inline date format.

Confidence Score: 5/5

Safe to merge — changes are scoped to the Prime leaderboard End-of-Cycle card and its i18n strings, with no impact on shared infrastructure or other pages.

The new Timer and EndOfCycle components are self-contained, the countdown logic is delegated to a well-tested library, and the translation additions are purely additive. The only findings are quality nits around using translated strings as React keys and the inline date format bypassing locale-aware formatting already in the codebase.

Timer/index.tsx — uses translated labels as React list keys; consider switching to stable string keys to avoid unnecessary remounts on locale change.

Important Files Changed

Filename	Overview
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/Timer/index.tsx	New Timer component with i18n labels and zero-padded segments; uses translated text as React keys which can cause unnecessary remounts on locale change
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/index.tsx	Refactored to use react-countdown with i18n support; active/completed branching and graceful fallback when no endDate are correct
apps/evm/src/pages/PrimeLeaderboard/index.tsx	Wired EndOfCycle with a temporary module-level date placeholder; TODO comments present; tablesRefreshNote i18n added
apps/evm/src/libs/translations/translations/en.json	New endOfCycle and tablesRefreshNote keys added; inline date format h:mm a (12-hour) is correct
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/tests/index.spec.tsx	New tests covering active and ended countdown states; straightforward and correct
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/Timer/tests/index.spec.tsx	Tests zero-padding for all four time segments; correct and sufficient for the component's logic

_{Reviews (2): Last reviewed commit: "feat: update date" | Re-trigger Greptile}

greptile-apps · 2026-06-09T18:15:00Z

+            components={{
+              bold: <span className="text-b1s text-white" />,
+              summaryLink: <span className="text-blue underline" />,
+            }}


summaryLink renders as a non-interactive <span> instead of an anchor element. The text is styled like a link (text-blue underline) and the translation copy says "See last cycle's Prime summary", so users will click it expecting navigation — but nothing happens. It should be an <a> (or a router Link) pointing to the Prime summary page.

Not a navigation link — "See last cycle's Prime summary" opens the last-cycle summary modal (PRD §6.5), not a page, so an / router Link would be the wrong semantic here. It's an intentional placeholder rendered as inline text for now (kept as a so the copy can wrap mid-phrase to match the design). It'll be wired up as an accessible trigger in the summary-modal ticket.

Fair point — modal triggers shouldn't use <a> or Link. When the summary-modal ticket lands, consider using a <button> with appropriate styling rather than a <span>, since <button> gives you keyboard accessibility and the correct ARIA role for a clickable element out of the box. The <span> is fine as a placeholder for now.

@cuzz-venus Your point is fair, though I agree with greptile that the CTA will need to use a button tag (and to open the last cycle's modal when clicked).

Hey @therealemjy, you are right, actually I have updated the span to the button at https://github.com/VenusProtocol/venus-protocol-interface/pull/5630/changes#diff-4df7a2b008795f28a1f81865b97c60a1efa765a95984d98cd6adb22af9878030R55

forgot to update here. but now I have updated in this branch :)

greptile-apps · 2026-06-09T18:15:01Z

+export const EndOfCycle: React.FC<EndOfCycleProps> = ({ endDate, className }) => {
+  const { t, Trans } = useTranslation();
+
+  const deadline = endDate ? t('primeLeaderboard.endOfCycle.deadline', { date: endDate }) : '';


deadline is set to '' when endDate is undefined, but the helperEnded string uses {{deadline}} inline — so when !endDate the rendered text becomes "Stay in the top 500 until to receive Prime rewards during the next cycle." with a blank gap. Either provide a fallback label, omit the placeholder from the ended copy, or keep two separate translation keys (one with and one without the date).

endDate is always provided in the product (the page derives it, and it'll ultimately come from the API), so the blank-deadline case won't occur — the optional path is just a defensive fallback. I'll tighten the type when wiring it to the API.

greptile-apps · 2026-06-09T18:15:02Z

  },
  "primeLeaderboard": {
    "description": "Stake XVS into the governance vault and receive Prime rewards on top of your yields.",
+    "endOfCycle": {


The date format string HH:mm a mixes the 24-hour hour token (HH, range 00–23) with the meridiem marker (a, AM/PM). This produces output like "13:00 PM" for 1 pm, which is invalid. The same format is copied into all seven locale files. Use either HH:mm (24-hour, no meridiem) or h:mm a (12-hour with meridiem).

Fixed — switched to 12-hour with a meridiem (h:mm a) across all locales, so it now reads e.g. "March 31, 2026 11:59 PM" (localized AM/PM per locale) instead of the invalid 24h + meridiem combo.

greptile-apps · 2026-06-09T18:15:03Z

-      <div className="absolute inset-x-0 -top-40 flex justify-center">
-        <div className="h-200 w-200 rounded-full bg-blue/30 blur-3xl" />
+// TODO: use the cycle end date returned by the API
+const endOfCycleDate = endOfMonth(new Date());


endOfCycleDate is evaluated once at module-load time, not inside the component. If the module is cached across a month boundary (e.g. a long-lived tab) the countdown will tick past the real end of month and the next render will still target the old date. Moving the call inside the component body, or inside a useMemo/useState, would at least re-evaluate on mount. The TODO comment acknowledges this will come from the API eventually, but the current placement can produce silently incorrect state today.

This is a placeholder — the cycle end date will come from the API and be read at fetch/render time, replacing this module-level computation. Left a TODO to that effect.

github-actions · 2026-06-09T18:31:38Z

Coverage Report for ./apps/evm

Status	Category	Percentage	Covered / Total
🔵	Lines	81.5%	47552 / 58345
🔵	Statements	81.5%	47552 / 58345
🔵	Functions	62.29%	656 / 1053
🔵	Branches	72.95%	5420 / 7429

File Coverage

File	Stmts	Branches	Functions	Lines
Changed Files
apps/evm/src/pages/PrimeLeaderboard/index.tsx	100%	33.33%	100%	100%
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/index.tsx	100%	83.33%	100%	100%
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/Timer/index.tsx	100%	50%	100%	100%
apps/evm/src/pages/PrimeLeaderboard/EndOfCycle/Timer/pad/index.ts	100%	0%	100%	100%

Generated in workflow #13632 for commit 2a34a35 by the Vitest Coverage Report Action

cuzz-venus · 2026-06-11T10:53:40Z

@greptile review again

therealemjy · 2026-06-11T12:37:57Z

+    "endOfCycle": {
+      "days": "Days",
+      "deadline": "{{date, MMMM d, yyyy h:mm a}}",
+      "helper": "Stay in the top 500 until <bold>{{deadline}}</bold> to receive Prime rewards during the next cycle. Check the <summaryLink>See last cycle's Prime summary</summaryLink> now to view your ranking and stay competitive.",


The content in the Figma document is incorrect (I left a comment about this but it has not been updated):

Suggested change

"helper": "Stay in the top 500 until <bold>{{deadline}}</bold> to receive Prime rewards during the next cycle. Check the <summaryLink>See last cycle's Prime summary</summaryLink> now to view your ranking and stay competitive.",

"helper": "Stay in the top 500 until <bold>{{deadline}}</bold> to receive Prime rewards during the next cycle. <summaryLink>See last cycle's Prime summary</summaryLink>.",

Good suggestion! uodate!

therealemjy · 2026-06-11T12:38:33Z

+    <div className="flex w-full flex-col items-center">
+      <div className="flex w-full items-center justify-between text-center text-b2s text-light-grey">
+        {segments.map(segment => (
+          <p key={segment.label} className="w-9">


You'll need to add a key prop (perhaps using the label property of each segment) to each element for React to differentiate them when rendering the DOM.

Nice catch. already have the key prop.

therealemjy · 2026-06-11T12:39:41Z

+export const Timer: React.FC<TimerProps> = ({ days, hours, minutes, seconds }) => {
+  const { t } = useTranslation();
+
+  const pad = (value: number) => String(value).padStart(2, '0');


This utility function should be inside its own file and directory (inside the Timer directory).

Good point!

therealemjy · 2026-06-11T12:44:47Z

+import { Timer } from './Timer';

 export interface EndOfCycleProps {
+  endDate?: Date;


I think endDate should be required, so that we don't end up with an odd state where the timer displays 00:00:00:00 and the description underneath is incomplete ("...in the top 500 until (empty) to receive").

If an end date hasn't been fetched from the page yet, then this page can either decide to show a spinner or simply not display this component.

Yes. have fixed this one, and add spinner for this

therealemjy · 2026-06-11T12:46:12Z

+      "sec": "Sec",
+      "title": "End of cycle"
+    },
+    "tablesRefreshNote": "Refreshed hourly · Last refresh: {{distance}} ago",


The codebase has a built-in way of displaying distances in time:

Suggested change

"tablesRefreshNote": "Refreshed hourly · Last refresh: {{distance}} ago",

"tablesRefreshNote": "Refreshed hourly · Last refresh: {{date, distanceToNow}} ago",

You might have to check how it handles past dates, but the idea is that the date will be converted into a distance in time from now.

therealemjy · 2026-06-16T07:53:37Z

The PR looks good to me. The only work left on it is for the "See last cycle's summary" button to open the last cycle's summary modal.

cuzz-venus marked this pull request as ready for review June 9, 2026 18:11

vercel Bot deployed to Preview – dapp-preview June 9, 2026 18:14 View deployment

vercel Bot deployed to Preview – venus.io June 9, 2026 18:14 View deployment

vercel Bot deployed to Preview – dapp-testnet June 9, 2026 18:14 View deployment

greptile-apps Bot reviewed Jun 9, 2026

View reviewed changes

vercel Bot deployed to Preview – venus.io June 9, 2026 18:21 View deployment

vercel Bot deployed to Preview – dapp-testnet June 9, 2026 18:21 View deployment

vercel Bot deployed to Preview – dapp-preview June 9, 2026 18:21 View deployment

Base automatically changed from feat/prime-leaderboard to main June 10, 2026 08:51

vercel Bot deployed to Preview – dapp-preview June 10, 2026 09:40 View deployment

vercel Bot deployed to Preview – dapp-testnet June 10, 2026 09:40 View deployment

vercel Bot deployed to Preview – venus.io June 10, 2026 09:41 View deployment

cuzz-venus requested a review from therealemjy June 11, 2026 12:30

therealemjy reviewed Jun 11, 2026

View reviewed changes

vercel Bot deployed to Preview – dapp-preview June 15, 2026 10:21 View deployment

vercel Bot deployed to Preview – venus.io June 15, 2026 10:21 View deployment

vercel Bot deployed to Preview – dapp-testnet June 15, 2026 10:21 View deployment

cuzz-venus added 5 commits June 16, 2026 14:24

feat: countdown &timer i18n

9d2ea16

feat: countdown &timer i18n

3dfebf5

feat: countdown bbold

63acdfd

feat: update date

3b4cc7c

fix: solve comments

68a561b

cuzz-venus force-pushed the feat/prime-end-of-cycle branch from fa92f7f to 68a561b Compare June 16, 2026 06:57

vercel Bot deployed to Preview – dapp-preview June 16, 2026 06:59 View deployment

vercel Bot deployed to Preview – venus.io June 16, 2026 07:00 View deployment

vercel Bot deployed to Preview – dapp-testnet June 16, 2026 07:00 View deployment

feat: support last cycle modal button

2a34a35

vercel Bot deployed to Preview – dapp-preview June 16, 2026 08:30 View deployment

vercel Bot deployed to Preview – venus.io June 16, 2026 08:30 View deployment

vercel Bot deployed to Preview – dapp-testnet June 16, 2026 08:31 View deployment

cuzz-venus requested a review from therealemjy June 17, 2026 10:51

therealemjy approved these changes Jun 17, 2026

View reviewed changes

cuzz-venus merged commit 23ca826 into main Jun 17, 2026
5 checks passed

cuzz-venus deleted the feat/prime-end-of-cycle branch June 17, 2026 12:03

	"helper": "Stay in the top 500 until <bold>{{deadline}}</bold> to receive Prime rewards during the next cycle. Check the <summaryLink>See last cycle's Prime summary</summaryLink> now to view your ranking and stay competitive.",
	"helper": "Stay in the top 500 until <bold>{{deadline}}</bold> to receive Prime rewards during the next cycle. <summaryLink>See last cycle's Prime summary</summaryLink>.",

	"tablesRefreshNote": "Refreshed hourly · Last refresh: {{distance}} ago",
	"tablesRefreshNote": "Refreshed hourly · Last refresh: {{date, distanceToNow}} ago",

Conversation

cuzz-venus commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira ticket(s)

Changes

implementation

Uh oh!

changeset-bot Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

greptile-apps Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for ./apps/evm

Uh oh!

cuzz-venus commented Jun 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

therealemjy commented Jun 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

cuzz-venus commented Jun 9, 2026 •

edited

Loading

changeset-bot Bot commented Jun 9, 2026 •

edited

Loading

vercel Bot commented Jun 9, 2026 •

edited

Loading

greptile-apps Bot commented Jun 9, 2026 •

edited

Loading

github-actions Bot commented Jun 9, 2026 •

edited

Loading