diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json index 60712e943..f178fb86d 100644 --- a/apps/namadillo/package.json +++ b/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 ", diff --git a/apps/namadillo/src/App/Governance/AllProposalsTable.tsx b/apps/namadillo/src/App/Governance/AllProposalsTable.tsx index ec8cede00..df23d6420 100644 --- a/apps/namadillo/src/App/Governance/AllProposalsTable.tsx +++ b/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 = ({ proposal }) => ( const VotingEnd: React.FC = ({ proposal: { endTime, endEpoch }, }) => ( -
+
{secondsToDateTimeString(endTime)}
Epoch {endEpoch.toString()}
diff --git a/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx b/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx index 81852870b..23f284269 100644 --- a/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx +++ b/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<{ >
-
+
Voting End on {secondsToDateTimeString(proposal.endTime)} — Epoch {proposal.endEpoch.toString()}
diff --git a/apps/namadillo/src/App/Governance/ProposalHeader.tsx b/apps/namadillo/src/App/Governance/ProposalHeader.tsx index 7a885aa77..9fe7a6485 100644 --- a/apps/namadillo/src/App/Governance/ProposalHeader.tsx +++ b/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<{
{proposal.status === "pending" || proposal.status === "error" ? "..." - :
+ :
{secondsToDateTimeString(proposal.data[timeKey])}
Epoch  diff --git a/apps/namadillo/src/App/Governance/VoteInfoCards.tsx b/apps/namadillo/src/App/Governance/VoteInfoCards.tsx index 2772d167f..bde8d99b3 100644 --- a/apps/namadillo/src/App/Governance/VoteInfoCards.tsx +++ b/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, }) => ( -
+
{secondsToDateTimeString(date)}
Epoch {epoch.toString()}
diff --git a/apps/namadillo/src/utils/dates.ts b/apps/namadillo/src/utils/dates.ts new file mode 100644 index 000000000..4225b7515 --- /dev/null +++ b/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(); diff --git a/apps/namadillo/src/utils/index.ts b/apps/namadillo/src/utils/index.ts index 94f669425..8c173a059 100644 --- a/apps/namadillo/src/utils/index.ts +++ b/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 = ( }, 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);