Merge pull request #228 from brave/revert-wrye-payment-option

Add Wrye Payment Option
brave · Mar 10, 2021 · 09a3346 · 09a3346
2 parents 58ab90f + 9035a5b
commit 09a3346
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 5 deletions.
diff --git a/app/images/wyre.svg b/app/images/wyre.svg
diff --git 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
@@ -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
@@ -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
@@ -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: (
+                <div
+                  className="deposit-ether-modal__logo"
+                  style={{
+                    backgroundImage: "url('./images/wyre.svg')",
+                    height: '40px',
+                  }}
+                />
+              ),
+              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,
+            })}
           </div>
         </div>
       </div>

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
@@ -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())
     },