feat: add time title helper (#1432)

apps/namadillo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <info@heliax.dev>",

apps/namadillo/src/App/Governance/AllProposalsTable.tsx

@@ -8,14 +8,15 @@ import { routes } from "App/routes";
 import { paginatedProposalsFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
+import { DateTime } from "luxon";
 import { useEffect, useState } from "react";
 import { GoCheckCircleFill, GoInfo } from "react-icons/go";
 import { generatePath, useNavigate } from "react-router-dom";
+import { proposalStatusToString, proposalTypeStringToString } from "utils";
 import {
-  proposalStatusToString,
-  proposalTypeStringToString,
   secondsToDateTimeString,
-} from "utils";
+  secondsToFullDateTimeString,
+} from "utils/dates";
 import { StatusLabel, TypeLabel } from "./ProposalLabels";
 
 const Table: React.FC<
@@ -35,7 +36,7 @@ const Table: React.FC<
     "Status",
     "",
     {
-      children: "Voting end on UTC",
+      children: `Voting end on GMT${DateTime.now().toFormat("Z")}`,
       className: "text-right whitespace-nowrap rtl-grid",
       dir: "rtl",
     },
@@ -310,7 +311,10 @@ const Status: React.FC<CellProps> = ({ proposal }) => (
 const VotingEnd: React.FC<CellProps> = ({
   proposal: { endTime, endEpoch },
 }) => (
-  <div className="text-right leading-tight">
+  <div
+    className="text-right leading-tight whitespace-nowrap"
+    title={secondsToFullDateTimeString(endTime)}
+  >
     <div className="text-neutral-450">{secondsToDateTimeString(endTime)}</div>
     <div className="text-xs text-neutral-500">Epoch {endEpoch.toString()}</div>
   </div>

apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx

@@ -5,7 +5,10 @@ import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { GoInfo } from "react-icons/go";
 import { generatePath, useNavigate } from "react-router-dom";
-import { secondsToDateTimeString } from "utils";
+import {
+  secondsToDateTimeString,
+  secondsToFullDateTimeString,
+} from "utils/dates";
 import { StatusLabel, TypeLabel, VotedLabel } from "./ProposalLabels";
 import { colors } from "./types";
 
@@ -47,7 +50,10 @@ const ProposalListItem: React.FC<{
     >
       <div className="flex items-center justify-between gap-4">
         <StatusLabel className="text-[10px] min-w-38" status={status} />
-        <div className="text-xs text-neutral-400">
+        <div
+          className="text-xs text-neutral-400"
+          title={secondsToFullDateTimeString(proposal.endTime)}
+        >
           Voting End on {secondsToDateTimeString(proposal.endTime)}&nbsp;&mdash;
           Epoch {proposal.endEpoch.toString()}
         </div>

apps/namadillo/src/App/Governance/ProposalHeader.tsx

@@ -18,11 +18,12 @@ import { FaChevronLeft } from "react-icons/fa";
 import { SiWebassembly } from "react-icons/si";
 import { VscJson } from "react-icons/vsc";
 import { generatePath, Link, useNavigate } from "react-router-dom";
+import { proposalIdToString } from "utils";
 import {
-  proposalIdToString,
   secondsToDateTimeString,
+  secondsToFullDateTimeString,
   secondsToTimeRemainingString,
-} from "utils";
+} from "utils/dates";
 import {
   StatusLabel as StatusLabelComponent,
   TypeLabel as TypeLabelComponent,
@@ -233,7 +234,7 @@ const TimeRemaining: React.FC<{
           proposal.currentTime,
           proposal.endTime
         );
-        return timeRemaining ? `${timeRemaining} Remaining` : "";
+        return timeRemaining ? `${timeRemaining} remaining` : "";
       }
     }
 
@@ -251,7 +252,10 @@ const ProgressStartEnd: React.FC<{
   <div className={className}>
     {proposal.status === "pending" || proposal.status === "error" ?
       "..."
-    : <div className="leading-tight">
+    : <div
+        className="leading-tight"
+        title={secondsToFullDateTimeString(proposal.data[timeKey])}
+      >
         {secondsToDateTimeString(proposal.data[timeKey])}
         <div className="text-xs text-neutral-500">
           Epoch&nbsp;

apps/namadillo/src/App/Governance/VoteInfoCards.tsx

@@ -15,7 +15,10 @@ import { proposalFamily } from "atoms/proposals";
 import BigNumber from "bignumber.js";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
-import { secondsToDateTimeString } from "utils";
+import {
+  secondsToDateTimeString,
+  secondsToFullDateTimeString,
+} from "utils/dates";
 
 const InfoCard: React.FC<
   {
@@ -158,7 +161,7 @@ const DateTimeEpoch: React.FC<{ date: bigint; epoch: bigint }> = ({
   date,
   epoch,
 }) => (
-  <div className="leading-tight">
+  <div className="leading-tight" title={secondsToFullDateTimeString(date)}>
     {secondsToDateTimeString(date)}
     <div className="text-xs text-neutral-500">Epoch {epoch.toString()}</div>
   </div>

apps/namadillo/src/utils/dates.ts

@@ -0,0 +1,27 @@
+import { DateTime } from "luxon";
+
+export const epochToString = (epoch: bigint): string =>
+  `Epoch ${epoch.toString()}`;
+
+export const secondsToDateTime = (seconds: bigint): DateTime =>
+  DateTime.fromSeconds(Number(seconds));
+
+export const secondsToTimeString = (seconds: bigint): string =>
+  secondsToDateTime(seconds).toLocaleString(DateTime.TIME_SIMPLE);
+
+export const secondsToDateString = (seconds: bigint): string =>
+  secondsToDateTime(seconds).toLocaleString(DateTime.DATE_MED);
+
+export const secondsToDateTimeString = (seconds: bigint): string =>
+  `${secondsToDateString(seconds)}, ${secondsToTimeString(seconds)}`;
+
+export const secondsToFullDateTimeString = (seconds: bigint): string =>
+  secondsToDateTime(seconds).toLocaleString(DateTime.DATETIME_FULL);
+
+export const secondsToTimeRemainingString = (
+  startTimeInSeconds: bigint,
+  endTimeInSeconds: bigint
+): string =>
+  secondsToDateTime(endTimeInSeconds)
+    .diff(secondsToDateTime(startTimeInSeconds), ["days", "hours", "minutes"])
+    .toHuman();

apps/namadillo/src/utils/index.ts

@@ -2,9 +2,7 @@ import { Asset, AssetDenomUnit } from "@chain-registry/types";
 import { ProposalStatus, ProposalTypeString } from "@namada/types";
 import { localnetConfigAtom } from "atoms/integrations/atoms";
 import BigNumber from "bignumber.js";
-import * as fns from "date-fns";
 import { getDefaultStore } from "jotai";
-import { DateTime } from "luxon";
 import namadaAssets from "namada-chain-registry/namada/assetlist.json";
 import { useEffect } from "react";
 
@@ -68,56 +66,11 @@ export const useTransactionEventListListener = <T extends keyof WindowEventMap>(
   }, deps);
 };
 
-const secondsToDateTime = (seconds: bigint): DateTime =>
-  DateTime.fromSeconds(Number(seconds));
-
-export const secondsToTimeString = (seconds: bigint): string =>
-  secondsToDateTime(seconds).toLocaleString(DateTime.TIME_24_SIMPLE);
-
-export const secondsToDateString = (seconds: bigint): string =>
-  secondsToDateTime(seconds).toLocaleString(DateTime.DATE_MED);
-
-export const secondsToDateTimeString = (seconds: bigint): string =>
-  `${secondsToDateString(seconds)}, ${secondsToTimeString(seconds)}`;
-
 export const sumBigNumberArray = (numbers: BigNumber[]): BigNumber => {
   if (numbers.length === 0) return new BigNumber(0);
   return BigNumber.sum(...numbers);
 };
 
-export const secondsToTimeRemainingString = (
-  startTimeInSeconds: bigint,
-  endTimeInSeconds: bigint
-): string | undefined => {
-  return;
-  if (endTimeInSeconds < startTimeInSeconds) {
-    return undefined;
-  }
-
-  const toMilliNumber = (n: bigint): number =>
-    fns.secondsToMilliseconds(Number(n));
-  const interval = {
-    start: toMilliNumber(startTimeInSeconds),
-    end: toMilliNumber(endTimeInSeconds),
-  };
-  const format: fns.DurationUnit[] = ["days", "hours", "minutes"];
-  const timeLeft = fns.intervalToDuration(interval);
-  const formatted = fns.formatDuration(timeLeft, {
-    format,
-    zero: true,
-    delimiter: ": ",
-  });
-
-  if (formatted === "") {
-    return "< 1 Min";
-  }
-
-  return formatted
-    .replace("day", "Day")
-    .replace("hour", "Hr")
-    .replace("minute", "Min");
-};
-
 const findDisplayUnit = (asset: Asset): AssetDenomUnit | undefined => {
   const { display, denom_units } = asset;
   return denom_units.find((unit) => unit.denom === display);