feat: add custom form check alerts

test/e2e/playwright/shared/pageObjects/network-controller-page.ts

@@ -9,8 +9,6 @@ export class NetworkController {
 
   readonly addNetworkManuallyButton: Locator;
 
-  readonly networkTickerInput: Locator;
-
   readonly approveBtn: Locator;
 
   readonly saveBtn: Locator;
@@ -21,23 +19,32 @@ export class NetworkController {
 
   readonly networkSearch: Locator;
 
+  readonly networkName: Locator;
+
+  readonly networkRpc: Locator;
+
+  readonly networkChainId: Locator;
+
+  readonly networkTicker: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.networkDisplay = this.page.getByTestId('network-display');
     this.addNetworkButton = this.page.getByText('Add network');
     this.addNetworkManuallyButton = this.page.getByTestId(
       'add-network-manually',
     );
-    this.networkTickerInput = this.page.getByTestId(
-      'network-form-ticker-input',
-    );
     this.saveBtn = this.page.getByRole('button', { name: 'Save' });
     this.approveBtn = this.page.getByTestId('confirmation-submit-button');
     this.switchToNetworkBtn = this.page.locator('button', {
       hasText: 'Switch to',
     });
     this.gotItBtn = this.page.getByRole('button', { name: 'Got it' });
     this.networkSearch = this.page.locator('input[type="search"]');
+    this.networkName = this.page.getByTestId('network-form-network-name');
+    this.networkRpc = this.page.getByTestId('network-form-rpc-url');
+    this.networkChainId = this.page.getByTestId('network-form-chain-id');
+    this.networkTicker = this.page.getByTestId('network-form-ticker-input');
   }
 
   async addCustomNetwork(options: {
@@ -50,11 +57,11 @@ export class NetworkController {
     await this.addNetworkButton.click();
     await this.addNetworkManuallyButton.click();
 
-    const formField = await this.page.$$('.form-field__input');
-    await formField[0].fill(options.name);
-    await formField[1].fill(options.url);
-    await formField[2].fill(options.chainID);
-    await this.networkTickerInput.fill(options.symbol);
+    await this.networkName.waitFor();
+    await this.networkName.fill(options.name);
+    await this.networkRpc.fill(options.url);
+    await this.networkChainId.fill(options.chainID);
+    await this.networkTicker.fill(options.symbol);
     await this.saveBtn.click();
     await this.switchToNetworkBtn.click();
   }

test/e2e/tests/network/add-custom-network.spec.js

@@ -79,11 +79,9 @@ const selectors = {
   saveButton: { text: 'Save', tag: 'button' },
   updatedNetworkDropDown: { tag: 'span', text: 'Update Network' },
   errorMessageInvalidUrl: {
-    tag: 'h6',
     text: 'URLs require the appropriate HTTP/HTTPS prefix.',
   },
   warningSymbol: {
-    tag: 'h6',
     text: 'URLs require the appropriate HTTP/HTTPS prefix.',
   },
   suggestedTicker: '[data-testid="network-form-ticker-suggestion"]',
@@ -802,6 +800,8 @@ describe('Custom network', function () {
           );
           await driver.fill(selectors.chainIdInputField, '1');
           await driver.fill(selectors.tickerInputField, 'TST');
+          // fix flaky test
+          await driver.delay(regularDelayMs);
           await driver.fill(selectors.explorerInputField, 'https://test.com');
 
           const suggestedTicker = await driver.isElementPresent(
@@ -849,6 +849,9 @@ describe('Custom network', function () {
             inputData.networkName,
           );
           await driver.fill(selectors.rpcUrlInputField, inputData.rpcUrl);
+
+          // fix flaky test
+          await driver.delay(regularDelayMs);
           await driver.fill(selectors.chainIdInputField, inputData.chainId);
           await driver.fill(selectors.tickerInputField, inputData.ticker);
 
@@ -945,7 +948,6 @@ async function failCandidateNetworkValidation(driver) {
 
   const chainIdValidationMessageRawLocator = {
     text: 'Could not fetch chain ID. Is your RPC URL correct?',
-    tag: 'h6',
   };
   await driver.waitForSelector(chainIdValidationMessageRawLocator);
   await driver.waitForSelector('[data-testid="network-form-ticker-warning"]');
@@ -1047,6 +1049,8 @@ async function candidateNetworkIsNotValidated(driver) {
   await driver.fill('[data-testid="network-form-ticker-input"]', 'cTH');
   await blockExplorerURLInputEl.fill('https://block-explorer.url');
 
+  // fix flaky test
+  await driver.delay(regularDelayMs);
   const saveButtonRawLocator = {
     text: 'Save',
     tag: 'button',

test/e2e/tests/network/custom-rpc-history.spec.js

@@ -102,7 +102,6 @@ describe('Custom RPC history', function () {
         await rpcUrlInput.sendKeys(duplicateRpcUrl);
         await driver.findElement({
           text: 'This URL is currently used by the mainnet network.',
-          tag: 'h6',
         });
       },
     );
@@ -144,7 +143,6 @@ describe('Custom RPC history', function () {
         await chainIdInput.sendKeys(duplicateChainId);
         await driver.findElement({
           text: 'This Chain ID is currently used by the mainnet network.',
-          tag: 'h6',
         });
 
         await rpcUrlInput.clear();
@@ -160,7 +158,6 @@ describe('Custom RPC history', function () {
 
         await driver.findElement({
           text: 'Could not fetch chain ID. Is your RPC URL correct?',
-          tag: 'h6',
         });
       },
     );
@@ -294,7 +291,9 @@ describe('Custom RPC history', function () {
           value: customNetworkName,
         });
         // delete custom network in a modal
-        await driver.clickElement('.networks-tab__network-form .btn-danger');
+        await driver.clickElement(
+          '.networks-tab__network-form-footer .btn-danger',
+        );
         await driver.findVisibleElement(
           '[data-testid="confirm-delete-network-modal"]',
         );

test/e2e/tests/network/update-network.spec.ts

@@ -22,7 +22,6 @@ const selectors = {
   saveButton: { text: 'Save', tag: 'button' },
   updatedNetworkDropDown: { tag: 'span', text: 'Update Network' },
   errorMessageInvalidUrl: {
-    tag: 'h6',
     text: 'URLs require the appropriate HTTP/HTTPS prefix.',
   },
   networkNameInputField: '[data-testid="network-form-network-name"]',

ui/components/multichain/network-list-item-menu/network-list-item-menu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
+  Box,
   IconName,
   ModalFocus,
   Popover,
@@ -36,7 +37,7 @@ export const NetworkListItemMenu = ({
       flip
     >
       <ModalFocus restoreFocus initialFocusRef={anchorElement}>
-        <div>
+        <Box>
           {onEditClick ? (
             <MenuItem
               iconName={IconName.Edit}
@@ -48,7 +49,7 @@ export const NetworkListItemMenu = ({
               }}
               data-testid="network-list-item-options-edit"
             >
-              {t('edit')}
+              <Text> {t('edit')}</Text>
             </MenuItem>
           ) : null}
           {onDeleteClick ? (
@@ -66,7 +67,7 @@ export const NetworkListItemMenu = ({
               <Text color={TextColor.errorDefault}>{t('delete')}</Text>
             </MenuItem>
           ) : null}
-        </div>
+        </Box>
       </ModalFocus>
     </Popover>
   );

ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap

@@ -3,7 +3,7 @@
 exports[`NetworkListItem renders properly 1`] = `
 <div>
   <div
-    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
       class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"

ui/components/multichain/network-list-item/network-list-item.js

@@ -16,6 +16,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   Box,
   ButtonIcon,
   ButtonIconSize,
@@ -33,6 +34,7 @@ const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 20;
 export const NetworkListItem = ({
   name,
   iconSrc,
+  iconSize = AvatarNetworkSize.Md,
   selected = false,
   focus = true,
   onClick,
@@ -99,7 +101,7 @@ export const NetworkListItem = ({
   return (
     <Box
       padding={4}
-      gap={2}
+      gap={4}
       backgroundColor={selected ? Color.primaryMuted : Color.transparent}
       className={classnames('multichain-network-list-item', {
         'multichain-network-list-item--selected': selected,
@@ -121,6 +123,7 @@ export const NetworkListItem = ({
         backgroundColor={getAvatarNetworkColor(name)}
         name={name}
         src={iconSrc}
+        size={iconSize}
       />
       <Box
         className="multichain-network-list-item__network-name"
@@ -170,6 +173,10 @@ NetworkListItem.propTypes = {
    * Path to the Icon image
    */
   iconSrc: PropTypes.string,
+  /**
+   * Icon network size
+   */
+  iconSize: PropTypes.string,
   /**
    * Represents if the network item is selected
    */

ui/components/multichain/network-list-menu/add-rpc-url-modal/__snapshots__/add-rpc-url-modal.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddRpcUrlModal should render correctly 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--padding-4"
+  >
+    <div
+      class="mm-box mm-form-text-field mm-box--display-flex mm-box--flex-direction-column"
+    >
+      <label
+        class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-sm-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+        for="additional-rpc-url"
+      >
+        additionalRpcUrl
+      </label>
+      <div
+        class="mm-box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
+      >
+        <input
+          autocomplete="off"
+          class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+          focused="false"
+          id="additional-rpc-url"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <button
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-top-8 mm-box--margin-right-auto mm-box--margin-left-auto mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-block mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+    >
+      addUrl
+    </button>
+  </div>
+</div>
+`;

ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import AddRpcUrlModal from './add-rpc-url-modal';
+
+jest.mock('../../../../hooks/useI18nContext', () => ({
+  useI18nContext: jest.fn(),
+}));
+
+describe('AddRpcUrlModal', () => {
+  const useI18nContextMock = useI18nContext as jest.Mock;
+
+  beforeEach(() => {
+    useI18nContextMock.mockReturnValue((key: string) => key);
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly', () => {
+    const { container } = render(<AddRpcUrlModal />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render the input field with the correct label', () => {
+    render(<AddRpcUrlModal />);
+    const inputLabel = screen.getByLabelText('additionalRpcUrl');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('should render the "Add URL" button with correct text', () => {
+    render(<AddRpcUrlModal />);
+    const addButton = screen.getByRole('button', { name: 'addUrl' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it('should call the appropriate function when "Add URL" button is clicked', () => {
+    const mockAddUrl = jest.fn();
+    render(<AddRpcUrlModal />);
+    const addButton = screen.getByRole('button', { name: 'addUrl' });
+    userEvent.click(addButton);
+    expect(mockAddUrl).not.toHaveBeenCalled();
+  });
+});

ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.tsx

@@ -33,6 +33,7 @@ const AddRpcUrlModal = () => {
         marginTop={8}
         marginLeft={'auto'}
         marginRight={'auto'}
+        onClick={() => ({})}
       >
         {t('addUrl')}
       </ButtonPrimary>