feat(23946): Add advanced details component

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

@@ -0,0 +1,186 @@
+const {
+  defaultGanacheOptions,
+  openDapp,
+  unlockWallet,
+  WINDOW_TITLES,
+  withFixtures,
+} = require('../../helpers');
+const FixtureBuilder = require('../../fixture-builder');
+
+describe('Confirmation Redesign Contract Interaction Component', function () {
+  if (!process.env.ENABLE_CONFIRMATION_REDESIGN) {
+    return;
+  }
+
+  it('Sends a contract interaction type 0 transaction without custom nonce editing', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .withPreferencesController({
+            preferences: { redesignedConfirmationsEnabled: true },
+          })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await createContractDeploymentTransaction(driver);
+        await confirmContractDeploymentTransaction(driver);
+
+        await createDepositTransaction(driver);
+        await confirmDepositTransaction(driver);
+      },
+    );
+  });
+
+  it('Sends a contract interaction type 0 transaction with custom nonce editing', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .withPreferencesController({
+            preferences: { redesignedConfirmationsEnabled: true },
+          })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await toggleOnCustomNonce(driver);
+
+        await createContractDeploymentTransaction(driver);
+        await confirmContractDeploymentTransaction(driver);
+
+        await createDepositTransaction(driver);
+        await confirmDepositTransactionWithCustomNonce(driver, '10');
+      },
+    );
+  });
+});
+
+async function toggleOnCustomNonce(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.waitForSelector(accountOptionsMenuSelector);
+  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('.custom-nonce-toggle');
+
+  // Close settings
+  await driver.clickElement(
+    '.settings-page__header__title-container__close-button',
+  );
+}
+
+async function createContractDeploymentTransaction(driver) {
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement(`#deployButton`);
+}
+
+async function confirmContractDeploymentTransaction(driver) {
+  await driver.delay(2000);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+  await driver.waitForSelector({
+    css: '.confirm-page-container-summary__action__name',
+    text: 'Contract deployment',
+  });
+
+  await driver.clickElement({ text: 'Confirm', tag: 'button' });
+  await driver.waitUntilXWindowHandles(2);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
+  await driver.clickElement({ text: 'Activity', tag: 'button' });
+  await driver.waitForSelector(
+    '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)',
+  );
+}
+
+async function createDepositTransaction(driver) {
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement(`#depositButton`);
+}
+
+async function confirmDepositTransaction(driver) {
+  await driver.delay(2000);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+  await driver.waitForSelector({
+    css: 'h2',
+    text: 'Transaction request',
+  });
+
+  await driver.clickElement(`[data-testid="header-advanced-details-button"]`);
+
+  await driver.waitForSelector({
+    css: 'p',
+    text: 'Nonce',
+  });
+
+  await driver.clickElement(`[data-testid="confirm-footer-button"]`);
+}
+
+async function confirmDepositTransactionWithCustomNonce(driver, customNonce) {
+  await driver.delay(2000);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+  await driver.waitForSelector({
+    css: 'h2',
+    text: 'Transaction request',
+  });
+
+  await driver.clickElement(`[data-testid="header-advanced-details-button"]`);
+
+  await driver.waitForSelector({
+    css: 'p',
+    text: 'Nonce',
+  });
+
+  await driver.clickElement('.edit-nonce-btn');
+  await driver.fill('[data-testid="custom-nonce-input"]', customNonce);
+  await driver.clickElement({
+    text: 'Save',
+    tag: 'button',
+  });
+  await driver.clickElement(`[data-testid="confirm-footer-button"]`);
+
+  // Confirm tx was submitted with the higher nonce
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
+
+  await driver.delay(500);
+
+  const sendTransactionListItem = await driver.findElement(
+    '.transaction-list__pending-transactions .activity-list-item',
+  );
+  await sendTransactionListItem.click();
+
+  await driver.waitForSelector({
+    css: '.transaction-breakdown__value',
+    text: customNonce,
+  });
+}

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

@@ -66,15 +66,15 @@ export const ConfirmInfoRowContext = createContext({
   variant: ConfirmInfoRowVariant.Default,
 });
 
-export const ConfirmInfoRow = ({
+export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
   label,
   children,
   variant = ConfirmInfoRowVariant.Default,
   tooltip,
   style,
   labelChildren,
   color,
-}: ConfirmInfoRowProps) => (
+}) => (
   <ConfirmInfoRowContext.Provider value={{ variant }}>
     <Box
       className="confirm-info-row"

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

@@ -1,19 +1,21 @@
+import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ConfirmInfoRow } from './row';
 import { ConfirmInfoRowText } from './text';
 
 const ConfirmInfoRowTextStory = {
   title: 'Components/App/Confirm/InfoRowText',
   component: ConfirmInfoRowText,
-
   decorators: [
     (story) => <ConfirmInfoRow label="Message">{story()}</ConfirmInfoRow>,
   ],
-
   argTypes: {
     url: {
       control: 'text',
     },
+    onEditClick: {
+      action: 'onEditClick',
+    },
   },
 };
 
@@ -22,4 +24,9 @@ DefaultStory.args = {
   text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 };
 
+export const EditableStory = (props) => <ConfirmInfoRowText {...props} />;
+EditableStory.args = {
+  text: 'Lorem ipsum dolor sit amet.',
+};
+
 export default ConfirmInfoRowTextStory;

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

@@ -1,17 +1,29 @@
-import React from 'react';
-import { Box, Text } from '../../../../component-library';
+import React, { useContext } from 'react';
+import { I18nContext } from '../../../../../contexts/i18n';
 import {
   AlignItems,
   Display,
   FlexWrap,
+  IconColor,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
+import { Box, ButtonIcon, IconName, Text } from '../../../../component-library';
 
 export type ConfirmInfoRowTextProps = {
   text: string;
+  onEditClick?: () => void;
+  editIconClassName?: string;
 };
 
-export const ConfirmInfoRowText = ({ text }: ConfirmInfoRowTextProps) => {
+export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
+  text,
+  onEditClick,
+  editIconClassName,
+}) => {
+  const t = useContext(I18nContext);
+
+  const isEditable = Boolean(onEditClick);
+
   return (
     <Box
       display={Display.Flex}
@@ -22,6 +34,16 @@ export const ConfirmInfoRowText = ({ text }: ConfirmInfoRowTextProps) => {
       <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
         {text}
       </Text>
+      {isEditable ? (
+        <ButtonIcon
+          className={editIconClassName || undefined}
+          color={IconColor.primaryDefault}
+          ariaLabel={t('edit')}
+          marginLeft={4}
+          iconName={IconName.Edit}
+          onClick={onEditClick}
+        />
+      ) : null}
     </Box>
   );
 };

ui/components/component-library/icon/icon.types.ts

@@ -60,6 +60,7 @@ export enum IconName {
   Connect = 'connect',
   CopySuccess = 'copy-success',
   Copy = 'copy',
+  Customize = 'customize',
   Danger = 'danger',
   Dark = 'dark',
   Data = 'data',