Merge pull request #1439 from decent-dao/feedback/#1404-timezones

Feedback/#1404 timezones

package.json

@@ -29,6 +29,7 @@
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.1",
     "ethers": "^5.7.2",
     "evm-proxy-detection": "^1.1.0",
     "formik": "^2.2.9",

src/components/Proposals/MultisigProposalDetails/TxDetails.tsx

@@ -1,37 +1,13 @@
-import { Box, Divider, Flex, Text } from '@chakra-ui/react';
+import { Box, Divider, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
 import { useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
 import { MultisigProposal } from '../../../types';
 import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats';
 import ContentBox from '../../ui/containers/ContentBox';
-import DisplayTransaction from '../../ui/links/DisplayTransaction';
-
-export function InfoRow({
-  property,
-  value,
-  txHash,
-}: {
-  property: string;
-  value?: string;
-  txHash?: string | null;
-}) {
-  return (
-    <Flex
-      marginTop={4}
-      justifyContent="space-between"
-    >
-      <Text
-        textStyle="text-base-sans-regular"
-        color="chocolate.200"
-      >
-        {property}
-      </Text>
-      {txHash ? <DisplayTransaction txHash={txHash} /> : <Text>{value}</Text>}
-    </Flex>
-  );
-}
+import InfoRow from '../../ui/proposal/InfoRow';
 
 export function TxDetails({ proposal }: { proposal: MultisigProposal }) {
   const { t } = useTranslation('proposal');
@@ -54,7 +30,8 @@ export function TxDetails({ proposal }: { proposal: MultisigProposal }) {
         />
         <InfoRow
           property={t('created')}
-          value={format(new Date(proposal.eventDate), DEFAULT_DATE_TIME_FORMAT)}
+          value={format(proposal.eventDate, DEFAULT_DATE_TIME_FORMAT)}
+          tooltip={formatInTimeZone(proposal.eventDate, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
         <InfoRow
           property={t('transactionHash')}

src/components/Proposals/ProposalSummary.tsx

@@ -1,6 +1,7 @@
 import { Text, Box, Button, Divider, Flex, Tooltip } from '@chakra-ui/react';
 import { ArrowAngleUp } from '@decent-org/fractal-ui';
 import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
 import { BigNumber } from 'ethers';
 import { useMemo, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,8 +15,8 @@ import { DisplayAddress } from '../ui/links/DisplayAddress';
 import DisplayTransaction from '../ui/links/DisplayTransaction';
 import EtherscanLinkBlock from '../ui/links/EtherscanLinkBlock';
 import { InfoBoxLoader } from '../ui/loaders/InfoBoxLoader';
+import InfoRow from '../ui/proposal/InfoRow';
 import { QuorumProgressBar } from '../ui/utils/ProgressBar';
-import { InfoRow } from './MultisigProposalDetails/TxDetails';
 
 export default function ProposalSummary({
   proposal: {
@@ -136,10 +137,12 @@ export default function ProposalSummary({
         <InfoRow
           property={t('proposalSummaryStartDate')}
           value={format(startBlockTimeStamp * 1000, DEFAULT_DATE_TIME_FORMAT)}
+          tooltip={formatInTimeZone(startBlockTimeStamp * 1000, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
         <InfoRow
           property={t('proposalSummaryEndDate')}
           value={format(deadlineMs, DEFAULT_DATE_TIME_FORMAT)}
+          tooltip={formatInTimeZone(deadlineMs, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
         <Flex
           marginTop={4}

src/components/Proposals/SnapshotProposalDetails/SnapshotProposalSummary.tsx

@@ -1,5 +1,6 @@
 import { Text, Box, Button, Divider, Flex, Tooltip } from '@chakra-ui/react';
 import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
@@ -8,8 +9,8 @@ import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats';
 import ContentBox from '../../ui/containers/ContentBox';
 import ExternalLink from '../../ui/links/ExternalLink';
 import { InfoBoxLoader } from '../../ui/loaders/InfoBoxLoader';
+import InfoRow from '../../ui/proposal/InfoRow';
 import { QuorumProgressBar } from '../../ui/utils/ProgressBar';
-import { InfoRow } from '../MultisigProposalDetails/TxDetails';
 import useSnapshotUserVotingWeight from './hooks/useSnapshotUserVotingWeight';
 import useTotalVotes from './hooks/useTotalVotes';
 
@@ -88,10 +89,12 @@ export default function SnapshotProposalSummary({ proposal }: ISnapshotProposalS
         <InfoRow
           property={t('proposalSummaryStartDate')}
           value={format(proposal.startTime * 1000, DEFAULT_DATE_TIME_FORMAT)}
+          tooltip={formatInTimeZone(proposal.startTime * 1000, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
         <InfoRow
           property={t('proposalSummaryEndDate')}
           value={format(proposal.endTime * 1000, DEFAULT_DATE_TIME_FORMAT)}
+          tooltip={formatInTimeZone(proposal.endTime * 1000, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
         <Flex
           marginTop={4}

src/components/ui/proposal/InfoRow.tsx

@@ -0,0 +1,39 @@
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import DisplayTransaction from '../../ui/links/DisplayTransaction';
+
+export default function InfoRow({
+  property,
+  value,
+  txHash,
+  tooltip,
+}: {
+  property: string;
+  value?: string;
+  txHash?: string | null;
+  tooltip?: string;
+}) {
+  return (
+    <Flex
+      marginTop={4}
+      justifyContent="space-between"
+    >
+      <Text
+        textStyle="text-base-sans-regular"
+        color="chocolate.200"
+      >
+        {property}
+      </Text>
+      {tooltip === undefined ? (
+        txHash ? (
+          <DisplayTransaction txHash={txHash} />
+        ) : (
+          <Text>{value}</Text>
+        )
+      ) : (
+        <Tooltip label={tooltip}>
+          {txHash ? <DisplayTransaction txHash={txHash} /> : <Text>{value}</Text>}
+        </Tooltip>
+      )}
+    </Flex>
+  );
+}

src/utils/numberFormats.ts

@@ -2,7 +2,7 @@ import { SafeBalanceUsdResponse } from '@safe-global/safe-service-client';
 import { BigNumber, ethers } from 'ethers';
 import bigDecimal from 'js-big-decimal';
 
-export const DEFAULT_DATE_TIME_FORMAT = 'MMM dd, yyyy, h:mm aa';
+export const DEFAULT_DATE_TIME_FORMAT = 'MMM dd, yyyy, h:mm aa O';
 export const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd';
 
 export const formatPercentage = (