diff --git a/src/app/governance/components/DistributionCountdown.tsx b/src/app/governance/components/DistributionCountdown.tsx new file mode 100644 index 00000000..d1cb3fe0 --- /dev/null +++ b/src/app/governance/components/DistributionCountdown.tsx @@ -0,0 +1,27 @@ +import { + differenceInDays, + differenceInHours, + differenceInMinutes, +} from "date-fns"; + +export const DistributionCountdown = ({ end }: { end: Date }) => { + const getTimeDisplay = () => { + const now = new Date(); + const days = differenceInDays(end, now); + + if (days >= 1) return `${days} ${days === 1 ? "day" : "days"}`; + + const hours = differenceInHours(end, now); + + if (hours >= 1) return `${hours} ${hours === 1 ? "hour" : "hours"}`; + + const minutes = differenceInMinutes(end, now); + + if (minutes >= 1) + return `${minutes} ${minutes === 1 ? "minute" : "minutes"}`; + + return "0 days"; + }; + + return <>{getTimeDisplay()}>; +}; diff --git a/src/app/governance/components/DistributionOverview.tsx b/src/app/governance/components/DistributionOverview.tsx index ff331e0e..7eadfbe4 100644 --- a/src/app/governance/components/DistributionOverview.tsx +++ b/src/app/governance/components/DistributionOverview.tsx @@ -15,6 +15,7 @@ import { getChain } from "@/chainConfig"; import { formatUnits } from "viem"; import clsx from "clsx"; import { useDistributions } from '../useDistributions'; +import { DistributionCountdown } from "./DistributionCountdown"; export function DistributionOverview({ cycleDates, @@ -192,8 +193,7 @@ export function DistributionOverview({ ) : (
- Distributing in{" "}
- {differenceInDays(cycleDates.end, new Date())} days
+ Distributing in