From f15825d0c4d6ca89813ff636f41722c8f89f158c Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 22 Nov 2021 12:54:42 -0330 Subject: [PATCH] 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 +++++- .../app/dropdowns/network-dropdown.js | 36 +++++++++++++++---- .../app/dropdowns/network-dropdown.test.js | 2 ++ 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/app/scripts/first-time-state.js b/app/scripts/first-time-state.js index 34969b58f..857921889 100644 --- a/app/scripts/first-time-state.js +++ b/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: {}, + }, + ], }, }; diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index 2e2528e47..889ba9fa9 100644 --- a/ui/components/app/dropdowns/network-dropdown.js +++ b/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 ( ✓ )} 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 {
{this.renderNetworkEntry('mainnet')} - {this.renderCustomRpcList(rpcListDetail, this.props.provider)} + {this.renderCustomRpcList( + rpcListDetailWithoutLocalHost, + this.props.provider, + )}
diff --git a/ui/components/app/dropdowns/network-dropdown.test.js b/ui/components/app/dropdowns/network-dropdown.test.js index 263460b85..f8546f8b6 100644 --- a/ui/components/app/dropdowns/network-dropdown.test.js +++ b/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: {