merge

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');

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) => <ConfirmInfoRow label="Date">{story()}</ConfirmInfoRow>,
+  ],
+
+  argTypes: {
+    url: {
+      control: 'date',
+    },
+  },
+};
+
+export const DefaultStory = ({ date }) => <ConfirmInfoRowDate date={date} />;
+DefaultStory.args = {
+  date: 1633019124000,
+};
+
+export default ConfirmInfoRowDateStory;

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(<ConfirmInfoRowDate date={1633019124000} />);
+    expect(getByText('30 September 2021, 16:25')).toBeInTheDocument();
+  });
+});

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) => (
+  <Box
+    display={Display.Flex}
+    alignItems={AlignItems.center}
+    flexWrap={FlexWrap.Wrap}
+    gap={2}
+  >
+    <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
+      {formatUTCDate(date)}
+    </Text>
+  </Box>
+);

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';

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',

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('');
+    });
+  });
 });

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 = () => {
         <ConfirmInfoRowText text={nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
-        <ConfirmInfoRowText text={formatDate(issuedAt)} />
+        <ConfirmInfoRowDate
+          date={DateTime.fromISO(issuedAt).toJSDate().getTime()}
+        />
       </ConfirmInfoRow>
       {requestId && (
         <ConfirmInfoRow label={t('siweRequestId')}>

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:
                 </p>
               </div>
-              3,000
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                  style="white-space: pre-wrap;"
+                >
+                  3,000
+                </p>
+              </div>
             </div>
             <div
               class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"