Ensure one and only one localhost option appears in network list (#12786)

* Ensure one and only one localhost option appears in network list

* Fix unit tests

app/scripts/first-time-state.js

@@ -10,7 +10,15 @@
 const initialState = {
   config: {},
   PreferencesController: {
-    frequentRpcListDetail: [],
+    frequentRpcListDetail: [
+      {
+        rpcUrl: 'http://localhost:8545',
+        chainId: '0x539',
+        ticker: 'ETH',
+        nickname: 'Localhost 8545',
+        rpcPrefs: {},
+      },
+    ],
   },
 };
 

ui/components/app/dropdowns/network-dropdown.js

@@ -7,7 +7,10 @@ import classnames from 'classnames';
 import Button from '../../ui/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
-import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network';
+import {
+  NETWORK_TYPE_RPC,
+  LOCALHOST_RPC_URL,
+} from '../../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
 
 import ColorIndicator from '../../ui/color-indicator';
@@ -149,7 +152,7 @@ class NetworkDropdown extends Component {
     );
   }
 
-  renderCustomRpcList(rpcListDetail, provider) {
+  renderCustomRpcList(rpcListDetail, provider, opts = {}) {
     const reversedRpcListDetail = rpcListDetail.slice().reverse();
 
     return reversedRpcListDetail.map((entry) => {
@@ -157,6 +160,14 @@ class NetworkDropdown extends Component {
       const isCurrentRpcTarget =
         provider.type === NETWORK_TYPE_RPC && rpcUrl === provider.rpcUrl;
 
+      let borderColor = COLORS.UI2;
+      if (isCurrentRpcTarget) {
+        borderColor = COLORS.WHITE;
+      }
+      if (opts.isLocalHost) {
+        borderColor = 'localhost';
+      }
+
       return (
         <DropdownMenuItem
           key={`common${rpcUrl}`}
@@ -180,10 +191,10 @@ class NetworkDropdown extends Component {
             <div className="network-check__transparent">✓</div>
           )}
           <ColorIndicator
-            color={COLORS.UI2}
+            color={opts.isLocalHost ? 'localhost' : COLORS.UI2}
             size={SIZES.LG}
             type={ColorIndicator.TYPES.FILLED}
-            borderColor={isCurrentRpcTarget ? COLORS.WHITE : COLORS.UI2}
+            borderColor={borderColor}
           />
           <span
             className="network-name-item"
@@ -278,6 +289,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 isOpen = this.props.networkDropdownOpen;
     const { t } = this.context;
 
@@ -340,7 +357,10 @@ class NetworkDropdown extends Component {
         <div className="network-dropdown-list">
           {this.renderNetworkEntry('mainnet')}
 
-          {this.renderCustomRpcList(rpcListDetail, this.props.provider)}
+          {this.renderCustomRpcList(
+            rpcListDetailWithoutLocalHost,
+            this.props.provider,
+          )}
 
           <div
             className={classnames('network-dropdown-testnets', {
@@ -351,7 +371,11 @@ class NetworkDropdown extends Component {
             {this.renderNetworkEntry('kovan')}
             {this.renderNetworkEntry('rinkeby')}
             {this.renderNetworkEntry('goerli')}
-            {this.renderNetworkEntry('localhost')}
+            {this.renderCustomRpcList(
+              rpcListDetailForLocalHost,
+              this.props.provider,
+              { isLocalHost: true },
+            )}
           </div>
         </div>
 

ui/components/app/dropdowns/network-dropdown.test.js

@@ -4,6 +4,7 @@ import thunk from 'redux-thunk';
 import Button from '../../ui/button';
 import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import ColorIndicator from '../../ui/color-indicator';
+import { LOCALHOST_RPC_URL } from '../../../../shared/constants/network';
 import NetworkDropdown from './network-dropdown';
 import { DropdownMenuItem } from './dropdown';
 
@@ -55,6 +56,7 @@ describe('Network Dropdown', () => {
         frequentRpcListDetail: [
           { chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
           { rpcUrl: 'http://localhost:7546' },
+          { rpcUrl: LOCALHOST_RPC_URL, nickname: 'localhost' },
         ],
       },
       appState: {