Add support for RPC endpoints with custom chain IDs (#5134)

6 files changed, 102 insertions, 22 deletions

diff --git a/old-ui/app/app.js b/old-ui/app/app.js
index 9be21ebad..f5e03d4f6 100644
--- a/old-ui/app/app.js
+++ b/old-ui/app/app.js
@@ -73,7 +73,7 @@ function mapStateToProps (state) {
     forgottenPassword: state.appState.forgottenPassword,
     nextUnreadNotice: state.metamask.nextUnreadNotice,
     lostAccounts: state.metamask.lostAccounts,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     featureFlags,
     suggestedTokens: state.metamask.suggestedTokens,
 
diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js
index 234c06a01..fa8e499ed 100644
--- a/old-ui/app/components/app-bar.js
+++ b/old-ui/app/components/app-bar.js
@@ -17,7 +17,7 @@ module.exports = class AppBar extends Component {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    frequentRpcList: PropTypes.array.isRequired,
+    frequentRpcListDetail: PropTypes.array.isRequired,
     isMascara: PropTypes.bool.isRequired,
     isOnboarding: PropTypes.bool.isRequired,
     identities: PropTypes.any.isRequired,
@@ -196,7 +196,7 @@ module.exports = class AppBar extends Component {
   renderNetworkDropdown () {
     const {
       dispatch,
-      frequentRpcList: rpcList,
+      frequentRpcListDetail: rpcList,
       provider,
     } = this.props
     const {
@@ -321,8 +321,8 @@ module.exports = class AppBar extends Component {
     ])
   }
 
-  renderCustomOption ({ rpcTarget, type }) {
-    const {dispatch} = this.props
+  renderCustomOption ({ rpcTarget, type, ticker }) {
+    const {dispatch, network} = this.props
 
     if (type !== 'rpc') {
       return null
@@ -340,7 +340,7 @@ module.exports = class AppBar extends Component {
       default:
         return h(DropdownMenuItem, {
           key: rpcTarget,
-          onClick: () => dispatch(actions.setRpcTarget(rpcTarget)),
+          onClick: () => dispatch(actions.setRpcTarget(rpcTarget, network, ticker)),
           closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         }, [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -354,7 +354,8 @@ module.exports = class AppBar extends Component {
     const {dispatch} = this.props
     const reversedRpcList = rpcList.slice().reverse()
 
-    return reversedRpcList.map((rpc) => {
+    return reversedRpcList.map((entry) => {
+      const rpc = entry.rpcUrl
       const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
 
       if ((rpc === LOCALHOST_RPC_URL) || currentRpcTarget) {
@@ -363,7 +364,7 @@ module.exports = class AppBar extends Component {
         return h(DropdownMenuItem, {
           key: `common${rpc}`,
           closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-          onClick: () => dispatch(actions.setRpcTarget(rpc)),
+          onClick: () => dispatch(actions.setRpcTarget(rpc, entry.chainId, entry.ticker)),
         }, [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
           rpc,
diff --git a/old-ui/app/components/balance.js b/old-ui/app/components/balance.js
index 57ca84564..8995f961f 100644
--- a/old-ui/app/components/balance.js
+++ b/old-ui/app/components/balance.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const connect = require('react-redux').connect
 const inherits = require('util').inherits
 const formatBalance = require('../util').formatBalance
 const generateBalanceObject = require('../util').generateBalanceObject
 const Tooltip = require('./tooltip.js')
 const FiatValue = require('./fiat-value.js')
 
-module.exports = EthBalanceComponent
+module.exports = connect(mapStateToProps)(EthBalanceComponent)
+function mapStateToProps (state) {
+  return {
+    ticker: state.metamask.ticker,
+  }
+}
 
 inherits(EthBalanceComponent, Component)
 function EthBalanceComponent () {
@@ -16,9 +22,10 @@ function EthBalanceComponent () {
 EthBalanceComponent.prototype.render = function () {
   var props = this.props
   let { value } = props
+  const { ticker } = props
   var style = props.style
   var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  value = value ? formatBalance(value, 6, needsParse) : '...'
+  value = value ? formatBalance(value, 6, needsParse, ticker) : '...'
   var width = props.width
 
   return (
diff --git a/old-ui/app/components/eth-balance.js b/old-ui/app/components/eth-balance.js
index 4f538fd31..4458e6a9a 100644
--- a/old-ui/app/components/eth-balance.js
+++ b/old-ui/app/components/eth-balance.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const connect = require('react-redux').connect
 const inherits = require('util').inherits
 const formatBalance = require('../util').formatBalance
 const generateBalanceObject = require('../util').generateBalanceObject
 const Tooltip = require('./tooltip.js')
 const FiatValue = require('./fiat-value.js')
 
-module.exports = EthBalanceComponent
+module.exports = connect(mapStateToProps)(EthBalanceComponent)
+function mapStateToProps (state) {
+  return {
+    ticker: state.metamask.ticker,
+  }
+}
 
 inherits(EthBalanceComponent, Component)
 function EthBalanceComponent () {
@@ -16,9 +22,9 @@ function EthBalanceComponent () {
 EthBalanceComponent.prototype.render = function () {
   var props = this.props
   let { value } = props
-  const { style, width } = props
+  const { ticker, style, width } = props
   var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  value = value ? formatBalance(value, 6, needsParse) : '...'
+  value = value ? formatBalance(value, 6, needsParse, ticker) : '...'
 
   return (
 
diff --git a/old-ui/app/config.js b/old-ui/app/config.js
index 392a6dba7..7a93887a5 100644
--- a/old-ui/app/config.js
+++ b/old-ui/app/config.js
@@ -68,7 +68,7 @@ ConfigScreen.prototype.render = function () {
 
           currentProviderDisplay(metamaskState),
 
-          h('div', { style: {display: 'flex'} }, [
+          h('div', { style: {display: 'block'} }, [
             h('input#new_rpc', {
               placeholder: 'New RPC URL',
               style: {
@@ -81,7 +81,70 @@ ConfigScreen.prototype.render = function () {
                 if (event.key === 'Enter') {
                   var element = event.target
                   var newRpc = element.value
-                  rpcValidation(newRpc, state)
+                  var chainid = document.querySelector('input#chainid')
+                  var ticker = document.querySelector('input#ticker')
+                  var nickname = document.querySelector('input#nickname')
+                  rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
+                }
+              },
+            }),
+            h('br'),
+            h('input#chainid', {
+              placeholder: 'ChainId (optional)',
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+              onKeyPress (event) {
+                if (event.key === 'Enter') {
+                  var element = document.querySelector('input#new_rpc')
+                  var newRpc = element.value
+                  var chainid = document.querySelector('input#chainid')
+                  var ticker = document.querySelector('input#ticker')
+                  var nickname = document.querySelector('input#nickname')
+                  rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
+                }
+              },
+            }),
+            h('br'),
+            h('input#ticker', {
+              placeholder: 'Symbol (optional)',
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+              onKeyPress (event) {
+                if (event.key === 'Enter') {
+                  var element = document.querySelector('input#new_rpc')
+                  var newRpc = element.value
+                  var chainid = document.querySelector('input#chainid')
+                  var ticker = document.querySelector('input#ticker')
+                  var nickname = document.querySelector('input#nickname')
+                  rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
+                }
+              },
+            }),
+            h('br'),
+            h('input#nickname', {
+              placeholder: 'Nickname (optional)',
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+              onKeyPress (event) {
+                if (event.key === 'Enter') {
+                  var element = document.querySelector('input#new_rpc')
+                  var newRpc = element.value
+                  var chainid = document.querySelector('input#chainid')
+                  var ticker = document.querySelector('input#ticker')
+                  var nickname = document.querySelector('input#nickname')
+                  rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                 }
               },
             }),
@@ -93,7 +156,10 @@ ConfigScreen.prototype.render = function () {
                 event.preventDefault()
                 var element = document.querySelector('input#new_rpc')
                 var newRpc = element.value
-                rpcValidation(newRpc, state)
+                var chainid = document.querySelector('input#chainid')
+                var ticker = document.querySelector('input#ticker')
+                var nickname = document.querySelector('input#nickname')
+                rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
               },
             }, 'Save'),
           ]),
@@ -189,9 +255,9 @@ ConfigScreen.prototype.render = function () {
   )
 }
 
-function rpcValidation (newRpc, state) {
+function rpcValidation (newRpc, chainid, ticker = 'ETH', nickname = '', state) {
   if (validUrl.isWebUri(newRpc)) {
-    state.dispatch(actions.setRpcTarget(newRpc))
+    state.dispatch(actions.setRpcTarget(newRpc, chainid, ticker, nickname))
   } else {
     var appendedRpc = `http://${newRpc}`
     if (validUrl.isWebUri(appendedRpc)) {
diff --git a/old-ui/app/util.js b/old-ui/app/util.js
index 962832ce7..40e79b88c 100644
--- a/old-ui/app/util.js
+++ b/old-ui/app/util.js
@@ -102,7 +102,7 @@ function parseBalance (balance) {
 
 // Takes wei hex, returns an object with three properties.
 // Its "formatted" property is what we generally use to render values.
-function formatBalance (balance, decimalsToKeep, needsParse = true) {
+function formatBalance (balance, decimalsToKeep, needsParse = true, ticker = 'ETH') {
   var parsed = needsParse ? parseBalance(balance) : balance.split('.')
   var beforeDecimal = parsed[0]
   var afterDecimal = parsed[1]
@@ -112,14 +112,14 @@ function formatBalance (balance, decimalsToKeep, needsParse = true) {
       if (afterDecimal !== '0') {
         var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
         if (sigFigs) { afterDecimal = sigFigs[0] }
-        formatted = '0.' + afterDecimal + ' ETH'
+        formatted = '0.' + afterDecimal + ` ${ticker}`
       }
     } else {
-      formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ' ETH'
+      formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ` ${ticker}`
     }
   } else {
     afterDecimal += Array(decimalsToKeep).join('0')
-    formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH'
+    formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ` ${ticker}`
   }
   return formatted
 }