Call Wyre’s API via our backend to generate Wyre’s Checkout URL (#11387)

* Call Wyre’s API via our backend to generate Wyre’s Checkout URL

* Add back paymentMethod=debit-card, use a fallback URL if no url is returned from BE

* Fix a lint issue

* Refactor how to return Wyre’s Checkout URL

* Add 2 constants into a test file, refactoring

app/scripts/lib/buy-eth-url.js

@@ -1,3 +1,6 @@
+import log from 'loglevel';
+
+import { METASWAP_CHAINID_API_HOST_MAP } from '../../../shared/constants/swaps';
 import {
   GOERLI_CHAIN_ID,
   KOVAN_CHAIN_ID,
@@ -5,8 +8,39 @@ import {
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
 } from '../../../shared/constants/network';
+import { SECOND } from '../../../shared/constants/time';
+import getFetchWithTimeout from '../../../shared/modules/fetch-with-timeout';
 import { TRANSAK_API_KEY } from '../constants/on-ramp';
 
+const fetchWithTimeout = getFetchWithTimeout(SECOND * 30);
+
+/**
+ * Create a Wyre purchase URL.
+ * @param {String} address Ethereum destination address
+ * @returns String
+ */
+const createWyrePurchaseUrl = async (address) => {
+  const fiatOnRampUrlApi = `${METASWAP_CHAINID_API_HOST_MAP[MAINNET_CHAIN_ID]}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${address}`;
+  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+  try {
+    const response = await fetchWithTimeout(fiatOnRampUrlApi, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    });
+    const parsedResponse = await response.json();
+    if (response.ok && parsedResponse.url) {
+      return parsedResponse.url;
+    }
+    log.warn('Failed to create a Wyre purchase URL', parsedResponse);
+  } catch (err) {
+    log.warn('Failed to create a Wyre purchase URL', err);
+  }
+  return wyrePurchaseUrlFallback; // In case the API call would fail, we return a fallback URL for Wyre's Checkout.
+};
+
 /**
  * Create a Transak Checkout URL.
  * API docs here: https://www.notion.so/Query-Parameters-9ec523df3b874ec58cef4fa3a906f238
@@ -33,7 +67,7 @@ const createTransakUrl = (address) => {
  * chainId does not match any of the specified cases, or if no chainId is given, returns undefined.
  *
  */
-export default function getBuyEthUrl({ chainId, address, service }) {
+export default async function getBuyEthUrl({ chainId, address, service }) {
   // default service by network if not specified
   if (!service) {
     // eslint-disable-next-line no-param-reassign
@@ -42,7 +76,7 @@ export default function getBuyEthUrl({ chainId, address, service }) {
 
   switch (service) {
     case 'wyre':
-      return `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+      return await createWyrePurchaseUrl(address);
     case 'transak':
       return createTransakUrl(address);
     case 'metamask-faucet':

app/scripts/lib/buy-eth-url.test.js

@@ -1,4 +1,5 @@
 import { strict as assert } from 'assert';
+import nock from 'nock';
 import {
   KOVAN_CHAIN_ID,
   MAINNET_CHAIN_ID,
@@ -8,52 +9,68 @@ import {
 import { TRANSAK_API_KEY } from '../constants/on-ramp';
 import getBuyEthUrl from './buy-eth-url';
 
+const WYRE_ACCOUNT_ID = 'AC-7AG3W4XH4N2';
+const ETH_ADDRESS = '0x0dcd5d886577d5581b0c524242ef2ee70be3e7bc';
+const MAINNET = {
+  chainId: MAINNET_CHAIN_ID,
+  amount: 5,
+  address: ETH_ADDRESS,
+};
+const ROPSTEN = {
+  chainId: ROPSTEN_CHAIN_ID,
+};
+const RINKEBY = {
+  chainId: RINKEBY_CHAIN_ID,
+};
+const KOVAN = {
+  chainId: KOVAN_CHAIN_ID,
+};
+
 describe('buy-eth-url', function () {
-  const mainnet = {
+  it('returns Wyre url with an ETH address for Ethereum mainnet', async function () {
-    chainId: MAINNET_CHAIN_ID,
+    nock('https://api.metaswap.codefi.network')
-    amount: 5,
+      .get(`/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}`)
-    address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+      .reply(200, {
-  };
+        url: `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=ETH&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
-  const ropsten = {
+      });
-    chainId: ROPSTEN_CHAIN_ID,
+    const wyreUrl = await getBuyEthUrl(MAINNET);
-  };
+    assert.equal(
-  const rinkeby = {
+      wyreUrl,
-    chainId: RINKEBY_CHAIN_ID,
+      `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=ETH&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
-  };
+    );
-  const kovan = {
+    nock.cleanAll();
-    chainId: KOVAN_CHAIN_ID,
+  });
-  };
+
-
+  it('returns a fallback Wyre url if /orders/reserve API call fails', async function () {
-  it('returns Wyre url with an ETH address for Ethereum mainnet', function () {
+    const wyreUrl = await getBuyEthUrl(MAINNET);
-    const wyreUrl = getBuyEthUrl(mainnet);
 
     assert.equal(
       wyreUrl,
-      'https://pay.sendwyre.com/purchase?dest=ethereum:0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card',
+      `https://pay.sendwyre.com/purchase?dest=ethereum:${ETH_ADDRESS}&destCurrency=ETH&accountId=${WYRE_ACCOUNT_ID}&paymentMethod=debit-card`,
     );
   });
 
-  it('returns Transak url with an ETH address for Ethereum mainnet', function () {
+  it('returns Transak url with an ETH address for Ethereum mainnet', async function () {
-    const transakUrl = getBuyEthUrl({ ...mainnet, service: 'transak' });
+    const transakUrl = await getBuyEthUrl({ ...MAINNET, service: 'transak' });
 
     assert.equal(
       transakUrl,
-      `https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc`,
+      `https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=${ETH_ADDRESS}`,
     );
   });
 
-  it('returns metamask ropsten faucet for network 3', function () {
+  it('returns metamask ropsten faucet for network 3', async function () {
-    const ropstenUrl = getBuyEthUrl(ropsten);
+    const ropstenUrl = await getBuyEthUrl(ROPSTEN);
     assert.equal(ropstenUrl, 'https://faucet.metamask.io/');
   });
 
-  it('returns rinkeby dapp for network 4', function () {
+  it('returns rinkeby dapp for network 4', async function () {
-    const rinkebyUrl = getBuyEthUrl(rinkeby);
+    const rinkebyUrl = await getBuyEthUrl(RINKEBY);
     assert.equal(rinkebyUrl, 'https://www.rinkeby.io/');
   });
 
-  it('returns kovan github test faucet for network 42', function () {
+  it('returns kovan github test faucet for network 42', async function () {
-    const kovanUrl = getBuyEthUrl(kovan);
+    const kovanUrl = await getBuyEthUrl(KOVAN);
     assert.equal(kovanUrl, 'https://github.com/kovan-testnet/faucet');
   });
 });

ui/store/actions.js

@@ -1826,8 +1826,8 @@ export function showSendTokenPage() {
 }
 
 export function buyEth(opts) {
-  return (dispatch) => {
+  return async (dispatch) => {
-    const url = getBuyEthUrl(opts);
+    const url = await getBuyEthUrl(opts);
     global.platform.openTab({ url });
     dispatch({
       type: actionConstants.BUY_ETH,