Make default networks editable - Initial

5 changed files with 101 additions and 44 deletions
--- a/app/scripts/first-time-state.js
+++ b/app/scripts/first-time-state.js
@ -4,6 +4,14 @@
 * @property {object} NetworkController Network controller state
 */

+import {
+  NETWORK_TYPES,
+  getRpcUrl,
+  TEST_NETWORK_TICKER_MAP,
+  CURRENCY_SYMBOLS,
+  CHAIN_IDS,
+} from '../../shared/constants/network';
+
 /**
 * @type {FirstTimeState}
 */
@ -12,11 +20,54 @@ const initialState = {
  PreferencesController: {
    frequentRpcListDetail: [
      {
+        label: NETWORK_TYPES.MAINNET,
+        nickname: 'Ethereum Mainnet',
+        iconColor: '#29B6AF',
+        providerType: NETWORK_TYPES.MAINNET,
+        rpcUrl: getRpcUrl({
+          network: NETWORK_TYPES.MAINNET,
+          excludeProjectId: true,
+        }),
+        chainId: CHAIN_IDS.MAINNET,
+        ticker: CURRENCY_SYMBOLS.ETH,
+        blockExplorerUrl: 'https://etherscan.io',
+      },
+      {
+        label: NETWORK_TYPES.GOERLI,
+        nickname: 'Georli test network',
+        iconColor: '#3099f2',
+        providerType: NETWORK_TYPES.GOERLI,
+        rpcUrl: getRpcUrl({
+          network: NETWORK_TYPES.GOERLI,
+          excludeProjectId: true,
+        }),
+        chainId: CHAIN_IDS.GOERLI,
+        ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
+        blockExplorerUrl: 'https://goerli.etherscan.io',
+      },
+      {
+        label: NETWORK_TYPES.SEPOLIA,
+        nickname: 'Sepolia test network',
+        iconColor: '#CFB5F0',
+        providerType: NETWORK_TYPES.SEPOLIA,
+        rpcUrl: getRpcUrl({
+          network: NETWORK_TYPES.SEPOLIA,
+          excludeProjectId: true,
+        }),
+        chainId: CHAIN_IDS.SEPOLIA,
+        ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
+        blockExplorerUrl: 'https://sepolia.etherscan.io',
+      },
+      {
+        label: 'Localhost 8545',
+        nickname: 'Localhost 8545',
        rpcUrl: 'http://localhost:8545',
        chainId: '0x539',
        ticker: 'ETH',
-        nickname: 'Localhost 8545',
+        iconColor: 'var(--color-icon-alternative)',
+        providerType: NETWORK_TYPES.LOCALHOST,
        rpcPrefs: {},
+        blockExplorerUrl: '',
      },
    ],
  },
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@ -9,6 +9,7 @@ import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/al
 import {
  LOCALHOST_RPC_URL,
  NETWORK_TYPES,
+  TEST_CHAINS,
 } from '../../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';

@ -141,11 +142,20 @@ class NetworkDropdown extends Component {
    );
  }

-  renderCustomRpcList(rpcListDetail, provider, opts = {}) {
-    const reversedRpcListDetail = rpcListDetail.slice().reverse();
+  renderCustomRpcList(rpcListDetail, provider, shouldShowTestNetworks) {
+    // const reversedRpcListDetail = rpcListDetail.slice().reverse();

-    return reversedRpcListDetail.map((entry) => {
-      const { rpcUrl, chainId, ticker = 'ETH', nickname = '' } = entry;
+    return rpcListDetail.filter((entry) => shouldShowTestNetworks ? true : !TEST_CHAINS.includes(entry.chainId)).map((entry) => {
+      const {
+        rpcUrl,
+        chainId,
+        ticker = 'ETH',
+        nickname = '',
+        providerType,
+      } = entry;
+      
+      const isDefaultNetworks =
+        Object.values(NETWORK_TYPES).includes(providerType);
      const isCurrentRpcTarget =
        provider.type === NETWORK_TYPES.RPC && rpcUrl === provider.rpcUrl;

@ -160,11 +170,7 @@ class NetworkDropdown extends Component {
              this.props.displayInvalidCustomNetworkAlert(nickname || rpcUrl);
            }
          }}
-          style={{
-            fontSize: '16px',
-            lineHeight: '20px',
-            padding: '16px',
-          }}
+          style={DROP_DOWN_MENU_ITEM_STYLE}
        >
          {isCurrentRpcTarget ? (
            <IconCheck color="var(--color-success-default)" />
@ -172,13 +178,13 @@ class NetworkDropdown extends Component {
            <div className="network-check__transparent">✓</div>
          )}
          <ColorIndicator
-            color={opts.isLocalHost ? 'localhost' : COLORS.ICON_MUTED}
+            color={isDefaultNetworks ? providerType : COLORS.ICON_MUTED}
            size={SIZES.LG}
            type={ColorIndicator.TYPES.FILLED}
          />
          <span
            className="network-name-item"
-            data-testid={`${nickname}-network-item`}
+            data-testid={`${providerType ?? nickname}-network-item`}
            style={{
              color: isCurrentRpcTarget
                ? 'var(--color-text-default)'
@ -269,12 +275,12 @@ class NetworkDropdown extends Component {
      hideTestNetMessage,
    } = this.props;
    const rpcListDetail = this.props.frequentRpcListDetail;
-    const rpcListDetailWithoutLocalHost = rpcListDetail.filter(
-      (rpc) => rpc.rpcUrl !== LOCALHOST_RPC_URL,
-    );
-    const rpcListDetailForLocalHost = rpcListDetail.filter(
-      (rpc) => rpc.rpcUrl === LOCALHOST_RPC_URL,
-    );
+    // const rpcListDetailWithoutLocalHost = rpcListDetail.filter(
+    //   (rpc) => rpc.rpcUrl !== LOCALHOST_RPC_URL,
+    // );
+    // const rpcListDetailForLocalHost = rpcListDetail.filter(
+    //   (rpc) => rpc.rpcUrl === LOCALHOST_RPC_URL,
+    // );
    const isOpen = this.props.networkDropdownOpen;
    const { t } = this.context;

@ -334,14 +340,15 @@ class NetworkDropdown extends Component {
        </div>

        <div className="network-dropdown-list">
-          {this.renderNetworkEntry(NETWORK_TYPES.MAINNET)}
+          {/* {this.renderNetworkEntry(NETWORK_TYPES.MAINNET)} */}

          {this.renderCustomRpcList(
-            rpcListDetailWithoutLocalHost,
+            rpcListDetail,
            this.props.provider,
+            shouldShowTestNetworks,
          )}

-          {shouldShowTestNetworks && (
+          {/* {shouldShowTestNetworks && (
            <>
              {this.renderNetworkEntry(NETWORK_TYPES.GOERLI)}
              {this.renderNetworkEntry(NETWORK_TYPES.SEPOLIA)}
@ -351,7 +358,7 @@ class NetworkDropdown extends Component {
                { isLocalHost: true },
              )}
            </>
-          )}
+          )} */}
        </div>

        {this.renderAddCustomButton()}
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import {
  NETWORK_TYPES,
  BUILT_IN_NETWORKS,
+  CHAIN_IDS,
 } from '../../../../shared/constants/network';

 import LoadingIndicator from '../../ui/loading-indicator';
@ -30,11 +31,23 @@ export default function NetworkDisplay({
  const currentNetwork = useSelector((state) => ({
    nickname: state.metamask.provider.nickname,
    type: state.metamask.provider.type,
+    chainId: state.metamask.provider.chainId,
  }));
+
+  let networkType;
+  if (currentNetwork.chainId === CHAIN_IDS.MAINNET) {
+    networkType = NETWORK_TYPES.MAINNET;
+  } else if (currentNetwork.chainId === CHAIN_IDS.GOERLI) {
+    networkType = NETWORK_TYPES.GOERLI;
+  } else if (currentNetwork.chainId === CHAIN_IDS.SEPOLIA) {
+    networkType = NETWORK_TYPES.SEPOLIA;
+  } else {
+    networkType = NETWORK_TYPES.RPC;
+  }
+
  const t = useI18nContext();

-  const { nickname: networkNickname, type: networkType } =
-    targetNetwork ?? currentNetwork;
+  const { nickname: networkNickname } = targetNetwork ?? currentNetwork;

  return (
    <Chip
@ -68,10 +81,7 @@ export default function NetworkDisplay({
          <IconCaretDown size={16} className="network-display__icon" />
        ) : null
      }
-      label={
-        networkType === NETWORK_TYPES.RPC
-          ? networkNickname ?? t('privateNetwork')
-          : t(networkType)
+      label={networkNickname ?? t('privateNetwork')
      }
      className={classnames('network-display', {
        'network-display--disabled': disabled,
--- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
+++ b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
@ -115,15 +115,9 @@ const NetworksListItem = ({
        className={classnames('networks-tab__networks-list-name', {
          'networks-tab__networks-list-name--selected':
            displayNetworkListItemAsSelected,
-          'networks-tab__networks-list-name--disabled':
-            currentProviderType !== NETWORK_TYPES.RPC &&
-            !displayNetworkListItemAsSelected,
        })}
      >
        {label || t(labelKey)}
-        {currentProviderType !== NETWORK_TYPES.RPC && (
-          <LockIcon width="14px" height="17px" fill="var(--color-icon-muted)" />
-        )}
      </div>
    </div>
  );
--- a/ui/pages/settings/networks-tab/networks-tab.js
+++ b/ui/pages/settings/networks-tab/networks-tab.js
@ -26,12 +26,6 @@ import NetworksTabContent from './networks-tab-content';
 import NetworksForm from './networks-form';
 import NetworksFormSubheader from './networks-tab-subheader';

-const defaultNetworks = defaultNetworksData.map((network) => ({
-  ...network,
-  viewOnly: true,
-  isATestNetwork: TEST_CHAINS.includes(network.chainId),
-}));
-
 const NetworksTab = ({ addNewNetwork }) => {
  const t = useI18nContext();
  const dispatch = useDispatch();
@ -51,19 +45,20 @@ const NetworksTab = ({ addNewNetwork }) => {

  const frequentRpcNetworkListDetails = frequentRpcListDetail.map((rpc) => {
    return {
-      label: rpc.nickname,
-      iconColor: 'var(--color-icon-alternative)',
+      label: rpc.label,
+      iconColor: rpc.iconColor,
      providerType: NETWORK_TYPES.RPC,
      rpcUrl: rpc.rpcUrl,
      chainId: rpc.chainId,
      ticker: rpc.ticker,
-      blockExplorerUrl: rpc.rpcPrefs?.blockExplorerUrl || '',
+      blockExplorerUrl:
+        rpc.blockExplorerUrl ?? (rpc.rpcPrefs?.blockExplorerUrl || ''),
      isATestNetwork: TEST_CHAINS.includes(rpc.chainId),
    };
  });

  const networksToRender = [
-    ...defaultNetworks,
+    // ...defaultNetworks,
    ...frequentRpcNetworkListDetails,
  ];
  let selectedNetwork =