feat: UI changes to show decoding data for permits (#28342)

## **Description**

Changes in permit simulation component to show decoding api results if
present. Changes will currently not be visible as signature controller
update is not yet done.

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3554

## **Manual testing steps**

1. Locally enable signature decoding using env variables
2. Submit a permit on test dapp
3. Check simulation section

## **Screenshots/Recordings**
<img width="360" alt="Screenshot 2024-11-07 at 3 07 29 PM"
src="https://github.com/user-attachments/assets/57097f47-f0db-461a-a1f6-ca62f397ea93">

## **Pre-merge author checklist**

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

## **Pre-merge reviewer checklist**

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

---------

Co-authored-by: MetaMask Bot <[email protected]>

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

@@ -1,22 +1,36 @@
 import React from 'react';
+
+import { Box } from '../../../../../../../components/component-library';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
 import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
+import {
+  Display,
+  JustifyContent,
+} from '../../../../../../../helpers/constants/design-system';
+import Preloader from '../../../../../../../components/ui/icon/preloader';
 
 const StaticSimulation: React.FC<{
   title: string;
   titleTooltip: string;
   description: string;
   simulationElements: React.ReactNode;
-}> = ({ title, titleTooltip, description, simulationElements }) => {
+  isLoading?: boolean;
+}> = ({ title, titleTooltip, description, simulationElements, isLoading }) => {
   return (
     <ConfirmInfoSection data-testid="confirmation__simulation_section">
       <ConfirmInfoRow label={title} tooltip={titleTooltip}>
         <ConfirmInfoRowText text={description} />
       </ConfirmInfoRow>
-      {simulationElements}
+      {isLoading ? (
+        <Box display={Display.Flex} justifyContent={JustifyContent.center}>
+          <Preloader size={20} />
+        </Box>
+      ) : (
+        simulationElements
+      )}
     </ConfirmInfoSection>
   );
 };

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

@@ -1,6 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PermitSimulation renders component correctly 1`] = `
+exports[`PermitSimulation should not render default simulation if decodingLoading is true 1`] = `
+<div>
+  <div>
+    "DECODED SIMULATION IMPLEMENTATION"
+  </div>
+</div>
+`;
+
+exports[`PermitSimulation should render default simulation if decoding api does not return result 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"
@@ -128,7 +136,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
 </div>
 `;
 
-exports[`PermitSimulation renders correctly for NFT permit 1`] = `
+exports[`PermitSimulation should render default simulation if decoding api returns error 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"
@@ -173,7 +181,7 @@ exports[`PermitSimulation renders correctly for NFT permit 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
           style="white-space: pre-wrap;"
         >
-          You're giving someone else permission to withdraw NFTs from your account.
+          You're giving the spender permission to spend this many tokens from your account.
         </p>
       </div>
     </div>
@@ -190,7 +198,7 @@ exports[`PermitSimulation renders correctly for NFT permit 1`] = `
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
           >
-            Withdraw
+            Spending cap
           </p>
         </div>
       </div>
@@ -207,14 +215,25 @@ exports[`PermitSimulation renders correctly for NFT permit 1`] = `
             <div
               class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
             >
-              <div>
-                <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
+                style="min-width: 0;"
+              >
+                <div
+                  aria-describedby="tippy-tooltip-4"
+                  class=""
+                  data-original-title="30"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
                 >
-                  #3606393
-                </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
@@ -230,7 +249,7 @@ exports[`PermitSimulation renders correctly for NFT permit 1`] = `
                 <p
                   class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
                 >
-                  0xC3644...1FE88
+                  0xCcCCc...ccccC
                 </p>
               </div>
             </div>

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/decoded-simulation/__snapshots__/decoded-simulation.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DecodedSimulation renders component correctly 1`] = `
+<div>
+  <div>
+    "DECODED SIMULATION IMPLEMENTATION"
+  </div>
+</div>
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+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 './decoded-simulation';
+
+describe('DecodedSimulation', () => {
+  it('renders component correctly', async () => {
+    const state = getMockTypedSignConfirmStateForRequest(permitSignatureMsg);
+    const mockStore = configureMockStore([])(state);
+
+    const { container } = renderWithConfirmContextProvider(
+      <PermitSimulation />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DecodedSimulation: React.FC<object> = () => (
+  <div>"DECODED SIMULATION IMPLEMENTATION"</div>
+);
+
+export default DecodedSimulation;

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/decoded-simulation/index.ts

@@ -0,0 +1 @@
+export { default as DecodedSimulation } from './decoded-simulation';