diff --git a/app/scripts/lib/buy-url.js b/app/scripts/lib/buy-url.js index 079d54c39..8584c534a 100644 --- 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}¤cy=${ + 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': diff --git a/app/scripts/lib/buy-url.test.js b/app/scripts/lib/buy-url.test.js index 2af812ffb..36ab5ae96 100644 --- 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}¤cy=${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`, diff --git a/shared/constants/network.ts b/shared/constants/network.ts index d09d5e0e6..6b024ec3d 100644 --- 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], }, diff --git a/ui/components/app/deposit-popover/deposit-popover.js b/ui/components/app/deposit-popover/deposit-popover.js index c5ddc363d..d1b900102 100644 --- 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 } /> - } title={t('buyWithWyre', [symbol])} @@ -181,7 +184,11 @@ const DepositPopover = ({ onClose, token }) => { }); toWyre(); }} - hide={isTokenDeposit || !isBuyableWyreChain} + hide={ + isTokenDeposit + ? !isBuyableWyreChain || !isTokenBuyableWyre + : !isBuyableWyreChain + } /> { 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) { diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 78ad6d79d..09732f6d9 100644 --- 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);