Update UTC time to local time

packages/common/src/index.ts

@@ -226,6 +226,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 short = today.toLocaleDateString(undefined);
+  const full = today.toLocaleDateString(undefined, { timeZoneName: "short" });
+
+  return full.replace(short, "").substring(2);
+}
+
+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,7 @@ import {
   formatUTCDateAsISOString,
   getRoundStrategyTitle,
   getUTCTime,
+  getLocalTime,
   isRoundUsingPassportLite,
   renderToPlainText,
   truncateDescription,

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";
@@ -12,36 +17,69 @@ export type RoundDates = Pick<
 >;
 
 export function parseRoundDates(round: RoundDates) {
-  const noEndTime = 'No end date <span class="text-grey-400 text-xs">(open round)</span>';
+  const noEndTime =
+    'No end date <span class="text-grey-400 text-xs">(open round)</span>';
 
   return {
     application: {
       iso: {
         start: formatUTCDateAsISOString(round.applicationsStartTime),
-        end: moment(round.applicationsEndTime).isSame(maxDateForUint256)
-          ? <span dangerouslySetInnerHTML={{__html: noEndTime}} />
-          : formatUTCDateAsISOString(round.applicationsEndTime),
+        end: moment(round.applicationsEndTime).isSame(maxDateForUint256) ? (
+          <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+        ) : (
+          formatUTCDateAsISOString(round.applicationsEndTime)
+        ),
+      },
+      local_iso: {
+        start: formatLocalDateAsISOString(round.applicationsStartTime),
+        end: moment(round.applicationsEndTime).isSame(maxDateForUint256) ? (
+          <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+        ) : (
+          formatLocalDateAsISOString(round.applicationsEndTime)
+        ),
       },
       utc: {
         start: getUTCTime(round.applicationsStartTime),
         end: moment(round.applicationsEndTime).isSame(maxDateForUint256)
           ? ""
           : `(${getUTCTime(round.applicationsEndTime)})`,
       },
+      local: {
+        start: getLocalTime(round.applicationsStartTime),
+        end: moment(round.applicationsEndTime).isSame(maxDateForUint256)
+          ? ""
+          : `(${getLocalTime(round.applicationsEndTime)})`,
+      },
     },
     round: {
       iso: {
         start: formatUTCDateAsISOString(round.roundStartTime),
-        end: moment(round.roundEndTime).isSame(maxDateForUint256)
-          ? <span dangerouslySetInnerHTML={{__html: noEndTime}} />
-          : formatUTCDateAsISOString(round.roundEndTime),
+        end: moment(round.roundEndTime).isSame(maxDateForUint256) ? (
+          <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+        ) : (
+          formatUTCDateAsISOString(round.roundEndTime)
+        ),
+      },
+      local_iso: {
+        start: formatLocalDateAsISOString(round.roundStartTime),
+        end: moment(round.roundEndTime).isSame(maxDateForUint256) ? (
+          <span dangerouslySetInnerHTML={{ __html: noEndTime }} />
+        ) : (
+          formatLocalDateAsISOString(round.roundEndTime)
+        ),
       },
       utc: {
         start: `(${getUTCTime(round.roundStartTime)})`,
         end: moment(round.roundEndTime).isSame(maxDateForUint256)
           ? ""
           : `(${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

@@ -14,7 +14,7 @@ import { usePayout } from "../../context/application/usePayout";
 import { Button, Input } from "common/src/styles";
 import { BigNumber, ethers } from "ethers";
 import { AnswerBlock, GrantApplication, Round } from "../api/types";
-import { formatUTCDateAsISOString, getUTCTime } from "common";
+import { formatUTCDateAsISOString, getUTCTime, getLocalTime } from "common";
 import { useNetwork } from "wagmi";
 import { errorModalDelayMs } from "../../constants";
 import { getPayoutTokenOptions } from "../api/payoutTokens";

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

@@ -29,6 +29,7 @@ import { Program, Round } from "../api/types";
 import { SupportType } from "../api/utils";
 import { FormStepper } from "../common/FormStepper";
 import { FormContext } from "../common/FormWizard";
+import { getTimezoneName } from "common/src/index";
 
 export const RoundValidationSchema = yup.object().shape({
   roundMetadata: yup.object({
@@ -332,9 +333,9 @@ export function RoundDetailForm(props: RoundDetailFormProps) {
                               }}
                               isValidDate={disablePastAndBeforeRoundStartDate}
                               initialViewDate={now}
-                              utc={true}
+                              utc={false}
                               dateFormat={"YYYY-MM-DD"}
-                              timeFormat={"HH:mm UTC"}
+                              timeFormat={`HH:mm [${getTimezoneName()}]`}
                             />
                           )}
                         />
@@ -434,9 +435,9 @@ export function RoundDetailForm(props: RoundDetailFormProps) {
                                 disabled: rollingApplications,
                               }}
                               isValidDate={disableBeforeApplicationStartDate}
-                              utc={true}
+                              utc={false}
                               dateFormat={"YYYY-MM-DD"}
-                              timeFormat={"HH:mm UTC"}
+                              timeFormat={`HH:mm [${getTimezoneName()}]`}
                             />
                           )}
                         />
@@ -510,9 +511,9 @@ export function RoundDetailForm(props: RoundDetailFormProps) {
                                 "block w-full border-0 p-0 text-gray-900 placeholder-grey-400 focus:ring-0 text-sm",
                             }}
                             isValidDate={disableBeforeApplicationStartDate}
-                            utc={true}
+                            utc={false}
                             dateFormat={"YYYY-MM-DD"}
-                            timeFormat={"HH:mm UTC"}
+                            timeFormat={`HH:mm [${getTimezoneName()}]`}
                           />
                         )}
                       />
@@ -622,25 +623,9 @@ export function RoundDetailForm(props: RoundDetailFormProps) {
                                 }
                               }}
                               isValidDate={disableBeforeRoundStartDate}
-                              utc={true}
-                              // we use renderInput because there is a bug with the library
-                              // if the input is cleared programmatically the value is removed
-                              // but the visual date is not updated
-                              // ref: https://stackoverflow.com/a/64972324/2524608
-                              renderInput={(props) => {
-                                return (
-                                  <input
-                                    {...props}
-                                    value={
-                                      field.value
-                                        ? moment(field.value).format(
-                                            "YYYY-MM-DD HH:mm UTC"
-                                          )
-                                        : ""
-                                    }
-                                  />
-                                );
-                              }}
+                              utc={false}
+                              dateFormat={"YYYY-MM-DD"}
+                              timeFormat={`HH:mm [${getTimezoneName()}]`}
                             />
                           );
                         }}
@@ -1041,7 +1026,7 @@ function ApplicationDatesInformation() {
         type="dark"
         effect="solid"
       >
-        <span className="text-xs">All dates are in UTC.</span>
+        <span className="text-xs">All dates are browser localized.</span>
       </ReactTooltip>
     </>
   );

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

@@ -60,6 +60,7 @@ import {
   formatDateWithOrdinal,
   getRoundStrategyType,
   getUTCTime,
+  getLocalTime,
   useAllo,
   VerifiedCredentialState,
 } from "common";

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

@@ -598,21 +598,21 @@ export function ApplicationOpenDateRange({ round }: { round: RoundDates }) {
       <span className="text-grey-400 mr-2">Applications:</span>
       <div className="flex flex-row gap-2">
         <p className="flex flex-col">
-          <span>{res.application.iso.start}</span>
+          <span>{res.application.local_iso.start}</span>
           <span className="text-grey-400 text-xs">
-            ({res.application.utc.start})
+            ({res.application.local.start})
           </span>
         </p>
         <p className="flex flex-col">
           <span className="mx-1">-</span>
         </p>
         <p className="flex flex-col">
           <span className="[&>*]:flex [&>*]:flex-col">
-            {res.application.iso.end}
+            {res.application.local_iso.end}
           </span>
-          {res.application.utc.end && (
+          {res.application.local.end && (
             <span className="text-grey-400 text-xs">
-              {res.application.utc.end}
+              {res.application.local.end}
             </span>
           )}
         </p>
@@ -630,16 +630,18 @@ export function RoundOpenDateRange({ round }: { round: RoundDates }) {
       <span className="text-grey-400 mr-2">Round:</span>
       <div className="flex flex-row gap-2">
         <p className="flex flex-col">
-          <span>{res.round.iso.start}</span>
-          <span className="text-grey-400 text-xs">{res.round.utc.start}</span>
+          <span>{res.round.local_iso.start}</span>
+          <span className="text-grey-400 text-xs">{res.round.local.start}</span>
         </p>
         <p className="flex flex-col">
           <span className="mx-1">-</span>
         </p>
         <p className="flex flex-col">
-          <span className="[&>*]:flex [&>*]:flex-col">{res.round.iso.end}</span>
-          {res.round.utc.end && (
-            <span className="text-grey-400 text-xs">{res.round.utc.end}</span>
+          <span className="[&>*]:flex [&>*]:flex-col">
+            {res.round.local_iso.end}
+          </span>
+          {res.round.local.end && (
+            <span className="text-grey-400 text-xs">{res.round.local.end}</span>
           )}
         </p>
       </div>