Add identifier of private network to the network loading screen message.

4 files changed, 23 insertions, 7 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ed757ca18..b3badd6ee 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -242,6 +242,9 @@
   "connecting": {
     "message": "Connecting..."
   },
+  "connectingTo": {
+    "message": "Connecting to $1"
+  },
   "connectingToKovan": {
     "message": "Connecting to Kovan Test Network"
   },
diff --git a/ui/app/app.js b/ui/app/app.js
index 7669a5db9..4e58a6396 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -7,7 +7,7 @@ const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
 const log = require('loglevel')
-const { getMetaMaskAccounts } = require('./selectors')
+const { getMetaMaskAccounts, getNetworkIdentifier } = require('./selectors')
 
 // init
 const InitializeScreen = require('../../mascara/src/app/first-time').default
@@ -196,7 +196,7 @@ class App extends Component {
     if (loadingMessage) {
       return loadingMessage
     }
-    const { provider } = this.props
+    const { provider, providerId } = this.props
     const providerName = provider.type
 
     let name
@@ -210,7 +210,7 @@ class App extends Component {
     } else if (providerName === 'rinkeby') {
       name = this.context.t('connectingToRinkeby')
     } else {
-      name = this.context.t('connectingToUnknown')
+      name = this.context.t('connectingTo', [providerId])
     }
 
     return name
@@ -279,6 +279,7 @@ App.propTypes = {
   isMouseUser: PropTypes.bool,
   setMouseUserState: PropTypes.func,
   t: PropTypes.func,
+  providerId: PropTypes.string,
 }
 
 function mapStateToProps (state) {
@@ -348,6 +349,7 @@ function mapStateToProps (state) {
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
     Qr: state.appState.Qr,
     welcomeScreenSeen: state.metamask.welcomeScreenSeen,
+    providerId: getNetworkIdentifier(state),
 
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index ce042377d..e18404f42 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -23,14 +23,17 @@ Network.prototype.render = function () {
   const props = this.props
   const context = this.context
   const networkNumber = props.network
-  let providerName, providerNick
+  let providerName, providerNick, providerUrl
   try {
     providerName = props.provider.type
     providerNick = props.provider.nickname || ''
+    providerUrl = props.provider.rpcTarget
   } catch (e) {
     providerName = null
   }
-  let iconName, hoverText
+  const providerId = providerNick || providerName || providerUrl || null
+  let iconName
+  let hoverText
 
   if (providerName === 'mainnet') {
     hoverText = context.t('mainnet')
@@ -48,8 +51,8 @@ Network.prototype.render = function () {
     hoverText = context.t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = context.t('unknownNetwork')
-    iconName = 'unknown-private-network'
+    hoverText = providerId
+    iconName = 'private-network'
   }
 
   return (
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index 8259bb052..10bf63975 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -36,10 +36,18 @@ const selectors = {
   preferencesSelector,
   getMetaMaskAccounts,
   getCurrentEthBalance,
+  getNetworkIdentifier,
 }
 
 module.exports = selectors
 
+function getNetworkIdentifier (state) {
+  const { metamask: { provider: { type, nickname, rpcTarget } } } = state
+
+  return nickname || rpcTarget || type
+
+}
+
 function getSelectedAddress (state) {
   const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]