Improve countdown display with hours & minutes

[Olaleye-Blessing]

Closes: #315

[netlify]

✅ Deploy Preview for dapper-sundae-ae0873 ready!

Name	Link
🔨 Latest commit	3ceebdc
🔍 Latest deploy log	https://app.netlify.com/projects/dapper-sundae-ae0873/deploys/689963e46b81d90008821157
😎 Deploy Preview	https://deploy-preview-321--dapper-sundae-ae0873.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[tbsoc]

Just checking on this PR?

/review

[tbsoc]

/review

[tbsoc]

/review

[tbsoc]

/review

[tbsoc]

/review

[tbsoc]

Test comment from API

[tbsoc]

/review

[tbsoc]

🤖 AI Code Review (Requested by @tbsoc)

Code Review: Improve countdown display with hours & minutes

Summary

This PR replaces a simple day-based countdown with a more granular display that shows days, hours, or minutes depending on proximity to the deadline. It extracts the logic into a new DistributionCountdown component and uses it in two places: DistributionOverview and VotingPower.

---

Code Quality

Good:

• Clean extraction into a reusable component
• Proper TypeScript typing with Date prop
• Consistent use of date-fns utilities

Issues:

1. Logic bug in getTimeDisplay — The function creates a new Date() on every call, but it's called during render which can cause hydration mismatches in SSR (Next.js). The time will differ between server and client.

2. Inconsistent fallback — Returns "0 days" when under a minute, but the logic suggests this should probably be something like "< 1 minute" or "less than a minute".

3. Missing useEffect for live updates — The countdown is static; it won't tick down without a page refresh. For a countdown, you'd typically want a setInterval to update every minute.

---

Security

No security concerns. The component only receives a Date prop and performs no user input handling, network requests, or DOM manipulation that would introduce XSS risks.

---

Suggestions

// Consider this revised implementation
import { useState, useEffect } from "react";
import {
  differenceInDays,
  differenceInHours,
  differenceInMinutes,
  differenceInSeconds,
} from "date-fns";

interface DistributionCountdownProps {
  end: Date;
}

export const DistributionCountdown = ({ end }: DistributionCountdownProps) => {
  const [now, setNow] = useState<Date | null>(null);

  useEffect(() => {
    setNow(new Date()); // Initialize on client only
    const interval = setInterval(() => setNow(new Date()), 60000); // Update every minute
    return () => clearInterval(interval);
  }, []);

  // Prevent hydration mismatch: render nothing or a placeholder until client-side
  if (!now) return <span>—</span>;

  const days = differenceInDays(end, now);
  if (days >= 1) {
    return <span>{days} {days === 1 ? "day" : "days"}</span>;
  }

  const hours = differenceInHours(end, now);
  if (hours >= 1) {
    return <span>{hours} {hours === 1 ? "hour" : "hours"}</span>;
  }

  const minutes = differenceInMinutes(end, now);
  if (minutes >= 1) {
    return <span>{minutes} {minutes === 1 ? "minute" : "minutes"}</span>;
  }

  return <span>less than a minute</span>;
};

Key changes:

• Fixes SSR hydration mismatch with client-only initialization
• Adds live updating via setInterval
• More accurate fallback for sub-minute times
• Returns <span> elements for consistent JSX structure