mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
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
This commit is contained in:
parent
994a7d5458
commit
2647be9662
@ -10,7 +10,15 @@
|
|||||||
const initialState = {
|
const initialState = {
|
||||||
config: {},
|
config: {},
|
||||||
PreferencesController: {
|
PreferencesController: {
|
||||||
frequentRpcListDetail: [],
|
frequentRpcListDetail: [
|
||||||
|
{
|
||||||
|
rpcUrl: 'http://localhost:8545',
|
||||||
|
chainId: '0x539',
|
||||||
|
ticker: 'ETH',
|
||||||
|
nickname: 'Localhost 8545',
|
||||||
|
rpcPrefs: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -7,7 +7,10 @@ import classnames from 'classnames';
|
|||||||
import Button from '../../ui/button';
|
import Button from '../../ui/button';
|
||||||
import * as actions from '../../../store/actions';
|
import * as actions from '../../../store/actions';
|
||||||
import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
|
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 { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
|
||||||
|
|
||||||
import ColorIndicator from '../../ui/color-indicator';
|
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();
|
const reversedRpcListDetail = rpcListDetail.slice().reverse();
|
||||||
|
|
||||||
return reversedRpcListDetail.map((entry) => {
|
return reversedRpcListDetail.map((entry) => {
|
||||||
@ -157,6 +160,14 @@ class NetworkDropdown extends Component {
|
|||||||
const isCurrentRpcTarget =
|
const isCurrentRpcTarget =
|
||||||
provider.type === NETWORK_TYPE_RPC && rpcUrl === provider.rpcUrl;
|
provider.type === NETWORK_TYPE_RPC && rpcUrl === provider.rpcUrl;
|
||||||
|
|
||||||
|
let borderColor = COLORS.UI2;
|
||||||
|
if (isCurrentRpcTarget) {
|
||||||
|
borderColor = COLORS.WHITE;
|
||||||
|
}
|
||||||
|
if (opts.isLocalHost) {
|
||||||
|
borderColor = 'localhost';
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
key={`common${rpcUrl}`}
|
key={`common${rpcUrl}`}
|
||||||
@ -180,10 +191,10 @@ class NetworkDropdown extends Component {
|
|||||||
<div className="network-check__transparent">✓</div>
|
<div className="network-check__transparent">✓</div>
|
||||||
)}
|
)}
|
||||||
<ColorIndicator
|
<ColorIndicator
|
||||||
color={COLORS.UI2}
|
color={opts.isLocalHost ? 'localhost' : COLORS.UI2}
|
||||||
size={SIZES.LG}
|
size={SIZES.LG}
|
||||||
type={ColorIndicator.TYPES.FILLED}
|
type={ColorIndicator.TYPES.FILLED}
|
||||||
borderColor={isCurrentRpcTarget ? COLORS.WHITE : COLORS.UI2}
|
borderColor={borderColor}
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
className="network-name-item"
|
className="network-name-item"
|
||||||
@ -278,6 +289,12 @@ class NetworkDropdown extends Component {
|
|||||||
hideTestNetMessage,
|
hideTestNetMessage,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const rpcListDetail = this.props.frequentRpcListDetail;
|
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 isOpen = this.props.networkDropdownOpen;
|
||||||
const { t } = this.context;
|
const { t } = this.context;
|
||||||
|
|
||||||
@ -340,7 +357,10 @@ class NetworkDropdown extends Component {
|
|||||||
<div className="network-dropdown-list">
|
<div className="network-dropdown-list">
|
||||||
{this.renderNetworkEntry('mainnet')}
|
{this.renderNetworkEntry('mainnet')}
|
||||||
|
|
||||||
{this.renderCustomRpcList(rpcListDetail, this.props.provider)}
|
{this.renderCustomRpcList(
|
||||||
|
rpcListDetailWithoutLocalHost,
|
||||||
|
this.props.provider,
|
||||||
|
)}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={classnames('network-dropdown-testnets', {
|
className={classnames('network-dropdown-testnets', {
|
||||||
@ -351,7 +371,11 @@ class NetworkDropdown extends Component {
|
|||||||
{this.renderNetworkEntry('kovan')}
|
{this.renderNetworkEntry('kovan')}
|
||||||
{this.renderNetworkEntry('rinkeby')}
|
{this.renderNetworkEntry('rinkeby')}
|
||||||
{this.renderNetworkEntry('goerli')}
|
{this.renderNetworkEntry('goerli')}
|
||||||
{this.renderNetworkEntry('localhost')}
|
{this.renderCustomRpcList(
|
||||||
|
rpcListDetailForLocalHost,
|
||||||
|
this.props.provider,
|
||||||
|
{ isLocalHost: true },
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -4,6 +4,7 @@ import thunk from 'redux-thunk';
|
|||||||
import Button from '../../ui/button';
|
import Button from '../../ui/button';
|
||||||
import { mountWithRouter } from '../../../../test/lib/render-helpers';
|
import { mountWithRouter } from '../../../../test/lib/render-helpers';
|
||||||
import ColorIndicator from '../../ui/color-indicator';
|
import ColorIndicator from '../../ui/color-indicator';
|
||||||
|
import { LOCALHOST_RPC_URL } from '../../../../shared/constants/network';
|
||||||
import NetworkDropdown from './network-dropdown';
|
import NetworkDropdown from './network-dropdown';
|
||||||
import { DropdownMenuItem } from './dropdown';
|
import { DropdownMenuItem } from './dropdown';
|
||||||
|
|
||||||
@ -55,6 +56,7 @@ describe('Network Dropdown', () => {
|
|||||||
frequentRpcListDetail: [
|
frequentRpcListDetail: [
|
||||||
{ chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
|
{ chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
|
||||||
{ rpcUrl: 'http://localhost:7546' },
|
{ rpcUrl: 'http://localhost:7546' },
|
||||||
|
{ rpcUrl: LOCALHOST_RPC_URL, nickname: 'localhost' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
appState: {
|
appState: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user