Add NETWORK_TYPE_RPC constant (#10203)

* Refactor network display props
* Add NETWORK_TYPE_RPC constant
* Consolidate network constants

app/scripts/controllers/network/network.js

@@ -13,6 +13,7 @@ import {
   RINKEBY,
   MAINNET,
   INFURA_PROVIDER_TYPES,
+  NETWORK_TYPE_RPC,
   NETWORK_TYPE_TO_ID_MAP,
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
@@ -26,7 +27,7 @@ const env = process.env.METAMASK_ENV
 let defaultProviderConfigOpts
 if (process.env.IN_TEST === 'true') {
   defaultProviderConfigOpts = {
-    type: 'rpc',
+    type: NETWORK_TYPE_RPC,
     rpcUrl: 'http://localhost:8545',
     chainId: '0x539',
     nickname: 'Localhost 8545',
@@ -160,7 +161,7 @@ export default class NetworkController extends EventEmitter {
 
   setRpcTarget(rpcUrl, chainId, ticker = 'ETH', nickname = '', rpcPrefs) {
     this.setProviderConfig({
-      type: 'rpc',
+      type: NETWORK_TYPE_RPC,
       rpcUrl,
       chainId,
       ticker,
@@ -172,8 +173,8 @@ export default class NetworkController extends EventEmitter {
   async setProviderType(type, rpcUrl = '', ticker = 'ETH', nickname = '') {
     assert.notEqual(
       type,
-      'rpc',
-      `NetworkController - cannot call "setProviderType" with type 'rpc'. use "setRpcTarget"`,
+      NETWORK_TYPE_RPC,
+      `NetworkController - cannot call "setProviderType" with type "${NETWORK_TYPE_RPC}". Use "setRpcTarget"`,
     )
     assert(
       INFURA_PROVIDER_TYPES.includes(type),
@@ -208,7 +209,7 @@ export default class NetworkController extends EventEmitter {
 
   getNetworkIdentifier() {
     const provider = this.providerStore.getState()
-    return provider.type === 'rpc' ? provider.rpcUrl : provider.type
+    return provider.type === NETWORK_TYPE_RPC ? provider.rpcUrl : provider.type
   }
 
   //
@@ -227,7 +228,7 @@ export default class NetworkController extends EventEmitter {
     if (isInfura) {
       this._configureInfuraProvider(type, this._infuraProjectId)
       // url-based rpc endpoints
-    } else if (type === 'rpc') {
+    } else if (type === NETWORK_TYPE_RPC) {
       this._configureStandardProvider(rpcUrl, chainId)
     } else {
       throw new Error(

shared/constants/network.js

@@ -3,6 +3,7 @@ export const RINKEBY = 'rinkeby'
 export const KOVAN = 'kovan'
 export const MAINNET = 'mainnet'
 export const GOERLI = 'goerli'
+export const NETWORK_TYPE_RPC = 'rpc'
 
 export const MAINNET_NETWORK_ID = '1'
 export const ROPSTEN_NETWORK_ID = '3'

test/unit/actions/config_test.js

@@ -2,6 +2,7 @@ import assert from 'assert'
 import freeze from 'deep-freeze-strict'
 import reducers from '../../../ui/app/ducks'
 import * as actionConstants from '../../../ui/app/store/actionConstants'
+import { NETWORK_TYPE_RPC } from '../../../shared/constants/network'
 
 describe('config view actions', function () {
   const initialState = {
@@ -25,7 +26,7 @@ describe('config view actions', function () {
       }
 
       const result = reducers(initialState, action)
-      assert.equal(result.metamask.provider.type, 'rpc')
+      assert.equal(result.metamask.provider.type, NETWORK_TYPE_RPC)
       assert.equal(result.metamask.provider.rpcUrl, 'foo')
     })
   })

test/unit/localhostState.js

@@ -1,3 +1,5 @@
+import { NETWORK_TYPE_RPC } from '../../shared/constants/network'
+
 /**
  * @typedef {Object} FirstTimeState
  * @property {Object} config Initial configuration parameters
@@ -11,7 +13,7 @@ const initialState = {
   config: {},
   NetworkController: {
     provider: {
-      type: 'rpc',
+      type: NETWORK_TYPE_RPC,
       rpcUrl: 'http://localhost:8545',
       chainId: '0x539',
     },

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

@@ -10,6 +10,7 @@ import {
   NETWORKS_FORM_ROUTE,
 } from '../../../helpers/constants/routes'
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app'
+import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 import {
   getEnvironmentType,
   isPrefixedFormattedHexString,
@@ -117,7 +118,7 @@ class NetworkDropdown extends Component {
     return reversedRpcListDetail.map((entry) => {
       const { rpcUrl, chainId, ticker = 'ETH', nickname = '' } = entry
       const isCurrentRpcTarget =
-        provider.type === 'rpc' && rpcUrl === provider.rpcUrl
+        provider.type === NETWORK_TYPE_RPC && rpcUrl === provider.rpcUrl
 
       return (
         <DropdownMenuItem

ui/app/components/app/loading-network-screen/loading-network-screen.container.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 import * as actions from '../../../store/actions'
 import { getNetworkIdentifier } from '../../../selectors'
 import LoadingNetworkScreen from './loading-network-screen.component'
@@ -9,7 +10,9 @@ const mapStateToProps = (state) => {
   const { rpcUrl, chainId, ticker, nickname, type } = provider
 
   const setProviderArgs =
-    type === 'rpc' ? [rpcUrl, chainId, ticker, nickname] : [provider.type]
+    type === NETWORK_TYPE_RPC
+      ? [rpcUrl, chainId, ticker, nickname]
+      : [provider.type]
 
   return {
     isLoadingNetwork: network === 'loading',

ui/app/components/app/network-display/network-display.component.js

@@ -1,21 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {
-  MAINNET_NETWORK_ID,
-  ROPSTEN_NETWORK_ID,
-  RINKEBY_NETWORK_ID,
-  KOVAN_NETWORK_ID,
-  GOERLI_NETWORK_ID,
-} from '../../../../../shared/constants/network'
-
-const networkIdToTypeMap = {
-  [MAINNET_NETWORK_ID]: 'mainnet',
-  [ROPSTEN_NETWORK_ID]: 'ropsten',
-  [RINKEBY_NETWORK_ID]: 'rinkeby',
-  [GOERLI_NETWORK_ID]: 'goerli',
-  [KOVAN_NETWORK_ID]: 'kovan',
-}
+import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 
 export default class NetworkDisplay extends Component {
   static defaultProps = {
@@ -23,9 +9,9 @@ export default class NetworkDisplay extends Component {
   }
 
   static propTypes = {
+    networkNickname: PropTypes.string.isRequired,
+    networkType: PropTypes.string.isRequired,
     colored: PropTypes.bool,
-    network: PropTypes.string,
-    provider: PropTypes.object,
   }
 
   static contextTypes = {
@@ -33,12 +19,11 @@ export default class NetworkDisplay extends Component {
   }
 
   renderNetworkIcon() {
-    const { network } = this.props
-    const networkClass = networkIdToTypeMap[network]
+    const { networkType } = this.props
 
-    return networkClass ? (
+    return networkType ? (
       <div
-        className={`network-display__icon network-display__icon--${networkClass}`}
+        className={`network-display__icon network-display__icon--${networkType}`}
       />
     ) : (
       <div
@@ -52,24 +37,19 @@ export default class NetworkDisplay extends Component {
   }
 
   render() {
-    const {
-      colored,
-      network,
-      provider: { type, nickname },
-    } = this.props
-    const networkClass = networkIdToTypeMap[network]
+    const { colored, networkNickname, networkType } = this.props
 
     return (
       <div
         className={classnames('network-display__container', {
           'network-display__container--colored': colored,
-          [`network-display__container--${networkClass}`]:
-            colored && networkClass,
+          [`network-display__container--${networkType}`]:
+            colored && networkType,
         })}
       >
-        {networkClass ? (
+        {networkType ? (
           <div
-            className={`network-display__icon network-display__icon--${networkClass}`}
+            className={`network-display__icon network-display__icon--${networkType}`}
           />
         ) : (
           <div
@@ -81,7 +61,9 @@ export default class NetworkDisplay extends Component {
           />
         )}
         <div className="network-display__name">
-          {type === 'rpc' && nickname ? nickname : this.context.t(type)}
+          {networkType === NETWORK_TYPE_RPC && networkNickname
+            ? networkNickname
+            : this.context.t(networkType)}
         </div>
       </div>
     )

ui/app/components/app/network-display/network-display.container.js

@@ -1,10 +1,14 @@
 import { connect } from 'react-redux'
 import NetworkDisplay from './network-display.component'
 
-const mapStateToProps = ({ metamask: { network, provider } }) => {
+const mapStateToProps = ({
+  metamask: {
+    provider: { nickname, type },
+  },
+}) => {
   return {
-    network,
-    provider,
+    networkNickname: nickname,
+    networkType: type,
   }
 }
 

ui/app/ducks/metamask/metamask.js

@@ -1,5 +1,6 @@
 import * as actionConstants from '../../store/actionConstants'
 import { ALERT_TYPES } from '../../../../shared/constants/alerts'
+import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network'
 
 export default function reduceMetamask(state = {}, action) {
   const metamaskState = {
@@ -63,7 +64,7 @@ export default function reduceMetamask(state = {}, action) {
       return {
         ...metamaskState,
         provider: {
-          type: 'rpc',
+          type: NETWORK_TYPE_RPC,
           rpcUrl: action.value,
         },
       }

ui/app/helpers/constants/common.js

@@ -5,14 +5,6 @@ export const WEI = 'WEI'
 export const PRIMARY = 'PRIMARY'
 export const SECONDARY = 'SECONDARY'
 
-export const NETWORK_TYPES = {
-  KOVAN: 'kovan',
-  MAINNET: 'mainnet',
-  RINKEBY: 'rinkeby',
-  ROPSTEN: 'ropsten',
-  GOERLI: 'goerli',
-}
-
 export const GAS_ESTIMATE_TYPES = {
   SLOW: 'SLOW',
   AVERAGE: 'AVERAGE',

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 import Button from '../../../components/ui/button'
 import LockIcon from '../../../components/ui/lock-icon'
 import {
@@ -90,7 +91,7 @@ export default class NetworksTab extends PureComponent {
     const listItemNetworkIsSelected = selectRpcUrl && selectRpcUrl === rpcUrl
     const listItemUrlIsProviderUrl = rpcUrl === providerUrl
     const listItemTypeIsProviderNonRpcType =
-      providerType !== 'rpc' && currentProviderType === providerType
+      providerType !== NETWORK_TYPE_RPC && currentProviderType === providerType
     const listItemNetworkIsCurrentProvider =
       !networkIsSelected &&
       !networksTabIsInAddMode &&
@@ -118,12 +119,12 @@ export default class NetworksTab extends PureComponent {
           className={classnames('networks-tab__networks-list-name', {
             'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
             'networks-tab__networks-list-name--disabled':
-              currentProviderType !== 'rpc' &&
+              currentProviderType !== NETWORK_TYPE_RPC &&
               !displayNetworkListItemAsSelected,
           })}
         >
           {label || this.context.t(labelKey)}
-          {currentProviderType !== 'rpc' && (
+          {currentProviderType !== NETWORK_TYPE_RPC && (
             <LockIcon width="14px" height="17px" fill="#cdcdcd" />
           )}
         </div>

ui/app/pages/settings/networks-tab/networks-tab.container.js

@@ -11,6 +11,7 @@ import {
 } from '../../../store/actions'
 import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app'
+import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import NetworksTab from './networks-tab.component'
 import { defaultNetworksData } from './networks-tab.constants'
@@ -37,7 +38,7 @@ const mapStateToProps = (state, ownProps) => {
     return {
       label: rpc.nickname,
       iconColor: '#6A737D',
-      providerType: 'rpc',
+      providerType: NETWORK_TYPE_RPC,
       rpcUrl: rpc.rpcUrl,
       chainId: rpc.chainId,
       ticker: rpc.ticker,
@@ -61,7 +62,7 @@ const mapStateToProps = (state, ownProps) => {
       networksToRender.find((network) => {
         return (
           network.rpcUrl === provider.rpcUrl ||
-          (network.providerType !== 'rpc' &&
+          (network.providerType !== NETWORK_TYPE_RPC &&
             network.providerType === provider.type)
         )
       }) || {}

ui/app/pages/swaps/view-quote/tests/view-quote-price-difference.test.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
+import { NETWORK_TYPE_RPC } from '../../../../../../shared/constants/network'
 import ViewQuotePriceDifference from '../view-quote-price-difference'
 
 describe('View Price Quote Difference', function () {
@@ -11,7 +12,7 @@ describe('View Price Quote Difference', function () {
   const state = {
     metamask: {
       tokens: [],
-      provider: { type: 'rpc', nickname: '', rpcUrl: '' },
+      provider: { type: NETWORK_TYPE_RPC, nickname: '', rpcUrl: '' },
       preferences: { showFiatInTestnets: true },
       currentCurrency: 'usd',
       conversionRate: 600.0,

ui/app/selectors/selectors.js

@@ -1,7 +1,7 @@
 import { stripHexPrefix } from 'ethereumjs-util'
 import { createSelector } from 'reselect'
 import { addHexPrefix } from '../../../app/scripts/lib/util'
-import { NETWORK_TYPES } from '../helpers/constants/common'
+import { MAINNET, NETWORK_TYPE_RPC } from '../../../shared/constants/network'
 import {
   shortenAddress,
   checksumAddress,
@@ -21,7 +21,7 @@ export function getNetworkIdentifier(state) {
 
 export function getMetricsNetworkIdentifier(state) {
   const { provider } = state.metamask
-  return provider.type === 'rpc' ? provider.rpcUrl : provider.type
+  return provider.type === NETWORK_TYPE_RPC ? provider.rpcUrl : provider.type
 }
 
 export function getCurrentChainId(state) {
@@ -281,7 +281,7 @@ function getSuggestedTokenCount(state) {
 
 export function getIsMainnet(state) {
   const networkType = getNetworkIdentifier(state)
-  return networkType === NETWORK_TYPES.MAINNET
+  return networkType === MAINNET
 }
 
 export function getPreferences({ metamask }) {