From 54a8ade2669cb5f8f046509873bc2a9c25425847 Mon Sep 17 00:00:00 2001
From: HackyMiner <hackyminer@gmail.com>
Date: Fri, 26 Oct 2018 17:26:43 +0900
Subject: Add support for RPC endpoints with custom chain IDs (#5134)

---
 old-ui/app/components/app-bar.js     | 15 ++++++++-------
 old-ui/app/components/balance.js     | 11 +++++++++--
 old-ui/app/components/eth-balance.js | 12 +++++++++---
 3 files changed, 26 insertions(+), 12 deletions(-)

(limited to 'old-ui/app/components')

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 (
 
-- 
cgit