From 161814b5afee45d9770dd8e172f9d487ce367141 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 11:56:52 +0530
Subject: [PATCH 01/45] Changes in infor section of permit signature types

---
 app/_locales/en/messages.json                 |  3 +++
 test/data/confirmations/typed_sign.ts         | 19 ++++++++++++++++++
 .../__snapshots__/typed-sign.test.tsx.snap    |  8 ++++++++
 .../info/typed-sign/typed-sign.test.tsx       | 13 ++++++++++++
 .../confirm/info/typed-sign/typed-sign.tsx    | 20 +++++++++++++++----
 .../row/typed-sign-data/typedSignData.tsx     | 10 ++--------
 ui/pages/confirmations/constants/index.ts     |  1 +
 ui/pages/confirmations/utils/confirm.ts       |  8 ++++++++
 8 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 ui/pages/confirmations/constants/index.ts

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 9e09e1ef2439..89af75748551 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4219,6 +4219,9 @@
   "requestFromInfo": {
     "message": "This is the site asking for your signature."
   },
+  "approvingTo": {
+    "message": "Approving to"
+  },
   "requestFromTransactionDescription": {
     "message": "This is the site asking for your confirmation."
   },
diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index 58ce0d068dc0..41647e1693bc 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -133,3 +133,22 @@ export const unapprovedTypedSignMsgV4 = {
     origin: 'https://metamask.github.io',
   },
 };
+
+export const permitSignatyeMsg = {
+  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":50000000000}}',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    version: 'V4',
+    signatureMethod: 'eth_signTypedData_v4',
+    origin: 'https://metamask.github.io',
+  },
+};
\ No newline at end of file
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 cf3c57f86829..aec02e0c3c0a 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
@@ -425,6 +425,14 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 </div>
 `;
 
+exports[`TypedSignInfo should display approving to for permit signature type 1`] = `
+<p
+  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+>
+  Approving to
+</p>
+`;
+
 exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 <div>
   <div
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index 71050362909e..9e923de4377a 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -4,6 +4,7 @@ import configureMockStore from 'redux-mock-store';
 import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
 import {
+  permitSignatyeMsg,
   unapprovedTypedSignMsgV3,
   unapprovedTypedSignMsgV4,
 } from '../../../../../../../test/data/confirmations/typed_sign';
@@ -62,4 +63,16 @@ describe('TypedSignInfo', () => {
     const { container } = renderWithProvider(<TypedSignInfo />, mockStore);
     expect(container).toMatchSnapshot();
   });
+
+  it('should display approving to for permit signature type', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: permitSignatyeMsg,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<TypedSignInfo />, mockStore);
+    expect(getByText('Approving to')).toMatchSnapshot();
+  });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index b36ddf132f13..50ba57242db2 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -5,6 +5,7 @@ import { isValidAddress } from 'ethereumjs-util';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
+  ConfirmInfoRowDivider,
   ConfirmInfoRowUrl,
 } from '../../../../../../components/app/confirm/info/row';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
@@ -14,8 +15,9 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../../helpers/constants/design-system';
-import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
+import { PermitSignatureRequestPrimayType } from '../../../../constants';
 import { SignatureRequestType } from '../../../../types/confirm';
+import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
 
 const TypedSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -27,9 +29,11 @@ const TypedSignInfo: React.FC = () => {
     return null;
   }
 
-  const { domain = {} } = JSON.parse(
-    currentConfirmation.msgParams.data as string,
-  );
+  const {
+    domain,
+    domain: { verifyingContract },
+    primaryType,
+  } = JSON.parse(currentConfirmation.msgParams.data as string);
 
   return (
     <>
@@ -39,6 +43,14 @@ const TypedSignInfo: React.FC = () => {
         padding={2}
         marginBottom={4}
       >
+        {primaryType === PermitSignatureRequestPrimayType && (
+          <>
+            <ConfirmInfoRow label={t('approvingTo')}>
+              <ConfirmInfoRowAddress address={verifyingContract} />
+            </ConfirmInfoRow>
+            <ConfirmInfoRowDivider />
+          </>
+        )}
         <ConfirmInfoRow label={t('requestFrom')} tooltip={t('requestFromInfo')}>
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </ConfirmInfoRow>
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
index 3b3500c637a3..d60d056a71dc 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { sanitizeMessage } from '../../../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { Box } from '../../../../../../components/component-library';
 import { BlockSize } from '../../../../../../helpers/constants/design-system';
@@ -10,12 +9,7 @@ import {
 } from '../../../../../../components/app/confirm/info/row';
 
 import { DataTree } from '../dataTree';
-
-const parseMessage = (dataToParse: string) => {
-  const { message, primaryType, types } = JSON.parse(dataToParse);
-  const sanitizedMessage = sanitizeMessage(message, primaryType, types);
-  return { sanitizedMessage, primaryType };
-};
+import { parseTypedDataMessage } from '../../../../utils';
 
 export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => {
   const t = useI18nContext();
@@ -24,7 +18,7 @@ export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => {
     return null;
   }
 
-  const { sanitizedMessage, primaryType } = parseMessage(data);
+  const { sanitizedMessage, primaryType } = parseTypedDataMessage(data);
 
   return (
     <Box width={BlockSize.Full}>
diff --git a/ui/pages/confirmations/constants/index.ts b/ui/pages/confirmations/constants/index.ts
new file mode 100644
index 000000000000..b3d3f374729d
--- /dev/null
+++ b/ui/pages/confirmations/constants/index.ts
@@ -0,0 +1 @@
+export const PermitSignatureRequestPrimayType = 'Permit';
diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts
index 4e2a49678f1a..1b008fb8a1bd 100644
--- a/ui/pages/confirmations/utils/confirm.ts
+++ b/ui/pages/confirmations/utils/confirm.ts
@@ -3,6 +3,8 @@ import { ApprovalType } from '@metamask/controller-utils';
 import { TransactionType } from '@metamask/transaction-controller';
 import { Json } from '@metamask/utils';
 
+import { sanitizeMessage } from '../../../helpers/utils/util';
+
 export const REDESIGN_APPROVAL_TYPES = [
   ApprovalType.EthSignTypedData,
   ApprovalType.PersonalSign,
@@ -23,3 +25,9 @@ const SIGNATURE_APPROVAL_TYPES = [
 export const isSignatureApprovalRequest = (
   request: ApprovalRequest<Record<string, Json>>,
 ) => SIGNATURE_APPROVAL_TYPES.includes(request.type as ApprovalType);
+
+export const parseTypedDataMessage = (dataToParse: string) => {
+  const { message, domain = {}, primaryType, types } = JSON.parse(dataToParse);
+  const sanitizedMessage = sanitizeMessage(message, primaryType, types);
+  return { domain, sanitizedMessage, primaryType };
+};

From 9ed12f0d522586e04830a65ab3aa183b3832ae4c Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 12:04:16 +0530
Subject: [PATCH 02/45] update

---
 test/data/confirmations/typed_sign.ts                           | 2 +-
 .../components/confirm/info/typed-sign/typed-sign.test.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index 41647e1693bc..f6219543fe1a 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -151,4 +151,4 @@ export const permitSignatyeMsg = {
     signatureMethod: 'eth_signTypedData_v4',
     origin: 'https://metamask.github.io',
   },
-};
\ No newline at end of file
+};
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index 9e923de4377a..912c35a1a648 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -73,6 +73,6 @@ describe('TypedSignInfo', () => {
     };
     const mockStore = configureMockStore([])(state);
     const { getByText } = renderWithProvider(<TypedSignInfo />, mockStore);
-    expect(getByText('Approving to')).toMatchSnapshot();
+    expect(getByText('Approving to')).toBeDefined();
   });
 });

From df04719271dbf36cfd8720a51eedd89c74f8cc74 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 12:05:17 +0530
Subject: [PATCH 03/45] update

---
 .../typed-sign/__snapshots__/typed-sign.test.tsx.snap     | 8 --------
 1 file changed, 8 deletions(-)

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 aec02e0c3c0a..cf3c57f86829 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
@@ -425,14 +425,6 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 </div>
 `;
 
-exports[`TypedSignInfo should display approving to for permit signature type 1`] = `
-<p
-  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
->
-  Approving to
-</p>
-`;
-
 exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 <div>
   <div

From fa6fc591187ec08b574625db2195b381271042d8 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 12:35:04 +0530
Subject: [PATCH 04/45] update

---
 app/_locales/en/messages.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 89af75748551..1b55029f7021 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -500,6 +500,9 @@
     "message": "Approved on $1 for $2",
     "description": "$1 is the approval date for a permission. $2 is the AvatarGroup component displaying account images."
   },
+  "approvingTo": {
+    "message": "Approving to"
+  },
   "areYouSure": {
     "message": "Are you sure?"
   },
@@ -4219,9 +4222,6 @@
   "requestFromInfo": {
     "message": "This is the site asking for your signature."
   },
-  "approvingTo": {
-    "message": "Approving to"
-  },
   "requestFromTransactionDescription": {
     "message": "This is the site asking for your confirmation."
   },

From 1ef304e8b7b1577354600e8eea98faa8ca0e1227 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 13:57:21 +0530
Subject: [PATCH 05/45] Changes in personal sign info section

---
 app/_locales/en/messages.json                 |  3 ++
 test/data/confirmations/personal_sign.ts      | 32 +++++++++++++++++++
 .../info/personal-sign/personal-sign.test.tsx | 30 +++++++++++++----
 .../info/personal-sign/personal-sign.tsx      | 11 +++++++
 .../hooks/useCurrentConfirmation.ts           |  2 ++
 ui/pages/confirmations/types/confirm.ts       |  3 ++
 ui/pages/confirmations/utils/confirm.ts       | 12 +++++++
 7 files changed, 86 insertions(+), 7 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 9e09e1ef2439..6dc0dc9319bc 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4216,6 +4216,9 @@
   "requestFrom": {
     "message": "Request from"
   },
+  "signingInWith": {
+    "message": "Signing in with"
+  },
   "requestFromInfo": {
     "message": "This is the site asking for your signature."
   },
diff --git a/test/data/confirmations/personal_sign.ts b/test/data/confirmations/personal_sign.ts
index ee2193389a51..b022949076f6 100644
--- a/test/data/confirmations/personal_sign.ts
+++ b/test/data/confirmations/personal_sign.ts
@@ -13,3 +13,35 @@ export const unapprovedPersonalSignMsg = {
     siwe: { isSIWEMessage: false, parsedMessage: null },
   },
 };
+
+export const signatureRequestSIWE = {
+  id: '210ca3b0-1ccb-11ef-b096-89c4d726ebb5',
+  securityAlertResponse: {
+    reason: 'loading',
+    result_type: 'validation_in_progress',
+    securityAlertId: 'b826df20-2eda-41bf-becf-6a100141a8be',
+  },
+  status: 'unapproved',
+  time: 1716884423019,
+  type: 'personal_sign',
+  msgParams: {
+    from: '0x935e73edb9ff52e23bac7f7e049a1ecd06d05477',
+    data: '0x6d6574616d61736b2e6769746875622e696f2077616e747320796f7520746f207369676e20696e207769746820796f757220457468657265756d206163636f756e743a0a3078393335653733656462396666353265323362616337663765303433613165636430366430353437370a0a492061636365707420746865204d6574614d61736b205465726d73206f6620536572766963653a2068747470733a2f2f636f6d6d756e6974792e6d6574616d61736b2e696f2f746f730a0a5552493a2068747470733a2f2f6d6574616d61736b2e6769746875622e696f0a56657273696f6e3a20310a436861696e2049443a20310a4e6f6e63653a2033323839313735370a4973737565642041743a20323032312d30392d33305431363a32353a32342e3030305a',
+    signatureMethod: 'personal_sign',
+    origin: 'https://metamask.github.io',
+    siwe: {
+      isSIWEMessage: true,
+      parsedMessage: {
+        domain: 'metamask.github.io',
+        address: '0x935e73edb9ff52e23bac7f7e049a1ecd06d05477',
+        statement:
+          'I accept the MetaMask Terms of Service: https://community.metamask.io/tos',
+        uri: 'https://metamask.github.io',
+        version: '1',
+        chainId: 1,
+        nonce: '32891757',
+        issuedAt: '2021-09-30T16:25:24.000Z',
+      },
+    },
+  },
+};
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
index 577c5ee55eef..f7e9219d116a 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
@@ -1,24 +1,28 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 
+import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
-import { unapprovedPersonalSignMsg } from '../../../../../../../test/data/confirmations/personal_sign';
+import {
+  signatureRequestSIWE,
+  unapprovedPersonalSignMsg,
+} from '../../../../../../../test/data/confirmations/personal_sign';
 import PersonalSignInfo from './personal-sign';
 
 describe('PersonalSignInfo', () => {
   it('renders correctly for personal sign request', () => {
-    const mockState = {
+    const state = {
       confirm: {
         currentConfirmation: unapprovedPersonalSignMsg,
       },
     };
-    const mockStore = configureMockStore([])(mockState);
+    const mockStore = configureMockStore([])(state);
     const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
     expect(container).toMatchSnapshot();
   });
 
   it('does not render if required data is not present in the transaction', () => {
-    const mockState = {
+    const state = {
       confirm: {
         currentConfirmation: {
           id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
@@ -28,13 +32,13 @@ describe('PersonalSignInfo', () => {
         },
       },
     };
-    const mockStore = configureMockStore([])(mockState);
+    const mockStore = configureMockStore([])(state);
     const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('handle reverse string properly', () => {
-    const mockState = {
+    const state = {
       confirm: {
         currentConfirmation: {
           id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
@@ -51,8 +55,20 @@ describe('PersonalSignInfo', () => {
         },
       },
     };
-    const mockStore = configureMockStore([])(mockState);
+    const mockStore = configureMockStore([])(state);
     const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
     expect(container).toMatchSnapshot();
   });
+
+  it('display signing in from for SIWE request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: signatureRequestSIWE,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(getByText('Signing in with')).toBeDefined();
+  });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 5ad2c7d9fae7..374808d32197 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 
 import {
   ConfirmInfoRow,
+  ConfirmInfoRowAddress,
   ConfirmInfoRowText,
   ConfirmInfoRowUrl,
 } from '../../../../../../components/app/confirm/info/row';
@@ -18,6 +19,7 @@ import {
   sanitizeString,
 } from '../../../../../../helpers/utils/util';
 import { SignatureRequestType } from '../../../../types/confirm';
+import { isSIWESignatureRequest } from '../../../../utils';
 
 const PersonalSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -29,6 +31,10 @@ const PersonalSignInfo: React.FC = () => {
     return null;
   }
 
+  const { from } = currentConfirmation.msgParams;
+
+  console.log('=======', JSON.stringify(currentConfirmation));
+
   return (
     <>
       <Box
@@ -40,6 +46,11 @@ const PersonalSignInfo: React.FC = () => {
         <ConfirmInfoRow label={t('requestFrom')} tooltip={t('requestFromInfo')}>
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </ConfirmInfoRow>
+        {isSIWESignatureRequest(currentConfirmation) && (
+          <ConfirmInfoRow label={t('signingInWith')}>
+            <ConfirmInfoRowAddress address={from} />
+          </ConfirmInfoRow>
+        )}
       </Box>
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 9c5f3da505f7..0a63dfe46b2b 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -76,6 +76,8 @@ const useCurrentConfirmation = () => {
         return;
       }
 
+      // comment if condition below to enable re-design for SIWE signatures
+      // this can be removed once SIWE code changes are completed
       if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
         const { siwe } = unconfirmedTransaction.msgParams;
         if (siwe?.isSIWEMessage) {
diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts
index 73a4e5b58fd7..70e173b03deb 100644
--- a/ui/pages/confirmations/types/confirm.ts
+++ b/ui/pages/confirmations/types/confirm.ts
@@ -26,6 +26,9 @@ export type SignatureRequestType = {
     origin: string;
     data: string | TypedSignDataV1Type;
     version?: string;
+    siwe?: {
+      isSIWEMessage: boolean;
+    };
   };
   type: TransactionType;
   custodyId?: string;
diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts
index 4e2a49678f1a..88f62493a757 100644
--- a/ui/pages/confirmations/utils/confirm.ts
+++ b/ui/pages/confirmations/utils/confirm.ts
@@ -3,6 +3,9 @@ import { ApprovalType } from '@metamask/controller-utils';
 import { TransactionType } from '@metamask/transaction-controller';
 import { Json } from '@metamask/utils';
 
+import { sanitizeMessage } from '../../../helpers/utils/util';
+import { SignatureRequestType } from '../types/confirm';
+
 export const REDESIGN_APPROVAL_TYPES = [
   ApprovalType.EthSignTypedData,
   ApprovalType.PersonalSign,
@@ -23,3 +26,12 @@ const SIGNATURE_APPROVAL_TYPES = [
 export const isSignatureApprovalRequest = (
   request: ApprovalRequest<Record<string, Json>>,
 ) => SIGNATURE_APPROVAL_TYPES.includes(request.type as ApprovalType);
+
+export const parseTypedDataMessage = (dataToParse: string) => {
+  const { message, domain = {}, primaryType, types } = JSON.parse(dataToParse);
+  const sanitizedMessage = sanitizeMessage(message, primaryType, types);
+  return { domain, sanitizedMessage, primaryType };
+};
+
+export const isSIWESignatureRequest = (request: SignatureRequestType) =>
+  request.msgParams?.siwe?.isSIWEMessage;

From 8ee140136f3dd0fcb0b48a33afc875f4fe9e7f5e Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 28 May 2024 14:04:55 +0530
Subject: [PATCH 06/45] update

---
 app/_locales/en/messages.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6dc0dc9319bc..4ac5dd59837a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4216,9 +4216,6 @@
   "requestFrom": {
     "message": "Request from"
   },
-  "signingInWith": {
-    "message": "Signing in with"
-  },
   "requestFromInfo": {
     "message": "This is the site asking for your signature."
   },
@@ -4688,6 +4685,9 @@
   "signing": {
     "message": "Signing"
   },
+  "signingInWith": {
+    "message": "Signing in with"
+  },
   "simulationDetailsFailed": {
     "message": "There was an error loading your estimation."
   },

From 415a3527bf88e1cf73a9f913cd63fe1615f0ea42 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 11:36:27 +0530
Subject: [PATCH 07/45] update

---
 .../components/confirm/info/personal-sign/personal-sign.tsx     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 73ab8b2cbfd9..796506a8e71c 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -34,8 +34,6 @@ const PersonalSignInfo: React.FC = () => {
 
   const { from } = currentConfirmation.msgParams;
 
-  console.log('=======', JSON.stringify(currentConfirmation));
-
   return (
     <>
       <Box

From c3d577469aa49b5971f0684ebd3eb666f9983f94 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 11:43:03 +0530
Subject: [PATCH 08/45] update

---
 test/data/confirmations/typed_sign.ts                         | 2 +-
 .../components/confirm/info/typed-sign/typed-sign.test.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index f6219543fe1a..e368d74234f1 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -134,7 +134,7 @@ export const unapprovedTypedSignMsgV4 = {
   },
 };
 
-export const permitSignatyeMsg = {
+export const permitSignatureMsg = {
   id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
   securityAlertResponse: {
     reason: 'loading',
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index 912c35a1a648..065aa7a44144 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -4,7 +4,7 @@ import configureMockStore from 'redux-mock-store';
 import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
 import {
-  permitSignatyeMsg,
+  permitSignatureMsg,
   unapprovedTypedSignMsgV3,
   unapprovedTypedSignMsgV4,
 } from '../../../../../../../test/data/confirmations/typed_sign';
@@ -68,7 +68,7 @@ describe('TypedSignInfo', () => {
     const state = {
       ...mockState,
       confirm: {
-        currentConfirmation: permitSignatyeMsg,
+        currentConfirmation: permitSignatureMsg,
       },
     };
     const mockStore = configureMockStore([])(state);

From d1f85d91ffa559f782b6d1ff49b1995c50f17c72 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 17:50:40 +0530
Subject: [PATCH 09/45] Display simulation info for permit signatures

---
 app/_locales/en/messages.json                 |  3 +
 .../permit-simulation.test.tsx.snap           | 77 +++++++++++++++++++
 .../typed-sign/permit-simulation.test.tsx     | 21 +++++
 .../info/typed-sign/permit-simulation.tsx     | 70 +++++++++++++++++
 .../info/typed-sign/typed-sign.test.tsx       | 12 +++
 .../confirm/info/typed-sign/typed-sign.tsx    |  2 +
 6 files changed, 185 insertions(+)
 create mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
 create mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
 create mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index eb7c94d72ff1..2678d471f372 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4718,6 +4718,9 @@
   "simulationDetailsTitleTooltip": {
     "message": "Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
   },
+  "permitSimulationDetailInfo": {
+    "message": "This transaction gives permission to withdraw your tokens"
+  },
   "simulationDetailsTotalFiat": {
     "message": "Total = $1",
     "description": "$1 is the total amount in fiat currency on one side of the transaction"
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
new file mode 100644
index 000000000000..a092e4b8e490
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PermitSimulation renders origin for typed sign data request 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+  >
+    <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"
+      style="overflow-wrap: anywhere; min-height: 24px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Estimated changes
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
+          </div>
+        </div>
+      </div>
+      <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;"
+        >
+          This transaction gives permission to withdraw your tokens
+        </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"
+      style="overflow-wrap: anywhere; min-height: 24px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Approve spend limit
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-error-default mm-box--background-color-error-muted mm-box--rounded-xl"
+        >
+          3000
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--margin-left-2 mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
+        >
+          MyToken
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
new file mode 100644
index 000000000000..397ac5aa6f2a
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import mockState from '../../../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
+import { permitSignatureMsg } from '../../../../../../../test/data/confirmations/typed_sign';
+import PermitSimulation from './permit-simulation';
+
+describe('PermitSimulation', () => {
+  it('renders origin for typed sign data request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: permitSignatureMsg,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithProvider(<PermitSimulation />, mockStore);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
new file mode 100644
index 000000000000..ca3e66a3f37e
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+  ConfirmInfoRow,
+  ConfirmInfoRowText,
+} from '../../../../../../components/app/confirm/info/row';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
+import { currentConfirmationSelector } from '../../../../../../selectors';
+import { Box, Text } from '../../../../../../components/component-library';
+import {
+  BackgroundColor,
+  BorderRadius,
+  Display,
+  TextAlign,
+  TextColor,
+} from '../../../../../../helpers/constants/design-system';
+import { SignatureRequestType } from '../../../../types/confirm';
+
+const PermitSimulation: React.FC = () => {
+  const t = useI18nContext();
+  const currentConfirmation = useSelector(
+    currentConfirmationSelector,
+  ) as SignatureRequestType;
+
+  const {
+    domain: { name },
+    message: { value },
+  } = JSON.parse(currentConfirmation?.msgParams?.data as string);
+
+  return (
+    <Box
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderRadius={BorderRadius.MD}
+      padding={2}
+      marginBottom={4}
+    >
+      <ConfirmInfoRow
+        label={t('simulationDetailsTitle')}
+        tooltip={t('simulationDetailsTitleTooltip')}
+      >
+        <ConfirmInfoRowText text={t('permitSimulationDetailInfo')} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('approve')}>
+        <Box display={Display.Flex}>
+          <Text
+            backgroundColor={BackgroundColor.errorMuted}
+            borderRadius={BorderRadius.XL}
+            color={TextColor.errorDefault}
+            paddingInline={2}
+            textAlign={TextAlign.Center}
+          >
+            {value}
+          </Text>
+          <Text
+            backgroundColor={BackgroundColor.backgroundAlternative}
+            borderRadius={BorderRadius.XL}
+            paddingInline={2}
+            marginLeft={2}
+            textAlign={TextAlign.Center}
+          >
+            {name}
+          </Text>
+        </Box>
+      </ConfirmInfoRow>
+    </Box>
+  );
+};
+
+export default PermitSimulation;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index 065aa7a44144..0483737b2cbd 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -64,6 +64,18 @@ describe('TypedSignInfo', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('display simulation details for permit signature', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: permitSignatureMsg,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<TypedSignInfo />, mockStore);
+    expect(getByText('Estimated changes')).toBeDefined();
+  });
+
   it('should display approving to for permit signature type', () => {
     const state = {
       ...mockState,
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 50ba57242db2..ccc16f991a7c 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -18,6 +18,7 @@ import {
 import { PermitSignatureRequestPrimayType } from '../../../../constants';
 import { SignatureRequestType } from '../../../../types/confirm';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
+import PermitSimulation from './permit-simulation';
 
 const TypedSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -37,6 +38,7 @@ const TypedSignInfo: React.FC = () => {
 
   return (
     <>
+      {primaryType === PermitSignatureRequestPrimayType && <PermitSimulation />}
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}

From 737d2014373025479d185493df6b677231cae601 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 17:56:05 +0530
Subject: [PATCH 10/45] update

---
 .../components/confirm/info/typed-sign/typed-sign.test.tsx    | 2 +-
 .../components/confirm/info/typed-sign/typed-sign.tsx         | 4 ++--
 ui/pages/confirmations/constants/index.ts                     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index 065aa7a44144..1f337f5a9dc2 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -64,7 +64,7 @@ describe('TypedSignInfo', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should display approving to for permit signature type', () => {
+  it('displays "Approving to" for permit signature type', () => {
     const state = {
       ...mockState,
       confirm: {
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 50ba57242db2..54690a1639bc 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -15,7 +15,7 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../../helpers/constants/design-system';
-import { PermitSignatureRequestPrimayType } from '../../../../constants';
+import { EIP712_PRIMARY_TYPE_PERMIT } from '../../../../constants';
 import { SignatureRequestType } from '../../../../types/confirm';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
 
@@ -43,7 +43,7 @@ const TypedSignInfo: React.FC = () => {
         padding={2}
         marginBottom={4}
       >
-        {primaryType === PermitSignatureRequestPrimayType && (
+        {primaryType === EIP712_PRIMARY_TYPE_PERMIT && (
           <>
             <ConfirmInfoRow label={t('approvingTo')}>
               <ConfirmInfoRowAddress address={verifyingContract} />
diff --git a/ui/pages/confirmations/constants/index.ts b/ui/pages/confirmations/constants/index.ts
index b3d3f374729d..f28133ecf792 100644
--- a/ui/pages/confirmations/constants/index.ts
+++ b/ui/pages/confirmations/constants/index.ts
@@ -1 +1 @@
-export const PermitSignatureRequestPrimayType = 'Permit';
+export const EIP712_PRIMARY_TYPE_PERMIT = 'Permit';

From 0be218d57e3db4cc57e0cb02b19bfce13a5f33c8 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 17:58:25 +0530
Subject: [PATCH 11/45] update

---
 app/_locales/en/messages.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 2678d471f372..422afa8653fe 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3890,6 +3890,9 @@
   "permissionsPageTourTitle": {
     "message": "Connected sites are now permissions"
   },
+  "permitSimulationDetailInfo": {
+    "message": "This transaction gives permission to withdraw your tokens"
+  },
   "personalAddressDetected": {
     "message": "Personal address detected. Input the token contract address."
   },
@@ -4718,9 +4721,6 @@
   "simulationDetailsTitleTooltip": {
     "message": "Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
   },
-  "permitSimulationDetailInfo": {
-    "message": "This transaction gives permission to withdraw your tokens"
-  },
   "simulationDetailsTotalFiat": {
     "message": "Total = $1",
     "description": "$1 is the total amount in fiat currency on one side of the transaction"

From d6164cfd9fe0416955ac967972cb04f12a6e518f Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 18:43:20 +0530
Subject: [PATCH 12/45] update

---
 .../components/confirm/info/typed-sign/typed-sign.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 60f89d3a2dd8..d9b601ccddb1 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -38,7 +38,7 @@ const TypedSignInfo: React.FC = () => {
 
   return (
     <>
-      {primaryType === PermitSignatureRequestPrimayType && <PermitSimulation />}
+      {primaryType === EIP712_PRIMARY_TYPE_PERMIT && <PermitSimulation />}
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}

From 4610e2a5149842bd54915491b3dd67069dc331e7 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 19:17:50 +0530
Subject: [PATCH 13/45] Add simulation sectionfor SIWE personal signature
 requests

---
 app/_locales/en/messages.json                  |  3 +++
 .../info/personal-sign/personal-sign.test.tsx  | 12 ++++++++++++
 .../info/personal-sign/personal-sign.tsx       | 18 +++++++++++++++++-
 .../hooks/useCurrentConfirmation.ts            | 14 +++++++-------
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 19cb5735cf73..25a4d2866985 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4734,6 +4734,9 @@
   "simulationsSettingSubHeader": {
     "message": "Estimate balance changes"
   },
+  "siweSignatureSimulationDetailInfo": {
+    "message": "This type of signature is not able to move your assets and is used for signing in."
+  },
   "skip": {
     "message": "Skip"
   },
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
index f3a008a2ad50..92c3393b3bc1 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx
@@ -73,4 +73,16 @@ describe('PersonalSignInfo', () => {
     const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
     expect(getByText('Signing in with')).toBeDefined();
   });
+
+  it('display simulation for SIWE request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: signatureRequestSIWE,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(getByText('Estimated changes')).toBeDefined();
+  });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 796506a8e71c..4a579faba4f8 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -33,9 +33,25 @@ const PersonalSignInfo: React.FC = () => {
   }
 
   const { from } = currentConfirmation.msgParams;
+  const siweSignatureRequest = isSIWESignatureRequest(currentConfirmation);
 
   return (
     <>
+      {siweSignatureRequest && (
+        <Box
+          backgroundColor={BackgroundColor.backgroundDefault}
+          borderRadius={BorderRadius.MD}
+          padding={2}
+          marginBottom={4}
+        >
+          <ConfirmInfoRow
+            label={t('simulationDetailsTitle')}
+            tooltip={t('simulationDetailsTitleTooltip')}
+          >
+            <ConfirmInfoRowText text={t('siweSignatureSimulationDetailInfo')} />
+          </ConfirmInfoRow>
+        </Box>
+      )}
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}
@@ -50,7 +66,7 @@ const PersonalSignInfo: React.FC = () => {
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </AlertRow>
-        {isSIWESignatureRequest(currentConfirmation) && (
+        {siweSignatureRequest && (
           <ConfirmInfoRow label={t('signingInWith')}>
             <ConfirmInfoRowAddress address={from} />
           </ConfirmInfoRow>
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 0a63dfe46b2b..5c1cc9ab5e4c 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-        const { siwe } = unconfirmedTransaction.msgParams;
-        if (siwe?.isSIWEMessage) {
-          setCurrentConfirmation(undefined);
-          return;
-        }
-      }
+      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+      //   const { siwe } = unconfirmedTransaction.msgParams;
+      //   if (siwe?.isSIWEMessage) {
+      //     setCurrentConfirmation(undefined);
+      //     return;
+      //   }
+      // }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From a662d247af03990ac1b7d49d44fb8caa8c706779 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 19:20:26 +0530
Subject: [PATCH 14/45] Update

---
 .../confirmations/hooks/useCurrentConfirmation.ts  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 5c1cc9ab5e4c..0a63dfe46b2b 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-      //   const { siwe } = unconfirmedTransaction.msgParams;
-      //   if (siwe?.isSIWEMessage) {
-      //     setCurrentConfirmation(undefined);
-      //     return;
-      //   }
-      // }
+      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+        const { siwe } = unconfirmedTransaction.msgParams;
+        if (siwe?.isSIWEMessage) {
+          setCurrentConfirmation(undefined);
+          return;
+        }
+      }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From c224117a1ddbe602fdd50677fd8db3ef1c460cb2 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 29 May 2024 19:23:12 +0530
Subject: [PATCH 15/45] Update

---
 .../confirm/info/typed-sign/permit-simulation.test.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
index 397ac5aa6f2a..ce7e5beb785d 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
@@ -7,7 +7,7 @@ import { permitSignatureMsg } from '../../../../../../../test/data/confirmations
 import PermitSimulation from './permit-simulation';
 
 describe('PermitSimulation', () => {
-  it('renders origin for typed sign data request', () => {
+  it('renders component correctly', () => {
     const state = {
       ...mockState,
       confirm: {

From 11dc68b5518852bcdec9d2ae8a64a80edf1e8edf Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 30 May 2024 15:50:09 +0530
Subject: [PATCH 16/45] update

---
 .../typed-sign/__snapshots__/permit-simulation.test.tsx.snap    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
index a092e4b8e490..2c0e79aa7254 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PermitSimulation renders origin for typed sign data request 1`] = `
+exports[`PermitSimulation renders component correctly 1`] = `
 <div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"

From a75ad4a40a81d8101a724eada72115cd3ae62fd1 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 30 May 2024 16:11:17 +0530
Subject: [PATCH 17/45] Update

---
 ui/pages/confirmations/utils/confirm.test.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/utils/confirm.test.ts b/ui/pages/confirmations/utils/confirm.test.ts
index 235a82d4e0ad..183b696e830c 100644
--- a/ui/pages/confirmations/utils/confirm.test.ts
+++ b/ui/pages/confirmations/utils/confirm.test.ts
@@ -1,7 +1,10 @@
 import { ApprovalRequest } from '@metamask/approval-controller';
 import { ApprovalType } from '@metamask/controller-utils';
 
-import { isSignatureApprovalRequest } from './confirm';
+import { isSignatureApprovalRequest, parseTypedDataMessage } from './confirm';
+
+const typedDataMsg =
+  '{"domain":{"chainId":97,"name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"contents":"Hello, Bob!","from":{"name":"Cow","wallets":["0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF","0x06195827297c7A80a443b6894d3BDB8824b43896"]},"to":[{"name":"Bob","wallets":["0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB","0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57","0xB0B0b0b0b0b0B000000000000000000000000000"]}]},"primaryType":"Mail","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Mail":[{"name":"from","type":"Person"},{"name":"to","type":"Person[]"},{"name":"contents","type":"string"}],"Person":[{"name":"name","type":"string"},{"name":"wallets","type":"address[]"}]}}';
 
 describe('confirm util', () => {
   describe('isSignatureApprovalRequest', () => {
@@ -22,4 +25,18 @@ describe('confirm util', () => {
       expect(result).toStrictEqual(false);
     });
   });
+
+  describe('parseTypedDataMessage', () => {
+    it('parses data passed correctly', () => {
+      const result = parseTypedDataMessage(typedDataMsg);
+      expect(result.domain.chainId).toBe(97);
+      expect(result.sanitizedMessage.type).toBe('Mail');
+      expect(result.primaryType).toBe('Mail');
+    });
+    it('throw error for invalid typedDataMessage', () => {
+      expect(() => {
+        parseTypedDataMessage('{}');
+      }).toThrow();
+    });
+  });
 });

From 1adebddd72cfb3a8d99e42775161aa0526f70335 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 31 May 2024 15:36:45 +0530
Subject: [PATCH 18/45] update

---
 .../components/confirm/info/personal-sign/personal-sign.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 4a579faba4f8..e9decf94e752 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -33,11 +33,11 @@ const PersonalSignInfo: React.FC = () => {
   }
 
   const { from } = currentConfirmation.msgParams;
-  const siweSignatureRequest = isSIWESignatureRequest(currentConfirmation);
+  const isSiweSigReq = isSIWESignatureRequest(currentConfirmation);
 
   return (
     <>
-      {siweSignatureRequest && (
+      {isSiweSigReq && (
         <Box
           backgroundColor={BackgroundColor.backgroundDefault}
           borderRadius={BorderRadius.MD}
@@ -66,7 +66,7 @@ const PersonalSignInfo: React.FC = () => {
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </AlertRow>
-        {siweSignatureRequest && (
+        {isSiweSigReq && (
           <ConfirmInfoRow label={t('signingInWith')}>
             <ConfirmInfoRowAddress address={from} />
           </ConfirmInfoRow>

From e905920d2d937a339082d3ee8d5e5c03d63e8cc3 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 31 May 2024 16:32:34 +0530
Subject: [PATCH 19/45] update

---
 .../confirm/info/typed-sign/typed-sign.tsx     |  3 ++-
 .../row/typed-sign-data/typedSignData.tsx      |  4 ++--
 ui/pages/confirmations/utils/confirm.test.ts   | 18 +++++++++++++++---
 ui/pages/confirmations/utils/confirm.ts        |  9 ++++++---
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 54690a1639bc..05a02413a0f7 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../../../../../helpers/constants/design-system';
 import { EIP712_PRIMARY_TYPE_PERMIT } from '../../../../constants';
 import { SignatureRequestType } from '../../../../types/confirm';
+import { parseTypedDataMessage } from '../../../../utils';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
 
 const TypedSignInfo: React.FC = () => {
@@ -33,7 +34,7 @@ const TypedSignInfo: React.FC = () => {
     domain,
     domain: { verifyingContract },
     primaryType,
-  } = JSON.parse(currentConfirmation.msgParams.data as string);
+  } = parseTypedDataMessage(currentConfirmation.msgParams.data as string);
 
   return (
     <>
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
index d60d056a71dc..3b3d1db72ca4 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../../../../../components/app/confirm/info/row';
 
 import { DataTree } from '../dataTree';
-import { parseTypedDataMessage } from '../../../../utils';
+import { parseSanitizeTypedDataMessage } from '../../../../utils';
 
 export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => {
   const t = useI18nContext();
@@ -18,7 +18,7 @@ export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => {
     return null;
   }
 
-  const { sanitizedMessage, primaryType } = parseTypedDataMessage(data);
+  const { sanitizedMessage, primaryType } = parseSanitizeTypedDataMessage(data);
 
   return (
     <Box width={BlockSize.Full}>
diff --git a/ui/pages/confirmations/utils/confirm.test.ts b/ui/pages/confirmations/utils/confirm.test.ts
index b1a7324792b3..e358a6076408 100644
--- a/ui/pages/confirmations/utils/confirm.test.ts
+++ b/ui/pages/confirmations/utils/confirm.test.ts
@@ -5,6 +5,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 import {
   isSignatureApprovalRequest,
   isSignatureTransactionType,
+  parseSanitizeTypedDataMessage,
   parseTypedDataMessage,
 } from './confirm';
 
@@ -33,14 +34,25 @@ describe('confirm util', () => {
 
   describe('parseTypedDataMessage', () => {
     it('parses data passed correctly', () => {
-      const result = parseTypedDataMessage(typedDataMsg);
-      expect(result.domain.chainId).toBe(97);
+      const result = parseTypedDataMessage('{"test": "dummy"}');
+      expect(result.test).toBe('dummy');
+    });
+    it('throw error for invalid typedDataMessage', () => {
+      expect(() => {
+        parseSanitizeTypedDataMessage('');
+      }).toThrow();
+    });
+  });
+
+  describe('parseSanitizeTypedDataMessage', () => {
+    it('parses and sanitizes data passed correctly', () => {
+      const result = parseSanitizeTypedDataMessage(typedDataMsg);
       expect(result.sanitizedMessage.type).toBe('Mail');
       expect(result.primaryType).toBe('Mail');
     });
     it('throw error for invalid typedDataMessage', () => {
       expect(() => {
-        parseTypedDataMessage('{}');
+        parseSanitizeTypedDataMessage('{}');
       }).toThrow();
     });
   });
diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts
index bb5c0f192f39..6eddab209e67 100644
--- a/ui/pages/confirmations/utils/confirm.ts
+++ b/ui/pages/confirmations/utils/confirm.ts
@@ -36,10 +36,13 @@ export const isSignatureTransactionType = (request?: Record<string, unknown>) =>
   request &&
   SIGNATURE_TRANSACTION_TYPES.includes(request.type as TransactionType);
 
-export const parseTypedDataMessage = (dataToParse: string) => {
-  const { message, domain = {}, primaryType, types } = JSON.parse(dataToParse);
+export const parseTypedDataMessage = (dataToParse: string) =>
+  JSON.parse(dataToParse);
+
+export const parseSanitizeTypedDataMessage = (dataToParse: string) => {
+  const { message, primaryType, types } = parseTypedDataMessage(dataToParse);
   const sanitizedMessage = sanitizeMessage(message, primaryType, types);
-  return { domain, sanitizedMessage, primaryType };
+  return { sanitizedMessage, primaryType };
 };
 
 export const isSIWESignatureRequest = (request: SignatureRequestType) =>

From 1f6feb1e3a856804d6a61ad56421e8adbef06cb0 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 31 May 2024 17:38:32 +0530
Subject: [PATCH 20/45] update

---
 .../__snapshots__/typed-sign.test.tsx.snap    | 468 +++++++++---------
 .../confirm/info/typed-sign/typed-sign.tsx    |  29 +-
 2 files changed, 265 insertions(+), 232 deletions(-)

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 cf3c57f86829..1d14c6815c89 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
@@ -5,114 +5,122 @@ exports[`TypedSignInfo does not render if required data is not present in the tr
 exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Request from
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-1"
-            class=""
-            data-original-title="This is the site asking for your signature."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
           >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
+            Request from
+          </p>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-1"
+              class=""
+              data-original-title="This is the site asking for your signature."
+              data-tooltipped=""
+              style="display: flex;"
+              tabindex="0"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <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"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
         >
-          metamask.github.io
-        </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          >
+            metamask.github.io
+          </p>
+        </div>
       </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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Interacting with
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-      >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Interacting with
+          </p>
+        </div>
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
           >
             <div
-              class="mm-avatar-account__jazzicon"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                class="mm-avatar-account__jazzicon"
               >
-                <svg
-                  height="16"
-                  width="16"
-                  x="0"
-                  y="0"
+                <div
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                 >
-                  <rect
-                    fill="#FB1891"
+                  <svg
                     height="16"
-                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  />
-                  <rect
-                    fill="#F90901"
-                    height="16"
-                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F26A02"
-                    height="16"
-                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
+                  >
+                    <rect
+                      fill="#FB1891"
+                      height="16"
+                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F90901"
+                      height="16"
+                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F26A02"
+                      height="16"
+                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+              data-testid="confirm-info-row-display-name"
+            >
+              0xCcCCc...ccccC
+            </p>
           </div>
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-            data-testid="confirm-info-row-display-name"
-          >
-            0xCcCCc...ccccC
-          </p>
         </div>
       </div>
     </div>
@@ -428,114 +436,122 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Request from
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-2"
-            class=""
-            data-original-title="This is the site asking for your signature."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
           >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
+            Request from
+          </p>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-2"
+              class=""
+              data-original-title="This is the site asking for your signature."
+              data-tooltipped=""
+              style="display: flex;"
+              tabindex="0"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <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"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
         >
-          metamask.github.io
-        </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          >
+            metamask.github.io
+          </p>
+        </div>
       </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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Interacting with
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-      >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Interacting with
+          </p>
+        </div>
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
           >
             <div
-              class="mm-avatar-account__jazzicon"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                class="mm-avatar-account__jazzicon"
               >
-                <svg
-                  height="16"
-                  width="16"
-                  x="0"
-                  y="0"
+                <div
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                 >
-                  <rect
-                    fill="#FB1891"
+                  <svg
                     height="16"
-                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  />
-                  <rect
-                    fill="#F90901"
-                    height="16"
-                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F26A02"
-                    height="16"
-                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
+                  >
+                    <rect
+                      fill="#FB1891"
+                      height="16"
+                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F90901"
+                      height="16"
+                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F26A02"
+                      height="16"
+                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+              data-testid="confirm-info-row-display-name"
+            >
+              0xCcCCc...ccccC
+            </p>
           </div>
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-            data-testid="confirm-info-row-display-name"
-          >
-            0xCcCCc...ccccC
-          </p>
         </div>
       </div>
     </div>
@@ -851,114 +867,122 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Request from
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-3"
-            class=""
-            data-original-title="This is the site asking for your signature."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
           >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
+            Request from
+          </p>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-3"
+              class=""
+              data-original-title="This is the site asking for your signature."
+              data-tooltipped=""
+              style="display: flex;"
+              tabindex="0"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <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"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
         >
-          metamask.github.io
-        </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          >
+            metamask.github.io
+          </p>
+        </div>
       </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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Interacting with
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-      >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Interacting with
+          </p>
+        </div>
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
           >
             <div
-              class="mm-avatar-account__jazzicon"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                class="mm-avatar-account__jazzicon"
               >
-                <svg
-                  height="16"
-                  width="16"
-                  x="0"
-                  y="0"
+                <div
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                 >
-                  <rect
-                    fill="#FB1891"
-                    height="16"
-                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F90901"
-                    height="16"
-                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F26A02"
+                  <svg
                     height="16"
-                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  />
-                </svg>
+                  >
+                    <rect
+                      fill="#FB1891"
+                      height="16"
+                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F90901"
+                      height="16"
+                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F26A02"
+                      height="16"
+                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+              data-testid="confirm-info-row-display-name"
+            >
+              0xCcCCc...ccccC
+            </p>
           </div>
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-            data-testid="confirm-info-row-display-name"
-          >
-            0xCcCCc...ccccC
-          </p>
         </div>
       </div>
     </div>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 05a02413a0f7..adf66ae16f9d 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -41,24 +41,33 @@ const TypedSignInfo: React.FC = () => {
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}
-        padding={2}
         marginBottom={4}
+        padding={0}
       >
         {primaryType === EIP712_PRIMARY_TYPE_PERMIT && (
           <>
-            <ConfirmInfoRow label={t('approvingTo')}>
-              <ConfirmInfoRowAddress address={verifyingContract} />
-            </ConfirmInfoRow>
+            <Box padding={2}>
+              <ConfirmInfoRow label={t('approvingTo')}>
+                <ConfirmInfoRowAddress address={verifyingContract} />
+              </ConfirmInfoRow>
+            </Box>
             <ConfirmInfoRowDivider />
           </>
         )}
-        <ConfirmInfoRow label={t('requestFrom')} tooltip={t('requestFromInfo')}>
-          <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
-        </ConfirmInfoRow>
-        {isValidAddress(domain.verifyingContract) && (
-          <ConfirmInfoRow label={t('interactingWith')}>
-            <ConfirmInfoRowAddress address={domain.verifyingContract} />
+        <Box padding={2}>
+          <ConfirmInfoRow
+            label={t('requestFrom')}
+            tooltip={t('requestFromInfo')}
+          >
+            <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
           </ConfirmInfoRow>
+        </Box>
+        {isValidAddress(domain.verifyingContract) && (
+          <Box padding={2}>
+            <ConfirmInfoRow label={t('interactingWith')}>
+              <ConfirmInfoRowAddress address={domain.verifyingContract} />
+            </ConfirmInfoRow>
+          </Box>
         )}
       </Box>
       <Box

From da9f6287af6c141107f86a799d7fa5a86caf93d3 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sat, 1 Jun 2024 19:23:26 +0530
Subject: [PATCH 21/45] Changes in message section for siwe signatures

---
 .../siwe-sign/siwe-sign.stories.tsx           | 32 +++++++
 .../siwe-sign/siwe-sign.test.tsx              | 88 +++++++++++++++++++
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 64 ++++++++++++++
 3 files changed, 184 insertions(+)
 create mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
 create mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
 create mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
new file mode 100644
index 000000000000..e01f1c506cbb
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { unapprovedPersonalSignMsg } from '../../../../../../../test/data/confirmations/personal_sign';
+
+import mockState from '../../../../../../../test/data/mock-state.json';
+import configureStore from '../../../../../../store/store';
+
+import PersonalSignInfo from './siwe-sign';
+
+const store = configureStore({
+  metamask: {
+    ...mockState.metamask,
+  },
+  confirm: {
+    currentConfirmation: unapprovedPersonalSignMsg,
+  },
+});
+
+const Story = {
+  title: 'Components/App/Confirm/info/PersonalSignInfo',
+  component: PersonalSignInfo,
+  decorators: [
+    (story: () => any) => <Provider store={store}>{story()}</Provider>,
+  ],
+};
+
+export default Story;
+
+export const DefaultStory = () => <PersonalSignInfo />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
new file mode 100644
index 000000000000..9ff81ff6edb7
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import mockState from '../../../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
+import {
+  signatureRequestSIWE,
+  unapprovedPersonalSignMsg,
+} from '../../../../../../../test/data/confirmations/personal_sign';
+import PersonalSignInfo from './siwe-sign';
+
+describe('PersonalSignInfo', () => {
+  it('renders correctly for personal sign request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: unapprovedPersonalSignMsg,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('does not render if required data is not present in the transaction', () => {
+    const state = {
+      confirm: {
+        currentConfirmation: {
+          id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
+          status: 'unapproved',
+          time: new Date().getTime(),
+          type: 'json_request',
+        },
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(container).toMatchInlineSnapshot(`<div />`);
+  });
+
+  it('handle reverse string properly', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: {
+          id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
+          status: 'unapproved',
+          time: new Date().getTime(),
+          type: 'personal_sign',
+          securityProviderResponse: null,
+          msgParams: {
+            from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
+            data: '0x5369676e20696e746f20e280ae204556494c',
+            origin: 'https://metamask.github.io',
+            siwe: { isSIWEMessage: false, parsedMessage: null },
+          },
+        },
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('display signing in from for SIWE request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: signatureRequestSIWE,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(getByText('Signing in with')).toBeDefined();
+  });
+
+  it('display simulation for SIWE request', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: signatureRequestSIWE,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
+    expect(getByText('Estimated changes')).toBeDefined();
+  });
+});
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
new file mode 100644
index 000000000000..bbaaf74d0011
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { toHex } from '@metamask/controller-utils';
+import { DateTime } from 'luxon';
+
+import { formatDate } from '../../../../../../../helpers/utils/util';
+import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { currentConfirmationSelector } from '../../../../../../../selectors';
+import { SignatureRequestType } from '../../../../../types/confirm';
+import {
+  ConfirmInfoRow,
+  ConfirmInfoRowAddress,
+  ConfirmInfoRowText,
+} from '../../../../../../../components/app/confirm/info/row';
+import { NETWORK_TO_NAME_MAP } from '../../../../../../../../shared/constants/network';
+
+const SIWESignInfo: React.FC = () => {
+  const t = useI18nContext();
+  const currentConfirmation = useSelector(
+    currentConfirmationSelector,
+  ) as SignatureRequestType;
+
+  if (!currentConfirmation.msgParams?.siwe?.parsedMessage) {
+    return null;
+  }
+
+  const siweMessage = currentConfirmation.msgParams.siwe?.parsedMessage;
+  const chainId = toHex(siweMessage.chainId);
+
+  return (
+    <>
+      <ConfirmInfoRow label={t('siweOriginalMessage')}>
+        <ConfirmInfoRowText text={siweMessage.statement} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweURI')}>
+        <ConfirmInfoRowText text={siweMessage.domain} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('network')}>
+        <ConfirmInfoRowText
+          text={
+            (NETWORK_TO_NAME_MAP as Record<string, string>)[chainId] ?? chainId
+          }
+        />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweAccount')}>
+        <ConfirmInfoRowAddress address={siweMessage.address} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweVersion')}>
+        <ConfirmInfoRowText text={siweMessage.version} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweChainID')}>
+        <ConfirmInfoRowText text={`${siweMessage.chainId}`} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweNonce')}>
+        <ConfirmInfoRowText text={siweMessage.nonce} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={t('siweIssued')}>
+        <ConfirmInfoRowText text={formatDate(new Date(siweMessage.issuedAt).getTime())} />
+      </ConfirmInfoRow>
+    </>
+  );
+};
+
+export default SIWESignInfo;

From 5406eb2d4ab54807a537bdaab34969733b45ccdc Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sat, 1 Jun 2024 19:24:23 +0530
Subject: [PATCH 22/45] Update

---
 .../components/confirm/info/typed-sign/permit-simulation.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
index ca3e66a3f37e..6565c9c5d662 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
@@ -44,9 +44,8 @@ const PermitSimulation: React.FC = () => {
       <ConfirmInfoRow label={t('approve')}>
         <Box display={Display.Flex}>
           <Text
-            backgroundColor={BackgroundColor.errorMuted}
+            backgroundColor={BackgroundColor.backgroundAlternative}
             borderRadius={BorderRadius.XL}
-            color={TextColor.errorDefault}
             paddingInline={2}
             textAlign={TextAlign.Center}
           >

From 9fbe0ae9e4da2da1760d1c44f964e5a4d798097b Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 16:34:24 +0530
Subject: [PATCH 23/45] Changes in message section of SIWE signature pages

---
 app/_locales/en/messages.json                 | 24 ++++++
 package.json                                  |  1 +
 .../info/personal-sign/personal-sign.tsx      | 27 ++++---
 .../info/personal-sign/siwe-sign/index.ts     |  1 +
 .../siwe-sign/siwe-sign.stories.tsx           | 17 ++--
 .../siwe-sign/siwe-sign.test.tsx              | 81 ++-----------------
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 11 ++-
 ui/pages/confirmations/types/confirm.ts       | 10 +++
 8 files changed, 74 insertions(+), 98 deletions(-)
 create mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.ts

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 28e67332d5d4..d52627816b52 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4761,9 +4761,33 @@
   "simulationsSettingSubHeader": {
     "message": "Estimate balance changes"
   },
+  "siweAccount": {
+    "message": "Account"
+  },
+  "siweChainID": {
+    "message": "Chain ID"
+  },
+  "siweIssued": {
+    "message": "Issued"
+  },
+  "siweNetwork": {
+    "message": "Network"
+  },
+  "siweNonce": {
+    "message": "Nonce"
+  },
+  "siweOriginalMessage": {
+    "message": "Original Message"
+  },
   "siweSignatureSimulationDetailInfo": {
     "message": "This type of signature is not able to move your assets and is used for signing in."
   },
+  "siweURI": {
+    "message": "URL"
+  },
+  "siweVersion": {
+    "message": "Version"
+  },
   "skip": {
     "message": "Skip"
   },
diff --git a/package.json b/package.json
index 4ef2ef3b288f..d65b74e79a09 100644
--- a/package.json
+++ b/package.json
@@ -488,6 +488,7 @@
     "@types/gulp-sourcemaps": "^0.0.35",
     "@types/he": "^1",
     "@types/jest": "^29.5.12",
+    "@types/luxon": "^3.4.2",
     "@types/mocha": "^10.0.3",
     "@types/node": "^20",
     "@types/pify": "^5.0.1",
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index e9decf94e752..27cdedd73f42 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -21,6 +21,7 @@ import {
 import { SignatureRequestType } from '../../../../types/confirm';
 import { isSIWESignatureRequest } from '../../../../utils';
 import { AlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { SIWESignInfo } from './siwe-sign';
 
 const PersonalSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -78,17 +79,21 @@ const PersonalSignInfo: React.FC = () => {
         padding={2}
         marginBottom={4}
       >
-        <AlertRow
-          alertKey="message"
-          ownerId={currentConfirmation.id}
-          label={t('message')}
-        >
-          <ConfirmInfoRowText
-            text={sanitizeString(
-              hexToText(currentConfirmation.msgParams?.data),
-            )}
-          />
-        </AlertRow>
+        {isSiweSigReq ? (
+          <SIWESignInfo />
+        ) : (
+          <AlertRow
+            alertKey="message"
+            ownerId={currentConfirmation.id}
+            label={t('message')}
+          >
+            <ConfirmInfoRowText
+              text={sanitizeString(
+                hexToText(currentConfirmation.msgParams?.data),
+              )}
+            />
+          </AlertRow>
+        )}
       </Box>
     </>
   );
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.ts b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.ts
new file mode 100644
index 000000000000..e62d38d2b793
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.ts
@@ -0,0 +1 @@
+export { default as SIWESignInfo } from './siwe-sign';
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
index e01f1c506cbb..0c32a7db5165 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
@@ -1,25 +1,24 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import { unapprovedPersonalSignMsg } from '../../../../../../../test/data/confirmations/personal_sign';
+import { signatureRequestSIWE } from '../../../../../../../../test/data/confirmations/personal_sign';
+import mockState from '../../../../../../../../test/data/mock-state.json';
+import configureStore from '../../../../../../../store/store';
 
-import mockState from '../../../../../../../test/data/mock-state.json';
-import configureStore from '../../../../../../store/store';
-
-import PersonalSignInfo from './siwe-sign';
+import SIWESignInfo from './siwe-sign';
 
 const store = configureStore({
   metamask: {
     ...mockState.metamask,
   },
   confirm: {
-    currentConfirmation: unapprovedPersonalSignMsg,
+    currentConfirmation: signatureRequestSIWE,
   },
 });
 
 const Story = {
-  title: 'Components/App/Confirm/info/PersonalSignInfo',
-  component: PersonalSignInfo,
+  title: 'Components/App/Confirm/info/SIWESignInfo',
+  component: SIWESignInfo,
   decorators: [
     (story: () => any) => <Provider store={store}>{story()}</Provider>,
   ],
@@ -27,6 +26,6 @@ const Story = {
 
 export default Story;
 
-export const DefaultStory = () => <PersonalSignInfo />;
+export const DefaultStory = () => <SIWESignInfo />;
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
index 9ff81ff6edb7..720286db1a85 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
@@ -1,68 +1,13 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 
-import mockState from '../../../../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
-import {
-  signatureRequestSIWE,
-  unapprovedPersonalSignMsg,
-} from '../../../../../../../test/data/confirmations/personal_sign';
-import PersonalSignInfo from './siwe-sign';
+import mockState from '../../../../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
+import { signatureRequestSIWE } from '../../../../../../../../test/data/confirmations/personal_sign';
+import SIWESignInfo from './siwe-sign';
 
-describe('PersonalSignInfo', () => {
+describe('SIWESignInfo', () => {
   it('renders correctly for personal sign request', () => {
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: unapprovedPersonalSignMsg,
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('does not render if required data is not present in the transaction', () => {
-    const state = {
-      confirm: {
-        currentConfirmation: {
-          id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
-          status: 'unapproved',
-          time: new Date().getTime(),
-          type: 'json_request',
-        },
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
-    expect(container).toMatchInlineSnapshot(`<div />`);
-  });
-
-  it('handle reverse string properly', () => {
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: {
-          id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
-          status: 'unapproved',
-          time: new Date().getTime(),
-          type: 'personal_sign',
-          securityProviderResponse: null,
-          msgParams: {
-            from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
-            data: '0x5369676e20696e746f20e280ae204556494c',
-            origin: 'https://metamask.github.io',
-            siwe: { isSIWEMessage: false, parsedMessage: null },
-          },
-        },
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(<PersonalSignInfo />, mockStore);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('display signing in from for SIWE request', () => {
     const state = {
       ...mockState,
       confirm: {
@@ -70,19 +15,7 @@ describe('PersonalSignInfo', () => {
       },
     };
     const mockStore = configureMockStore([])(state);
-    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
-    expect(getByText('Signing in with')).toBeDefined();
-  });
-
-  it('display simulation for SIWE request', () => {
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: signatureRequestSIWE,
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { getByText } = renderWithProvider(<PersonalSignInfo />, mockStore);
-    expect(getByText('Estimated changes')).toBeDefined();
+    const { container } = renderWithProvider(<SIWESignInfo />, mockStore);
+    expect(container).toMatchSnapshot();
   });
 });
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 bbaaf74d0011..0b2f8d502214 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
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { toHex } from '@metamask/controller-utils';
 import { DateTime } from 'luxon';
 
-import { formatDate } from '../../../../../../../helpers/utils/util';
+import { NETWORK_TO_NAME_MAP } from '../../../../../../../../shared/constants/network';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../../selectors';
 import { SignatureRequestType } from '../../../../../types/confirm';
@@ -12,7 +12,6 @@ import {
   ConfirmInfoRowAddress,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
-import { NETWORK_TO_NAME_MAP } from '../../../../../../../../shared/constants/network';
 
 const SIWESignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -35,7 +34,7 @@ const SIWESignInfo: React.FC = () => {
       <ConfirmInfoRow label={t('siweURI')}>
         <ConfirmInfoRowText text={siweMessage.domain} />
       </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('network')}>
+      <ConfirmInfoRow label={t('siweNetwork')}>
         <ConfirmInfoRowText
           text={
             (NETWORK_TO_NAME_MAP as Record<string, string>)[chainId] ?? chainId
@@ -55,7 +54,11 @@ const SIWESignInfo: React.FC = () => {
         <ConfirmInfoRowText text={siweMessage.nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
-        <ConfirmInfoRowText text={formatDate(new Date(siweMessage.issuedAt).getTime())} />
+        <ConfirmInfoRowText
+          text={DateTime.fromISO(siweMessage.issuedAt).toLocaleString(
+            DateTime.DATETIME_MED,
+          )}
+        />
       </ConfirmInfoRow>
     </>
   );
diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts
index 70e173b03deb..2d04397fbe0e 100644
--- a/ui/pages/confirmations/types/confirm.ts
+++ b/ui/pages/confirmations/types/confirm.ts
@@ -28,6 +28,16 @@ export type SignatureRequestType = {
     version?: string;
     siwe?: {
       isSIWEMessage: boolean;
+      parsedMessage: {
+        domain: string;
+        address: string;
+        statement: string;
+        uri: string;
+        version: string;
+        chainId: number;
+        nonce: string;
+        issuedAt: string;
+      };
     };
   };
   type: TransactionType;

From 11b17080c7c1a0b7d52db94de22449c0ab83d21f Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 16:36:59 +0530
Subject: [PATCH 24/45] Update

---
 yarn.lock | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index aa89270f079f..7aa551e3323e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10074,6 +10074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/luxon@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@types/luxon@npm:3.4.2"
+  checksum: 10/fd89566e3026559f2bc4ddcc1e70a2c16161905ed50be9473ec0cfbbbe919165041408c4f6e06c4bcf095445535052e2c099087c76b1b38e368127e618fc968d
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -25186,6 +25193,7 @@ __metadata:
     "@types/gulp-sourcemaps": "npm:^0.0.35"
     "@types/he": "npm:^1"
     "@types/jest": "npm:^29.5.12"
+    "@types/luxon": "npm:^3.4.2"
     "@types/mocha": "npm:^10.0.3"
     "@types/node": "npm:^20"
     "@types/pify": "npm:^5.0.1"

From 7de4c23f2fd90c1c4d13305c0b31fd29f3a4ddec Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 21:50:34 +0530
Subject: [PATCH 25/45] Update

---
 .../typed-sign/__snapshots__/permit-simulation.test.tsx.snap    | 2 +-
 .../components/confirm/info/typed-sign/permit-simulation.tsx    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
index 2c0e79aa7254..0c200bbcbea4 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
         class="mm-box mm-box--display-flex"
       >
         <p
-          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-error-default mm-box--background-color-error-muted mm-box--rounded-xl"
+          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
         >
           3000
         </p>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
index 6565c9c5d662..d9c76f50f385 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
@@ -13,7 +13,6 @@ import {
   BorderRadius,
   Display,
   TextAlign,
-  TextColor,
 } from '../../../../../../helpers/constants/design-system';
 import { SignatureRequestType } from '../../../../types/confirm';
 

From 888b48a672155a9bcdf30972af46710ee61abc12 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 22:03:39 +0530
Subject: [PATCH 26/45] Update

---
 .../info/__snapshots__/info.test.tsx.snap     | 156 +++++++++---------
 .../components/confirm/utils.test.ts          |   6 +-
 ui/pages/confirmations/types/confirm.ts       |   2 +-
 3 files changed, 86 insertions(+), 78 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
index d9f473782e78..086498a0f4d8 100644
--- a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -78,114 +78,122 @@ exports[`Info renders info section for personal sign request 1`] = `
 exports[`Info renders info section for typed sign request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Request from
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-2"
-            class=""
-            data-original-title="This is the site asking for your signature."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
           >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
+            Request from
+          </p>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-2"
+              class=""
+              data-original-title="This is the site asking for your signature."
+              data-tooltipped=""
+              style="display: flex;"
+              tabindex="0"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <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"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
         >
-          metamask.github.io
-        </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          >
+            metamask.github.io
+          </p>
+        </div>
       </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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
+      class="mm-box mm-box--padding-2"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        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"
+        style="overflow-wrap: anywhere; min-height: 24px;"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
         >
-          Interacting with
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-      >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Interacting with
+          </p>
+        </div>
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
           >
             <div
-              class="mm-avatar-account__jazzicon"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                class="mm-avatar-account__jazzicon"
               >
-                <svg
-                  height="16"
-                  width="16"
-                  x="0"
-                  y="0"
+                <div
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                 >
-                  <rect
-                    fill="#FB1891"
-                    height="16"
-                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F90901"
-                    height="16"
-                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F26A02"
+                  <svg
                     height="16"
-                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  />
-                </svg>
+                  >
+                    <rect
+                      fill="#FB1891"
+                      height="16"
+                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F90901"
+                      height="16"
+                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F26A02"
+                      height="16"
+                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                      width="16"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+              data-testid="confirm-info-row-display-name"
+            >
+              0xCcCCc...ccccC
+            </p>
           </div>
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-            data-testid="confirm-info-row-display-name"
-          >
-            0xCcCCc...ccccC
-          </p>
         </div>
       </div>
     </div>
diff --git a/ui/pages/confirmations/components/confirm/utils.test.ts b/ui/pages/confirmations/components/confirm/utils.test.ts
index 2250d62fa62c..87e6307de7be 100644
--- a/ui/pages/confirmations/components/confirm/utils.test.ts
+++ b/ui/pages/confirmations/components/confirm/utils.test.ts
@@ -20,9 +20,9 @@ describe('getConfirmationSender()', () => {
   });
 
   test("returns the sender address from a transaction if it's passed", () => {
-    const testCurrentConfirmation =
-      unapprovedPersonalSignMsg as SignatureRequestType;
-    const { from } = getConfirmationSender(testCurrentConfirmation);
+    const { from } = getConfirmationSender(
+      unapprovedPersonalSignMsg as SignatureRequestType,
+    );
 
     expect(from).toEqual(PERSONAL_SIGN_SENDER_ADDRESS);
   });
diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts
index 2d04397fbe0e..4c580e3ce7b9 100644
--- a/ui/pages/confirmations/types/confirm.ts
+++ b/ui/pages/confirmations/types/confirm.ts
@@ -28,7 +28,7 @@ export type SignatureRequestType = {
     version?: string;
     siwe?: {
       isSIWEMessage: boolean;
-      parsedMessage: {
+      parsedMessage: null | {
         domain: string;
         address: string;
         statement: string;

From 63d8562a5a7c200c67d8441272bff0778ba4d7f7 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 22:32:05 +0530
Subject: [PATCH 27/45] Update

---
 .../__snapshots__/confirm.test.tsx.snap       | 156 +++++++++---------
 1 file changed, 82 insertions(+), 74 deletions(-)

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 4d44eef44ed2..f236aec1819c 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -377,114 +377,122 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
             Only confirm this message if you approve the content and trust the requesting site.
           </p>
           <div
-            class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+            class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
           >
             <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"
-              style="overflow-wrap: anywhere; min-height: 24px;"
+              class="mm-box mm-box--padding-2"
             >
               <div
-                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                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"
+                style="overflow-wrap: anywhere; min-height: 24px;"
               >
-                <p
-                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
                 >
-                  Request from
-                </p>
-                <div>
-                  <div
-                    aria-describedby="tippy-tooltip-5"
-                    class=""
-                    data-original-title="This is the site asking for your signature."
-                    data-tooltipped=""
-                    style="display: flex;"
-                    tabindex="0"
+                  <p
+                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                   >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                      style="mask-image: url('./images/icons/question.svg');"
-                    />
+                    Request from
+                  </p>
+                  <div>
+                    <div
+                      aria-describedby="tippy-tooltip-5"
+                      class=""
+                      data-original-title="This is the site asking for your signature."
+                      data-tooltipped=""
+                      style="display: flex;"
+                      tabindex="0"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                        style="mask-image: url('./images/icons/question.svg');"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-              <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"
+                <div
+                  class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
                 >
-                  metamask.github.io
-                </p>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                  >
+                    metamask.github.io
+                  </p>
+                </div>
               </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"
-              style="overflow-wrap: anywhere; min-height: 24px;"
+              class="mm-box mm-box--padding-2"
             >
               <div
-                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                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"
+                style="overflow-wrap: anywhere; min-height: 24px;"
               >
-                <p
-                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
                 >
-                  Interacting with
-                </p>
-              </div>
-              <div
-                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-              >
+                  <p
+                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                  >
+                    Interacting with
+                  </p>
+                </div>
                 <div
                   class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
                 >
                   <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
                   >
                     <div
-                      class="mm-avatar-account__jazzicon"
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                     >
                       <div
-                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                        class="mm-avatar-account__jazzicon"
                       >
-                        <svg
-                          height="16"
-                          width="16"
-                          x="0"
-                          y="0"
+                        <div
+                          style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                         >
-                          <rect
-                            fill="#FB1891"
-                            height="16"
-                            transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                            width="16"
-                            x="0"
-                            y="0"
-                          />
-                          <rect
-                            fill="#F90901"
-                            height="16"
-                            transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                            width="16"
-                            x="0"
-                            y="0"
-                          />
-                          <rect
-                            fill="#F26A02"
+                          <svg
                             height="16"
-                            transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
                             width="16"
                             x="0"
                             y="0"
-                          />
-                        </svg>
+                          >
+                            <rect
+                              fill="#FB1891"
+                              height="16"
+                              transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
+                              width="16"
+                              x="0"
+                              y="0"
+                            />
+                            <rect
+                              fill="#F90901"
+                              height="16"
+                              transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                              width="16"
+                              x="0"
+                              y="0"
+                            />
+                            <rect
+                              fill="#F26A02"
+                              height="16"
+                              transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                              width="16"
+                              x="0"
+                              y="0"
+                            />
+                          </svg>
+                        </div>
                       </div>
                     </div>
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+                      data-testid="confirm-info-row-display-name"
+                    >
+                      0xCcCCc...ccccC
+                    </p>
                   </div>
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-                    data-testid="confirm-info-row-display-name"
-                  >
-                    0xCcCCc...ccccC
-                  </p>
                 </div>
               </div>
             </div>

From ba8714dbd451bc59e32a310b8ee2d9a0ce8c6040 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 22:55:21 +0530
Subject: [PATCH 28/45] Update

---
 .../__snapshots__/siwe-sign.test.tsx.snap     | 245 ++++++++++++++++++
 1 file changed, 245 insertions(+)
 create mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
new file mode 100644
index 000000000000..4c5350891298
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -0,0 +1,245 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
+<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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Original Message
+      </p>
+    </div>
+    <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;"
+      >
+        I accept the MetaMask Terms of Service: https://community.metamask.io/tos
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        URL
+      </p>
+    </div>
+    <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;"
+      >
+        metamask.github.io
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Network
+      </p>
+    </div>
+    <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;"
+      >
+        Ethereum Mainnet
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Account
+      </p>
+    </div>
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <div
+            class="mm-avatar-account__jazzicon"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 59);"
+            >
+              <svg
+                height="16"
+                width="16"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#017B8E"
+                  height="16"
+                  transform="translate(0.39972303467835485 -0.4108005578484912) rotate(317.9 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#F2B602"
+                  height="16"
+                  transform="translate(-3.7466980184561267 5.704967714142398) rotate(134.1 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#FA8E00"
+                  height="16"
+                  transform="translate(-12.856136345377399 -5.7794405216344416) rotate(364.0 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+          data-testid="confirm-info-row-display-name"
+        >
+          0x935e7...05477
+        </p>
+      </div>
+    </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Version
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Chain ID
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Nonce
+      </p>
+    </div>
+    <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;"
+      >
+        32891757
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Issued
+      </p>
+    </div>
+    <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;"
+      >
+        Sep 30, 2021, 9:55 PM
+      </p>
+    </div>
+  </div>
+</div>
+`;

From f7ddb084e37627c6f0e121ac934166b0f3675de7 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 09:50:12 +0530
Subject: [PATCH 29/45] Update

---
 .../confirm/info/personal-sign/siwe-sign/siwe-sign.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 0b2f8d502214..32fcacc6e213 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
@@ -55,7 +55,7 @@ const SIWESignInfo: React.FC = () => {
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowText
-          text={DateTime.fromISO(siweMessage.issuedAt).toLocaleString(
+          text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toLocaleString(
             DateTime.DATETIME_MED,
           )}
         />

From 67e811ba66e93e7c8e5814136a644dc39582cfff Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 14:49:41 +0530
Subject: [PATCH 30/45] update

---
 .../__snapshots__/siwe-sign.test.tsx.snap          |  2 +-
 .../info/personal-sign/siwe-sign/siwe-sign.tsx     |  4 ++--
 .../confirmations/hooks/useCurrentConfirmation.ts  | 14 +++++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 4c5350891298..5def9fd3bf5a 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        Sep 30, 2021, 9:55 PM
+        30/09/2021 55:24
       </p>
     </div>
   </div>
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 32fcacc6e213..a24f92990709 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
@@ -55,8 +55,8 @@ const SIWESignInfo: React.FC = () => {
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowText
-          text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toLocaleString(
-            DateTime.DATETIME_MED,
+          text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toFormat(
+            'dd/MM/yyyy mm:ss',
           )}
         />
       </ConfirmInfoRow>
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 0a63dfe46b2b..5c1cc9ab5e4c 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-        const { siwe } = unconfirmedTransaction.msgParams;
-        if (siwe?.isSIWEMessage) {
-          setCurrentConfirmation(undefined);
-          return;
-        }
-      }
+      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+      //   const { siwe } = unconfirmedTransaction.msgParams;
+      //   if (siwe?.isSIWEMessage) {
+      //     setCurrentConfirmation(undefined);
+      //     return;
+      //   }
+      // }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 8f2d4d2df62377534902ab2afe33039420cc7d94 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 15:05:40 +0530
Subject: [PATCH 31/45] update

---
 .../siwe-sign/__snapshots__/siwe-sign.test.tsx.snap             | 2 +-
 .../confirm/info/personal-sign/siwe-sign/siwe-sign.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 5def9fd3bf5a..b7c96ac412c4 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        30/09/2021 55:24
+        30 Sep 2021, 55:24
       </p>
     </div>
   </div>
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 a24f92990709..dc3daf1d9be5 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
@@ -56,7 +56,7 @@ const SIWESignInfo: React.FC = () => {
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowText
           text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toFormat(
-            'dd/MM/yyyy mm:ss',
+            'dd LLL yyyy, hh:mm',
           )}
         />
       </ConfirmInfoRow>

From 8ebc9d836b0d6471b3bf60891a236a508e71dec5 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 15:57:44 +0530
Subject: [PATCH 32/45] update

---
 .../__snapshots__/siwe-sign.test.tsx.snap          |  2 +-
 .../info/personal-sign/siwe-sign/siwe-sign.tsx     |  2 +-
 .../confirmations/hooks/useCurrentConfirmation.ts  | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index b7c96ac412c4..771afd307988 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        30 Sep 2021, 55:24
+        30 Sep 2021, 21:55
       </p>
     </div>
   </div>
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 dc3daf1d9be5..de2dd643ad04 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
@@ -56,7 +56,7 @@ const SIWESignInfo: React.FC = () => {
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowText
           text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toFormat(
-            'dd LLL yyyy, hh:mm',
+            'dd LLL yyyy, HH:mm',
           )}
         />
       </ConfirmInfoRow>
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 5c1cc9ab5e4c..0a63dfe46b2b 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-      //   const { siwe } = unconfirmedTransaction.msgParams;
-      //   if (siwe?.isSIWEMessage) {
-      //     setCurrentConfirmation(undefined);
-      //     return;
-      //   }
-      // }
+      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+        const { siwe } = unconfirmedTransaction.msgParams;
+        if (siwe?.isSIWEMessage) {
+          setCurrentConfirmation(undefined);
+          return;
+        }
+      }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 2aaeac8545213bc70cb3c276706d56d543b2be25 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 16:16:11 +0530
Subject: [PATCH 33/45] update

---
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 20 ++++++++++++++++++-
 .../hooks/useCurrentConfirmation.ts           | 14 ++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

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 de2dd643ad04..aff94859dd18 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
@@ -13,6 +13,24 @@ import {
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
 
+const parseDate = (dateString: string) => {
+  const b = dateString.split(/\D+/);
+  const offsetMult = dateString.indexOf('+') !== -1 ? -1 : 1;
+  const hrOffset = offsetMult * (+b[7] || 0);
+  const minOffset = offsetMult * (+b[8] || 0);
+  return new Date(
+    Date.UTC(
+      +b[0],
+      +b[1] - 1,
+      +b[2],
+      +b[3] + hrOffset,
+      +b[4] + minOffset,
+      +b[5],
+      +b[6] || 0,
+    ),
+  );
+};
+
 const SIWESignInfo: React.FC = () => {
   const t = useI18nContext();
   const currentConfirmation = useSelector(
@@ -55,7 +73,7 @@ const SIWESignInfo: React.FC = () => {
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
         <ConfirmInfoRowText
-          text={DateTime.fromJSDate(new Date(siweMessage.issuedAt)).toFormat(
+          text={DateTime.fromJSDate(parseDate(siweMessage.issuedAt)).toFormat(
             'dd LLL yyyy, HH:mm',
           )}
         />
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 0a63dfe46b2b..5c1cc9ab5e4c 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-        const { siwe } = unconfirmedTransaction.msgParams;
-        if (siwe?.isSIWEMessage) {
-          setCurrentConfirmation(undefined);
-          return;
-        }
-      }
+      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+      //   const { siwe } = unconfirmedTransaction.msgParams;
+      //   if (siwe?.isSIWEMessage) {
+      //     setCurrentConfirmation(undefined);
+      //     return;
+      //   }
+      // }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 1009a2808b14a1a82a95f381ec6c3c19e903ebd0 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 16:44:37 +0530
Subject: [PATCH 34/45] update

---
 package.json                                  |  1 -
 .../__snapshots__/siwe-sign.test.tsx.snap     |  2 +-
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 35 +++++++------------
 yarn.lock                                     |  8 -----
 4 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index d65b74e79a09..4ef2ef3b288f 100644
--- a/package.json
+++ b/package.json
@@ -488,7 +488,6 @@
     "@types/gulp-sourcemaps": "^0.0.35",
     "@types/he": "^1",
     "@types/jest": "^29.5.12",
-    "@types/luxon": "^3.4.2",
     "@types/mocha": "^10.0.3",
     "@types/node": "^20",
     "@types/pify": "^5.0.1",
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 771afd307988..737d533f9120 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        30 Sep 2021, 21:55
+        September 30, 2021 at 4:25:24 PM
       </p>
     </div>
   </div>
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 aff94859dd18..b5ccb2363dee 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,7 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { toHex } from '@metamask/controller-utils';
-import { DateTime } from 'luxon';
 
 import { NETWORK_TO_NAME_MAP } from '../../../../../../../../shared/constants/network';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
@@ -13,22 +12,18 @@ import {
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
 
-const parseDate = (dateString: string) => {
-  const b = dateString.split(/\D+/);
-  const offsetMult = dateString.indexOf('+') !== -1 ? -1 : 1;
-  const hrOffset = offsetMult * (+b[7] || 0);
-  const minOffset = offsetMult * (+b[8] || 0);
-  return new Date(
-    Date.UTC(
-      +b[0],
-      +b[1] - 1,
-      +b[2],
-      +b[3] + hrOffset,
-      +b[4] + minOffset,
-      +b[5],
-      +b[6] || 0,
-    ),
-  );
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    timeZone: 'UTC',
+  };
+  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
 };
 
 const SIWESignInfo: React.FC = () => {
@@ -72,11 +67,7 @@ const SIWESignInfo: React.FC = () => {
         <ConfirmInfoRowText text={siweMessage.nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
-        <ConfirmInfoRowText
-          text={DateTime.fromJSDate(parseDate(siweMessage.issuedAt)).toFormat(
-            'dd LLL yyyy, HH:mm',
-          )}
-        />
+        <ConfirmInfoRowText text={formatDate(siweMessage.issuedAt)} />
       </ConfirmInfoRow>
     </>
   );
diff --git a/yarn.lock b/yarn.lock
index 7aa551e3323e..aa89270f079f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10074,13 +10074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/luxon@npm:^3.4.2":
-  version: 3.4.2
-  resolution: "@types/luxon@npm:3.4.2"
-  checksum: 10/fd89566e3026559f2bc4ddcc1e70a2c16161905ed50be9473ec0cfbbbe919165041408c4f6e06c4bcf095445535052e2c099087c76b1b38e368127e618fc968d
-  languageName: node
-  linkType: hard
-
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -25193,7 +25186,6 @@ __metadata:
     "@types/gulp-sourcemaps": "npm:^0.0.35"
     "@types/he": "npm:^1"
     "@types/jest": "npm:^29.5.12"
-    "@types/luxon": "npm:^3.4.2"
     "@types/mocha": "npm:^10.0.3"
     "@types/node": "npm:^20"
     "@types/pify": "npm:^5.0.1"

From 4893854f66dc73687c15a4f21786ae933bcc9451 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 17:03:55 +0530
Subject: [PATCH 35/45] update

---
 .../__snapshots__/siwe-sign.test.tsx.snap          |  2 +-
 .../info/personal-sign/siwe-sign/siwe-sign.tsx     |  8 ++++----
 .../confirmations/hooks/useCurrentConfirmation.ts  | 14 +++++++-------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 737d533f9120..cc17f394012b 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        September 30, 2021 at 4:25:24 PM
+        September 30, 2021 at 21:55
       </p>
     </div>
   </div>
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 b5ccb2363dee..7fea2a01435f 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
@@ -11,6 +11,7 @@ import {
   ConfirmInfoRowAddress,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
+import { fa } from '../../../../../../../../.storybook/locales';
 
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
@@ -18,10 +19,9 @@ const formatDate = (dateString: string) => {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    timeZone: 'UTC',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
   };
   return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
 };
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 5c1cc9ab5e4c..0a63dfe46b2b 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-      //   const { siwe } = unconfirmedTransaction.msgParams;
-      //   if (siwe?.isSIWEMessage) {
-      //     setCurrentConfirmation(undefined);
-      //     return;
-      //   }
-      // }
+      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+        const { siwe } = unconfirmedTransaction.msgParams;
+        if (siwe?.isSIWEMessage) {
+          setCurrentConfirmation(undefined);
+          return;
+        }
+      }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 3307e4681ba4cc72de53021380d928b11b49c40c Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 3 Jun 2024 17:17:37 +0530
Subject: [PATCH 36/45] update

---
 .../__snapshots__/siwe-sign.test.tsx.snap     |  3 ++-
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 22 +++++++++++--------
 .../hooks/useCurrentConfirmation.ts           | 14 ++++++------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index cc17f394012b..4b549371b827 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -230,6 +230,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         Issued
       </p>
     </div>
+    **
     <div
       class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
     >
@@ -237,7 +238,7 @@ exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         style="white-space: pre-wrap;"
       >
-        September 30, 2021 at 21:55
+        30 September 2021, 16:25
       </p>
     </div>
   </div>
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 7fea2a01435f..b66f5931a7ea 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
@@ -15,15 +15,18 @@ import { fa } from '../../../../../../../../.storybook/locales';
 
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
-  const options = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  };
-  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
+  const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  const month = months[date.getUTCMonth()];
+  const year = date.getUTCFullYear();
+  const hours = String(date.getUTCHours()).padStart(2, '0');
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+
+  return `${day} ${month} ${year}, ${hours}:${minutes}`;
 };
 
 const SIWESignInfo: React.FC = () => {
@@ -67,6 +70,7 @@ const SIWESignInfo: React.FC = () => {
         <ConfirmInfoRowText text={siweMessage.nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
+        **
         <ConfirmInfoRowText text={formatDate(siweMessage.issuedAt)} />
       </ConfirmInfoRow>
     </>
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 0a63dfe46b2b..5c1cc9ab5e4c 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-        const { siwe } = unconfirmedTransaction.msgParams;
-        if (siwe?.isSIWEMessage) {
-          setCurrentConfirmation(undefined);
-          return;
-        }
-      }
+      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+      //   const { siwe } = unconfirmedTransaction.msgParams;
+      //   if (siwe?.isSIWEMessage) {
+      //     setCurrentConfirmation(undefined);
+      //     return;
+      //   }
+      // }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 45b0e4c43f6adebfc49965dec9f0be451abf0f74 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 15:25:35 +0530
Subject: [PATCH 37/45] update

---
 app/_locales/en/messages.json                 |   8 +-
 test/data/confirmations/personal_sign.ts      |  41 +-
 .../__snapshots__/siwe-sign.test.tsx.snap     | 546 ++++++++++++++++++
 .../siwe-sign/siwe-sign.test.tsx              |  19 +-
 .../personal-sign/siwe-sign/siwe-sign.tsx     |  27 +-
 ui/pages/confirmations/types/confirm.ts       |   2 +
 6 files changed, 636 insertions(+), 7 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index d52627816b52..db8f7e90804a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4777,7 +4777,13 @@
     "message": "Nonce"
   },
   "siweOriginalMessage": {
-    "message": "Original Message"
+    "message": "Message"
+  },
+  "siweRequestId": {
+    "message": "Request Id"
+  },
+  "siweResources": {
+    "message": "Resources"
   },
   "siweSignatureSimulationDetailInfo": {
     "message": "This type of signature is not able to move your assets and is used for signing in."
diff --git a/test/data/confirmations/personal_sign.ts b/test/data/confirmations/personal_sign.ts
index b022949076f6..c6f7907eccc4 100644
--- a/test/data/confirmations/personal_sign.ts
+++ b/test/data/confirmations/personal_sign.ts
@@ -1,4 +1,5 @@
-export const PERSONAL_SIGN_SENDER_ADDRESS = '0x8eeee1781fd885ff5ddef7789486676961873d12';
+export const PERSONAL_SIGN_SENDER_ADDRESS =
+  '0x8eeee1781fd885ff5ddef7789486676961873d12';
 
 export const unapprovedPersonalSignMsg = {
   id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
@@ -45,3 +46,41 @@ export const signatureRequestSIWE = {
     },
   },
 };
+
+export const SignatureRequestSIWEWithResources = {
+  id: '210ca3b0-1ccb-11ef-b096-89c4d726ebb5',
+  securityAlertResponse: {
+    reason: 'loading',
+    result_type: 'validation_in_progress',
+    securityAlertId: 'b826df20-2eda-41bf-becf-6a100141a8be',
+  },
+  status: 'unapproved',
+  time: 1716884423019,
+  type: 'personal_sign',
+  msgParams: {
+    from: '0x935e73edb9ff52e23bac7f7e049a1ecd06d05477',
+    data: '0x6d6574616d61736b2e6769746875622e696f2077616e747320796f7520746f207369676e20696e207769746820796f757220457468657265756d206163636f756e743a0a3078393335653733656462396666353265323362616337663765303433613165636430366430353437370a0a492061636365707420746865204d6574614d61736b205465726d73206f6620536572766963653a2068747470733a2f2f636f6d6d756e6974792e6d6574616d61736b2e696f2f746f730a0a5552493a2068747470733a2f2f6d6574616d61736b2e6769746875622e696f0a56657273696f6e3a20310a436861696e2049443a20310a4e6f6e63653a2033323839313735370a4973737565642041743a20323032312d30392d33305431363a32353a32342e3030305a',
+    signatureMethod: 'personal_sign',
+    origin: 'https://metamask.github.io',
+    siwe: {
+      isSIWEMessage: true,
+      parsedMessage: {
+        domain: 'metamask.github.io',
+        address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+        statement:
+          'I accept the MetaMask Terms of Service: https://community.metamask.io/tos',
+        uri: 'https://metamask.github.io',
+        version: '1',
+        chainId: 1,
+        nonce: '32891757',
+        issuedAt: '2021-09-30T16:25:24.000Z',
+        notBefore: '2022-03-17T12:45:13.610Z',
+        requestId: 'some_id',
+        resources: [
+          'ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu',
+          'https://example.com/my-web2-claim.json',
+        ],
+      },
+    },
+  },
+};
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 4b549371b827..886b2a43370b 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -1,5 +1,551 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
+<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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Message
+      </p>
+    </div>
+    <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;"
+      >
+        I accept the MetaMask Terms of Service: https://community.metamask.io/tos
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        URL
+      </p>
+    </div>
+    <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;"
+      >
+        metamask.github.io
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Network
+      </p>
+    </div>
+    <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;"
+      >
+        Ethereum Mainnet
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Account
+      </p>
+    </div>
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <div
+            class="mm-avatar-account__jazzicon"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 59);"
+            >
+              <svg
+                height="16"
+                width="16"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#017B8E"
+                  height="16"
+                  transform="translate(0.39972303467835485 -0.4108005578484912) rotate(317.9 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#F2B602"
+                  height="16"
+                  transform="translate(-3.7466980184561267 5.704967714142398) rotate(134.1 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#FA8E00"
+                  height="16"
+                  transform="translate(-12.856136345377399 -5.7794405216344416) rotate(364.0 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+          data-testid="confirm-info-row-display-name"
+        >
+          0x935e7...05477
+        </p>
+      </div>
+    </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Version
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Chain ID
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Nonce
+      </p>
+    </div>
+    <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;"
+      >
+        32891757
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Issued
+      </p>
+    </div>
+    <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;"
+      >
+        30 September 2021, 16:25
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SIWESignInfo renders correctly for SIWE signature request with resources 1`] = `
+<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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Message
+      </p>
+    </div>
+    <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;"
+      >
+        I accept the MetaMask Terms of Service: https://community.metamask.io/tos
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        URL
+      </p>
+    </div>
+    <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;"
+      >
+        metamask.github.io
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Network
+      </p>
+    </div>
+    <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;"
+      >
+        Ethereum Mainnet
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Account
+      </p>
+    </div>
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <div
+            class="mm-avatar-account__jazzicon"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 59);"
+            >
+              <svg
+                height="16"
+                width="16"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#017B8E"
+                  height="16"
+                  transform="translate(0.39972303467835485 -0.4108005578484912) rotate(317.9 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#F2B602"
+                  height="16"
+                  transform="translate(-3.7466980184561267 5.704967714142398) rotate(134.1 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#FA8E00"
+                  height="16"
+                  transform="translate(-12.856136345377399 -5.7794405216344416) rotate(364.0 8 8)"
+                  width="16"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+          data-testid="confirm-info-row-display-name"
+        >
+          0x935E7...05477
+        </p>
+      </div>
+    </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Version
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Chain ID
+      </p>
+    </div>
+    <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;"
+      >
+        1
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Nonce
+      </p>
+    </div>
+    <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;"
+      >
+        32891757
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Issued
+      </p>
+    </div>
+    <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;"
+      >
+        30 September 2021, 16:25
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Request Id
+      </p>
+    </div>
+    <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;"
+      >
+        some_id
+      </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"
+    style="overflow-wrap: anywhere; min-height: 24px;"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      >
+        Resources
+      </p>
+    </div>
+    <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;"
+      >
+        ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu
+      </p>
+    </div>
+    <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;"
+      >
+        https://example.com/my-web2-claim.json
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
 <div>
   <div
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
index 720286db1a85..abede6223caa 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
@@ -3,11 +3,14 @@ import configureMockStore from 'redux-mock-store';
 
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
-import { signatureRequestSIWE } from '../../../../../../../../test/data/confirmations/personal_sign';
+import {
+  SignatureRequestSIWEWithResources,
+  signatureRequestSIWE,
+} from '../../../../../../../../test/data/confirmations/personal_sign';
 import SIWESignInfo from './siwe-sign';
 
 describe('SIWESignInfo', () => {
-  it('renders correctly for personal sign request', () => {
+  it('renders correctly for SIWE signature request', () => {
     const state = {
       ...mockState,
       confirm: {
@@ -18,4 +21,16 @@ describe('SIWESignInfo', () => {
     const { container } = renderWithProvider(<SIWESignInfo />, mockStore);
     expect(container).toMatchSnapshot();
   });
+
+  it('renders correctly for SIWE signature request with resources', () => {
+    const state = {
+      ...mockState,
+      confirm: {
+        currentConfirmation: SignatureRequestSIWEWithResources,
+      },
+    };
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithProvider(<SIWESignInfo />, mockStore);
+    expect(container).toMatchSnapshot();
+  });
 });
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 b66f5931a7ea..7a14888c31f4 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
@@ -16,8 +16,18 @@ import { fa } from '../../../../../../../../.storybook/locales';
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
   const months = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December"
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
   ];
 
   const day = String(date.getUTCDate()).padStart(2, '0');
@@ -70,9 +80,20 @@ const SIWESignInfo: React.FC = () => {
         <ConfirmInfoRowText text={siweMessage.nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
-        **
         <ConfirmInfoRowText text={formatDate(siweMessage.issuedAt)} />
       </ConfirmInfoRow>
+      {siweMessage.requestId && (
+        <ConfirmInfoRow label={t('siweRequestId')}>
+          <ConfirmInfoRowText text={siweMessage.requestId} />
+        </ConfirmInfoRow>
+      )}
+      {siweMessage.resources && (
+        <ConfirmInfoRow label={t('siweResources')}>
+          {siweMessage.resources.map((resource) => (
+            <ConfirmInfoRowText text={resource} />
+          ))}
+        </ConfirmInfoRow>
+      )}
     </>
   );
 };
diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts
index 4c580e3ce7b9..a48e1d4984ba 100644
--- a/ui/pages/confirmations/types/confirm.ts
+++ b/ui/pages/confirmations/types/confirm.ts
@@ -37,6 +37,8 @@ export type SignatureRequestType = {
         chainId: number;
         nonce: string;
         issuedAt: string;
+        requestId?: string;
+        resources?: string[];
       };
     };
   };

From 47a464f1482a88f8e7613356b676b27e59f91671 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 16:25:56 +0530
Subject: [PATCH 38/45] update

---
 .../info/personal-sign/siwe-sign/siwe-sign.tsx     |  1 -
 .../confirmations/hooks/useCurrentConfirmation.ts  | 14 +++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

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 7a14888c31f4..fe2c8528b7a7 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
@@ -11,7 +11,6 @@ import {
   ConfirmInfoRowAddress,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
-import { fa } from '../../../../../../../../.storybook/locales';
 
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
index 5c1cc9ab5e4c..0a63dfe46b2b 100644
--- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
+++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts
@@ -78,13 +78,13 @@ const useCurrentConfirmation = () => {
 
       // comment if condition below to enable re-design for SIWE signatures
       // this can be removed once SIWE code changes are completed
-      // if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
-      //   const { siwe } = unconfirmedTransaction.msgParams;
-      //   if (siwe?.isSIWEMessage) {
-      //     setCurrentConfirmation(undefined);
-      //     return;
-      //   }
-      // }
+      if (pendingConfirmation?.type === ApprovalType.PersonalSign) {
+        const { siwe } = unconfirmedTransaction.msgParams;
+        if (siwe?.isSIWEMessage) {
+          setCurrentConfirmation(undefined);
+          return;
+        }
+      }
       setCurrentConfirmation(unconfirmedTransaction);
     }
   }, [latestPendingConfirmation, paramsTransactionId, unconfirmedTransactions]);

From 9c684dac7d13d714f9a2df548aa8e05bda40eefe Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 16:29:39 +0530
Subject: [PATCH 39/45] update

---
 .../permit-simulation.test.tsx.snap           | 77 -------------------
 .../typed-sign/permit-simulation.test.tsx     | 21 -----
 .../info/typed-sign/permit-simulation.tsx     | 68 ----------------
 .../info/typed-sign/typed-sign.test.tsx       | 15 ----
 .../confirm/info/typed-sign/typed-sign.tsx    |  2 -
 5 files changed, 183 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
 delete mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
 delete mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
deleted file mode 100644
index 0c200bbcbea4..000000000000
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PermitSimulation renders component correctly 1`] = `
-<div>
-  <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
-  >
-    <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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-        >
-          Estimated changes
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-1"
-            class=""
-            data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
-          >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
-          </div>
-        </div>
-      </div>
-      <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;"
-        >
-          This transaction gives permission to withdraw your tokens
-        </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"
-      style="overflow-wrap: anywhere; min-height: 24px;"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-        >
-          Approve spend limit
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
-        >
-          3000
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--margin-left-2 mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
-        >
-          MyToken
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
deleted file mode 100644
index ce7e5beb785d..000000000000
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-
-import mockState from '../../../../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
-import { permitSignatureMsg } from '../../../../../../../test/data/confirmations/typed_sign';
-import PermitSimulation from './permit-simulation';
-
-describe('PermitSimulation', () => {
-  it('renders component correctly', () => {
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: permitSignatureMsg,
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(<PermitSimulation />, mockStore);
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
deleted file mode 100644
index d9c76f50f385..000000000000
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-import {
-  ConfirmInfoRow,
-  ConfirmInfoRowText,
-} from '../../../../../../components/app/confirm/info/row';
-import { useI18nContext } from '../../../../../../hooks/useI18nContext';
-import { currentConfirmationSelector } from '../../../../../../selectors';
-import { Box, Text } from '../../../../../../components/component-library';
-import {
-  BackgroundColor,
-  BorderRadius,
-  Display,
-  TextAlign,
-} from '../../../../../../helpers/constants/design-system';
-import { SignatureRequestType } from '../../../../types/confirm';
-
-const PermitSimulation: React.FC = () => {
-  const t = useI18nContext();
-  const currentConfirmation = useSelector(
-    currentConfirmationSelector,
-  ) as SignatureRequestType;
-
-  const {
-    domain: { name },
-    message: { value },
-  } = JSON.parse(currentConfirmation?.msgParams?.data as string);
-
-  return (
-    <Box
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderRadius={BorderRadius.MD}
-      padding={2}
-      marginBottom={4}
-    >
-      <ConfirmInfoRow
-        label={t('simulationDetailsTitle')}
-        tooltip={t('simulationDetailsTitleTooltip')}
-      >
-        <ConfirmInfoRowText text={t('permitSimulationDetailInfo')} />
-      </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('approve')}>
-        <Box display={Display.Flex}>
-          <Text
-            backgroundColor={BackgroundColor.backgroundAlternative}
-            borderRadius={BorderRadius.XL}
-            paddingInline={2}
-            textAlign={TextAlign.Center}
-          >
-            {value}
-          </Text>
-          <Text
-            backgroundColor={BackgroundColor.backgroundAlternative}
-            borderRadius={BorderRadius.XL}
-            paddingInline={2}
-            marginLeft={2}
-            textAlign={TextAlign.Center}
-          >
-            {name}
-          </Text>
-        </Box>
-      </ConfirmInfoRow>
-    </Box>
-  );
-};
-
-export default PermitSimulation;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index f7a3ead56546..1f337f5a9dc2 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -64,21 +64,6 @@ describe('TypedSignInfo', () => {
     expect(container).toMatchSnapshot();
   });
 
-<<<<<<< HEAD
-  it('display simulation details for permit signature', () => {
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: permitSignatureMsg,
-      },
-    };
-    const mockStore = configureMockStore([])(state);
-    const { getByText } = renderWithProvider(<TypedSignInfo />, mockStore);
-    expect(getByText('Estimated changes')).toBeDefined();
-  });
-
-=======
->>>>>>> 2d84e322030cc33d6cd43298951ce0f5f151a92b
   it('displays "Approving to" for permit signature type', () => {
     const state = {
       ...mockState,
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 4853717d2347..adf66ae16f9d 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -19,7 +19,6 @@ import { EIP712_PRIMARY_TYPE_PERMIT } from '../../../../constants';
 import { SignatureRequestType } from '../../../../types/confirm';
 import { parseTypedDataMessage } from '../../../../utils';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
-import PermitSimulation from './permit-simulation';
 
 const TypedSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -39,7 +38,6 @@ const TypedSignInfo: React.FC = () => {
 
   return (
     <>
-      {primaryType === EIP712_PRIMARY_TYPE_PERMIT && <PermitSimulation />}
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}

From 07c4fcf4322b89452e014c39a1be714f0383853f Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 16:36:11 +0530
Subject: [PATCH 40/45] update

---
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 27 +-----------------
 ui/pages/confirmations/utils/date.test.ts     | 15 ++++++++++
 ui/pages/confirmations/utils/date.ts          | 28 +++++++++++++++++++
 3 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 ui/pages/confirmations/utils/date.test.ts
 create mode 100644 ui/pages/confirmations/utils/date.ts

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 fe2c8528b7a7..d454040b417a 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
@@ -11,32 +11,7 @@ import {
   ConfirmInfoRowAddress,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
-
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString);
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  const day = String(date.getUTCDate()).padStart(2, '0');
-  const month = months[date.getUTCMonth()];
-  const year = date.getUTCFullYear();
-  const hours = String(date.getUTCHours()).padStart(2, '0');
-  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
-
-  return `${day} ${month} ${year}, ${hours}:${minutes}`;
-};
+import { formatDate } from '../../../../../utils/date';
 
 const SIWESignInfo: React.FC = () => {
   const t = useI18nContext();
diff --git a/ui/pages/confirmations/utils/date.test.ts b/ui/pages/confirmations/utils/date.test.ts
new file mode 100644
index 000000000000..dc1fdd40454a
--- /dev/null
+++ b/ui/pages/confirmations/utils/date.test.ts
@@ -0,0 +1,15 @@
+import { formatDate } from './date';
+
+describe('date util', () => {
+  describe('formatDate', () => {
+    it('formats passed date string', () => {
+      expect(formatDate('2021-09-30T16:25:24.000Z')).toEqual(
+        '30 September 2021, 16:25',
+      );
+    });
+
+    it('returns empty string if empty string is passed', () => {
+      expect(formatDate('')).toEqual('');
+    });
+  });
+});
diff --git a/ui/pages/confirmations/utils/date.ts b/ui/pages/confirmations/utils/date.ts
new file mode 100644
index 000000000000..b2b2645bae50
--- /dev/null
+++ b/ui/pages/confirmations/utils/date.ts
@@ -0,0 +1,28 @@
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const formatDate = (dateString: string) => {
+  if (!dateString) {
+    return dateString;
+  }
+  const date = new Date(dateString);
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  const month = months[date.getUTCMonth()];
+  const year = date.getUTCFullYear();
+  const hours = String(date.getUTCHours()).padStart(2, '0');
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+
+  return `${day} ${month} ${year}, ${hours}:${minutes}`;
+};

From aa553309033c9b4a19ff0b4256f7c75d36e33b30 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 19:40:59 +0530
Subject: [PATCH 41/45] Update

---
 app/_locales/en/messages.json                 |   9 -
 .../__snapshots__/siwe-sign.test.tsx.snap     | 245 ------------------
 2 files changed, 254 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index db8f7e90804a..1f1c18f30dee 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3441,7 +3441,6 @@
   "onboardingMetametricsDescriptionLegacy": {
     "message": "MetaMask would like to gather usage data to better understand how our users interact with MetaMask. This data will be used to provide the service, which includes improving the service based on your use."
   },
-
   "onboardingMetametricsDisagree": {
     "message": "No thanks"
   },
@@ -3911,9 +3910,6 @@
   "permissionsPageTourTitle": {
     "message": "Connected sites are now permissions"
   },
-  "permitSimulationDetailInfo": {
-    "message": "This transaction gives permission to withdraw your tokens"
-  },
   "personalAddressDetected": {
     "message": "Personal address detected. Input the token contract address."
   },
@@ -4589,7 +4585,6 @@
   "sendSwapSubmissionWarning": {
     "message": "Clicking this button will immediately initiate your swap transaction. Please review your transaction details before proceeding."
   },
-
   "sendTo": {
     "message": "Send to"
   },
@@ -6087,19 +6082,15 @@
   "turnOnMetamaskNotificationsMessageFirst": {
     "message": "Stay in the loop on what's happening in your wallet with notifications."
   },
-
   "turnOnMetamaskNotificationsMessagePrivacyBold": {
     "message": "Settings > Notifications."
   },
-
   "turnOnMetamaskNotificationsMessagePrivacyLink": {
     "message": "Learn how we protect your privacy while using this feature."
   },
-
   "turnOnMetamaskNotificationsMessageSecond": {
     "message": "To use wallet notifications, we use a profile to sync some settings across your devices. $1"
   },
-
   "turnOnMetamaskNotificationsMessageThird": {
     "message": "You can turn off notifications at any time in $1"
   },
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 886b2a43370b..ebc548a902b2 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -545,248 +545,3 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
   </div>
 </div>
 `;
-
-exports[`SIWESignInfo renders correctly for personal sign request 1`] = `
-<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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Original Message
-      </p>
-    </div>
-    <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;"
-      >
-        I accept the MetaMask Terms of Service: https://community.metamask.io/tos
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        URL
-      </p>
-    </div>
-    <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;"
-      >
-        metamask.github.io
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Network
-      </p>
-    </div>
-    <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;"
-      >
-        Ethereum Mainnet
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Account
-      </p>
-    </div>
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-      >
-        <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
-        >
-          <div
-            class="mm-avatar-account__jazzicon"
-          >
-            <div
-              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 59);"
-            >
-              <svg
-                height="16"
-                width="16"
-                x="0"
-                y="0"
-              >
-                <rect
-                  fill="#017B8E"
-                  height="16"
-                  transform="translate(0.39972303467835485 -0.4108005578484912) rotate(317.9 8 8)"
-                  width="16"
-                  x="0"
-                  y="0"
-                />
-                <rect
-                  fill="#F2B602"
-                  height="16"
-                  transform="translate(-3.7466980184561267 5.704967714142398) rotate(134.1 8 8)"
-                  width="16"
-                  x="0"
-                  y="0"
-                />
-                <rect
-                  fill="#FA8E00"
-                  height="16"
-                  transform="translate(-12.856136345377399 -5.7794405216344416) rotate(364.0 8 8)"
-                  width="16"
-                  x="0"
-                  y="0"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-          data-testid="confirm-info-row-display-name"
-        >
-          0x935e7...05477
-        </p>
-      </div>
-    </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Version
-      </p>
-    </div>
-    <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;"
-      >
-        1
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Chain ID
-      </p>
-    </div>
-    <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;"
-      >
-        1
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Nonce
-      </p>
-    </div>
-    <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;"
-      >
-        32891757
-      </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"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Issued
-      </p>
-    </div>
-    **
-    <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;"
-      >
-        30 September 2021, 16:25
-      </p>
-    </div>
-  </div>
-</div>
-`;

From 851a3c43dd675357bd3e5e191e3194ae932c7303 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 7 Jun 2024 16:43:22 +0530
Subject: [PATCH 42/45] Update

---
 app/_locales/en/messages.json                 |  2 +-
 .../info/personal-sign/personal-sign.tsx      |  8 +--
 .../siwe-sign/siwe-sign.stories.tsx           |  4 +-
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 50 +++++++++++--------
 4 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index cba9320f8307..02ce48cf26ae 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4775,7 +4775,7 @@
     "message": "Message"
   },
   "siweRequestId": {
-    "message": "Request Id"
+    "message": "Request ID"
   },
   "siweResources": {
     "message": "Resources"
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 27cdedd73f42..b3be10d54de5 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -34,11 +34,11 @@ const PersonalSignInfo: React.FC = () => {
   }
 
   const { from } = currentConfirmation.msgParams;
-  const isSiweSigReq = isSIWESignatureRequest(currentConfirmation);
+  const isSIWE = isSIWESignatureRequest(currentConfirmation);
 
   return (
     <>
-      {isSiweSigReq && (
+      {isSIWE && (
         <Box
           backgroundColor={BackgroundColor.backgroundDefault}
           borderRadius={BorderRadius.MD}
@@ -67,7 +67,7 @@ const PersonalSignInfo: React.FC = () => {
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </AlertRow>
-        {isSiweSigReq && (
+        {isSIWE && (
           <ConfirmInfoRow label={t('signingInWith')}>
             <ConfirmInfoRowAddress address={from} />
           </ConfirmInfoRow>
@@ -79,7 +79,7 @@ const PersonalSignInfo: React.FC = () => {
         padding={2}
         marginBottom={4}
       >
-        {isSiweSigReq ? (
+        {isSIWE ? (
           <SIWESignInfo />
         ) : (
           <AlertRow
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
index 0c32a7db5165..8434f23752eb 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import { signatureRequestSIWE } from '../../../../../../../../test/data/confirmations/personal_sign';
+import { SignatureRequestSIWEWithResources } from '../../../../../../../../test/data/confirmations/personal_sign';
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import configureStore from '../../../../../../../store/store';
 
@@ -12,7 +12,7 @@ const store = configureStore({
     ...mockState.metamask,
   },
   confirm: {
-    currentConfirmation: signatureRequestSIWE,
+    currentConfirmation: SignatureRequestSIWEWithResources,
   },
 });
 
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 d454040b417a..3655b6b7b2a6 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
@@ -19,52 +19,62 @@ const SIWESignInfo: React.FC = () => {
     currentConfirmationSelector,
   ) as SignatureRequestType;
 
-  if (!currentConfirmation.msgParams?.siwe?.parsedMessage) {
+  const siweMessage = currentConfirmation?.msgParams?.siwe?.parsedMessage;
+
+  if (!siweMessage) {
     return null;
   }
 
-  const siweMessage = currentConfirmation.msgParams.siwe?.parsedMessage;
-  const chainId = toHex(siweMessage.chainId);
+  const {
+    address,
+    chainId,
+    domain,
+    issuedAt,
+    nonce,
+    requestId,
+    statement,
+    resources,
+    version,
+  } = siweMessage;
+  const hexChainId = toHex(chainId);
+  const network =
+    (NETWORK_TO_NAME_MAP as Record<string, string>)[hexChainId] ?? hexChainId;
 
   return (
     <>
       <ConfirmInfoRow label={t('siweOriginalMessage')}>
-        <ConfirmInfoRowText text={siweMessage.statement} />
+        <ConfirmInfoRowText text={statement} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweURI')}>
-        <ConfirmInfoRowText text={siweMessage.domain} />
+        <ConfirmInfoRowText text={domain} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweNetwork')}>
-        <ConfirmInfoRowText
-          text={
-            (NETWORK_TO_NAME_MAP as Record<string, string>)[chainId] ?? chainId
-          }
-        />
+        <ConfirmInfoRowText text={network} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweAccount')}>
-        <ConfirmInfoRowAddress address={siweMessage.address} />
+        <ConfirmInfoRowAddress address={address} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweVersion')}>
-        <ConfirmInfoRowText text={siweMessage.version} />
+        <ConfirmInfoRowText text={version} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweChainID')}>
-        <ConfirmInfoRowText text={`${siweMessage.chainId}`} />
+        <ConfirmInfoRowText text={`${chainId}`} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweNonce')}>
-        <ConfirmInfoRowText text={siweMessage.nonce} />
+        <ConfirmInfoRowText text={nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>
-        <ConfirmInfoRowText text={formatDate(siweMessage.issuedAt)} />
+        <ConfirmInfoRowText text={formatDate(issuedAt)} />
       </ConfirmInfoRow>
-      {siweMessage.requestId && (
+      {requestId && (
         <ConfirmInfoRow label={t('siweRequestId')}>
-          <ConfirmInfoRowText text={siweMessage.requestId} />
+          <ConfirmInfoRowText text={requestId} />
         </ConfirmInfoRow>
       )}
-      {siweMessage.resources && (
+      {resources && (
         <ConfirmInfoRow label={t('siweResources')}>
-          {siweMessage.resources.map((resource) => (
-            <ConfirmInfoRowText text={resource} />
+          {resources.map((resource, index) => (
+            <ConfirmInfoRowText key={`resource-${index}`} text={resource} />
           ))}
         </ConfirmInfoRow>
       )}

From d7353d2efb17668707fb9f6da018f82d74ed5d84 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 7 Jun 2024 19:09:28 +0530
Subject: [PATCH 43/45] update

---
 app/_locales/en/messages.json                                  | 3 ---
 .../siwe-sign/__snapshots__/siwe-sign.test.tsx.snap            | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 02ce48cf26ae..33a803677bb0 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4588,9 +4588,6 @@
   "sendSwapSubmissionWarning": {
     "message": "Clicking this button will immediately initiate your swap transaction. Please review your transaction details before proceeding."
   },
-  "sendTo": {
-    "message": "Send to"
-  },
   "sendTokenAsToken": {
     "message": "Send $1 as $2",
     "description": "Used in the transaction display list to describe a swap and send. $1 and $2 are the symbols of tokens in involved in the swap."
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index ebc548a902b2..1e62756cf223 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -495,7 +495,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       <p
         class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
       >
-        Request Id
+        Request ID
       </p>
     </div>
     <div

From 42fbf95c46e381e0aefdd9096477c9ad2d9895d6 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 12 Jun 2024 21:31:44 +0530
Subject: [PATCH 44/45] update

---
 package.json                         |  1 +
 ui/pages/confirmations/utils/date.ts | 26 +++++---------------------
 yarn.lock                            |  8 ++++++++
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 731be3eb1e75..bb4be47c810e 100644
--- a/package.json
+++ b/package.json
@@ -487,6 +487,7 @@
     "@types/gulp-sourcemaps": "^0.0.35",
     "@types/he": "^1",
     "@types/jest": "^29.5.12",
+    "@types/luxon": "^3.4.2",
     "@types/mocha": "^10.0.3",
     "@types/node": "^20",
     "@types/pify": "^5.0.1",
diff --git a/ui/pages/confirmations/utils/date.ts b/ui/pages/confirmations/utils/date.ts
index b2b2645bae50..19ffa5d027d4 100644
--- a/ui/pages/confirmations/utils/date.ts
+++ b/ui/pages/confirmations/utils/date.ts
@@ -1,28 +1,12 @@
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
+import { DateTime } from 'luxon';
 
 export const formatDate = (dateString: string) => {
   if (!dateString) {
     return dateString;
   }
-  const date = new Date(dateString);
-  const day = String(date.getUTCDate()).padStart(2, '0');
-  const month = months[date.getUTCMonth()];
-  const year = date.getUTCFullYear();
-  const hours = String(date.getUTCHours()).padStart(2, '0');
-  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
 
-  return `${day} ${month} ${year}, ${hours}:${minutes}`;
+  return DateTime.fromISO(dateString)
+    .setLocale('en')
+    .setZone('utc')
+    .toFormat('dd LLLL yyyy, HH:mm');
 };
diff --git a/yarn.lock b/yarn.lock
index e8b22139bd37..1d718a0caf61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9931,6 +9931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/luxon@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@types/luxon@npm:3.4.2"
+  checksum: 10/fd89566e3026559f2bc4ddcc1e70a2c16161905ed50be9473ec0cfbbbe919165041408c4f6e06c4bcf095445535052e2c099087c76b1b38e368127e618fc968d
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -25030,6 +25037,7 @@ __metadata:
     "@types/gulp-sourcemaps": "npm:^0.0.35"
     "@types/he": "npm:^1"
     "@types/jest": "npm:^29.5.12"
+    "@types/luxon": "npm:^3.4.2"
     "@types/mocha": "npm:^10.0.3"
     "@types/node": "npm:^20"
     "@types/pify": "npm:^5.0.1"

From e6344d6628870619833853112d3f4bcb04d8e3cd Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 13 Jun 2024 11:40:06 +0530
Subject: [PATCH 45/45] update

---
 app/_locales/en/messages.json                     | 15 ---------------
 .../info/personal-sign/siwe-sign/siwe-sign.tsx    | 10 +++++-----
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 393f398fa256..4d251becd20a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4679,24 +4679,12 @@
   "simulationsSettingSubHeader": {
     "message": "Estimate balance changes"
   },
-  "siweAccount": {
-    "message": "Account"
-  },
-  "siweChainID": {
-    "message": "Chain ID"
-  },
   "siweIssued": {
     "message": "Issued"
   },
   "siweNetwork": {
     "message": "Network"
   },
-  "siweNonce": {
-    "message": "Nonce"
-  },
-  "siweOriginalMessage": {
-    "message": "Message"
-  },
   "siweRequestId": {
     "message": "Request ID"
   },
@@ -4709,9 +4697,6 @@
   "siweURI": {
     "message": "URL"
   },
-  "siweVersion": {
-    "message": "Version"
-  },
   "skip": {
     "message": "Skip"
   },
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 3655b6b7b2a6..8c1260c3ede5 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
@@ -42,7 +42,7 @@ const SIWESignInfo: React.FC = () => {
 
   return (
     <>
-      <ConfirmInfoRow label={t('siweOriginalMessage')}>
+      <ConfirmInfoRow label={t('message')}>
         <ConfirmInfoRowText text={statement} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweURI')}>
@@ -51,16 +51,16 @@ const SIWESignInfo: React.FC = () => {
       <ConfirmInfoRow label={t('siweNetwork')}>
         <ConfirmInfoRowText text={network} />
       </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('siweAccount')}>
+      <ConfirmInfoRow label={t('account')}>
         <ConfirmInfoRowAddress address={address} />
       </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('siweVersion')}>
+      <ConfirmInfoRow label={t('version')}>
         <ConfirmInfoRowText text={version} />
       </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('siweChainID')}>
+      <ConfirmInfoRow label={t('chainId')}>
         <ConfirmInfoRowText text={`${chainId}`} />
       </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('siweNonce')}>
+      <ConfirmInfoRow label={t('nonce')}>
         <ConfirmInfoRowText text={nonce} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('siweIssued')}>