diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index d23f16dca293..9b5236d7b5db 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -604,6 +604,9 @@ "negativeETH": { "message": "Can not send negative amounts of ETH." }, + "networkName": { + "message": "$1 Network" + }, "networks": { "message": "Networks" }, diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index f6250dc16b57..7077ea876a63 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -287,8 +287,8 @@ class PreferencesController { * @returns {Promise} Promise resolves with undefined * */ - updateFrequentRpcList (_url) { - return this.addToFrequentRpcList(_url) + updateFrequentRpcList (url, chainid, explorer, symbol) { + return this.addToFrequentRpcList(url, chainid, explorer, symbol) .then((rpcList) => { this.store.updateState({ frequentRpcList: rpcList }) return Promise.resolve() @@ -318,16 +318,16 @@ class PreferencesController { * @returns {Promise} The updated frequentRpcList. * */ - addToFrequentRpcList (_url) { + addToFrequentRpcList (url, chainid, explorer, symbol) { const rpcList = this.getFrequentRpcList() - const index = rpcList.findIndex((element) => { return element === _url }) + const index = rpcList.findIndex((element) => { return typeof element === 'object' ? element.url === url : element === url }) if (index !== -1) { rpcList.splice(index, 1) } - if (_url !== 'http://localhost:8545') { - rpcList.push(_url) + if (url !== 'http://localhost:8545') { + rpcList.push({ url, chainid, explorer, symbol }) } - if (rpcList.length > 2) { + if (rpcList.length > 3) { rpcList.shift() } return Promise.resolve(rpcList) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index fbbdbd848d9f..41ca4d760ba6 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -649,7 +649,7 @@ App.prototype.renderCustomOption = function (provider) { // Concatenate long URLs let label = symbol ? symbol + ' Network' : rpcTarget - if (rpcTarget.length > 31) { + if (rpcTarget && rpcTarget.length > 31) { label = label.substr(0, 34) + '...' } @@ -702,7 +702,17 @@ App.prototype.renderCommonRpc = function (rpcList, provider) { const props = this.props const rpcTarget = provider.rpcTarget - return rpcList.map((rpc) => { + return rpcList.map((entry) => { + var rpc, chainid, explorer, symbol + if (typeof entry === 'object') { + rpc = entry.url + chainid = entry.chainid + explorer = entry.explorer + symbol = entry.symbol + } else { + rpc = entry + chainid = explorer = symbol = null + } if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { return null } else { @@ -711,11 +721,11 @@ App.prototype.renderCommonRpc = function (rpcList, provider) { { key: `common${rpc}`, closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - onClick: () => props.dispatch(actions.setRpcTarget(rpc)), + onClick: () => props.dispatch(actions.setRpcTarget(rpc, chainid, explorer, symbol)), }, [ h('i.fa.fa-question-circle.fa-lg.menu-icon'), - rpc, + symbol ? symbol + ' Network' : rpc, rpcTarget === rpc ? h('.check', '✓') : null, ] ) diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index f4340c7a0636..67fd1e995256 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -299,9 +299,18 @@ NetworkDropdown.prototype.getNetworkName = function () { NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { const props = this.props const rpcTarget = provider.rpcTarget - const network = props.network - return rpcList.map((rpc) => { + return rpcList.map((entry) => { + var rpc, chainid, explorer, symbol + if (typeof entry === 'object') { + rpc = entry.url + chainid = entry.chainid + explorer = entry.explorer + symbol = entry.symbol + } else { + rpc = entry + chainid = explorer = symbol = null + } if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { return null } else { @@ -310,7 +319,7 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { { key: `common${rpc}`, closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setRpcTarget(rpc, network), + onClick: () => props.setRpcTarget(rpc, chainid, explorer, symbol), style: { fontFamily: 'DIN OT', fontSize: '16px', @@ -325,7 +334,7 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { style: { color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b', }, - }, rpc), + }, symbol ? this.context.t('networkName', [symbol]) : rpc), ] ) } @@ -335,7 +344,6 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { NetworkDropdown.prototype.renderCustomOption = function (provider) { const { rpcTarget, type, explorerUrl, symbol } = provider const props = this.props - const network = props.network if (type !== 'rpc') return null @@ -349,7 +357,7 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) { DropdownMenuItem, { key: rpcTarget, - onClick: () => props.setRpcTarget(rpcTarget, network, explorerUrl, symbol), + onClick: () => props.setRpcTarget(rpcTarget, type, explorerUrl, symbol), closeMenu: () => this.props.hideNetworkDropdown(), style: { fontFamily: 'DIN OT',