Ability to buy tokens with Wyre (#15992)

2 years ago · 18ca016cf0
parent b0baa89aba
commit 18ca016cf0
6 changed files with 82 additions and 9 deletions
--- a/app/scripts/lib/buy-url.js
+++ b/app/scripts/lib/buy-url.js
@ -20,15 +20,20 @@ const fetchWithTimeout = getFetchWithTimeout();
 *
 * @param {string} walletAddress - Ethereum destination address
 * @param {string} chainId - Current chain ID
+ * @param {string|undefined} symbol - Token symbol to buy
 * @returns String
 */
-const createWyrePurchaseUrl = async (walletAddress, chainId) => {
+const createWyrePurchaseUrl = async (walletAddress, chainId, symbol) => {
  const { wyre = {} } = BUYABLE_CHAINS_MAP[chainId];
  const { srn, currencyCode } = wyre;

  const networkId = parseInt(chainId, 16);
-  const fiatOnRampUrlApi = `${SWAPS_API_V2_BASE_URL}/networks/${networkId}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${walletAddress}`;
-  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=${srn}:${walletAddress}&destCurrency=${currencyCode}&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+  const fiatOnRampUrlApi = `${SWAPS_API_V2_BASE_URL}/networks/${networkId}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${walletAddress}&currency=${
+    symbol || currencyCode
+  }`;
+  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=${srn}:${walletAddress}&destCurrency=${
+    symbol || currencyCode
+  }&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
  try {
    const response = await fetchWithTimeout(fiatOnRampUrlApi, {
      method: 'GET',
@ -158,7 +163,7 @@ export default async function getBuyUrl({ chainId, address, service, symbol }) {

  switch (service) {
    case 'wyre':
-      return await createWyrePurchaseUrl(address, chainId);
+      return await createWyrePurchaseUrl(address, chainId, symbol);
    case 'transak':
      return createTransakUrl(address, chainId, symbol);
    case 'moonpay':
--- a/app/scripts/lib/buy-url.test.js
+++ b/app/scripts/lib/buy-url.test.js
@ -39,7 +39,7 @@ describe('buy-url', () => {
  it('returns Wyre url with an ETH address for Ethereum mainnet', async () => {
    nock(SWAPS_API_V2_BASE_URL)
      .get(
-        `/networks/1/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}`,
+        `/networks/1/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}&currency=${CURRENCY_SYMBOLS.ETH}`,
      )
      .reply(200, {
        url: `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=${CURRENCY_SYMBOLS.ETH}&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
--- a/shared/constants/network.ts
+++ b/shared/constants/network.ts
@ -113,6 +113,10 @@ type WyreChainSettings = {
   * The native currency for the network
   */
  currencyCode: CurrencySymbol;
+  /**
+   * The list of supported currencies for the Wyre onramp provider
+   */
+  currencies: SupportedCurrencySymbol[];
 };

 /**
@ -309,6 +313,8 @@ const SUPPORTED_CURRENCY_SYMBOLS = {
  AUCTION: 'AUCTION',
  AXS: 'AXS',
  AVAX: 'AVAX',
+  AVAXC: 'AVAXC',
+  AVAXCUSDC: 'AVAXCUSDC',
  BADGER: 'BADGER',
  BAL: 'BAL',
  BAND: 'BAND',
@ -340,6 +346,8 @@ const SUPPORTED_CURRENCY_SYMBOLS = {
  GRT: 'GRT',
  GTC: 'GTC',
  GTH: 'GTH',
+  GUSD: 'GUSD',
+  GYEN: 'GYEN',
  HEX: 'HEX',
  IOTX: 'IOTX',
  IMX: 'IMX',
@ -358,6 +366,7 @@ const SUPPORTED_CURRENCY_SYMBOLS = {
  MKR: 'MKR',
  MLN: 'MLN',
  MTL: 'MTL',
+  MUSDC: 'mUSDC',
  NKN: 'NKN',
  NMR: 'NMR',
  NU: 'NU',
@ -397,13 +406,16 @@ const SUPPORTED_CURRENCY_SYMBOLS = {
  TXL: 'TXL',
  UMA: 'UMA',
  UNI: 'UNI',
+  USDS: 'USDS',
  VRA: 'VRA',
  WBTC: 'WBTC',
  WCFG: 'WCFG',
  XYO: 'XYO',
  YFII: 'YFII',
+  YFI: 'YFI',
  YLD: 'YLD',
  ZRX: 'ZRX',
+  ZUSD: 'ZUSD',
 } as const;

 export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.svg';
@ -693,6 +705,31 @@ export const BUYABLE_CHAINS_MAP: {
    wyre: {
      srn: 'ethereum',
      currencyCode: CURRENCY_SYMBOLS.ETH,
+      currencies: [
+        SUPPORTED_CURRENCY_SYMBOLS.ETH,
+        SUPPORTED_CURRENCY_SYMBOLS.AAVE,
+        SUPPORTED_CURRENCY_SYMBOLS.BAT,
+        SUPPORTED_CURRENCY_SYMBOLS.BUSD,
+        SUPPORTED_CURRENCY_SYMBOLS.COMP,
+        SUPPORTED_CURRENCY_SYMBOLS.CRV,
+        SUPPORTED_CURRENCY_SYMBOLS.DAI,
+        SUPPORTED_CURRENCY_SYMBOLS.GUSD,
+        SUPPORTED_CURRENCY_SYMBOLS.GYEN,
+        SUPPORTED_CURRENCY_SYMBOLS.LINK,
+        SUPPORTED_CURRENCY_SYMBOLS.MKR,
+        SUPPORTED_CURRENCY_SYMBOLS.PAX,
+        SUPPORTED_CURRENCY_SYMBOLS.RAI,
+        SUPPORTED_CURRENCY_SYMBOLS.SNX,
+        SUPPORTED_CURRENCY_SYMBOLS.UMA,
+        SUPPORTED_CURRENCY_SYMBOLS.UNI,
+        SUPPORTED_CURRENCY_SYMBOLS.USDC,
+        SUPPORTED_CURRENCY_SYMBOLS.USDS,
+        SUPPORTED_CURRENCY_SYMBOLS.USDT,
+        SUPPORTED_CURRENCY_SYMBOLS.WBTC,
+        SUPPORTED_CURRENCY_SYMBOLS.WETH,
+        SUPPORTED_CURRENCY_SYMBOLS.YFI,
+        SUPPORTED_CURRENCY_SYMBOLS.ZUSD,
+      ],
    },
    coinbasePayCurrencies: [
      SUPPORTED_CURRENCY_SYMBOLS.ETH,
@ -849,6 +886,10 @@ export const BUYABLE_CHAINS_MAP: {
    wyre: {
      srn: 'matic',
      currencyCode: CURRENCY_SYMBOLS.MATIC,
+      currencies: [
+        SUPPORTED_CURRENCY_SYMBOLS.MATIC,
+        SUPPORTED_CURRENCY_SYMBOLS.MUSDC,
+      ],
    },
  },
  [CHAIN_IDS.AVALANCHE]: {
@ -862,6 +903,11 @@ export const BUYABLE_CHAINS_MAP: {
    wyre: {
      srn: 'avalanche',
      currencyCode: CURRENCY_SYMBOLS.AVALANCHE,
+      currencies: [
+        SUPPORTED_CURRENCY_SYMBOLS.AVALANCHE,
+        SUPPORTED_CURRENCY_SYMBOLS.AVAXC,
+        SUPPORTED_CURRENCY_SYMBOLS.AVAXCUSDC,
+      ],
    },
    coinbasePayCurrencies: [SUPPORTED_CURRENCY_SYMBOLS.AVALANCHE],
  },
--- a/ui/components/app/deposit-popover/deposit-popover.js
+++ b/ui/components/app/deposit-popover/deposit-popover.js
@ -29,6 +29,7 @@ import {
  getIsBuyableCoinbasePayToken,
  getIsBuyableTransakToken,
  getIsBuyableMoonpayToken,
+  getIsBuyableWyreToken,
 } from '../../../selectors/selectors';

 import OnRampItem from './on-ramp-item';
@ -57,6 +58,9 @@ const DepositPopover = ({ onClose, token }) => {
  const isTokenBuyableMoonpay = useSelector((state) =>
    getIsBuyableMoonpayToken(state, token?.symbol),
  );
+  const isTokenBuyableWyre = useSelector((state) =>
+    getIsBuyableWyreToken(state, token?.symbol),
+  );

  const networkName = NETWORK_TO_NAME_MAP[chainId];
  const symbol = token
@ -86,7 +90,7 @@ const DepositPopover = ({ onClose, token }) => {
    );
  };
  const toWyre = () => {
-    dispatch(buy({ service: 'wyre', address, chainId }));
+    dispatch(buy({ service: 'wyre', address, chainId, symbol: token?.symbol }));
  };
  const toFaucet = () => dispatch(buy({ chainId }));

@ -165,7 +169,6 @@ const DepositPopover = ({ onClose, token }) => {
            : !isBuyableMoonPayChain
        }
      />
-
      <OnRampItem
        logo={<LogoWyre />}
        title={t('buyWithWyre', [symbol])}
@ -181,7 +184,11 @@ const DepositPopover = ({ onClose, token }) => {
          });
          toWyre();
        }}
-        hide={isTokenDeposit || !isBuyableWyreChain}
+        hide={
+          isTokenDeposit
+            ? !isBuyableWyreChain || !isTokenBuyableWyre
+            : !isBuyableWyreChain
+        }
      />

      <OnRampItem
--- a/ui/components/app/wallet-overview/token-overview.js
+++ b/ui/components/app/wallet-overview/token-overview.js
@ -22,6 +22,7 @@ import {
  getIsBuyableCoinbasePayToken,
  getIsBuyableTransakToken,
  getIsBuyableMoonpayToken,
+  getIsBuyableWyreToken,
 } from '../../../selectors/selectors';

 import BuyIcon from '../../ui/icon/overview-buy-icon.component';
@ -63,8 +64,15 @@ const TokenOverview = ({ className, token }) => {
  const isTokenBuyableMoonpay = useSelector((state) =>
    getIsBuyableMoonpayToken(state, token.symbol),
  );
+  const isTokenBuyableWyre = useSelector((state) =>
+    getIsBuyableWyreToken(state, token.symbol),
+  );
+
  const isBuyable =
-    isTokenBuyableCoinbasePay || isTokenBuyableTransak || isTokenBuyableMoonpay;
+    isTokenBuyableCoinbasePay ||
+    isTokenBuyableTransak ||
+    isTokenBuyableMoonpay ||
+    isTokenBuyableWyre;

  useEffect(() => {
    if (token.isERC721 && process.env.COLLECTIBLES_V1) {
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@ -727,6 +727,13 @@ export function getIsBuyableMoonpayToken(state, symbol) {
  );
 }

+export function getIsBuyableWyreToken(state, symbol) {
+  const chainId = getCurrentChainId(state);
+  return Boolean(
+    BUYABLE_CHAINS_MAP?.[chainId]?.wyre?.currencies.includes(symbol),
+  );
+}
+
 export function getIsBuyableMoonPayChain(state) {
  const chainId = getCurrentChainId(state);
  return Boolean(BUYABLE_CHAINS_MAP?.[chainId]?.moonPay);