diff --git a/app/scripts/first-time-state.js b/app/scripts/first-time-state.js
index b5f906862..214dccd1b 100644
--- 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: '',
},
],
},
diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index e23125111..ad61de600 100644
--- 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 ? (