Improve countdown display with hours & minutes

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()}</>;
+};

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({
               ) : (
                 <div className="pt-3 flex flex-col gap-3">
                   <p className="font-bold dark:text-breadgray-ultra-white">
-                    Distributing in{" "}
-                    {differenceInDays(cycleDates.end, new Date())} days
+                    Distributing in <DistributionCountdown end={cycleDates.end} />
                   </p>
                   <div className="flex gap-0.5 bg-breadgray-white border-breadgray-white dark:bg-black border-2 dark:border-black rounded-full overflow-clip">
                     {completedDays &&

src/app/governance/components/VotingPower.tsx

@@ -7,7 +7,7 @@ import { CycleDatesSuccess } from "../useCycleDates";
 import { CycleLengthSuccess } from "../useCycleLength";
 import { FistIcon } from "@/app/core/components/Icons/FistIcon";
 import { formatUnits } from "viem";
-import { differenceInDays } from "date-fns";
+import { DistributionCountdown } from "./DistributionCountdown";
 
 export function VotingPower({
   minRequiredVotingPower,
@@ -89,8 +89,6 @@ function NotEnoughPower() {
 }
 
 function UserHasVoted({ cycleDates }: { cycleDates: CycleDatesSuccess }) {
-  const days = differenceInDays(cycleDates.end, Date.now());
-
   return (
     <div className={clsx(widgetBaseClasses, "border-status-success")}>
       <div className="flex gap-4">
@@ -103,7 +101,9 @@ function UserHasVoted({ cycleDates }: { cycleDates: CycleDatesSuccess }) {
       </div>
       <div>
         <span className="dark:text-breadgray-grey">Next round: </span>
-        <span>In {days} {days === 1 ? "day" : "days"}</span>
+        <span>
+          <DistributionCountdown end={cycleDates.end} />
+        </span>
       </div>
     </div>
   );