Ability to buy tokens with Wyre (#15992)

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 fiatOnRampUrlApi = `${SWAPS_API_V2_BASE_URL}/networks/${networkId}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${walletAddress}&currency=${
-  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=${srn}:${walletAddress}&destCurrency=${currencyCode}&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+    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':

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`,

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],
   },

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

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) {

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);