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

3 files changed, 27 insertions, 18 deletions

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 9ffcb12cb..e6b3e0c0c 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -26,14 +26,14 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, accounts, selected, menuItemStyles, actions, keyrings } = this.props
+    const { identities, accounts, selected, menuItemStyles, actions, keyrings, ticker } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
       const isSelected = identity.address === selected
 
       const balanceValue = accounts[key].balance
-      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, true, ticker) : '...'
       const simpleAddress = identity.address.substring(2).toLowerCase()
 
       const keyring = keyrings.find((kr) => {
@@ -421,6 +421,7 @@ AccountDropdowns.propTypes = {
   network: PropTypes.number,
   // actions.showExportPrivateKeyModal: ,
   style: PropTypes.object,
+  ticker: PropTypes.string,
   enableAccountsSelector: PropTypes.bool,
   enableAccountOption: PropTypes.bool,
   enableAccountOptions: PropTypes.bool,
@@ -458,6 +459,7 @@ const mapDispatchToProps = (dispatch) => {
 
 function mapStateToProps (state) {
   return {
+    ticker: state.metamask.ticker,
     keyrings: state.metamask.keyrings,
     sidebarOpen: state.appState.sidebar.isOpen,
   }
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index b252b25d9..d4cc695a6 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -24,8 +24,9 @@ const notToggleElementClassnames = [
 function mapStateToProps (state) {
   return {
     provider: state.metamask.provider,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
+    network: state.metamask.network,
   }
 }
 
@@ -40,8 +41,8 @@ function mapDispatchToProps (dispatch) {
     setDefaultRpcTarget: type => {
       dispatch(actions.setDefaultRpcTarget(type))
     },
-    setRpcTarget: (target) => {
-      dispatch(actions.setRpcTarget(target))
+    setRpcTarget: (target, network, ticker, nickname) => {
+      dispatch(actions.setRpcTarget(target, network, ticker, nickname))
     },
     delRpcTarget: (target) => {
       dispatch(actions.delRpcTarget(target))
@@ -71,7 +72,7 @@ module.exports = compose(
 NetworkDropdown.prototype.render = function () {
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
-  const rpcList = props.frequentRpcList
+  const rpcListDetail = props.frequentRpcListDetail
   const isOpen = this.props.networkDropdownOpen
   const dropdownMenuItemStyle = {
     fontSize: '16px',
@@ -225,7 +226,7 @@ NetworkDropdown.prototype.render = function () {
     ),
 
     this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcList, props.provider),
+    this.renderCommonRpc(rpcListDetail, props.provider),
 
     h(
       DropdownMenuItem,
@@ -267,28 +268,33 @@ NetworkDropdown.prototype.getNetworkName = function () {
   } else if (providerName === 'rinkeby') {
     name = this.context.t('rinkeby')
   } else {
-    name = this.context.t('unknownNetwork')
+    name = provider.nickname || this.context.t('unknownNetwork')
   }
 
   return name
 }
 
-NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
   const props = this.props
-  const reversedRpcList = rpcList.slice().reverse()
+  const reversedRpcListDetail = rpcListDetail.slice().reverse()
+  const network = props.network
 
-  return reversedRpcList.map((rpc) => {
+  return reversedRpcListDetail.map((entry) => {
+    const rpc = entry.rpcUrl
+    const ticker = entry.ticker || 'ETH'
+    const nickname = entry.nickname || ''
     const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
 
     if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
       return null
     } else {
+      const chainId = entry.chainId || network
       return h(
         DropdownMenuItem,
         {
           key: `common${rpc}`,
           closeMenu: () => this.props.hideNetworkDropdown(),
-          onClick: () => props.setRpcTarget(rpc),
+          onClick: () => props.setRpcTarget(rpc, chainId, ticker, nickname),
           style: {
             fontSize: '16px',
             lineHeight: '20px',
@@ -302,7 +308,7 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
             style: {
               color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
             },
-          }, rpc),
+          }, nickname || rpc),
           h('i.fa.fa-times.delete',
           {
             onClick: (e) => {
@@ -317,8 +323,9 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
 }
 
 NetworkDropdown.prototype.renderCustomOption = function (provider) {
-  const { rpcTarget, type } = provider
+  const { rpcTarget, type, ticker, nickname } = provider
   const props = this.props
+  const network = props.network
 
   if (type !== 'rpc') return null
 
@@ -332,7 +339,7 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
         DropdownMenuItem,
         {
           key: rpcTarget,
-          onClick: () => props.setRpcTarget(rpcTarget),
+          onClick: () => props.setRpcTarget(rpcTarget, network, ticker, nickname),
           closeMenu: () => this.props.hideNetworkDropdown(),
           style: {
             fontSize: '16px',
@@ -347,7 +354,7 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
             style: {
               color: '#ffffff',
             },
-          }, rpcTarget),
+          }, nickname || rpcTarget),
         ]
       )
   }
diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js
index 699b54605..88ad56851 100644
--- a/ui/app/components/dropdowns/tests/network-dropdown.test.js
+++ b/ui/app/components/dropdowns/tests/network-dropdown.test.js
@@ -45,8 +45,8 @@ describe('Network Dropdown', () => {
         provider: {
           'type': 'test',
         },
-        frequentRpcList: [
-          'http://localhost:7545',
+        frequentRpcListDetail: [
+          { rpcUrl: 'http://localhost:7545' },
         ],
       },
       appState: {