wip

test/e2e/tests/confirmations/transactions/contract-interaction-redesign.spec.js

@@ -203,8 +203,6 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
 
           await openDapp(driver, contractAddress);
 
-          await toggleOnCustomNonce(driver);
-
           await createContractDeploymentTransaction(driver);
           await confirmContractDeploymentTransaction(driver);
 
@@ -256,6 +254,80 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
         },
       );
     });
+
+    it('If nonce editing is enabled, advanced details are shown', async function () {
+      await withFixtures(
+        {
+          dapp: true,
+          fixtures: new FixtureBuilder()
+            .withPermissionControllerConnectedToTestDapp()
+            .withPreferencesController({
+              preferences: { redesignedConfirmationsEnabled: true },
+            })
+            .build(),
+          ganacheOptions: defaultGanacheOptionsForType2Transactions,
+          smartContract,
+          title: this.test?.fullTitle(),
+        },
+        async ({ driver, contractRegistry }) => {
+          const contractAddress = await contractRegistry.getContractAddress(
+            smartContract,
+          );
+          await unlockWallet(driver);
+
+          await openDapp(driver, contractAddress);
+
+          await toggleOnCustomNonce(driver);
+
+          await createContractDeploymentTransaction(driver);
+          await confirmContractDeploymentTransaction(driver);
+
+          await createDepositTransaction(driver);
+
+          await driver.waitUntilXWindowHandles(3);
+          await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+          await assertAdvancedGasDetails(driver);
+        },
+      );
+    });
+
+    it('If hex data is enabled, advanced details are shown', async function () {
+      await withFixtures(
+        {
+          dapp: true,
+          fixtures: new FixtureBuilder()
+            .withPermissionControllerConnectedToTestDapp()
+            .withPreferencesController({
+              preferences: { redesignedConfirmationsEnabled: true },
+            })
+            .build(),
+          ganacheOptions: defaultGanacheOptionsForType2Transactions,
+          smartContract,
+          title: this.test?.fullTitle(),
+        },
+        async ({ driver, contractRegistry }) => {
+          const contractAddress = await contractRegistry.getContractAddress(
+            smartContract,
+          );
+          await unlockWallet(driver);
+
+          await openDapp(driver, contractAddress);
+
+          await toggleOnHexData(driver);
+
+          await createContractDeploymentTransaction(driver);
+          await confirmContractDeploymentTransaction(driver);
+
+          await createDepositTransaction(driver);
+
+          await driver.waitUntilXWindowHandles(3);
+          await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+          await assertAdvancedGasDetails(driver);
+        },
+      );
+    });
   });
 });
 
@@ -321,7 +393,6 @@ async function confirmDepositTransactionWithCustomNonce(driver, customNonce) {
   });
 
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-  await toggleAdvancedDetails(driver);
 
   await driver.waitForSelector({
     css: 'p',
@@ -382,6 +453,36 @@ async function toggleOnCustomNonce(driver) {
   );
 }
 
+async function toggleOnHexData(driver) {
+  // switch to metamask page and open the three dots menu
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
+
+  // Open settings menu button
+  const accountOptionsMenuSelector =
+    '[data-testid="account-options-menu-button"]';
+  await driver.clickElement(accountOptionsMenuSelector);
+
+  // Click settings from dropdown menu
+  const globalMenuSettingsSelector = '[data-testid="global-menu-settings"]';
+  await driver.waitForSelector(globalMenuSettingsSelector);
+  await driver.clickElement(globalMenuSettingsSelector);
+
+  // Click Advanced tab
+  const advancedTabRawLocator = {
+    text: 'Advanced',
+    tag: 'div',
+  };
+  await driver.clickElement(advancedTabRawLocator);
+
+  // Toggle on custom toggle setting (off by default)
+  await driver.clickElement('.hex-data-toggle');
+
+  // Close settings
+  await driver.clickElement(
+    '.settings-page__header__title-container__close-button',
+  );
+}
+
 async function toggleAdvancedDetails(driver) {
   // TODO - Scroll button not shown in Firefox if advanced details enabled too fast.
   await driver.delay(1000);

ui/components/app/confirm/info/row/text.tsx

@@ -7,7 +7,13 @@ import {
   IconColor,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
-import { Box, ButtonIcon, IconName, Text } from '../../../../component-library';
+import {
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+  Text,
+} from '../../../../component-library';
 import Tooltip from '../../../../ui/tooltip';
 
 const InfoText = ({ text }: { text: string }) => (
@@ -57,9 +63,12 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
           className={editIconClassName || undefined}
           color={IconColor.primaryDefault}
           ariaLabel={t('edit')}
-          marginLeft={4}
           iconName={IconName.Edit}
           onClick={onEditClick}
+          size={ButtonIconSize.Sm}
+          // to reset the button padding
+          style={{ marginLeft: '-4px' }}
+          data-testid="edit-nonce-icon"
         />
       ) : null}
     </Box>

ui/helpers/constants/settings.js

@@ -111,7 +111,7 @@ const SETTINGS_CONSTANTS = [
   {
     tabMessage: (t) => t('advanced'),
     sectionMessage: (t) => t('nonceField'),
-    descriptionMessage: (t) => t('nonceFieldDescription'),
+    descriptionMessage: (t) => t('nonceFieldDesc'),
     route: `${ADVANCED_ROUTE}#customize-nonce`,
     icon: 'fas fa-sliders-h',
   },

ui/helpers/utils/settings-search.test.js

@@ -50,8 +50,8 @@ const t = (key) => {
       return 'Select this to show test networks in network list';
     case 'nonceField':
       return 'Customize transaction nonce';
-    case 'nonceFieldDescription':
-      return 'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.';
+    case 'nonceFieldDesc':
+      return 'Turn this on to change the nonce (transaction number) when sending assets. This is an advanced feature, use cautiously.';
     case 'autoLockTimeLimit':
       return 'Auto-lock timer (minutes)';
     case 'autoLockTimeLimitDescription':