Make default networks editable - Initial

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: '',
       },
     ],
   },

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 = {}) {
+  renderCustomRpcList(rpcListDetail, provider, shouldShowTestNetworks) {
-    const reversedRpcListDetail = rpcListDetail.slice().reverse();
+    // const reversedRpcListDetail = rpcListDetail.slice().reverse();
 
-    return reversedRpcListDetail.map((entry) => {
+    return rpcListDetail.filter((entry) => shouldShowTestNetworks ? true : !TEST_CHAINS.includes(entry.chainId)).map((entry) => {
-      const { rpcUrl, chainId, ticker = 'ETH', nickname = '' } = 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={{
+          style={DROP_DOWN_MENU_ITEM_STYLE}
-            fontSize: '16px',
-            lineHeight: '20px',
-            padding: '16px',
-          }}
         >
           {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(
+    // const rpcListDetailWithoutLocalHost = rpcListDetail.filter(
-      (rpc) => rpc.rpcUrl !== LOCALHOST_RPC_URL,
+    //   (rpc) => rpc.rpcUrl !== LOCALHOST_RPC_URL,
-    );
+    // );
-    const rpcListDetailForLocalHost = rpcListDetail.filter(
+    // const rpcListDetailForLocalHost = rpcListDetail.filter(
-      (rpc) => rpc.rpcUrl === LOCALHOST_RPC_URL,
+    //   (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()}

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 } =
+  const { nickname: networkNickname } = targetNetwork ?? currentNetwork;
-    targetNetwork ?? currentNetwork;
 
   return (
     <Chip
@@ -68,10 +81,7 @@ export default function NetworkDisplay({
           <IconCaretDown size={16} className="network-display__icon" />
         ) : null
       }
-      label={
+      label={networkNickname ?? t('privateNetwork')
-        networkType === NETWORK_TYPES.RPC
-          ? networkNickname ?? t('privateNetwork')
-          : t(networkType)
       }
       className={classnames('network-display', {
         'network-display--disabled': disabled,

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>
   );

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,
+      label: rpc.label,
-      iconColor: 'var(--color-icon-alternative)',
+      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 =