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/31] 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/31] 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/31] 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/31] 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 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 05/31] 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 06/31] 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 07/31] 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 08/31] 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 09/31] 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 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 10/31] 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 11/31] 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 12/31] 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 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 13/31] 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 14/31] 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 15/31] 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 16/31] 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 6cfdd134f24d83765d7b6f2cf0c884dae5555f43 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sat, 1 Jun 2024 22:13:34 +0530
Subject: [PATCH 17/31] update

---
 .../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 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
 delete mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
 delete 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
deleted file mode 100644
index e01f1c506cbb..000000000000
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index 9ff81ff6edb7..000000000000
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.test.tsx
+++ /dev/null
@@ -1,88 +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 {
-  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
deleted file mode 100644
index bbaaf74d0011..000000000000
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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 70077082109b24171e68c3240417d8dbeaa75f61 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 16:38:40 +0530
Subject: [PATCH 18/31] Update

---
 .../info/__snapshots__/info.test.tsx.snap     | 156 +++++++++---------
 1 file changed, 82 insertions(+), 74 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>

From 13ad7c01435dfe1fe844fbd19e6bf563fc43092e Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 17:42:15 +0530
Subject: [PATCH 19/31] 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 0d23c471a57b0acbfa6233d82c24f1f05f114a5e Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Sun, 2 Jun 2024 17:59:33 +0530
Subject: [PATCH 20/31] 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 4bd3ff592e832dad5d15a1095aa5ecd738196851 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 4 Jun 2024 19:11:19 +0530
Subject: [PATCH 21/31] Update

---
 .../info/typed-sign/permit-simulation.tsx     | 68 ----------------
 .../permit-simulation.test.tsx.snap           | 41 +++++++---
 .../typed-sign/permit-simulation/index.ts     |  1 +
 .../permit-simulation.test.tsx                |  6 +-
 .../permit-simulation/permit-simulation.tsx   | 81 +++++++++++++++++++
 .../confirm/info/typed-sign/typed-sign.tsx    | 10 +--
 6 files changed, 121 insertions(+), 86 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.tsx
 rename ui/pages/confirmations/components/confirm/info/typed-sign/{ => permit-simulation}/__snapshots__/permit-simulation.test.tsx.snap (71%)
 create mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/index.ts
 rename ui/pages/confirmations/components/confirm/info/typed-sign/{ => permit-simulation}/permit-simulation.test.tsx (66%)
 create mode 100644 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx

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/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
similarity index 71%
rename from ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/permit-simulation.test.tsx.snap
rename to ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
index 0c200bbcbea4..0d0acee722af 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/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
@@ -58,18 +58,39 @@ exports[`PermitSimulation renders component correctly 1`] = `
         </p>
       </div>
       <div
-        class="mm-box mm-box--display-flex"
+        class="mm-box"
       >
-        <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"
+        <div
+          class="mm-box mm-box--display-flex"
         >
-          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
+            class="mm-box mm-box--margin-right-1 mm-box--display-inline"
+          >
+            <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>
+          </div>
+          <div>
+            <div
+              class="name name__missing"
+            >
+              <span
+                class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+              <p
+                class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
+              >
+                0xCcCCc...ccccC
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box"
+        />
       </div>
     </div>
   </div>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/index.ts b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/index.ts
new file mode 100644
index 000000000000..20c43d2613ca
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/index.ts
@@ -0,0 +1 @@
+export { default as PermitSimulation } from './permit-simulation';
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/permit-simulation.test.tsx
similarity index 66%
rename from ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation.test.tsx
rename to ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx
index ce7e5beb785d..ea0ffcc47bc1 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/permit-simulation.test.tsx
@@ -1,9 +1,9 @@
 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 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', () => {
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
new file mode 100644
index 000000000000..e65d7227153a
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { NameType } from '@metamask/name-controller';
+
+import { Numeric } from '../../../../../../../../shared/modules/Numeric';
+import Name from '../../../../../../../components/app/name/name';
+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';
+import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
+import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
+
+const PermitSimulation: React.FC = () => {
+  const t = useI18nContext();
+  const currentConfirmation = useSelector(
+    currentConfirmationSelector,
+  ) as SignatureRequestType;
+  const [faitValue, setFiatValue] = useState<number>();
+
+  const {
+    domain: { verifyingContract },
+    message: { value },
+  } = JSON.parse(currentConfirmation?.msgParams?.data as string);
+
+  const exchangeRate = useTokenExchangeRate(verifyingContract);
+
+  useEffect(() => {
+    if (exchangeRate && value) {
+      setFiatValue(exchangeRate.times(new Numeric(value, 10)).toNumber());
+    }
+  }, [exchangeRate, value]);
+
+  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>
+          <Box display={Display.Flex}>
+            <Box display={Display.Inline} marginRight={1}>
+              <Text
+                backgroundColor={BackgroundColor.backgroundAlternative}
+                borderRadius={BorderRadius.XL}
+                paddingInline={2}
+                textAlign={TextAlign.Center}
+              >
+                {value}
+              </Text>
+            </Box>
+            <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
+          </Box>
+          <Box>
+            {faitValue && <IndividualFiatDisplay fiatAmount={faitValue} />}
+          </Box>
+        </Box>
+      </ConfirmInfoRow>
+    </Box>
+  );
+};
+
+export default PermitSimulation;
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..ed4cb30f3360 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,7 @@ 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';
+import { PermitSimulation } from './permit-simulation';
 
 const TypedSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -32,9 +32,9 @@ const TypedSignInfo: React.FC = () => {
   }
 
   const {
-    domain,
     domain: { verifyingContract },
     primaryType,
+    message: { spender },
   } = parseTypedDataMessage(currentConfirmation.msgParams.data as string);
 
   return (
@@ -50,7 +50,7 @@ const TypedSignInfo: React.FC = () => {
           <>
             <Box padding={2}>
               <ConfirmInfoRow label={t('approvingTo')}>
-                <ConfirmInfoRowAddress address={verifyingContract} />
+                <ConfirmInfoRowAddress address={spender} />
               </ConfirmInfoRow>
             </Box>
             <ConfirmInfoRowDivider />
@@ -64,10 +64,10 @@ const TypedSignInfo: React.FC = () => {
             <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
           </ConfirmInfoRow>
         </Box>
-        {isValidAddress(domain.verifyingContract) && (
+        {isValidAddress(verifyingContract) && (
           <Box padding={2}>
             <ConfirmInfoRow label={t('interactingWith')}>
-              <ConfirmInfoRowAddress address={domain.verifyingContract} />
+              <ConfirmInfoRowAddress address={verifyingContract} />
             </ConfirmInfoRow>
           </Box>
         )}

From 04dbe969a81f9423f0d9ba8c59cd5402dc363d19 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 6 Jun 2024 21:34:34 +0530
Subject: [PATCH 22/31] Update
 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index e65d7227153a..c5a799a9c387 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -26,7 +26,7 @@ const PermitSimulation: React.FC = () => {
   const currentConfirmation = useSelector(
     currentConfirmationSelector,
   ) as SignatureRequestType;
-  const [faitValue, setFiatValue] = useState<number>();
+  const [fiatValue, setFiatValue] = useState<number>();
 
   const {
     domain: { verifyingContract },

From 2768c2a2723fc2d278f371a9c19951f1c0862af4 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 6 Jun 2024 21:36:46 +0530
Subject: [PATCH 23/31] Update

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

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index c5a799a9c387..aa69c85230a4 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -70,7 +70,7 @@ const PermitSimulation: React.FC = () => {
             <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
           </Box>
           <Box>
-            {faitValue && <IndividualFiatDisplay fiatAmount={faitValue} />}
+            {fiatValue && <IndividualFiatDisplay fiatAmount={fiatValue} />}
           </Box>
         </Box>
       </ConfirmInfoRow>

From 93200617bba03df7edea9c48af0b6ce5b8fda198 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 7 Jun 2024 17:38:48 +0530
Subject: [PATCH 24/31] Update
 ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index aa69c85230a4..ec3bdffd2bcf 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -57,7 +57,7 @@ const PermitSimulation: React.FC = () => {
       <ConfirmInfoRow label={t('approve')}>
         <Box>
           <Box display={Display.Flex}>
-            <Box display={Display.Inline} marginRight={1}>
+            <Box display={Display.Inline} marginInlineEnd={1}>
               <Text
                 backgroundColor={BackgroundColor.backgroundAlternative}
                 borderRadius={BorderRadius.XL}

From 873059abd714811d0aea2f084edad18d067d02c0 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 7 Jun 2024 19:36:49 +0530
Subject: [PATCH 25/31] update

---
 .../__snapshots__/permit-simulation.test.tsx.snap             | 4 ++--
 .../info/typed-sign/permit-simulation/permit-simulation.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
index 0d0acee722af..3e42bde34c11 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
           class="mm-box mm-box--display-flex"
         >
           <div
-            class="mm-box mm-box--margin-right-1 mm-box--display-inline"
+            class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline"
           >
             <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"
@@ -83,7 +83,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
               <p
                 class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
               >
-                0xCcCCc...ccccC
+                0xA0b86...6eB48
               </p>
             </div>
           </div>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index ec3bdffd2bcf..8b5882004779 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -33,7 +33,7 @@ const PermitSimulation: React.FC = () => {
     message: { value },
   } = JSON.parse(currentConfirmation?.msgParams?.data as string);
 
-  const exchangeRate = useTokenExchangeRate(verifyingContract);
+  const exchangeRate = useTokenExchangeRate('0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48');
 
   useEffect(() => {
     if (exchangeRate && value) {
@@ -67,7 +67,7 @@ const PermitSimulation: React.FC = () => {
                 {value}
               </Text>
             </Box>
-            <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
+            <Name value={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'} type={NameType.ETHEREUM_ADDRESS} />
           </Box>
           <Box>
             {fiatValue && <IndividualFiatDisplay fiatAmount={fiatValue} />}

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

---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index 8b5882004779..ec3bdffd2bcf 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -33,7 +33,7 @@ const PermitSimulation: React.FC = () => {
     message: { value },
   } = JSON.parse(currentConfirmation?.msgParams?.data as string);
 
-  const exchangeRate = useTokenExchangeRate('0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48');
+  const exchangeRate = useTokenExchangeRate(verifyingContract);
 
   useEffect(() => {
     if (exchangeRate && value) {
@@ -67,7 +67,7 @@ const PermitSimulation: React.FC = () => {
                 {value}
               </Text>
             </Box>
-            <Name value={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'} type={NameType.ETHEREUM_ADDRESS} />
+            <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
           </Box>
           <Box>
             {fiatValue && <IndividualFiatDisplay fiatAmount={fiatValue} />}

From 2b64f36cff4e608dfd033ff022ef686ca5181b0c Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 7 Jun 2024 20:13:06 +0530
Subject: [PATCH 27/31] update

---
 .../__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/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
index 3e42bde34c11..e96dce4d0201 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
               <p
                 class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
               >
-                0xA0b86...6eB48
+                0xCcCCc...ccccC
               </p>
             </div>
           </div>

From 89083dd6220f6c04b4c1b64cb2c74ba874935e91 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 11 Jun 2024 16:23:36 +0530
Subject: [PATCH 28/31] Update

---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index ec3bdffd2bcf..a0ccc5c66536 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -17,6 +17,7 @@ import {
   Display,
   TextAlign,
 } from '../../../../../../../helpers/constants/design-system';
+import { parseTypedDataMessage } from '../../../../../utils';
 import { SignatureRequestType } from '../../../../../types/confirm';
 import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
@@ -31,7 +32,8 @@ const PermitSimulation: React.FC = () => {
   const {
     domain: { verifyingContract },
     message: { value },
-  } = JSON.parse(currentConfirmation?.msgParams?.data as string);
+  } = parseTypedDataMessage(currentConfirmation.msgParams?.data as string);
+
 
   const exchangeRate = useTokenExchangeRate(verifyingContract);
 

From 5207569e126e9d03de563b7e37ab826c08c28d4f Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 11 Jun 2024 17:12:42 +0530
Subject: [PATCH 29/31] Update

---
 .../typed-sign/permit-simulation/permit-simulation.tsx    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index a0ccc5c66536..c52e82988f9f 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { NameType } from '@metamask/name-controller';
 
@@ -27,19 +27,17 @@ const PermitSimulation: React.FC = () => {
   const currentConfirmation = useSelector(
     currentConfirmationSelector,
   ) as SignatureRequestType;
-  const [fiatValue, setFiatValue] = useState<number>();
 
   const {
     domain: { verifyingContract },
     message: { value },
   } = parseTypedDataMessage(currentConfirmation.msgParams?.data as string);
 
-
   const exchangeRate = useTokenExchangeRate(verifyingContract);
 
-  useEffect(() => {
+  const fiatValue = useMemo(() => {
     if (exchangeRate && value) {
-      setFiatValue(exchangeRate.times(new Numeric(value, 10)).toNumber());
+      return exchangeRate.times(new Numeric(value, 10)).toNumber();
     }
   }, [exchangeRate, value]);
 

From 1adb2ffeaa34a9fb90f81cb1a9167818b18c7906 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 11 Jun 2024 18:57:05 +0530
Subject: [PATCH 30/31] Update

---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index c52e82988f9f..0ae82ccd68b7 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -34,7 +34,6 @@ const PermitSimulation: React.FC = () => {
   } = parseTypedDataMessage(currentConfirmation.msgParams?.data as string);
 
   const exchangeRate = useTokenExchangeRate(verifyingContract);
-
   const fiatValue = useMemo(() => {
     if (exchangeRate && value) {
       return exchangeRate.times(new Numeric(value, 10)).toNumber();

From 966267e2e17e74df08495895a2ccb666e316b8a7 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Tue, 11 Jun 2024 19:10:24 +0530
Subject: [PATCH 31/31] Update

---
 .../info/typed-sign/permit-simulation/permit-simulation.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index 0ae82ccd68b7..fe43dd17183a 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { NameType } from '@metamask/name-controller';
 
@@ -34,10 +34,12 @@ const PermitSimulation: React.FC = () => {
   } = parseTypedDataMessage(currentConfirmation.msgParams?.data as string);
 
   const exchangeRate = useTokenExchangeRate(verifyingContract);
+
   const fiatValue = useMemo(() => {
     if (exchangeRate && value) {
       return exchangeRate.times(new Numeric(value, 10)).toNumber();
     }
+    return undefined;
   }, [exchangeRate, value]);
 
   return (