feat: multi RPC editor

ui/pages/settings/networks-tab/index.scss

@@ -1,6 +1,54 @@
 @use "design-system";
 
 .networks-tab {
+
+  // TODO: Matching behavior of existing headings on network form
+  // But seems weird, probably all should be text cursor.
+  &__rpc-header {
+    cursor: default;
+  }
+
+  &__rpc-dropdown {
+    cursor: pointer;
+  }
+
+  &__rpc-item {
+    position: relative;
+  }
+
+  &__rpc-item:hover {
+    cursor: pointer;
+    background-color: var(--color-background-default-hover);
+  }
+
+  // These are <ButtonLink>s for accessibility,
+  // but I don't want the styling that comes with it
+  &__rpc-url:hover {
+    text-decoration: none !important;
+    color: var(--color-text-default) !important;
+  }
+
+  &__rpc-add:hover {
+    text-decoration: none !important;
+  }
+
+  &__rpc-item--selected,
+  &__rpc-item--selected:hover {
+    background-color: var(--color-primary-muted);
+  }
+
+  &__rpc-selected-pill {
+    width: 4px;
+    height: calc(100% - 8px);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+  }
+
+  &__rpc-popover {
+    z-index: 1;
+  }
+
   &__imageclose {
     cursor: pointer;
     color: var(--color-icon-default);

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -62,6 +62,7 @@ import {
   getMatchedChain,
   getMatchedSymbols,
 } from '../../../../helpers/utils/network-helper';
+import { RpcUrlEditor } from './rpc-url-editor';
 
 /**
  * Attempts to convert the given chainId to a decimal string, for display
@@ -760,17 +761,21 @@ const NetworksForm = ({
           disabled={viewOnly}
           dataTestId="network-form-network-name"
         />
-        <FormField
-          error={errors.rpcUrl?.msg || ''}
-          onChange={(value) => {
-            setIsEditing(true);
-            setRpcUrl(value);
-          }}
-          titleText={t('rpcUrl')}
-          value={displayRpcUrl}
-          disabled={viewOnly}
-          dataTestId="network-form-rpc-url"
-        />
+        {window.metamaskFeatureFlags?.networkMenuRedesign ? (
+          <RpcUrlEditor currentRpcUrl={displayRpcUrl} />
+        ) : (
+          <FormField
+            error={errors.rpcUrl?.msg || ''}
+            onChange={(value) => {
+              setIsEditing(true);
+              setRpcUrl(value);
+            }}
+            titleText={t('rpcUrl')}
+            value={displayRpcUrl}
+            disabled={viewOnly}
+            dataTestId="network-form-rpc-url"
+          />
+        )}
         <FormField
           warning={warnings.chainId?.msg || ''}
           error={errors.chainId?.msg || ''}

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx

@@ -0,0 +1,139 @@
+import React, { useRef, useState } from 'react';
+import classnames from 'classnames';
+import {
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Popover,
+  PopoverPosition,
+  Text,
+} from '../../../../components/component-library';
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  BorderRadius,
+  Display,
+  IconColor,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+export const RpcUrlEditor = ({ currentRpcUrl }: { currentRpcUrl: string }) => {
+  // TODO: real endpoints
+  const dummyRpcUrls = [
+    currentRpcUrl,
+    'https://dummy-mainnet.public.blastapi.io',
+    'https://dummy.io/v3/blockchain/node/dummy',
+  ];
+
+  const t = useI18nContext();
+  const rpcDropdown = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentRpcEndpoint, setCurrentRpcEndpoint] = useState(currentRpcUrl);
+
+  return (
+    <>
+      <Text
+        className="networks-tab__rpc-header"
+        marginTop={1}
+        marginBottom={1}
+        variant={TextVariant.bodySmBold}
+      >
+        {t('defaultRpcUrl')}
+      </Text>
+      <Box
+        onClick={() => setIsOpen(!isOpen)}
+        className="networks-tab__rpc-dropdown"
+        display={Display.Flex}
+        justifyContent={JustifyContent.spaceBetween}
+        borderRadius={BorderRadius.MD}
+        borderColor={BorderColor.borderDefault}
+        borderWidth={1}
+        padding={2}
+        ref={rpcDropdown}
+      >
+        <Text variant={TextVariant.bodySm}>{currentRpcEndpoint}</Text>
+        <Icon name={isOpen ? IconName.ArrowUp : IconName.ArrowDown} />
+      </Box>
+      <Popover
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={0}
+        paddingRight={0}
+        className="networks-tab__rpc-popover"
+        referenceElement={rpcDropdown.current}
+        position={PopoverPosition.Bottom}
+        isOpen={isOpen}
+      >
+        {dummyRpcUrls.map((rpcEndpoint) => (
+          <Box
+            padding={4}
+            display={Display.Flex}
+            justifyContent={JustifyContent.spaceBetween}
+            key={rpcEndpoint}
+            onClick={() => setCurrentRpcEndpoint(rpcEndpoint)}
+            className={classnames('networks-tab__rpc-item', {
+              'networks-tab__rpc-item--selected':
+                rpcEndpoint === currentRpcEndpoint,
+            })}
+          >
+            {rpcEndpoint === currentRpcEndpoint && (
+              <Box
+                className="networks-tab__rpc-selected-pill"
+                borderRadius={BorderRadius.pill}
+                backgroundColor={BackgroundColor.primaryDefault}
+              />
+            )}
+            <ButtonLink
+              className="networks-tab__rpc-url"
+              color={TextColor.textDefault}
+              variant={TextVariant.bodySmMedium}
+            >
+              {rpcEndpoint}
+            </ButtonLink>
+            <ButtonIcon
+              marginLeft={5}
+              ariaLabel={t('delete')}
+              size={ButtonIconSize.Sm}
+              iconName={IconName.Trash}
+              color={IconColor.errorDefault}
+              // eslint-disable-next-line no-alert
+              onClick={() => alert('TODO: delete confirmation modal')}
+            />
+          </Box>
+        ))}
+        <Box
+          // eslint-disable-next-line no-alert
+          onClick={() => alert('TODO: add RPC modal')}
+          padding={4}
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          className="networks-tab__rpc-item"
+        >
+          <Icon
+            color={IconColor.primaryDefault}
+            name={IconName.Add}
+            size={IconSize.Sm}
+            // marginLeft={1}
+            marginRight={2}
+          />
+          <ButtonLink
+            className="networks-tab__rpc-add"
+            variant={TextVariant.bodySmMedium}
+          >
+            {t('addRpcUrl')}
+          </ButtonLink>
+        </Box>
+      </Popover>
+    </>
+  );
+};
+
+export default RpcUrlEditor;