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 ? ( @@ -172,13 +178,13 @@ class NetworkDropdown extends Component {
)} rpc.rpcUrl !== LOCALHOST_RPC_URL, - ); - const rpcListDetailForLocalHost = rpcListDetail.filter( - (rpc) => rpc.rpcUrl === LOCALHOST_RPC_URL, - ); + // 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; @@ -334,14 +340,15 @@ class NetworkDropdown extends Component {
- {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 }, )} - )} + )} */}
{this.renderAddCustomButton()} diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js index 9eb842268..a6d64186d 100644 --- a/ui/components/app/network-display/network-display.js +++ b/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 } = - targetNetwork ?? currentNetwork; + const { nickname: networkNickname } = targetNetwork ?? currentNetwork; return ( ) : null } - label={ - networkType === NETWORK_TYPES.RPC - ? networkNickname ?? t('privateNetwork') - : t(networkType) + label={networkNickname ?? t('privateNetwork') } className={classnames('network-display', { 'network-display--disabled': disabled, diff --git a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js index acb067543..812cb55cb 100644 --- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js +++ b/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 && ( - - )} ); diff --git a/ui/pages/settings/networks-tab/networks-tab.js b/ui/pages/settings/networks-tab/networks-tab.js index 572acad3f..85ecdbc98 100644 --- a/ui/pages/settings/networks-tab/networks-tab.js +++ b/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, - iconColor: 'var(--color-icon-alternative)', + label: rpc.label, + 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 =