feat: [cherrypick][V12.3.0] Add approval static simulation (#26514) (2/3 permit simulation fix)

ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap

@@ -4,6 +4,68 @@ exports[`<ApproveInfo /> does not render if required data is not present in the
 
 exports[`<ApproveInfo /> renders component for approve request 1`] = `
 <div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    data-testid="advanced-details-data-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"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Data
+        </p>
+      </div>
+      <div
+        class="mm-box"
+      >
+        <svg
+          class="preloader__icon"
+          fill="none"
+          height="20"
+          viewBox="0 0 16 16"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+            fill="var(--color-primary-muted)"
+            fill-rule="evenodd"
+          />
+          <mask
+            height="16"
+            id="mask0"
+            mask-type="alpha"
+            maskUnits="userSpaceOnUse"
+            width="16"
+            x="0"
+            y="0"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+              fill="var(--color-primary-default)"
+              fill-rule="evenodd"
+            />
+          </mask>
+          <g
+            mask="url(#mask0)"
+          >
+            <path
+              d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
+              fill="var(--color-primary-default)"
+            />
+          </g>
+        </svg>
+      </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"
   >

ui/pages/confirmations/components/confirm/info/approve/approve.tsx

@@ -1,12 +1,86 @@
+import { NameType } from '@metamask/name-controller';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import Name from '../../../../../../components/app/name';
+import { Box, Text } from '../../../../../../components/component-library';
+import {
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
+  BorderRadius,
+  Display,
+  TextAlign,
+} from '../../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../selectors';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
+import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
+import StaticSimulation from '../shared/static-simulation/static-simulation';
+import { Container } from '../shared/transaction-data/transaction-data';
 import { ApproveDetails } from './approve-details/approve-details';
 
+const ApproveStaticSimulation = () => {
+  const t = useI18nContext();
+
+  const transactionMeta = useSelector(
+    currentConfirmationSelector,
+  ) as TransactionMeta;
+
+  const decodedResponse = useDecodedTransactionData();
+
+  const { value, pending } = decodedResponse;
+
+  if (pending) {
+    return <Container isLoading />;
+  }
+
+  if (!value) {
+    return null;
+  }
+
+  const tokenId = `#${value.data[0].params[1].value}`;
+
+  const simulationElements = (
+    <>
+      <Box display={Display.Flex}>
+        <Box
+          display={Display.Inline}
+          marginInlineEnd={1}
+          minWidth={BlockSize.Zero}
+        >
+          <Text
+            data-testid="simulation-token-value"
+            backgroundColor={BackgroundColor.backgroundAlternative}
+            borderRadius={BorderRadius.XL}
+            paddingInline={2}
+            textAlign={TextAlign.Center}
+            alignItems={AlignItems.center}
+          >
+            {tokenId}
+          </Text>
+        </Box>
+        <Name
+          value={transactionMeta.txParams.to as string}
+          type={NameType.ETHEREUM_ADDRESS}
+        />
+      </Box>
+    </>
+  );
+
+  return (
+    <StaticSimulation
+      title={t('simulationDetailsTitle')}
+      titleTooltip={t('simulationDetailsTitleTooltip')}
+      description={t('simulationDetailsApproveDesc')}
+      simulationHeading={t('simulationApproveHeading')}
+      simulationElements={simulationElements}
+    />
+  );
+};
+
 const ApproveInfo = () => {
   const transactionMeta = useSelector(
     currentConfirmationSelector,
@@ -22,6 +96,7 @@ const ApproveInfo = () => {
 
   return (
     <>
+      <ApproveStaticSimulation />
       <ApproveDetails />
       <GasFeesSection />
       {showAdvancedDetails && <AdvancedDetails />}

ui/pages/confirmations/components/confirm/info/shared/static-simulation/static-simulation.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  ConfirmInfoRow,
+  ConfirmInfoRowText,
+} from '../../../../../../../components/app/confirm/info/row';
+import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
+import { Box } from '../../../../../../../components/component-library';
+
+const StaticSimulation: React.FC<{
+  title: string;
+  titleTooltip: string;
+  description: string;
+  simulationHeading: string;
+  simulationElements: React.ReactNode;
+}> = ({
+  title,
+  titleTooltip,
+  description,
+  simulationHeading,
+  simulationElements,
+}) => {
+  return (
+    <ConfirmInfoSection data-testid="confirmation__simulation_section">
+      <ConfirmInfoRow label={title} tooltip={titleTooltip}>
+        <ConfirmInfoRowText text={description} />
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label={simulationHeading}>
+        <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
+          {simulationElements}
+        </Box>
+      </ConfirmInfoRow>
+    </ConfirmInfoSection>
+  );
+};
+
+export default StaticSimulation;

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx

@@ -1,18 +1,12 @@
+import { NameType } from '@metamask/name-controller';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { NameType } from '@metamask/name-controller';
 
 import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import { parseTypedDataMessage } from '../../../../../../../../shared/modules/transaction.utils';
 import { Numeric } from '../../../../../../../../shared/modules/Numeric';
+import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import Name from '../../../../../../../components/app/name/name';
-import {
-  ConfirmInfoRow,
-  ConfirmInfoRowText,
-} from '../../../../../../../components/app/confirm/info/row';
-import { shortenString } from '../../../../../../../helpers/utils/util';
-import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
-import { currentConfirmationSelector } from '../../../../../../../selectors';
 import { Box, Text } from '../../../../../../../components/component-library';
 import Tooltip from '../../../../../../../components/ui/tooltip';
 import {
@@ -22,14 +16,16 @@ import {
   Display,
   TextAlign,
 } from '../../../../../../../helpers/constants/design-system';
+import { shortenString } from '../../../../../../../helpers/utils/util';
+import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { currentConfirmationSelector } from '../../../../../../../selectors';
 import { SignatureRequestType } from '../../../../../types/confirm';
-import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
 import {
   formatAmount,
   formatAmountMaxPrecision,
 } from '../../../../simulation-details/formatAmount';
-import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
+import StaticSimulation from '../../shared/static-simulation/static-simulation';
 
 const PermitSimulation: React.FC<{
   tokenDecimals: number;
@@ -66,15 +62,13 @@ const PermitSimulation: React.FC<{
   }, [tokenDecimals, value]);
 
   return (
-    <ConfirmInfoSection data-testid="confirmation__simulation_section">
-      <ConfirmInfoRow
-        label={t('simulationDetailsTitle')}
-        tooltip={t('simulationDetailsTitleTooltip')}
-      >
-        <ConfirmInfoRowText text={t('permitSimulationDetailInfo')} />
-      </ConfirmInfoRow>
-      <ConfirmInfoRow label={t('spendingCap')}>
-        <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
+    <StaticSimulation
+      title={t('simulationDetailsTitle')}
+      titleTooltip={t('simulationDetailsTitleTooltip')}
+      description={t('permitSimulationDetailInfo')}
+      simulationHeading={t('spendingCap')}
+      simulationElements={
+        <>
           <Box display={Display.Flex}>
             <Box
               display={Display.Inline}
@@ -111,9 +105,9 @@ const PermitSimulation: React.FC<{
               <IndividualFiatDisplay fiatAmount={fiatValue} shorten />
             )}
           </Box>
-        </Box>
-      </ConfirmInfoRow>
-    </ConfirmInfoSection>
+        </>
+      }
+    />
   );
 };