diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js
index ca04fe264..db2fafd82 100644
--- a/app/scripts/lib/buy-eth-url.js
+++ b/app/scripts/lib/buy-eth-url.js
@@ -1,53 +1,89 @@
-module.exports = getBuyEthUrl
+module.exports = {
+ getBuyEthUrl,
+ getFaucets,
+ getExchanges,
+}
+const ethNetProps = require('eth-net-props')
/**
- * Gives the caller a url at which the user can acquire eth, depending on the network they are in
+ * Gives the caller a url at which the user can acquire coin, depending on the network they are in
*
* @param {object} opts Options required to determine the correct url
* @param {string} opts.network The network for which to return a url
* @param {string} opts.amount The amount of ETH to buy on coinbase. Only relevant if network === '1'.
* @param {string} opts.address The address the bought ETH should be sent to. Only relevant if network === '1'.
+ * @param {number} opts.ind The position of the link (to faucet, or exchange) in the array of links for selected network
* @returns {string|undefined} The url at which the user can access ETH, while in the given network. If the passed
* network does not match any of the specified cases, or if no network is given, returns undefined.
*
*/
-function getBuyEthUrl ({ network, amount, address, exchange }) {
+function getBuyEthUrl ({ network, amount, address, ind }) {
let url
switch (network) {
case '1':
- url = `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH`
+ case '99':
+ case '100':
+ url = getExchanges({network, amount, address})[ind].link
break
-
case '3':
- url = 'https://faucet.metamask.io/'
- break
-
case '4':
- url = 'https://www.rinkeby.io/'
- break
-
case '42':
- url = 'https://github.com/kovan-testnet/faucet'
- break
-
case '77':
- url = 'https://faucet.poa.network/'
+ url = getFaucets(network)[ind]
break
-
- case '99': {
- switch (exchange) {
- case 'binance':
- url = 'https://www.binance.com/en/trade/POA_ETH'
- break
- case 'bibox':
- url = 'https://www.bibox.com/exchange?coinPair=POA_ETH'
- break
- case 'cex.plus':
- url = 'http://cex.plus/market/poa_eth'
- break
- }
- break
- }
}
return url
}
+
+/**
+ * Retrieves the array of faucets for given network ID of testnet
+ *
+ * @param {string} The network ID
+ * @returns {array} The array of faucets for given network ID
+ */
+function getFaucets (network) {
+ return ethNetProps.faucetLinks(network)
+}
+
+/**
+ * Retrieves the array of exchanges for given network ID of production chain
+ *
+ * @param {object} opts Options required to determine the correct exchange service url
+ * @param {string} opts.network The network ID
+ * @param {string} opts.amount The amount of ETH to buy on coinbase. Only relevant if network === '1'.
+ * @param {string} opts.address The address the bought ETH should be sent to. Only relevant if network === '1'.
+ * @returns {array} The array of exchanges for given network ID
+ */
+function getExchanges ({network, amount, address}) {
+ const networkID = Number(network)
+ switch (networkID) {
+ case 1:
+ return [
+ {
+ link: `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH`,
+ },
+ ]
+ case 99:
+ return [
+ {
+ name: 'Binance',
+ link: 'https://www.binance.com/en/trade/POA_ETH',
+ },
+ {
+ name: 'BiBox',
+ link: 'https://www.bibox.com/exchange?coinPair=POA_ETH',
+ },
+ {
+ name: 'CEX Plus',
+ link: 'http://cex.plus/market/poa_eth',
+ },
+ ]
+ case 100:
+ return [
+ {
+ name: 'xDai TokenBridge',
+ link: 'https://dai-bridge.poa.network/',
+ },
+ ]
+ }
+}
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index af21ee2f2..4ed4104a9 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -39,7 +39,6 @@ const TokenRatesController = require('./controllers/token-rates')
const DetectTokensController = require('./controllers/detect-tokens')
const nodeify = require('./lib/nodeify')
const accountImporter = require('./account-import-strategies')
-const getBuyEthUrl = require('./lib/buy-eth-url')
const Mutex = require('await-semaphore').Mutex
const version = require('../manifest.json').version
const BN = require('ethereumjs-util').BN
@@ -359,8 +358,6 @@ module.exports = class MetamaskController extends EventEmitter {
unMarkPasswordForgotten: this.unMarkPasswordForgotten.bind(this),
getGasPrice: (cb) => cb(null, this.getGasPrice()),
- // coinbase
- buyEth: this.buyEth.bind(this),
// shapeshift
createShapeShiftTx: this.createShapeShiftTx.bind(this),
@@ -1459,20 +1456,6 @@ module.exports = class MetamaskController extends EventEmitter {
}
}
- /**
- * A method for forwarding the user to the easiest way to obtain ether,
- * or the network "gas" currency, for the current selected network.
- *
- * @param {string} address - The address to fund.
- * @param {string} amount - The amount of ether desired, as a base 10 string.
- */
- buyEth (address, amount, exchange) {
- if (!amount) amount = '5'
- const network = this.networkController.getNetworkState()
- const url = getBuyEthUrl({ network, address, amount, exchange })
- if (url) this.platform.openWindow({ url })
- }
-
/**
* A method for triggering a shapeshift currency transfer.
* @param {string} depositAddress - The address to deposit to.
diff --git a/old-ui/app/components/buy-button-subview.js b/old-ui/app/components/buy-button-subview.js
index 945c2f8b9..295d23964 100644
--- a/old-ui/app/components/buy-button-subview.js
+++ b/old-ui/app/components/buy-button-subview.js
@@ -1,17 +1,197 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../../ui/app/actions')
-const CoinbaseForm = require('./coinbase-form')
-const ShapeshiftForm = require('./shapeshift-form')
-const Loading = require('./loading')
-const AccountPanel = require('./account-panel')
-const RadioList = require('./custom-radio-list')
-const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
-const ethNetProps = require('eth-net-props')
+import React, {Component} from 'react'
+import { connect } from 'react-redux'
+import actions from '../../../ui/app/actions'
+import CoinbaseForm from './coinbase-form'
+import ShapeshiftForm from './shapeshift-form'
+import Loading from './loading'
+import AccountPanel from './account-panel'
+import RadioList from './custom-radio-list'
+import { getNetworkDisplayName } from '../../../app/scripts/controllers/network/util'
+import { getFaucets, getExchanges } from '../../../app/scripts/lib/buy-eth-url'
+import ethNetProps from 'eth-net-props'
+import PropTypes from 'prop-types'
-module.exports = connect(mapStateToProps)(BuyButtonSubview)
+class BuyButtonSubview extends Component {
+ render () {
+ return (
+
+ { this.headerSubview() }
+ { this.primarySubview() }
+
+ )
+ }
+
+ headerSubview () {
+ const props = this.props
+ const { network } = props
+ const isLoading = props.isSubLoading
+ const coinName = ethNetProps.props.getNetworkCoinName(network)
+ return (
+
+ { /* loading indication*/ }
+
+
+
+ { /* account panel*/ }
+
+ { /* header bar (back button, label)*/ }
+
+ this.backButtonContext()}
+ style={{
+ position: 'absolute',
+ left: '30px',
+ }}
+ />
+ {`Buy ${coinName}`}
+
+
+
Select Service
+
+
+ { this._getBuyOptionsView(network) }
+
+ )
+ }
+ }
+
+ _getBuyOptionsView (network) {
+ const isTestnet = ethNetProps.props.isTestnet(network)
+ if (isTestnet) {
+ return this._getFaucetsView(network)
+ } else {
+ return this._getExchangesView(network)
+ }
+ }
+
+ _getExchangesView (network) {
+ const exchanges = getExchanges({network})
+ return exchanges.map((exchange, ind) => {
+ return this.props.dispatch(actions.buyEth({ network, ind }))}
+ >
+ { exchange.name }
+
+ })
+ }
+
+ _getFaucetsView (network) {
+ const faucets = getFaucets(network)
+ if (faucets.length === 0) {
+ return Unknown network ID
+ }
+ const networkName = getNetworkDisplayName(network)
+ return faucets.map((faucet, ind) => {
+ const faucetNum = faucets.length > 1 ? (ind + 1) : ''
+ const faucetLabel = `${networkName} Test Faucet ${faucetNum}`
+ return this.props.dispatch(actions.buyEth({ network, ind }))}
+ >
+ { faucetLabel }
+
+ })
+ }
+
+ mainnetSubview () {
+ const props = this.props
+
+ return (
+
+
+ this.radioHandler(event)}
+ />
+
+
+ { props.buyView.subview }
+
+ { this.formVersionSubview() }
+