diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts index 5afe288f869b..8320fd748f63 100644 --- a/test/e2e/tests/confirmations/signatures/permit.spec.ts +++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts @@ -85,7 +85,7 @@ async function assertInfoValues(driver: Driver) { }); const value = driver.findElement({ text: '3000' }); const nonce = driver.findElement({ text: '0' }); - const deadline = driver.findElement({ text: '50000000000' }); + const deadline = driver.findElement({ text: '02 August 1971, 16:53' }); assert.ok(await origin, 'origin'); assert.ok(await contractPetName, 'contractPetName'); diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx new file mode 100644 index 000000000000..971ba7624f3e --- /dev/null +++ b/ui/components/app/confirm/info/row/date.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { ConfirmInfoRow } from './row'; +import { ConfirmInfoRowDate } from './date'; + +const ConfirmInfoRowDateStory = { + title: 'Components/App/Confirm/InfoRowDate', + component: ConfirmInfoRowDate, + + decorators: [ + (story) => {story()}, + ], + + argTypes: { + url: { + control: 'date', + }, + }, +}; + +export const DefaultStory = ({ date }) => ; +DefaultStory.args = { + date: 1633019124000, +}; + +export default ConfirmInfoRowDateStory; diff --git a/ui/components/app/confirm/info/row/date.test.tsx b/ui/components/app/confirm/info/row/date.test.tsx new file mode 100644 index 000000000000..eda8510e4e7c --- /dev/null +++ b/ui/components/app/confirm/info/row/date.test.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import { ConfirmInfoRowDate } from './date'; + +describe('ConfirmInfoRowDate', () => { + it('should match snapshot', () => { + const { getByText } = render(); + expect(getByText('30 September 2021, 16:25')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/confirm/info/row/date.tsx b/ui/components/app/confirm/info/row/date.tsx new file mode 100644 index 000000000000..47fa8e4ea56a --- /dev/null +++ b/ui/components/app/confirm/info/row/date.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { + AlignItems, + Display, + FlexWrap, + TextColor, +} from '../../../../../helpers/constants/design-system'; +import { formatUTCDate } from '../../../../../helpers/utils/util'; +import { Box, Text } from '../../../../component-library'; + +export type ConfirmInfoRowDateProps = { + date: number; +}; + +export const ConfirmInfoRowDate = ({ date }: ConfirmInfoRowDateProps) => ( + + + {formatUTCDate(date)} + + +); diff --git a/ui/components/app/confirm/info/row/index.ts b/ui/components/app/confirm/info/row/index.ts index ef2102b280a1..0fc08d5887bb 100644 --- a/ui/components/app/confirm/info/row/index.ts +++ b/ui/components/app/confirm/info/row/index.ts @@ -1,4 +1,5 @@ export * from './address'; +export * from './date'; export * from './divider'; export * from './row'; export * from './text'; diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index 1353f2703741..96a5ab724218 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -43,6 +43,16 @@ export function formatDate(date, format = "M/d/y 'at' T") { return DateTime.fromMillis(date).toFormat(format); } +export const formatUTCDate = (dateInMillis) => { + if (!dateInMillis) { + return dateInMillis; + } + + return DateTime.fromMillis(dateInMillis) + .setZone('utc') + .toFormat('dd LLLL yyyy, HH:mm'); +}; + export function formatDateWithYearContext( date, formatThisYear = 'MMM d', diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js index bd9cbee4ebdf..22cafbf5f131 100644 --- a/ui/helpers/utils/util.test.js +++ b/ui/helpers/utils/util.test.js @@ -1042,4 +1042,16 @@ describe('util', () => { expect(util.hexToText(hexValue)).toBe(hexValue); }); }); + + describe('formatUTCDate', () => { + it('formats passed date string', () => { + expect(util.formatUTCDate(1633019124000)).toStrictEqual( + '30 September 2021, 16:25', + ); + }); + + it('returns empty string if empty string is passed', () => { + expect(util.formatUTCDate('')).toStrictEqual(''); + }); + }); }); diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx index 8c1260c3ede5..94389b253450 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { DateTime } from 'luxon'; import { useSelector } from 'react-redux'; import { toHex } from '@metamask/controller-utils'; @@ -9,9 +10,9 @@ import { SignatureRequestType } from '../../../../../types/confirm'; import { ConfirmInfoRow, ConfirmInfoRowAddress, + ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../../../components/app/confirm/info/row'; -import { formatDate } from '../../../../../utils/date'; const SIWESignInfo: React.FC = () => { const t = useI18nContext(); @@ -64,7 +65,9 @@ const SIWESignInfo: React.FC = () => { - + {requestId && ( diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap index 09d221d1f621..df75c8803667 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap @@ -406,7 +406,16 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = ` Value:

- 3,000 +
+

+ 3,000 +

+