Add connecting indication templates

2 files changed, 42 insertions, 6 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 35a360c84..8267658b1 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -604,6 +604,21 @@
   "ropsten": {
     "message": "Ropsten Test Network"
   },
+  "connectingToMainnet": {
+    "message": "Connecting to Main Ethereum Network"
+  },
+  "connectingToRopsten": {
+    "message": "Connecting to Ropsten Test Network"
+  },
+  "connectingToKovan": {
+    "message": "Connecting to Kovan Test Network"
+  },
+  "connectingToRinkeby": {
+    "message": "Connecting to Rinkeby Test Network"
+  },
+  "connectingToUnknown": {
+    "message": "Connecting to Unknown Network"
+  },
   "sampleAccountName": {
     "message": "E.g. My new account",
     "description": "Help user understand concept of adding a human-readable name to their account"
diff --git a/ui/app/app.js b/ui/app/app.js
index 954299a6a..6d9296131 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -132,7 +132,7 @@ App.prototype.render = function () {
   } = props
   const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
   const loadMessage = loadingMessage || isLoadingNetwork ?
-    `Connecting to ${this.getNetworkName()}` : null
+    this.getConnectingLabel() : null
   log.debug('Main ui render function')
 
   return (
@@ -550,6 +550,27 @@ App.prototype.toggleMetamaskActive = function () {
   }
 }
 
+App.prototype.getConnectingLabel = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = t('connectingToMainnet')
+  } else if (providerName === 'ropsten') {
+    name = t('connectingToRopsten')
+  } else if (providerName === 'kovan') {
+    name = t('connectingToRopsten')
+  } else if (providerName === 'rinkeby') {
+    name = t('connectingToRinkeby')
+  } else {
+    name = t('connectingToUnknown')
+  }
+
+  return name
+}
+
 App.prototype.getNetworkName = function () {
   const { provider } = this.props
   const providerName = provider.type
@@ -557,15 +578,15 @@ App.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = 'Main Ethereum Network'
+    name = t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = 'Ropsten Test Network'
+    name = t('ropsten')
   } else if (providerName === 'kovan') {
-    name = 'Kovan Test Network'
+    name = t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = 'Rinkeby Test Network'
+    name = t('rinkeby')
   } else {
-    name = 'Unknown Private Network'
+    name = t('unknownNetwork')
   }
 
   return name