Update UTC time to local time

packages/common/package.json

@@ -32,6 +32,7 @@
     "ethers": "^5.6.5",
     "framer-motion": "^10.12.7",
     "markdown-it": "^13.0.1",
+    "moment-timezone": "^0.5.45",
     "react": "^18.2.0",
     "react-hook-form": "^7.42.1",
     "react-router": "^6",

packages/common/src/index.ts

@@ -7,6 +7,7 @@ import z from "zod";
 import { ChainId } from "./chain-ids";
 import { Round } from "data-layer";
 import { getAlloVersion, getConfig } from "./config";
+import moment from 'moment-timezone';
 
 export * from "./icons";
 export * from "./markdown";
@@ -228,6 +229,46 @@ export const getUTCDateTime = (date: Date): string => {
   return `${getUTCDate(date)} ${getUTCTime(date)}`;
 };
 
+export const formatLocalDateAsISOString = (date: Date): string => {
+  // @ts-expect-error remove when DG support is merged
+  if (isNaN(date)) {
+    return "";
+  }
+  const localString = getLocalDate(date);
+  return localString;
+};
+
+export function getTimezoneName() {
+  const today = new Date();
+  const userTimeZone = moment.tz.guess();
+  const formattedDate = moment(today).tz(userTimeZone).format('z')
+
+  return formattedDate;
+}
+
+export const getLocalTime = (date: Date): string => {
+  const localTime = [
+    padSingleDigitNumberWithZero(date.getHours()),
+    padSingleDigitNumberWithZero(date.getMinutes()),
+  ];
+
+  return localTime.join(":") + " " + getTimezoneName();
+};
+
+export const getLocalDate = (date: Date): string => {
+  const localDate = [
+    padSingleDigitNumberWithZero(date.getFullYear()),
+    padSingleDigitNumberWithZero(date.getMonth() + 1),
+    padSingleDigitNumberWithZero(date.getDate()),
+  ];
+
+  return localDate.join("/");
+};
+
+export const getLocalDateTime = (date: Date): string => {
+  return `${getLocalDate(date)} ${getLocalTime(date)}`;
+};
+
 export const useTokenPrice = (tokenId: string | undefined) => {
   const [tokenPrice, setTokenPrice] = useState<number>();
   const [error, setError] = useState<Error | undefined>(undefined);

packages/grant-explorer/src/features/round/ViewRoundPage.tsx

@@ -14,6 +14,8 @@ import {
   formatUTCDateAsISOString,
   getRoundStrategyTitle,
   getUTCTime,
+  getLocalTime,
+  formatLocalDateAsISOString,
   renderToPlainText,
   truncateDescription,
   useTokenPrice,
@@ -506,19 +508,19 @@ function AfterRoundStart(props: {
                   <span>
                     <span className="px-2 rounded bg-grey-50">
                       <span className="mr-1">
-                        {formatUTCDateAsISOString(roundStart)}
+                        {formatLocalDateAsISOString(roundStart)}
                       </span>
-                      <span>{getUTCTime(roundStart)}</span>
+                      <span>{getLocalTime(roundStart)}</span>
                     </span>
                     <span className="px-1.5">-</span>
                     <span className="px-2 rounded bg-grey-50">
                       {!isInfiniteDate(roundEnd) ? (
                         <>
                           <span className="mr-1">
-                            {formatUTCDateAsISOString(roundEnd)}
+                            {formatLocalDateAsISOString(roundEnd)}
                           </span>
 
-                          <span>{getUTCTime(roundEnd)}</span>
+                          <span>{getLocalTime(roundEnd)}</span>
                         </>
                       ) : (
                         <span>No End Date</span>
@@ -1251,20 +1253,20 @@ function PreRoundPage(props: {
             Application Period:
             <span className="mx-1">
               <span className="mr-1">
-                {formatUTCDateAsISOString(round.applicationsStartTime)}
+                {formatLocalDateAsISOString(round.applicationsStartTime)}
               </span>
 
-              <span>( {getUTCTime(round.applicationsStartTime)} )</span>
+              <span>( {getLocalTime(round.applicationsStartTime)} )</span>
 
               <span className="mx-1">-</span>
 
               {!isInfiniteDate(round.applicationsEndTime) && (
                 <>
                   <span className="mr-1">
-                    {formatUTCDateAsISOString(round.applicationsEndTime)}
+                    {formatLocalDateAsISOString(round.applicationsEndTime)}
                   </span>
 
-                  <span>{getUTCTime(round.applicationsEndTime)}</span>
+                  <span>{getLocalTime(round.applicationsEndTime)}</span>
                 </>
               )}
               {isInfiniteDate(round.applicationsEndTime) && (
@@ -1281,20 +1283,20 @@ function PreRoundPage(props: {
             Round Period:
             <span>
               <span className="mx-1">
-                {formatUTCDateAsISOString(round.roundStartTime)}
+                {formatLocalDateAsISOString(round.roundStartTime)}
               </span>
 
-              <span>( {getUTCTime(round.roundStartTime)} )</span>
+              <span>( {getLocalTime(round.roundStartTime)} )</span>
 
               <span className="mx-1">-</span>
 
               {!isInfiniteDate(round.roundEndTime) && (
                 <>
                   <span className="mr-1">
-                    {formatUTCDateAsISOString(round.roundEndTime)}
+                    {formatLocalDateAsISOString(round.roundEndTime)}
                   </span>
 
-                  <span>{getUTCTime(round.roundEndTime)}</span>
+                  <span>{getLocalTime(round.roundEndTime)}</span>
                 </>
               )}
               {isInfiniteDate(round.roundEndTime) && (

packages/round-manager/src/features/common/parseRoundDates.tsx

@@ -1,4 +1,9 @@
-import { formatUTCDateAsISOString, getUTCTime } from "common";
+import {
+  formatUTCDateAsISOString,
+  formatLocalDateAsISOString,
+  getUTCTime,
+  getLocalTime,
+} from "common";
 import moment from "moment";
 import { maxDateForUint256 } from "../../constants";
 import { Round } from "../api/types";
@@ -27,6 +32,16 @@ export function parseRoundDates(round: RoundDates) {
             formatUTCDateAsISOString(round.applicationsEndTime)
           ),
       },
+      local_iso: {
+        start: formatLocalDateAsISOString(round.applicationsStartTime),
+        end:
+          moment(round.applicationsEndTime).isSame(maxDateForUint256) ||
+          !moment(round.applicationsEndTime).isValid() ? (
+            <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+          ) : (
+            formatLocalDateAsISOString(round.applicationsEndTime)
+          ),
+      },
       utc: {
         start: getUTCTime(round.applicationsStartTime),
         end:
@@ -35,6 +50,12 @@ export function parseRoundDates(round: RoundDates) {
             ? ""
             : `(${getUTCTime(round.applicationsEndTime)})`,
       },
+      local: {
+        start: getLocalTime(round.applicationsStartTime),
+        end: moment(round.applicationsEndTime).isSame(maxDateForUint256)
+          ? ""
+          : `(${getLocalTime(round.applicationsEndTime)})`,
+      },
     },
     round: {
       iso: {
@@ -47,6 +68,16 @@ export function parseRoundDates(round: RoundDates) {
             formatUTCDateAsISOString(round.roundEndTime)
           ),
       },
+      local_iso: {
+        start: formatLocalDateAsISOString(round.roundStartTime),
+        end:
+          moment(round.roundEndTime).isSame(maxDateForUint256) ||
+          !moment(round.applicationsEndTime).isValid() ? (
+            <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+          ) : (
+            formatLocalDateAsISOString(round.roundEndTime)
+          ),
+      },
       utc: {
         start: `(${getUTCTime(round.roundStartTime)})`,
         end:
@@ -55,6 +86,12 @@ export function parseRoundDates(round: RoundDates) {
             ? ""
             : `(${getUTCTime(round.roundEndTime)})`,
       },
+      local: {
+        start: getLocalTime(round.roundStartTime),
+        end: moment(round.roundEndTime).isSame(maxDateForUint256)
+          ? ""
+          : `(${getLocalTime(round.roundEndTime)})`,
+      },
     },
   };
 }

packages/round-manager/src/features/program/ViewProgramPage.tsx

@@ -124,19 +124,19 @@ export default function ViewProgram() {
                         data-testid="application-time-period"
                       >
                         <span data-testid="application-start-time-period">
-                          {parsedRoundInfo.application.iso.start}
+                          {parsedRoundInfo.application.local_iso.start}
                         </span>
                         &nbsp;
                         <span className="text-grey-400">
-                          {parsedRoundInfo.application.utc.start}
+                          {parsedRoundInfo.application.local.start}
                         </span>
                         <span className="mx-1">-</span>
                         <span data-testid="application-end-time-period">
-                          {parsedRoundInfo.application.iso.end}
+                          {parsedRoundInfo.application.local_iso.end}
                         </span>
                         &nbsp;
                         <span className="text-grey-400">
-                          {parsedRoundInfo.application.utc.end}
+                          {parsedRoundInfo.application.local.end}
                         </span>
                       </div>
                     </div>
@@ -156,20 +156,20 @@ export default function ViewProgram() {
                         className="mr-1"
                         data-testid="round-start-time-period"
                       >
-                        {parsedRoundInfo.round.iso.start}
+                        {parsedRoundInfo.round.local_iso.start}
                       </span>
                       <span className="text-grey-400">
-                        {parsedRoundInfo.round.utc.start}
+                        {parsedRoundInfo.round.local.start}
                       </span>
                       <span className="mx-1">-</span>
                       <span
                         className="mr-1"
                         data-testid="round-end-time-period"
                       >
-                        {parsedRoundInfo.round.iso.end}
+                        {parsedRoundInfo.round.local_iso.end}
                       </span>
                       <span className="text-grey-400">
-                        {parsedRoundInfo.round.utc.end}
+                        {parsedRoundInfo.round.local.end}
                       </span>
                     </div>
                   </div>

packages/round-manager/src/features/program/__tests__/ViewProgramPage.test.tsx

@@ -4,6 +4,7 @@ import {
   ROUND_PAYOUT_DIRECT_OLD as ROUND_PAYOUT_DIRECT,
   ROUND_PAYOUT_MERKLE_OLD as ROUND_PAYOUT_MERKLE,
   formatUTCDateAsISOString,
+  formatLocalDateAsISOString,
 } from "common";
 import {
   makeProgramData,
@@ -332,19 +333,17 @@ describe("<ViewProgram />", () => {
         "application-end-time-period"
       );
 
-      const utcApplicationStartTime = formatUTCDateAsISOString(
+      const ApplicationStartTime = formatLocalDateAsISOString(
         stubRound!.applicationsStartTime
       );
-      const utcApplicationEndTime = formatUTCDateAsISOString(
+      const ApplicationEndTime = formatLocalDateAsISOString(
         stubRound!.applicationsEndTime
       );
 
       expect(applicationStartTimePeriod.textContent).toEqual(
-        utcApplicationStartTime
-      );
-      expect(applicationEndTimePeriod.textContent).toEqual(
-        utcApplicationEndTime
+        ApplicationStartTime
       );
+      expect(applicationEndTimePeriod.textContent).toEqual(ApplicationEndTime);
     });
 
     it("displays round start and end dates", async () => {
@@ -369,15 +368,13 @@ describe("<ViewProgram />", () => {
         "round-end-time-period"
       );
 
-      const utcRoundStartTime = formatUTCDateAsISOString(
+      const RoundStartTime = formatLocalDateAsISOString(
         stubRound!.roundStartTime
       );
-      const utcRoundEndTime = formatUTCDateAsISOString(stubRound!.roundEndTime);
+      const RoundEndTime = formatLocalDateAsISOString(stubRound!.roundEndTime);
 
-      expect(roundStartTimePeriodElement.textContent).toEqual(
-        utcRoundStartTime
-      );
-      expect(roundEndTimePeriodElement.textContent).toEqual(utcRoundEndTime);
+      expect(roundStartTimePeriodElement.textContent).toEqual(RoundStartTime);
+      expect(roundEndTimePeriodElement.textContent).toEqual(RoundEndTime);
     });
 
     it("displays create round link", async () => {

packages/round-manager/src/features/round/ApplicationDirectPayout.tsx

@@ -18,6 +18,7 @@ import {
   formatUTCDateAsISOString,
   getPayoutTokenOptions,
   getUTCTime,
+  getLocalTime,
   useAllo,
 } from "common";
 import { useNetwork } from "wagmi";