Release/20240313

package.json

@@ -5,7 +5,7 @@
     "@apollo/client": "^3.7.10",
     "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
-    "@decent-org/fractal-ui": "^0.1.23",
+    "@decent-org/fractal-ui": "^0.1.25",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/abstract-signer": "^5.7.0",
@@ -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/DaoCreator/hooks/usePrepareFormData.ts

@@ -85,13 +85,11 @@ export function usePrepareFormData() {
       if (freezeGuard) {
         freezeGuardData = await prepareFreezeGuardData(freezeGuard);
       }
-      if (freezeGuardData) {
-        return {
-          trustedAddresses: resolvedAddresses,
-          ...freezeGuardData,
-          ...rest,
-        };
-      }
+      return {
+        trustedAddresses: resolvedAddresses,
+        ...freezeGuardData,
+        ...rest,
+      };
     },
     [signer, prepareFreezeGuardData],
   );

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/pages/DaoDashboard/Info/InfoTreasury.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import { Treasury } from '@decent-org/fractal-ui';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import { formatUSD } from '../../../../utils';
 import { BarLoader } from '../../../ui/loaders/BarLoader';
 import { useFormatCoins } from '../../DAOTreasury/hooks/useFormatCoins';
 
@@ -49,7 +50,7 @@ export function InfoTreasury({}: IDAOGovernance) {
         textStyle="text-lg-mono-semibold"
         color="grayscale.100"
       >
-        {totalFiatValue}
+        {formatUSD(totalFiatValue)}
       </Text>
     </Box>
   );

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/components/ui/proposal/ProposalCountdown.tsx

@@ -25,22 +25,19 @@ export function ProposalCountdown({
   proposal: FractalProposal;
   showIcon?: boolean;
 }) {
-  const secondsLeft = useProposalCountdown(proposal);
+  const totalSecondsLeft = useProposalCountdown(proposal);
   const { t } = useTranslation('proposal');
 
   const state: FractalProposalState | null = useMemo(() => proposal.state, [proposal]);
 
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
-  const showCountdown = useMemo(
-    () =>
-      !!secondsLeft &&
-      secondsLeft > 0 &&
-      (state === FractalProposalState.ACTIVE ||
-        state === FractalProposalState.TIMELOCKED ||
-        state === FractalProposalState.EXECUTABLE ||
-        isSnapshotProposal),
-    [state, secondsLeft, isSnapshotProposal],
-  );
+  const showCountdown =
+    !!totalSecondsLeft &&
+    totalSecondsLeft > 0 &&
+    (state === FractalProposalState.ACTIVE ||
+      state === FractalProposalState.TIMELOCKED ||
+      state === FractalProposalState.EXECUTABLE ||
+      isSnapshotProposal);
 
   if (!showCountdown) return null;
 
@@ -63,9 +60,15 @@ export function ProposalCountdown({
           ? Execute
           : null;
 
-  const daysLeft = Math.floor(secondsLeft! / (60 * 60 * 24));
-  const hoursLeft = Math.floor((secondsLeft! / (60 * 60)) % 24);
-  const minutesLeft = Math.floor((secondsLeft! / 60) % 60);
+  const daysLeft = Math.floor(totalSecondsLeft / (60 * 60 * 24));
+  const hoursLeft = Math.floor((totalSecondsLeft / (60 * 60)) % 24);
+  const minutesLeft = Math.floor((totalSecondsLeft / 60) % 60);
+  const secondsLeft = Math.floor(totalSecondsLeft % 60);
+
+  const showDays = daysLeft > 0;
+  const showHours = showDays || hoursLeft > 0;
+  const showMinutes = showHours || minutesLeft > 0;
+  const showSeconds = secondsLeft >= 0;
 
   return (
     <Tooltip
@@ -85,10 +88,10 @@ export function ProposalCountdown({
             color="chocolate.200"
             textStyle="text-base-mono-semibold"
           >
-            {daysLeft > 0 && `${zeroPad(daysLeft)}:`}
-            {hoursLeft > 0 && `${zeroPad(hoursLeft)}:`}
-            {minutesLeft > 0 && `${zeroPad(minutesLeft)}:`}
-            {secondsLeft! >= 0 && `${zeroPad(secondsLeft! % 60)}`}
+            {showDays && `${zeroPad(daysLeft)}:`}
+            {showHours && `${zeroPad(hoursLeft)}:`}
+            {showMinutes && `${zeroPad(minutesLeft)}:`}
+            {showSeconds && `${zeroPad(secondsLeft)}`}
           </Text>
         </Flex>
       </Flex>

src/providers/App/hooks/usePriceAPI.ts

@@ -41,6 +41,9 @@ export default function usePriceAPI() {
           }
         }
       } catch (e) {
+        // When doing local development, it's unlikely that the Pricing Service is going to be running locally,
+        // so don't worry about logging or showing the error toast.
+        if (process.env.NODE_ENV === 'development') return;
         logError('Error while getting tokens prices', e);
         toast.warning(t('tokenPriceFetchingError'));
         return;

src/providers/Providers.tsx

@@ -1,11 +1,11 @@
 'use client';
 import { ApolloProvider } from '@apollo/client';
 import { ChakraProvider } from '@chakra-ui/react';
-import { theme } from '@decent-org/fractal-ui';
 import { RainbowKitProvider, midnightTheme } from '@rainbow-me/rainbowkit';
 import { ReactNode, useEffect } from 'react';
 import { ToastContainer } from 'react-toastify';
 import { WagmiConfig } from 'wagmi';
+import { theme } from '../assets/theme';
 import { ModalProvider } from '../components/ui/modals/ModalProvider';
 import Layout from '../components/ui/page/Layout';
 import { ErrorFallback } from '../components/ui/utils/ErrorFallback';

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 = (