fix: Redesign Signature Message date values (#27249)

## **Description**

Fix date values:
- Formerly, conversations were converting values as if they were
milliseconds. However, these values come from Solidity where these
timestamps are unix timestamps in seconds.
- Support -1 (no expiration) value 
- Display "expiry" as a date instead of a unix timestamp

This PR fixes the conversion.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27249?quickstart=1)

## **Related issues**

Fixes: #27137

## **Manual testing steps**

1. Go to test-dapp
2. Request Permit or another TypedSign request
3. Observe deadlines and dates

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

#### Test-dapp Permit
<img width="320"
src="https://github.com/user-attachments/assets/855fc4a5-5a1b-4575-bfda-40b5b6688fe3">

#### Deadline: -1
<img width="320"
src="https://github.com/user-attachments/assets/0bc90b15-daa7-4537-9cd1-8727000899b2">

### **After**

#### Test-dapp Permit
<img width="320"
src="https://github.com/user-attachments/assets/e1beb4f9-2b41-4ef9-8190-8264d88c9ab0">

#### Deadline: -1
<img width="320"
src="https://github.com/user-attachments/assets/edb4d259-29a3-4558-8858-e5b619c0ce18">

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/data/confirmations/typed_sign.ts

@@ -183,6 +183,25 @@ export const permitSignatureMsg = {
   },
 } as SignatureRequestType;
 
+export const permitSignatureMsgWithNoDeadline = {
+  id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
+  securityAlertResponse: {
+    reason: 'loading',
+    result_type: 'validation_in_progress',
+    securityAlertId: 'ab21395f-2190-472f-8cfa-3d224e7529d8',
+  },
+  status: 'unapproved',
+  time: 1716826404122,
+  type: 'eth_signTypedData',
+  msgParams: {
+    data: '{"types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Permit":[{"name":"owner","type":"address"},{"name":"spender","type":"address"},{"name":"value","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"deadline","type":"uint256"}]},"primaryType":"Permit","domain":{"name":"MyToken","version":"1","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","chainId":1},"message":{"owner":"0x935e73edb9ff52e23bac7f7e043a1ecd06d05477","spender":"0x5B38Da6a701c568545dCfcB03FcB875f56beddC4","value":3000,"nonce":0,"deadline":-1}}',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    version: 'V4',
+    signatureMethod: 'eth_signTypedData_v4',
+    origin: 'https://metamask.github.io',
+  },
+} as SignatureRequestType;
+
 export const permitBatchSignatureMsg = {
   id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
   securityAlertResponse: {

test/e2e/tests/confirmations/signatures/permit.spec.ts

@@ -125,7 +125,7 @@ async function assertInfoValues(driver: Driver) {
   });
   const value = driver.findElement({ text: '3,000' });
   const nonce = driver.findElement({ text: '0' });
-  const deadline = driver.findElement({ text: '02 August 1971, 16:53' });
+  const deadline = driver.findElement({ text: '09 June 3554, 16:53' });
 
   assert.ok(await origin, 'origin');
   assert.ok(await contractPetName, 'contractPetName');

ui/components/app/confirm/info/row/date.stories.tsx

@@ -18,9 +18,9 @@ const ConfirmInfoRowDateStory = {
   },
 };
 
-export const DefaultStory = ({ date }) => <ConfirmInfoRowDate date={date} />;
+export const DefaultStory = ({ date }) => <ConfirmInfoRowDate unixTimestamp={date} />;
 DefaultStory.args = {
-  date: 1633019124000,
+  date: 1633019124,
 };
 
 export default ConfirmInfoRowDateStory;

ui/components/app/confirm/info/row/date.test.tsx

@@ -5,7 +5,9 @@ import { ConfirmInfoRowDate } from './date';
 
 describe('ConfirmInfoRowDate', () => {
   it('should match snapshot', () => {
-    const { getByText } = render(<ConfirmInfoRowDate date={1633019124000} />);
+    const { getByText } = render(
+      <ConfirmInfoRowDate unixTimestamp={1633019124} />,
+    );
     expect(getByText('30 September 2021, 16:25')).toBeInTheDocument();
   });
 });

ui/components/app/confirm/info/row/date.tsx

@@ -6,22 +6,25 @@ import {
   FlexWrap,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
-import { formatUTCDate } from '../../../../../helpers/utils/util';
+import { formatUTCDateFromUnixTimestamp } from '../../../../../helpers/utils/util';
 import { Box, Text } from '../../../../component-library';
 
 export type ConfirmInfoRowDateProps = {
-  date: number;
+  /** timestamp as seconds since unix epoch e.g. Solidity block.timestamp (type uint256) value */
+  unixTimestamp: number;
 };
 
-export const ConfirmInfoRowDate = ({ date }: ConfirmInfoRowDateProps) => (
+export const ConfirmInfoRowDate = ({
+  unixTimestamp,
+}: ConfirmInfoRowDateProps) => (
   <Box
     display={Display.Flex}
     alignItems={AlignItems.center}
     flexWrap={FlexWrap.Wrap}
     gap={2}
   >
     <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
-      {formatUTCDate(date)}
+      {formatUTCDateFromUnixTimestamp(unixTimestamp)}
     </Text>
   </Box>
 );

ui/helpers/utils/util.js

@@ -39,13 +39,17 @@ export function formatDate(date, format = "M/d/y 'at' T") {
   return DateTime.fromMillis(date).toFormat(format);
 }
 
-export const formatUTCDate = (dateInMillis) => {
-  if (!dateInMillis) {
-    return dateInMillis;
+/**
+ * @param {number} unixTimestamp - timestamp as seconds since unix epoch
+ * @returns {string} formatted date string e.g. "14 July 2034, 22:22"
+ */
+export const formatUTCDateFromUnixTimestamp = (unixTimestamp) => {
+  if (!unixTimestamp) {
+    return unixTimestamp;
   }
 
-  return DateTime.fromMillis(dateInMillis)
-    .setZone('utc')
+  return DateTime.fromSeconds(unixTimestamp)
+    .toUTC()
     .toFormat('dd LLLL yyyy, HH:mm');
 };
 

ui/helpers/utils/util.test.js

@@ -1044,15 +1044,15 @@ describe('util', () => {
     });
   });
 
-  describe('formatUTCDate', () => {
+  describe('formatUTCDateFromUnixTimestamp', () => {
     it('formats passed date string', () => {
-      expect(util.formatUTCDate(1633019124000)).toStrictEqual(
-        '30 September 2021, 16:25',
+      expect(util.formatUTCDateFromUnixTimestamp(2036528542)).toStrictEqual(
+        '14 July 2034, 22:22',
       );
     });
 
     it('returns empty string if empty string is passed', () => {
-      expect(util.formatUTCDate('')).toStrictEqual('');
+      expect(util.formatUTCDateFromUnixTimestamp('')).toStrictEqual('');
     });
   });
 

ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx

@@ -63,7 +63,9 @@ const SIWESignInfo: React.FC = () => {
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowDate
-          date={DateTime.fromISO(issuedAt).toJSDate().getTime()}
+          unixTimestamp={DateTime.fromISO(issuedAt, {
+            zone: 'utc',
+          }).toUnixInteger()}
         />
       </ConfirmInfoRow>
       {requestId && (