diff --git a/app/images/wyre.svg b/app/images/wyre.svg new file mode 100644 index 0000000000..b55bbc3e81 --- /dev/null +++ b/app/images/wyre.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js index 589fd0ede5..c3e47f8e97 100644 --- a/app/scripts/lib/buy-eth-url.js +++ b/app/scripts/lib/buy-eth-url.js @@ -8,13 +8,20 @@ * network does not match any of the specified cases, or if no network is given, returns undefined. * */ -export default function getBuyEthUrl ({ network, service }) { +export default function getBuyEthUrl ({ network, address, service }) { // default service by network if not specified if (!service) { service = getDefaultServiceForNetwork(network) } - + const env = process.env.METAMASK_ENV + const METAMASK_DEBUG = process.env.METAMASK_DEBUG switch (service) { + case 'wyre': + if (METAMASK_DEBUG || env === 'test') { + return `https://pay.testwyre.com/?dest=ethereum:${address}&destCurrency=ETH&accountId=AC_4NX7HJH3GNX&paymentMethod=debit-card` + } else { + return `https://pay.sendwyre.com/?dest=ethereum:${address}&destCurrency=ETH&accountId=AC_MGNVBGHPA9T&paymentMethod=debit-card` + } case 'metamask-faucet': return 'https://faucet.metamask.io/' case 'rinkeby-faucet': @@ -30,6 +37,8 @@ export default function getBuyEthUrl ({ network, service }) { function getDefaultServiceForNetwork (network) { switch (network) { + case '1': + return 'wyre' case '3': return 'metamask-faucet' case '4': diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 828dfe4af2..0db7d2e4c9 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1918,14 +1918,15 @@ export default 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 (amount) { + buyEth (address, amount) { if (!amount) { amount = '5' } const network = this.networkController.getNetworkState() - const url = getBuyEthUrl({ network, amount }) + const url = getBuyEthUrl({ network, address, amount }) if (url) { this.platform.openTab({ url }) } diff --git a/test/unit/app/buy-eth-url.spec.js b/test/unit/app/buy-eth-url.spec.js index e4497e9144..bd78a48d48 100644 --- a/test/unit/app/buy-eth-url.spec.js +++ b/test/unit/app/buy-eth-url.spec.js @@ -2,6 +2,11 @@ import assert from 'assert' import getBuyEthUrl from '../../../app/scripts/lib/buy-eth-url' describe('buy-eth-url', function () { + const mainnet = { + network: '1', + amount: 5, + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + } const ropsten = { network: '3', } @@ -11,6 +16,10 @@ describe('buy-eth-url', function () { const kovan = { network: '42', } + it('returns wyre url with address for network 1', function () { + const wyreUrl = getBuyEthUrl(mainnet) + assert.equal(wyreUrl, `https://pay.testwyre.com/?dest=ethereum:${mainnet.address}&destCurrency=ETH&accountId=AC_4NX7HJH3GNX&paymentMethod=debit-card`) + }) it('returns metamask ropsten faucet for network 3', function () { const ropstenUrl = getBuyEthUrl(ropsten) diff --git a/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js b/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js index f4a1dee0f4..c2cb889ffa 100644 --- a/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js +++ b/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js @@ -11,6 +11,8 @@ export default class DepositEtherModal extends Component { static propTypes = { network: PropTypes.string.isRequired, + toWyre: PropTypes.func.isRequired, + address: PropTypes.string.isRequired, toFaucet: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, hideModal: PropTypes.func.isRequired, @@ -75,7 +77,7 @@ export default class DepositEtherModal extends Component { } render () { - const { network, toFaucet } = this.props + const { network, toWyre, address, toFaucet } = this.props const networkName = getNetworkDisplayName(network) const isTestNetwork = [3, 4, 5, 42].find((n) => n === Number(network)) @@ -126,6 +128,31 @@ export default class DepositEtherModal extends Component { onButtonClick: () => toFaucet(Number(network).toString()), hide: !isTestNetwork, })} + {this.renderRow({ + logo: ( +
+ ), + title: this.context.t('buyWithWyre'), + text: this.context.t('buyWithWyreDescription'), + buttonLabel: this.context.t('continueToWyre'), + onButtonClick: () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Deposit Ether', + name: 'Click buy Ether via Wyre', + }, + }) + toWyre(address) + }, + hide: isTestNetwork, + })}
diff --git a/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js b/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js index b15bfc0e79..006c833993 100644 --- a/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js +++ b/ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js @@ -5,11 +5,15 @@ import DepositEtherModal from './deposit-ether-modal.component' function mapStateToProps (state) { return { network: state.metamask.network, + address: state.metamask.selectedAddress, } } function mapDispatchToProps (dispatch) { return { + toWyre: (address) => { + dispatch(buyEth({ service: 'wyre', address })) + }, hideModal: () => { dispatch(hideModal()) },