Using NETWORK_TYPES constants where applicable (Refactor) (#15930)

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

@@ -212,28 +212,26 @@ class NetworkDropdown extends Component {
   getNetworkName() {
     const { provider } = this.props;
     const providerName = provider.type;
+    const { t } = this.context;
 
-    let name;
+    switch (providerName) {
-
+      case NETWORK_TYPES.MAINNET:
-    if (providerName === 'mainnet') {
+        return t('mainnet');
-      name = this.context.t('mainnet');
+      case NETWORK_TYPES.ROPSTEN:
-    } else if (providerName === 'ropsten') {
+        return t('ropsten');
-      name = this.context.t('ropsten');
+      case NETWORK_TYPES.KOVAN:
-    } else if (providerName === 'kovan') {
+        return t('kovan');
-      name = this.context.t('kovan');
+      case NETWORK_TYPES.RINKEBY:
-    } else if (providerName === 'rinkeby') {
+        return t('rinkeby');
-      name = this.context.t('rinkeby');
+      case NETWORK_TYPES.GOERLI:
-    } else if (providerName === 'goerli') {
+        return t('goerli');
-      name = this.context.t('goerli');
+      case NETWORK_TYPES.SEPOLIA:
-    } else if (providerName === 'sepolia') {
+        return t('sepolia');
-      name = this.context.t('sepolia');
+      case NETWORK_TYPES.LOCALHOST:
-    } else if (providerName === 'localhost') {
+        return t('localhost');
-      name = this.context.t('localhost');
+      default:
-    } else {
+        return provider.nickname || t('unknownNetwork');
-      name = provider.nickname || this.context.t('unknownNetwork');
     }
-
-    return name;
   }
 
   renderNetworkEntry(network) {
@@ -347,7 +345,7 @@ class NetworkDropdown extends Component {
         </div>
 
         <div className="network-dropdown-list">
-          {this.renderNetworkEntry('mainnet')}
+          {this.renderNetworkEntry(NETWORK_TYPES.MAINNET)}
 
           {this.renderCustomRpcList(
             rpcListDetailWithoutLocalHost,
@@ -356,11 +354,11 @@ class NetworkDropdown extends Component {
 
           {shouldShowTestNetworks && (
             <>
-              {this.renderNetworkEntry('ropsten')}
+              {this.renderNetworkEntry(NETWORK_TYPES.ROPSTEN)}
-              {this.renderNetworkEntry('kovan')}
+              {this.renderNetworkEntry(NETWORK_TYPES.KOVAN)}
-              {this.renderNetworkEntry('rinkeby')}
+              {this.renderNetworkEntry(NETWORK_TYPES.RINKEBY)}
-              {this.renderNetworkEntry('goerli')}
+              {this.renderNetworkEntry(NETWORK_TYPES.GOERLI)}
-              {this.renderNetworkEntry('sepolia')}
+              {this.renderNetworkEntry(NETWORK_TYPES.SEPOLIA)}
               {this.renderCustomRpcList(
                 rpcListDetailForLocalHost,
                 this.props.provider,

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '../../ui/button';
 import LoadingScreen from '../../ui/loading-screen';
 import { SECOND } from '../../../../shared/constants/time';
+import { NETWORK_TYPES } from '../../../../shared/constants/network';
 
 export default class LoadingNetworkScreen extends PureComponent {
   state = {
@@ -38,26 +39,24 @@ export default class LoadingNetworkScreen extends PureComponent {
     }
     const { provider, providerId } = this.props;
     const providerName = provider.type;
-
+    const { t } = this.context;
-    let name;
+
-
+    switch (providerName) {
-    if (providerName === 'mainnet') {
+      case NETWORK_TYPES.MAINNET:
-      name = this.context.t('connectingToMainnet');
+        return t('connectingToMainnet');
-    } else if (providerName === 'ropsten') {
+      case NETWORK_TYPES.ROPSTEN:
-      name = this.context.t('connectingToRopsten');
+        return t('connectingToRopsten');
-    } else if (providerName === 'kovan') {
+      case NETWORK_TYPES.KOVAN:
-      name = this.context.t('connectingToKovan');
+        return t('connectingToKovan');
-    } else if (providerName === 'rinkeby') {
+      case NETWORK_TYPES.RINKEBY:
-      name = this.context.t('connectingToRinkeby');
+        return t('connectingToRinkeby');
-    } else if (providerName === 'goerli') {
+      case NETWORK_TYPES.GOERLI:
-      name = this.context.t('connectingToGoerli');
+        return t('connectingToGoerli');
-    } else if (providerName === 'sepolia') {
+      case NETWORK_TYPES.SEPOLIA:
-      name = this.context.t('connectingToSepolia');
+        return t('connectingToSepolia');
-    } else {
+      default:
-      name = this.context.t('connectingTo', [providerId]);
+        return t('connectingTo', [providerId]);
     }
-
-    return name;
   };
 
   renderErrorScreenContent = () => {

ui/pages/routes/routes.component.js

@@ -71,6 +71,7 @@ import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../shared/constants/app';
+import { NETWORK_TYPES } from '../../../shared/constants/network';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import ConfirmationPage from '../confirmation';
 import OnboardingFlow from '../onboarding-flow/onboarding-flow';
@@ -459,22 +460,23 @@ export default class Routes extends Component {
       return loadingMessage;
     }
     const { providerType, providerId } = this.props;
+    const { t } = this.context;
 
     switch (providerType) {
-      case 'mainnet':
+      case NETWORK_TYPES.MAINNET:
-        return this.context.t('connectingToMainnet');
+        return t('connectingToMainnet');
-      case 'ropsten':
+      case NETWORK_TYPES.ROPSTEN:
-        return this.context.t('connectingToRopsten');
+        return t('connectingToRopsten');
-      case 'kovan':
+      case NETWORK_TYPES.KOVAN:
-        return this.context.t('connectingToKovan');
+        return t('connectingToKovan');
-      case 'rinkeby':
+      case NETWORK_TYPES.RINKEBY:
-        return this.context.t('connectingToRinkeby');
+        return t('connectingToRinkeby');
-      case 'goerli':
+      case NETWORK_TYPES.GOERLI:
-        return this.context.t('connectingToGoerli');
+        return t('connectingToGoerli');
-      case 'sepolia':
+      case NETWORK_TYPES.SEPOLIA:
-        return this.context.t('connectingToSepolia');
+        return t('connectingToSepolia');
       default:
-        return this.context.t('connectingTo', [providerId]);
+        return t('connectingTo', [providerId]);
     }
   }
 }