diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index 86067ef1f117..88985e1a52a7 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -176,3 +176,41 @@ export const permitSignatureMsg = {
     origin: 'https://metamask.github.io',
   },
 } as SignatureRequestType;
+
+export const permitBatchSignatureMsg = {
+  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":{"PermitBatch":[{"name":"details","type":"PermitDetails[]"},{"name":"spender","type":"address"},{"name":"sigDeadline","type":"uint256"}],"PermitDetails":[{"name":"token","type":"address"},{"name":"amount","type":"uint160"},{"name":"expiration","type":"uint48"},{"name":"nonce","type":"uint48"}],"EIP712Domain":[{"name":"name","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}]},"domain":{"name":"Permit2","chainId":"1","verifyingContract":"0x000000000022d473030f116ddee9f6b43ac78ba3"},"primaryType":"PermitBatch","message":{"details":[{"token":"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48","amount":"1461501637330902918203684832716283019655932542975","expiration":"1722887542","nonce":"5"},{"token":"0xb0b86991c6218b36c1d19d4a2e9eb0ce3606eb48","amount":"2461501637330902918203684832716283019655932542975","expiration":"1722887642","nonce":"6"}],"spender":"0x3fc91a3afd70395cd496c647d5a6cc9d4b2b7fad","sigDeadline":"1720297342"}}',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    version: 'V4',
+    signatureMethod: 'eth_signTypedData_v4',
+    origin: 'https://metamask.github.io',
+  },
+} as SignatureRequestType;
+
+export const permitSingleSignatureMsg = {
+  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":{"PermitSingle":[{"name":"details","type":"PermitDetails"},{"name":"spender","type":"address"},{"name":"sigDeadline","type":"uint256"}],"PermitDetails":[{"name":"token","type":"address"},{"name":"amount","type":"uint160"},{"name":"expiration","type":"uint48"},{"name":"nonce","type":"uint48"}],"EIP712Domain":[{"name":"name","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}]},"domain":{"name":"Permit2","chainId":"1","verifyingContract":"0x000000000022d473030f116ddee9f6b43ac78ba3"},"primaryType":"PermitSingle","message":{"details":{"token":"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48","amount":"1461501637330902918203684832716283019655932542975","expiration":"1722887542","nonce":"5"},"spender":"0x3fc91a3afd70395cd496c647d5a6cc9d4b2b7fad","sigDeadline":"1720297342"}}',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    version: 'V4',
+    signatureMethod: 'eth_signTypedData_v4',
+    origin: 'https://metamask.github.io',
+  },
+} as SignatureRequestType;
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 ebe7d746b36f..7b20ba3e9ddc 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
@@ -65,51 +65,55 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
         style="margin-left: auto; max-width: 100%;"
       >
         <div
-          class="mm-box mm-box--display-flex"
+          class="mm-box"
         >
           <div
-            class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
           >
             <div
-              style="min-width: 0;"
+              class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
             >
               <div
-                aria-describedby="tippy-tooltip-9"
-                class=""
-                data-original-title="3,000"
-                data-tooltipped=""
-                style="display: inline;"
-                tabindex="0"
+                style="min-width: 0;"
               >
-                <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"
-                  data-testid="simulation-token-value"
-                  style="padding-top: 1px; padding-bottom: 1px;"
+                <div
+                  aria-describedby="tippy-tooltip-9"
+                  class=""
+                  data-original-title="3,000"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
                 >
-                  3,000
-                </p>
+                  <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"
+                    data-testid="simulation-token-value"
+                    style="padding-top: 1px; padding-bottom: 1px;"
+                  >
+                    3,000
+                  </p>
+                </div>
               </div>
             </div>
-          </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"
+            <div>
+              <div
+                class="name name__missing"
               >
-                0xCcCCc...ccccC
-              </p>
+                <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
-          class="mm-box"
-        />
       </div>
     </div>
   </div>
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 7e101a53d2f5..792adfd2975f 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
@@ -65,51 +65,55 @@ exports[`PermitSimulation renders component correctly 1`] = `
         style="margin-left: auto; max-width: 100%;"
       >
         <div
-          class="mm-box mm-box--display-flex"
+          class="mm-box"
         >
           <div
-            class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
           >
             <div
-              style="min-width: 0;"
+              class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
             >
               <div
-                aria-describedby="tippy-tooltip-2"
-                class=""
-                data-original-title="30"
-                data-tooltipped=""
-                style="display: inline;"
-                tabindex="0"
+                style="min-width: 0;"
               >
-                <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"
-                  data-testid="simulation-token-value"
-                  style="padding-top: 1px; padding-bottom: 1px;"
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="30"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
                 >
-                  30
-                </p>
+                  <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"
+                    data-testid="simulation-token-value"
+                    style="padding-top: 1px; padding-bottom: 1px;"
+                  >
+                    30
+                  </p>
+                </div>
               </div>
             </div>
-          </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"
+            <div>
+              <div
+                class="name name__missing"
               >
-                0xCcCCc...ccccC
-              </p>
+                <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
-          class="mm-box"
-        />
       </div>
     </div>
   </div>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx
index bb86010ce07a..46c3212fb997 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 
+import { act } from 'react-dom/test-utils';
 import { getMockTypedSignConfirmStateForRequest } from '../../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import { permitSignatureMsg } from '../../../../../../../../test/data/confirmations/typed_sign';
 import PermitSimulation from './permit-simulation';
 
+jest.mock('../../../../../../../store/actions', () => {
+  return {
+    getTokenStandardAndDetails: jest.fn().mockResolvedValue({ decimals: 2 }),
+  };
+});
+
 describe('PermitSimulation', () => {
-  it('renders component correctly', () => {
+  it('renders component correctly', async () => {
     const state = getMockTypedSignConfirmStateForRequest(permitSignatureMsg);
     const mockStore = configureMockStore([])(state);
-    const { container } = renderWithConfirmContextProvider(
-      <PermitSimulation tokenDecimals={2} />,
-      mockStore,
-    );
-    expect(container).toMatchSnapshot();
+
+    await act(async () => {
+      const { container, findByText } = renderWithConfirmContextProvider(
+        <PermitSimulation />,
+        mockStore,
+      );
+
+      expect(await findByText('30')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
   });
 });
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 b1551b2def14..98f41f72dda9 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,65 +1,56 @@
-import { NameType } from '@metamask/name-controller';
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
+import { Box } from '../../../../../../../components/component-library';
+import { PrimaryType } from '../../../../../../../../shared/constants/signatures';
 import { parseTypedDataMessage } from '../../../../../../../../shared/modules/transaction.utils';
-import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
-import Name from '../../../../../../../components/app/name/name';
-import { Box, Text } from '../../../../../../../components/component-library';
-import Tooltip from '../../../../../../../components/ui/tooltip';
 import {
-  BackgroundColor,
-  BlockSize,
-  BorderRadius,
   Display,
-  TextAlign,
+  FlexDirection,
 } from '../../../../../../../helpers/constants/design-system';
-import { shortenString } from '../../../../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { SignatureRequestType } from '../../../../../types/confirm';
 import { useConfirmContext } from '../../../../../context/confirm';
-import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
-import {
-  formatAmount,
-  formatAmountMaxPrecision,
-} from '../../../../simulation-details/formatAmount';
 import StaticSimulation from '../../shared/static-simulation/static-simulation';
+import PermitSimulationValueDisplay from './value-display/value-display';
+
+function extractTokenDetailsByPrimaryType(
+  message: Record<string, unknown>,
+  primaryType: PrimaryType,
+): object[] | unknown {
+  let tokenDetails;
+
+  switch (primaryType) {
+    case PrimaryType.PermitBatch:
+    case PrimaryType.PermitSingle:
+      tokenDetails = message?.details;
+      break;
+    case PrimaryType.PermitBatchTransferFrom:
+    case PrimaryType.PermitTransferFrom:
+      tokenDetails = message?.permitted;
+      break;
+    default:
+      break;
+  }
+
+  const isNonArrayObject = tokenDetails && !Array.isArray(tokenDetails);
+
+  return isNonArrayObject ? [tokenDetails] : tokenDetails;
+}
 
-const PermitSimulation: React.FC<{
-  tokenDecimals: number;
-}> = ({ tokenDecimals }) => {
+const PermitSimulation: React.FC<object> = () => {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext() as {
     currentConfirmation: SignatureRequestType;
   };
 
+  const msgData = currentConfirmation.msgParams?.data;
   const {
     domain: { verifyingContract },
-    message: { value },
-  } = parseTypedDataMessage(currentConfirmation.msgParams?.data as string);
+    message,
+    primaryType,
+  } = parseTypedDataMessage(msgData as string);
 
-  const exchangeRate = useTokenExchangeRate(verifyingContract);
-
-  const fiatValue = useMemo(() => {
-    if (exchangeRate && value) {
-      const tokenAmount = calcTokenAmount(value, tokenDecimals);
-      return exchangeRate.times(tokenAmount).toNumber();
-    }
-    return undefined;
-  }, [exchangeRate, value]);
-
-  const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
-    if (!value) {
-      return { tokenValue: null, tokenValueMaxPrecision: null };
-    }
-
-    const tokenAmount = calcTokenAmount(value, tokenDecimals);
-
-    return {
-      tokenValue: formatAmount('en-US', tokenAmount),
-      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
-    };
-  }, [tokenDecimals, value]);
+  const tokenDetails = extractTokenDetailsByPrimaryType(message, primaryType);
 
   return (
     <StaticSimulation
@@ -68,44 +59,32 @@ const PermitSimulation: React.FC<{
       description={t('permitSimulationDetailInfo')}
       simulationHeading={t('spendingCap')}
       simulationElements={
-        <>
-          <Box display={Display.Flex}>
-            <Box
-              display={Display.Inline}
-              marginInlineEnd={1}
-              minWidth={BlockSize.Zero}
-            >
-              <Tooltip
-                position="bottom"
-                title={tokenValueMaxPrecision}
-                wrapperStyle={{ minWidth: 0 }}
-                interactive
-              >
-                <Text
-                  data-testid="simulation-token-value"
-                  backgroundColor={BackgroundColor.backgroundAlternative}
-                  borderRadius={BorderRadius.XL}
-                  paddingInline={2}
-                  style={{ paddingTop: '1px', paddingBottom: '1px' }}
-                  textAlign={TextAlign.Center}
-                >
-                  {shortenString(tokenValue || '', {
-                    truncatedCharLimit: 15,
-                    truncatedStartChars: 15,
-                    truncatedEndChars: 0,
-                    skipCharacterInEnd: true,
-                  })}
-                </Text>
-              </Tooltip>
-            </Box>
-            <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
-          </Box>
-          <Box>
-            {fiatValue && (
-              <IndividualFiatDisplay fiatAmount={fiatValue} shorten />
+        Array.isArray(tokenDetails) ? (
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            gap={2}
+          >
+            {tokenDetails.map(
+              (
+                { token, amount }: { token: string; amount: string },
+                i: number,
+              ) => (
+                <PermitSimulationValueDisplay
+                  key={`${token}-${i}`}
+                  primaryType={primaryType}
+                  tokenContract={token}
+                  value={amount}
+                />
+              ),
             )}
           </Box>
-        </>
+        ) : (
+          <PermitSimulationValueDisplay
+            tokenContract={verifyingContract}
+            value={message.value}
+          />
+        )
       }
     />
   );
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/__snapshots__/value-display.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/__snapshots__/value-display.test.tsx.snap
new file mode 100644
index 000000000000..022ff8b6dbc2
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/__snapshots__/value-display.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PermitSimulationValueDisplay renders component correctly 1`] = `
+<div>
+  <div
+    class="mm-box"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+    >
+      <div
+        class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+      >
+        <div
+          style="min-width: 0;"
+        >
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="0.4321"
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <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"
+              data-testid="simulation-token-value"
+              style="padding-top: 1px; padding-bottom: 1px;"
+            >
+              0.432
+            </p>
+          </div>
+        </div>
+      </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"
+          >
+            0xA0b86...6eB48
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx
new file mode 100644
index 000000000000..f6af7357502d
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import configureMockStore from 'redux-mock-store';
+
+import mockState from '../../../../../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../../../../../test/lib/render-helpers';
+import PermitSimulationValueDisplay from './value-display';
+
+jest.mock('../../../../../../../../store/actions', () => {
+  return {
+    getTokenStandardAndDetails: jest.fn().mockResolvedValue({ decimals: 4 }),
+  };
+});
+
+describe('PermitSimulationValueDisplay', () => {
+  it('renders component correctly', async () => {
+    const mockStore = configureMockStore([])(mockState);
+
+    await act(async () => {
+      const { container, findByText } = renderWithProvider(
+        <PermitSimulationValueDisplay
+          tokenContract="0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
+          value="4321"
+        />,
+        mockStore,
+      );
+
+      expect(await findByText('0.432')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx
new file mode 100644
index 000000000000..d0cd9c529d0e
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx
@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { NameType } from '@metamask/name-controller';
+import { captureException } from '@sentry/browser';
+import { getTokenStandardAndDetails } from '../../../../../../../../store/actions';
+import { shortenString } from '../../../../../../../../helpers/utils/util';
+
+import { calcTokenAmount } from '../../../../../../../../../shared/lib/transactions-controller-utils';
+import useTokenExchangeRate from '../../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
+import { IndividualFiatDisplay } from '../../../../../simulation-details/fiat-display';
+import {
+  formatAmount,
+  formatAmountMaxPrecision,
+} from '../../../../../simulation-details/formatAmount';
+import { useAsyncResult } from '../../../../../../../../hooks/useAsyncResult';
+
+import {
+  Box,
+  Text,
+} from '../../../../../../../../components/component-library';
+import Tooltip from '../../../../../../../../components/ui/tooltip';
+import {
+  BackgroundColor,
+  BlockSize,
+  BorderRadius,
+  Display,
+  JustifyContent,
+  TextAlign,
+} from '../../../../../../../../helpers/constants/design-system';
+import Name from '../../../../../../../../components/app/name/name';
+
+const getTokenDecimals = async (tokenContract: string) => {
+  const tokenDetails = await getTokenStandardAndDetails(tokenContract);
+  const tokenDecimals = tokenDetails?.decimals;
+
+  return parseInt(tokenDecimals ?? '0', 10);
+};
+
+const PermitSimulationValueDisplay: React.FC<{
+  primaryType?: string;
+  tokenContract: string;
+  value: number | string;
+}> = ({ primaryType, tokenContract, value }) => {
+  const exchangeRate = useTokenExchangeRate(tokenContract);
+
+  const { value: tokenDecimals } = useAsyncResult(
+    async () => await getTokenDecimals(tokenContract),
+    [tokenContract],
+  );
+
+  const fiatValue = useMemo(() => {
+    if (exchangeRate && value) {
+      const tokenAmount = calcTokenAmount(value, tokenDecimals);
+      return exchangeRate.times(tokenAmount).toNumber();
+    }
+    return undefined;
+  }, [exchangeRate, tokenDecimals, value]);
+
+  const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
+    if (!value) {
+      return { tokenValue: null, tokenValueMaxPrecision: null };
+    }
+
+    const tokenAmount = calcTokenAmount(value, tokenDecimals);
+
+    return {
+      tokenValue: formatAmount('en-US', tokenAmount),
+      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
+    };
+  }, [tokenDecimals, value]);
+
+  /** Temporary error capturing as we are building out Permit Simulations */
+  if (!tokenContract) {
+    captureException(
+      new Error(
+        `PermitSimulationValueDisplay: Token contract address is missing where primaryType === ${primaryType}`,
+      ),
+    );
+    return null;
+  }
+
+  return (
+    <Box>
+      <Box display={Display.Flex} justifyContent={JustifyContent.flexEnd}>
+        <Box
+          display={Display.Inline}
+          marginInlineEnd={1}
+          minWidth={BlockSize.Zero}
+        >
+          <Tooltip
+            position="bottom"
+            title={tokenValueMaxPrecision}
+            wrapperStyle={{ minWidth: 0 }}
+            interactive
+          >
+            <Text
+              data-testid="simulation-token-value"
+              backgroundColor={BackgroundColor.backgroundAlternative}
+              borderRadius={BorderRadius.XL}
+              paddingInline={2}
+              style={{ paddingTop: '1px', paddingBottom: '1px' }}
+              textAlign={TextAlign.Center}
+            >
+              {shortenString(tokenValue || '', {
+                truncatedCharLimit: 15,
+                truncatedStartChars: 15,
+                truncatedEndChars: 0,
+                skipCharacterInEnd: true,
+              })}
+            </Text>
+          </Tooltip>
+        </Box>
+        <Name value={tokenContract} type={NameType.ETHEREUM_ADDRESS} />
+      </Box>
+      <Box>
+        {fiatValue && <IndividualFiatDisplay fiatAmount={fiatValue} shorten />}
+      </Box>
+    </Box>
+  );
+};
+
+export default PermitSimulationValueDisplay;
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 a0a64e3956ec..88d9d93a32ef 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
@@ -60,9 +60,7 @@ const TypedSignInfo: React.FC = () => {
 
   return (
     <>
-      {isPermit && useTransactionSimulations && (
-        <PermitSimulation tokenDecimals={decimals} />
-      )}
+      {isPermit && useTransactionSimulations && <PermitSimulation />}
       <ConfirmInfoSection>
         {isPermit && (
           <>
diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx
index 2b38ccee5663..f728b9d5dfa9 100644
--- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx
+++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx
@@ -73,12 +73,10 @@ const getTokenDecimalsOfDataTree = async (
     return undefined;
   }
 
-  const decimals = parseInt(
-    (await getTokenStandardAndDetails(tokenContract))?.decimals ?? '0',
-    10,
-  );
+  const tokenDetails = await getTokenStandardAndDetails(tokenContract);
+  const tokenDecimals = tokenDetails?.decimals;
 
-  return decimals;
+  return parseInt(tokenDecimals ?? '0', 10);
 };
 
 export const DataTree = ({
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 82859fd5c17f..a90c43d7d783 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -1,6 +1,203 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
+<div>
+  <div
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+  >
+    <div
+      class="mm-box multichain-page__inner-container confirm_wrapper mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
+    >
+      <div
+        class="mm-box confirm_header__wrapper mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+        data-testid="confirm-header"
+      >
+        <div
+          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-start"
+        >
+          <div
+            class="mm-box mm-box--margin-top-2 mm-box--display-flex"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="identicon"
+                style="height: 32px; width: 32px; border-radius: 16px;"
+              />
+            </div>
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network 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"
+            >
+              <img
+                alt="Chain 5 logo"
+                class="mm-avatar-network__network-image"
+                src=""
+              />
+            </div>
+          </div>
+          <div
+            class="mm-box mm-box--margin-inline-start-4"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
+              data-testid="header-account-name"
+            >
+              Test Account
+            </p>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+              data-testid="header-network-display-name"
+            >
+              Chain 5
+            </p>
+          </div>
+        </div>
+        <div
+          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-end"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+            style="align-self: flex-end;"
+          >
+            <div>
+              <div
+                aria-describedby="tippy-tooltip-7"
+                class=""
+                data-original-title="Account details"
+                data-tooltipped=""
+                style="display: inline;"
+                tabindex="0"
+              >
+                <button
+                  aria-label="Account details"
+                  class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                  data-testid="header-info__account-details-button"
+                >
+                  <span
+                    class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+        style="min-height: 0; overflow: hidden; position: relative;"
+      >
+        <div
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
+          style="overflow: auto;"
+        >
+          <h2
+            class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
+          >
+            Signature request
+          </h2>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
+          >
+            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"
+          >
+            <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; position: relative; background: transparent;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Request from
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-8"
+                    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
+                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"
+                >
+                  metamask.github.io
+                </p>
+              </div>
+            </div>
+          </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; position: relative; background: transparent;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Message
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                  style="white-space: pre-wrap;"
+                >
+                  Example \`personal_sign\` message
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box multichain-page-footer confirm-footer_page-footer mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--width-full"
+      >
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+          data-testid="confirm-footer-cancel-button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          data-testid="confirm-footer-button"
+        >
+          Confirm
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitBatch 1`] = `
 <div>
   <div
     class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
@@ -26,7 +223,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                 style="height: 32px; width: 32px; border-radius: 16px;"
               >
                 <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
                 >
                   <svg
                     height="32"
@@ -35,25 +232,25 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                     y="0"
                   >
                     <rect
-                      fill="#18CDF2"
+                      fill="#017B8E"
                       height="32"
-                      transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
+                      transform="translate(0.7994460693567097 -0.8216011156969824) rotate(317.9 16 16)"
                       width="32"
                       x="0"
                       y="0"
                     />
                     <rect
-                      fill="#035E56"
+                      fill="#F2B602"
                       height="32"
-                      transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
+                      transform="translate(-7.493396036912253 11.409935428284795) rotate(134.1 16 16)"
                       width="32"
                       x="0"
                       y="0"
                     />
                     <rect
-                      fill="#F26602"
+                      fill="#FA8E00"
                       height="32"
-                      transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
+                      transform="translate(-25.712272690754798 -11.558881043268883) rotate(364.0 16 16)"
                       width="32"
                       x="0"
                       y="0"
@@ -74,9 +271,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
             <p
               class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
               data-testid="header-account-name"
-            >
-              Test Account
-            </p>
+            />
             <p
               class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
               data-testid="header-network-display-name"
@@ -94,7 +289,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-7"
+                aria-describedby="tippy-tooltip-18"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -127,34 +322,35 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
           <h2
             class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
           >
-            Signature request
+            Spending cap request
           </h2>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
           >
-            Only confirm this message if you approve the content and trust the requesting site.
+            This site wants permission to spend your tokens.
           </p>
           <div
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+            data-testid="confirmation__simulation_section"
           >
             <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; position: relative; background: transparent;"
+              style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <div
-                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
                 style="align-items: center;"
               >
                 <p
                   class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                 >
-                  Request from
+                  Estimated changes
                 </p>
                 <div>
                   <div
-                    aria-describedby="tippy-tooltip-8"
+                    aria-describedby="tippy-tooltip-19"
                     class=""
-                    data-original-title="This is the site asking for your signature."
+                    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"
@@ -166,44 +362,1658 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                   </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"
-                >
-                  metamask.github.io
-                </p>
-              </div>
-            </div>
-          </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; position: relative; background: transparent;"
-            >
-              <div
-                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
-                style="align-items: center;"
-              >
-                <p
-                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-                >
-                  Message
-                </p>
-              </div>
-              <div
-                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
-              >
-                <p
-                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-                  style="white-space: pre-wrap;"
-                >
-                  Example \`personal_sign\` message
-                </p>
-              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                  style="white-space: pre-wrap;"
+                >
+                  You're giving the spender permission to spend this many tokens from your account.
+                </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Spending cap
+                </p>
+              </div>
+              <div
+                class="mm-box"
+                style="margin-left: auto; max-width: 100%;"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+                >
+                  <div
+                    class="mm-box"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+                    >
+                      <div
+                        class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+                      >
+                        <div
+                          style="min-width: 0;"
+                        >
+                          <div
+                            aria-describedby="tippy-tooltip-20"
+                            class=""
+                            data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                            data-tooltipped=""
+                            style="display: inline;"
+                            tabindex="0"
+                          >
+                            <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"
+                              data-testid="simulation-token-value"
+                              style="padding-top: 1px; padding-bottom: 1px;"
+                            >
+                              14,615,016,373,...
+                            </p>
+                          </div>
+                        </div>
+                      </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"
+                          >
+                            0xA0b86...6eB48
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box"
+                    />
+                  </div>
+                  <div
+                    class="mm-box"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+                    >
+                      <div
+                        class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+                      >
+                        <div
+                          style="min-width: 0;"
+                        >
+                          <div
+                            aria-describedby="tippy-tooltip-21"
+                            class=""
+                            data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                            data-tooltipped=""
+                            style="display: inline;"
+                            tabindex="0"
+                          >
+                            <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"
+                              data-testid="simulation-token-value"
+                              style="padding-top: 1px; padding-bottom: 1px;"
+                            >
+                              24,615,016,373,...
+                            </p>
+                          </div>
+                        </div>
+                      </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"
+                          >
+                            0xb0B86...6EB48
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Spender
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                >
+                  <div
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  >
+                    <div
+                      class="mm-avatar-account__jazzicon"
+                    >
+                      <div
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(250, 171, 0);"
+                      >
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
+                        >
+                          <rect
+                            fill="#F97501"
+                            height="16"
+                            transform="translate(-0.4639690285287676 0.7692104848269922) rotate(259.7 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#016B8E"
+                            height="16"
+                            transform="translate(1.653484652652331 -5.548430987829864) rotate(421.5 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F1F500"
+                            height="16"
+                            transform="translate(-6.169291543190866 12.666493418609923) rotate(157.6 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"
+                  >
+                    0x3fC91...b7FAD
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              style="height: 1px; margin-left: -8px; margin-right: -8px;"
+            />
+            <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; position: relative; background: transparent;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Request from
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-22"
+                    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
+                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"
+                >
+                  metamask.github.io
+                </p>
+              </div>
+            </div>
+            <div
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="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-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                >
+                  <div
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  >
+                    <div
+                      class="mm-avatar-account__jazzicon"
+                    >
+                      <div
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(24, 151, 242);"
+                      >
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
+                        >
+                          <rect
+                            fill="#2362E1"
+                            height="16"
+                            transform="translate(1.7946650923962586 -2.667155311616761) rotate(458.4 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F94301"
+                            height="16"
+                            transform="translate(-7.681729644825104 3.9961758177433153) rotate(268.8 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#FA7900"
+                            height="16"
+                            transform="translate(-4.538127039650711 14.740007940341687) rotate(117.3 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"
+                  >
+                    0x00000...78BA3
+                  </p>
+                </div>
+              </div>
+            </div>
+          </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Message
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--width-full"
+              >
+                <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; position: relative; padding-left: 0px; padding-right: 0px;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                    style="align-items: center;"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                    >
+                      Primary type:
+                    </p>
+                  </div>
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                      style="white-space: pre-wrap;"
+                    >
+                      PermitBatch
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="mm-box"
+                  style="margin-left: -8px;"
+                >
+                  <div
+                    class="mm-box mm-box--width-full"
+                  >
+                    <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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          Details:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--width-full"
+                      >
+                        <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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              0:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--width-full"
+                          >
+                            <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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Token:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                              >
+                                <div
+                                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                                >
+                                  <div
+                                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                                  >
+                                    <div
+                                      class="mm-avatar-account__jazzicon"
+                                    >
+                                      <div
+                                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(35, 124, 225);"
+                                      >
+                                        <svg
+                                          height="16"
+                                          width="16"
+                                          x="0"
+                                          y="0"
+                                        >
+                                          <rect
+                                            fill="#FB187B"
+                                            height="16"
+                                            transform="translate(3.8100676953926382 3.4723575209208692) rotate(98.5 8 8)"
+                                            width="16"
+                                            x="0"
+                                            y="0"
+                                          />
+                                          <rect
+                                            fill="#F92201"
+                                            height="16"
+                                            transform="translate(5.903493767252668 2.0945083894948926) rotate(140.6 8 8)"
+                                            width="16"
+                                            x="0"
+                                            y="0"
+                                          />
+                                          <rect
+                                            fill="#18B4F2"
+                                            height="16"
+                                            transform="translate(-13.139097679566314 -1.7108982241573079) rotate(313.4 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"
+                                  >
+                                    0xA0b86...6eB48
+                                  </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Amount:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                              >
+                                <div
+                                  style="min-width: 0;"
+                                >
+                                  <div
+                                    aria-describedby="tippy-tooltip-23"
+                                    class=""
+                                    data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                                    data-tooltipped=""
+                                    style="display: inline;"
+                                    tabindex="0"
+                                  >
+                                    <p
+                                      class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                      style="white-space: pre-wrap;"
+                                    >
+                                      14,615,016,373,...
+                                    </p>
+                                  </div>
+                                </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Expiration:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                  style="white-space: pre-wrap;"
+                                >
+                                  20 January 1970, 22:34
+                                </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Nonce:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                  style="white-space: pre-wrap;"
+                                >
+                                  5
+                                </p>
+                              </div>
+                            </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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              1:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--width-full"
+                          >
+                            <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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Token:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                              >
+                                <div
+                                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                                >
+                                  <div
+                                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                                  >
+                                    <div
+                                      class="mm-avatar-account__jazzicon"
+                                    >
+                                      <div
+                                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(3, 94, 94);"
+                                      >
+                                        <svg
+                                          height="16"
+                                          width="16"
+                                          x="0"
+                                          y="0"
+                                        >
+                                          <rect
+                                            fill="#C81468"
+                                            height="16"
+                                            transform="translate(-1.5127527887964 0.9511009934256442) rotate(236.2 8 8)"
+                                            width="16"
+                                            x="0"
+                                            y="0"
+                                          />
+                                          <rect
+                                            fill="#18BBF2"
+                                            height="16"
+                                            transform="translate(5.9580176948825105 6.48589056481565) rotate(75.4 8 8)"
+                                            width="16"
+                                            x="0"
+                                            y="0"
+                                          />
+                                          <rect
+                                            fill="#FB1882"
+                                            height="16"
+                                            transform="translate(-12.511060864742012 -2.4801256168250254) rotate(304.7 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"
+                                  >
+                                    0xb0B86...6EB48
+                                  </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Amount:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                              >
+                                <div
+                                  style="min-width: 0;"
+                                >
+                                  <div
+                                    aria-describedby="tippy-tooltip-24"
+                                    class=""
+                                    data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                                    data-tooltipped=""
+                                    style="display: inline;"
+                                    tabindex="0"
+                                  >
+                                    <p
+                                      class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                      style="white-space: pre-wrap;"
+                                    >
+                                      24,615,016,373,...
+                                    </p>
+                                  </div>
+                                </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Expiration:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                  style="white-space: pre-wrap;"
+                                >
+                                  20 January 1970, 22:34
+                                </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; position: relative; padding-right: 0px;"
+                            >
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                                style="align-items: center;"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                                >
+                                  Nonce:
+                                </p>
+                              </div>
+                              <div
+                                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                  style="white-space: pre-wrap;"
+                                >
+                                  6
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          Spender:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                      >
+                        <div
+                          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                        >
+                          <div
+                            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                          >
+                            <div
+                              class="mm-avatar-account__jazzicon"
+                            >
+                              <div
+                                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(250, 171, 0);"
+                              >
+                                <svg
+                                  height="16"
+                                  width="16"
+                                  x="0"
+                                  y="0"
+                                >
+                                  <rect
+                                    fill="#F97501"
+                                    height="16"
+                                    transform="translate(-0.4639690285287676 0.7692104848269922) rotate(259.7 8 8)"
+                                    width="16"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <rect
+                                    fill="#016B8E"
+                                    height="16"
+                                    transform="translate(1.653484652652331 -5.548430987829864) rotate(421.5 8 8)"
+                                    width="16"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <rect
+                                    fill="#F1F500"
+                                    height="16"
+                                    transform="translate(-6.169291543190866 12.666493418609923) rotate(157.6 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"
+                          >
+                            0x3fC91...b7FAD
+                          </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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          SigDeadline:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                          style="white-space: pre-wrap;"
+                        >
+                          20 January 1970, 21:51
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box multichain-page-footer confirm-footer_page-footer mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--width-full"
+      >
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+          data-testid="confirm-footer-cancel-button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          data-testid="confirm-footer-button"
+        >
+          Confirm
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitSingle 1`] = `
+<div>
+  <div
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+  >
+    <div
+      class="mm-box multichain-page__inner-container confirm_wrapper mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
+    >
+      <div
+        class="mm-box confirm_header__wrapper mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+        data-testid="confirm-header"
+      >
+        <div
+          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-start"
+        >
+          <div
+            class="mm-box mm-box--margin-top-2 mm-box--display-flex"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="identicon"
+                style="height: 32px; width: 32px; border-radius: 16px;"
+              >
+                <div
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
+                >
+                  <svg
+                    height="32"
+                    width="32"
+                    x="0"
+                    y="0"
+                  >
+                    <rect
+                      fill="#017B8E"
+                      height="32"
+                      transform="translate(0.7994460693567097 -0.8216011156969824) rotate(317.9 16 16)"
+                      width="32"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F2B602"
+                      height="32"
+                      transform="translate(-7.493396036912253 11.409935428284795) rotate(134.1 16 16)"
+                      width="32"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#FA8E00"
+                      height="32"
+                      transform="translate(-25.712272690754798 -11.558881043268883) rotate(364.0 16 16)"
+                      width="32"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network 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"
+            >
+              C
+            </div>
+          </div>
+          <div
+            class="mm-box mm-box--margin-inline-start-4"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
+              data-testid="header-account-name"
+            />
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+              data-testid="header-network-display-name"
+            >
+              Chain 5
+            </p>
+          </div>
+        </div>
+        <div
+          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-end"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+            style="align-self: flex-end;"
+          >
+            <div>
+              <div
+                aria-describedby="tippy-tooltip-13"
+                class=""
+                data-original-title="Account details"
+                data-tooltipped=""
+                style="display: inline;"
+                tabindex="0"
+              >
+                <button
+                  aria-label="Account details"
+                  class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                  data-testid="header-info__account-details-button"
+                >
+                  <span
+                    class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+        style="min-height: 0; overflow: hidden; position: relative;"
+      >
+        <div
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
+          style="overflow: auto;"
+        >
+          <h2
+            class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
+          >
+            Spending cap request
+          </h2>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
+          >
+            This site wants permission to spend your tokens.
+          </p>
+          <div
+            class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+            data-testid="confirmation__simulation_section"
+          >
+            <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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="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-14"
+                    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 mm-box--min-width-0"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                  style="white-space: pre-wrap;"
+                >
+                  You're giving the spender permission to spend this many tokens from your account.
+                </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Spending cap
+                </p>
+              </div>
+              <div
+                class="mm-box"
+                style="margin-left: auto; max-width: 100%;"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+                >
+                  <div
+                    class="mm-box"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+                    >
+                      <div
+                        class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+                      >
+                        <div
+                          style="min-width: 0;"
+                        >
+                          <div
+                            aria-describedby="tippy-tooltip-15"
+                            class=""
+                            data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                            data-tooltipped=""
+                            style="display: inline;"
+                            tabindex="0"
+                          >
+                            <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"
+                              data-testid="simulation-token-value"
+                              style="padding-top: 1px; padding-bottom: 1px;"
+                            >
+                              14,615,016,373,...
+                            </p>
+                          </div>
+                        </div>
+                      </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"
+                          >
+                            0xA0b86...6eB48
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Spender
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                >
+                  <div
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  >
+                    <div
+                      class="mm-avatar-account__jazzicon"
+                    >
+                      <div
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(250, 171, 0);"
+                      >
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
+                        >
+                          <rect
+                            fill="#F97501"
+                            height="16"
+                            transform="translate(-0.4639690285287676 0.7692104848269922) rotate(259.7 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#016B8E"
+                            height="16"
+                            transform="translate(1.653484652652331 -5.548430987829864) rotate(421.5 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F1F500"
+                            height="16"
+                            transform="translate(-6.169291543190866 12.666493418609923) rotate(157.6 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"
+                  >
+                    0x3fC91...b7FAD
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              style="height: 1px; margin-left: -8px; margin-right: -8px;"
+            />
+            <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; position: relative; background: transparent;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Request from
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-16"
+                    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
+                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"
+                >
+                  metamask.github.io
+                </p>
+              </div>
+            </div>
+            <div
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="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-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                >
+                  <div
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  >
+                    <div
+                      class="mm-avatar-account__jazzicon"
+                    >
+                      <div
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(24, 151, 242);"
+                      >
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
+                        >
+                          <rect
+                            fill="#2362E1"
+                            height="16"
+                            transform="translate(1.7946650923962586 -2.667155311616761) rotate(458.4 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F94301"
+                            height="16"
+                            transform="translate(-7.681729644825104 3.9961758177433153) rotate(268.8 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#FA7900"
+                            height="16"
+                            transform="translate(-4.538127039650711 14.740007940341687) rotate(117.3 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"
+                  >
+                    0x00000...78BA3
+                  </p>
+                </div>
+              </div>
+            </div>
+          </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; position: relative;"
+            >
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                style="align-items: center;"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                >
+                  Message
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--width-full"
+              >
+                <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; position: relative; padding-left: 0px; padding-right: 0px;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                    style="align-items: center;"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                    >
+                      Primary type:
+                    </p>
+                  </div>
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                      style="white-space: pre-wrap;"
+                    >
+                      PermitSingle
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="mm-box"
+                  style="margin-left: -8px;"
+                >
+                  <div
+                    class="mm-box mm-box--width-full"
+                  >
+                    <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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          Details:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--width-full"
+                      >
+                        <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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              Token:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                          >
+                            <div
+                              class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                            >
+                              <div
+                                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                              >
+                                <div
+                                  class="mm-avatar-account__jazzicon"
+                                >
+                                  <div
+                                    style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(35, 124, 225);"
+                                  >
+                                    <svg
+                                      height="16"
+                                      width="16"
+                                      x="0"
+                                      y="0"
+                                    >
+                                      <rect
+                                        fill="#FB187B"
+                                        height="16"
+                                        transform="translate(3.8100676953926382 3.4723575209208692) rotate(98.5 8 8)"
+                                        width="16"
+                                        x="0"
+                                        y="0"
+                                      />
+                                      <rect
+                                        fill="#F92201"
+                                        height="16"
+                                        transform="translate(5.903493767252668 2.0945083894948926) rotate(140.6 8 8)"
+                                        width="16"
+                                        x="0"
+                                        y="0"
+                                      />
+                                      <rect
+                                        fill="#18B4F2"
+                                        height="16"
+                                        transform="translate(-13.139097679566314 -1.7108982241573079) rotate(313.4 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"
+                              >
+                                0xA0b86...6eB48
+                              </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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              Amount:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                          >
+                            <div
+                              style="min-width: 0;"
+                            >
+                              <div
+                                aria-describedby="tippy-tooltip-17"
+                                class=""
+                                data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
+                                data-tooltipped=""
+                                style="display: inline;"
+                                tabindex="0"
+                              >
+                                <p
+                                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                                  style="white-space: pre-wrap;"
+                                >
+                                  14,615,016,373,...
+                                </p>
+                              </div>
+                            </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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              Expiration:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                              style="white-space: pre-wrap;"
+                            >
+                              20 January 1970, 22:34
+                            </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; position: relative; padding-right: 0px;"
+                        >
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                            style="align-items: center;"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                            >
+                              Nonce:
+                            </p>
+                          </div>
+                          <div
+                            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+                          >
+                            <p
+                              class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                              style="white-space: pre-wrap;"
+                            >
+                              5
+                            </p>
+                          </div>
+                        </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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          Spender:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                      >
+                        <div
+                          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                        >
+                          <div
+                            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                          >
+                            <div
+                              class="mm-avatar-account__jazzicon"
+                            >
+                              <div
+                                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(250, 171, 0);"
+                              >
+                                <svg
+                                  height="16"
+                                  width="16"
+                                  x="0"
+                                  y="0"
+                                >
+                                  <rect
+                                    fill="#F97501"
+                                    height="16"
+                                    transform="translate(-0.4639690285287676 0.7692104848269922) rotate(259.7 8 8)"
+                                    width="16"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <rect
+                                    fill="#016B8E"
+                                    height="16"
+                                    transform="translate(1.653484652652331 -5.548430987829864) rotate(421.5 8 8)"
+                                    width="16"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <rect
+                                    fill="#F1F500"
+                                    height="16"
+                                    transform="translate(-6.169291543190866 12.666493418609923) rotate(157.6 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"
+                          >
+                            0x3fC91...b7FAD
+                          </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; position: relative; padding-right: 0px;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                        style="align-items: center;"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                        >
+                          SigDeadline:
+                        </p>
+                      </div>
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                          style="white-space: pre-wrap;"
+                        >
+                          20 January 1970, 21:51
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -253,48 +2063,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
               <div
                 class="identicon"
                 style="height: 32px; width: 32px; border-radius: 16px;"
-              >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
-                >
-                  <svg
-                    height="32"
-                    width="32"
-                    x="0"
-                    y="0"
-                  >
-                    <rect
-                      fill="#18CDF2"
-                      height="32"
-                      transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
-                      width="32"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#035E56"
-                      height="32"
-                      transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
-                      width="32"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26602"
-                      height="32"
-                      transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
-                      width="32"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
-              </div>
+              />
             </div>
             <div
               class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network 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"
             >
-              C
+              <img
+                alt="Chain 5 logo"
+                class="mm-avatar-network__network-image"
+                src=""
+              />
             </div>
           </div>
           <div
@@ -430,43 +2208,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                   >
                     <div
                       class="mm-avatar-account__jazzicon"
-                    >
-                      <div
-                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
-                      >
-                        <svg
-                          height="16"
-                          width="16"
-                          x="0"
-                          y="0"
-                        >
-                          <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"
@@ -639,43 +2381,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                   >
                                     <div
                                       class="mm-avatar-account__jazzicon"
-                                    >
-                                      <div
-                                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(35, 98, 225);"
-                                      >
-                                        <svg
-                                          height="16"
-                                          width="16"
-                                          x="0"
-                                          y="0"
-                                        >
-                                          <rect
-                                            fill="#FA7900"
-                                            height="16"
-                                            transform="translate(-0.1251869550000172 -0.18581992328639055) rotate(237.8 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#034F5E"
-                                            height="16"
-                                            transform="translate(5.484089776243406 -5.806818790918918) rotate(321.2 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#FB185C"
-                                            height="16"
-                                            transform="translate(4.337646399293827 10.83159092527544) rotate(190.8 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"
@@ -711,43 +2417,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                   >
                                     <div
                                       class="mm-avatar-account__jazzicon"
-                                    >
-                                      <div
-                                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(24, 183, 242);"
-                                      >
-                                        <svg
-                                          height="16"
-                                          width="16"
-                                          x="0"
-                                          y="0"
-                                        >
-                                          <rect
-                                            fill="#F91E01"
-                                            height="16"
-                                            transform="translate(-3.031601448459508 1.44638157917772) rotate(179.5 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#FA5300"
-                                            height="16"
-                                            transform="translate(0.001001577275992914 -7.592133809870717) rotate(370.7 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#F5A300"
-                                            height="16"
-                                            transform="translate(-9.667744843805323 10.267175012988094) rotate(298.9 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"
@@ -783,43 +2453,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                   >
                                     <div
                                       class="mm-avatar-account__jazzicon"
-                                    >
-                                      <div
-                                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(245, 143, 0);"
-                                      >
-                                        <svg
-                                          height="16"
-                                          width="16"
-                                          x="0"
-                                          y="0"
-                                        >
-                                          <rect
-                                            fill="#FA3E00"
-                                            height="16"
-                                            transform="translate(2.1189727229825075 3.7201589705667972) rotate(163.6 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#018E74"
-                                            height="16"
-                                            transform="translate(-3.5064720430845115 9.598091001429925) rotate(205.4 8 8)"
-                                            width="16"
-                                            x="0"
-                                            y="0"
-                                          />
-                                          <rect
-                                            fill="#238FE1"
-                                            height="16"
-                                            transform="translate(-5.001213401730692 12.04822844354251) rotate(286.5 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"
@@ -935,43 +2569,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                       >
                                         <div
                                           class="mm-avatar-account__jazzicon"
-                                        >
-                                          <div
-                                            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(242, 162, 2);"
-                                          >
-                                            <svg
-                                              height="16"
-                                              width="16"
-                                              x="0"
-                                              y="0"
-                                            >
-                                              <rect
-                                                fill="#C8144A"
-                                                height="16"
-                                                transform="translate(3.3716958087807476 -1.5355449411453455) rotate(359.3 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#01878E"
-                                                height="16"
-                                                transform="translate(-4.56026532072257 -4.118767169186573) rotate(335.8 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#1897F2"
-                                                height="16"
-                                                transform="translate(-12.66850392914138 2.191919563316492) rotate(275.0 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                            </svg>
-                                          </div>
-                                        </div>
+                                        />
                                       </div>
                                       <p
                                         class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
@@ -1007,43 +2605,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                       >
                                         <div
                                           class="mm-avatar-account__jazzicon"
-                                        >
-                                          <div
-                                            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(250, 54, 0);"
-                                          >
-                                            <svg
-                                              height="16"
-                                              width="16"
-                                              x="0"
-                                              y="0"
-                                            >
-                                              <rect
-                                                fill="#2395E1"
-                                                height="16"
-                                                transform="translate(-1.7353143855136905 0.5115867848025443) rotate(191.9 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#F90101"
-                                                height="16"
-                                                transform="translate(1.7169232764557802 -9.276715881533601) rotate(319.8 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#F58700"
-                                                height="16"
-                                                transform="translate(9.91414735179574 5.139720751783702) rotate(180.7 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"
@@ -1079,43 +2641,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                                       >
                                         <div
                                           class="mm-avatar-account__jazzicon"
-                                        >
-                                          <div
-                                            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 86);"
-                                          >
-                                            <svg
-                                              height="16"
-                                              width="16"
-                                              x="0"
-                                              y="0"
-                                            >
-                                              <rect
-                                                fill="#018E8C"
-                                                height="16"
-                                                transform="translate(3.988074950687866 0.3554940504644344) rotate(177.8 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#F29202"
-                                                height="16"
-                                                transform="translate(-7.220928666254465 -2.4813555582770794) rotate(334.6 8 8)"
-                                                width="16"
-                                                x="0"
-                                                y="0"
-                                              />
-                                              <rect
-                                                fill="#236FE1"
-                                                height="16"
-                                                transform="translate(14.621768557060026 -6.282465882779628) rotate(456.1 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"
@@ -1355,51 +2881,55 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                 style="margin-left: auto; max-width: 100%;"
               >
                 <div
-                  class="mm-box mm-box--display-flex"
+                  class="mm-box"
                 >
                   <div
-                    class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+                    class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
                   >
                     <div
-                      style="min-width: 0;"
+                      class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
                     >
                       <div
-                        aria-describedby="tippy-tooltip-4"
-                        class=""
-                        data-original-title="30"
-                        data-tooltipped=""
-                        style="display: inline;"
-                        tabindex="0"
+                        style="min-width: 0;"
                       >
-                        <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"
-                          data-testid="simulation-token-value"
-                          style="padding-top: 1px; padding-bottom: 1px;"
+                        <div
+                          aria-describedby="tippy-tooltip-4"
+                          class=""
+                          data-original-title="30"
+                          data-tooltipped=""
+                          style="display: inline;"
+                          tabindex="0"
                         >
-                          30
-                        </p>
+                          <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"
+                            data-testid="simulation-token-value"
+                            style="padding-top: 1px; padding-bottom: 1px;"
+                          >
+                            30
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </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"
+                    <div>
+                      <div
+                        class="name name__missing"
                       >
-                        0xCcCCc...ccccC
-                      </p>
+                        <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
-                  class="mm-box"
-                />
               </div>
             </div>
           </div>
diff --git a/ui/pages/confirmations/confirm/confirm.test.tsx b/ui/pages/confirmations/confirm/confirm.test.tsx
index 7182fb7ef165..0b10976ab48c 100644
--- a/ui/pages/confirmations/confirm/confirm.test.tsx
+++ b/ui/pages/confirmations/confirm/confirm.test.tsx
@@ -6,6 +6,8 @@ import { act } from '@testing-library/react';
 import {
   orderSignatureMsg,
   permitSignatureMsg,
+  permitSingleSignatureMsg,
+  permitBatchSignatureMsg,
 } from '../../../../test/data/confirmations/typed_sign';
 import mockState from '../../../../test/data/mock-state.json';
 import {
@@ -34,11 +36,14 @@ describe('Confirm', () => {
 
   it('should render', () => {
     const mockStore = configureMockStore(middleware)(mockState);
-    const { container } = renderWithConfirmContextProvider(
-      <Confirm />,
-      mockStore,
-    );
-    expect(container).toBeDefined();
+
+    act(() => {
+      const { container } = renderWithConfirmContextProvider(
+        <Confirm />,
+        mockStore,
+      );
+      expect(container).toBeDefined();
+    });
   });
 
   it('should match snapshot for signature - typed sign - permit', async () => {
@@ -68,14 +73,17 @@ describe('Confirm', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('matches snapshot for signature - personal sign type', () => {
+  it('matches snapshot for signature - personal sign type', async () => {
     const mockStatePersonalSign = getMockPersonalSignConfirmState();
     const mockStore = configureMockStore(middleware)(mockStatePersonalSign);
-    const { container } = renderWithConfirmContextProvider(
-      <Confirm />,
-      mockStore,
-    );
-    expect(container).toMatchSnapshot();
+
+    await act(async () => {
+      const { container } = await renderWithConfirmContextProvider(
+        <Confirm />,
+        mockStore,
+      );
+      expect(container).toMatchSnapshot();
+    });
   });
 
   it('should match snapshot signature - typed sign - order', async () => {
@@ -110,10 +118,63 @@ describe('Confirm', () => {
   it('should match snapshot for signature - typed sign - V4', async () => {
     const mockStateTypedSign = getMockTypedSignConfirmState();
     const mockStore = configureMockStore(middleware)(mockStateTypedSign);
-    const { container } = renderWithConfirmContextProvider(
-      <Confirm />,
-      mockStore,
+
+    await act(async () => {
+      const { container } = await renderWithConfirmContextProvider(
+        <Confirm />,
+        mockStore,
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it('should match snapshot for signature - typed sign - V4 - PermitSingle', async () => {
+    const mockStateTypedSign = getMockTypedSignConfirmStateForRequest(
+      permitSingleSignatureMsg,
+      {
+        metamask: { useTransactionSimulations: true },
+      },
     );
-    expect(container).toMatchSnapshot();
+    const mockStore = configureMockStore(middleware)(mockStateTypedSign);
+
+    jest.spyOn(actions, 'getTokenStandardAndDetails').mockResolvedValue({
+      decimals: '2',
+      standard: 'erc20',
+    });
+
+    await act(async () => {
+      const { container, findByText } = await renderWithConfirmContextProvider(
+        <Confirm />,
+        mockStore,
+      );
+
+      expect(await findByText('1,461,501,637,3...')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it('should match snapshot for signature - typed sign - V4 - PermitBatch', async () => {
+    const mockStateTypedSign = getMockTypedSignConfirmStateForRequest(
+      permitBatchSignatureMsg,
+      {
+        metamask: { useTransactionSimulations: true },
+      },
+    );
+    const mockStore = configureMockStore(middleware)(mockStateTypedSign);
+
+    jest.spyOn(actions, 'getTokenStandardAndDetails').mockResolvedValue({
+      decimals: '2',
+      standard: 'erc20',
+    });
+
+    await act(async () => {
+      const { container, findByText } = await renderWithConfirmContextProvider(
+        <Confirm />,
+        mockStore,
+      );
+
+      expect(await findByText('1,461,501,637,3...')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
   });
 });