feat: Redesigned setApprovalForAll confirmations

MetaMask · Sep 12, 2024 · 93dbee0 · 93dbee0
1 parent 9ce914d
commit 93dbee0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
diff --git a/...firm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap b/...firm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap
@@ -270,10 +270,10 @@ exports[`<SetApprovalForAllInfo /> renders component for approve request 1`] = `
     <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"
       data-testid="gas-fee-details-speed"
-      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-info-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

diff --git a/...ll-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx b/...ll-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx
@@ -1,7 +1,6 @@
 import { NameType } from '@metamask/name-controller';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
-import { ConfirmInfoRow } from '../../../../../../../components/app/confirm/info/row';
 import Name from '../../../../../../../components/app/name';
 import { Box, Text } from '../../../../../../../components/component-library';
 import {
@@ -24,32 +23,28 @@ export const SetApprovalForAllStaticSimulation = () => {
   };
 
   const SetApprovalForAllRow = (
-    <ConfirmInfoRow label={t('withdrawing')}>
-      <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
-        <Box display={Display.Flex} alignItems={AlignItems.center}>
-          <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}
-            >
-              {t('all')}
-            </Text>
-          </Box>
-          <Name
-            value={transactionMeta.txParams.to as string}
-            type={NameType.ETHEREUM_ADDRESS}
-          />
-        </Box>
+    <Box display={Display.Flex} alignItems={AlignItems.center}>
+      <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}
+        >
+          {t('all')}
+        </Text>
       </Box>
-    </ConfirmInfoRow>
+      <Name
+        value={transactionMeta.txParams.to as string}
+        type={NameType.ETHEREUM_ADDRESS}
+      />
+    </Box>
   );
 
   const simulationElements = SetApprovalForAllRow;
@@ -59,6 +54,7 @@ export const SetApprovalForAllStaticSimulation = () => {
       title={t('simulationDetailsTitle')}
       titleTooltip={t('simulationDetailsTitleTooltip')}
       description={t('simulationDetailsSetApprovalForAllDesc')}
+      simulationHeading={t('withdrawing')}
       simulationElements={simulationElements}
     />
   );

diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts
@@ -23,6 +23,7 @@ export const REDESIGN_USER_TRANSACTION_TYPES = [
 
 export const REDESIGN_DEV_TRANSACTION_TYPES = [
   ...REDESIGN_USER_TRANSACTION_TYPES,
+  TransactionType.tokenMethodApprove,
   TransactionType.tokenMethodSetApprovalForAll,
 ];