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
+