diff --git a/package-lock.json b/package-lock.json index 825913bcf9..f93ef11060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,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", @@ -14712,6 +14713,14 @@ "url": "https://opencollective.com/date-fns" } }, + "node_modules/date-fns-tz": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz", + "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==", + "peerDependencies": { + "date-fns": "2.x" + } + }, "node_modules/dayjs": { "version": "1.11.7", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", @@ -39526,6 +39535,12 @@ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" }, + "date-fns-tz": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz", + "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==", + "requires": {} + }, "dayjs": { "version": "1.11.7", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", diff --git a/package.json b/package.json index dcff7f09e4..0f632e1d1b 100644 --- a/package.json +++ b/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", diff --git a/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx b/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx index 32d4d2a3f2..45e72c0edd 100644 --- a/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx +++ b/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 ( - - - {property} - - {txHash ? : {value}} - - ); -} +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 }) { /> + + {property} + + {tooltip === undefined ? ( + txHash ? ( + + ) : ( + {value} + ) + ) : ( + + {txHash ? : {value}} + + )} + + ); +} diff --git a/src/utils/numberFormats.ts b/src/utils/numberFormats.ts index 07194f0ba0..14987105bc 100644 --- a/src/utils/numberFormats.ts +++ b/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 = (