Resolve rate from coinGecko if exchange rate is not found

hooks/useExchange.ts

@@ -1,4 +1,4 @@
-import useSynthetixQueries from '@synthetixio/queries';
+import useSynthetixQueries, { Token } from '@synthetixio/queries';
 import Wei, { wei } from '@synthetixio/wei';
 import { ethers } from 'ethers';
 import produce from 'immer';
@@ -55,7 +55,11 @@ import {
 	networkState,
 	gasSpeedState,
 } from 'store/wallet';
-import { newGetExchangeRatesForCurrencies } from 'utils/currencies';
+import {
+	newGetCoinGeckoPricesForCurrencies,
+	newGetExchangeRatesForCurrencies,
+	newGetExchangeRatesTupleForCurrencies,
+} from 'utils/currencies';
 import { truncateNumbers, zeroBN } from 'utils/formatters/number';
 import { hexToAsciiV2 } from 'utils/formatters/string';
 import logError from 'utils/logError';
@@ -191,7 +195,7 @@ const useExchange = ({
 		: null;
 
 	const quoteCurrencyTokenAddress = useMemo(
-		() =>
+		(): Token['address'] | null =>
 			quoteCurrencyKey != null
 				? isQuoteCurrencyETH
 					? ETH_ADDRESS
@@ -201,7 +205,7 @@ const useExchange = ({
 	);
 
 	const baseCurrencyTokenAddress = useMemo(
-		() =>
+		(): Token['address'] | null =>
 			baseCurrencyKey != null
 				? isBaseCurrencyETH
 					? ETH_ADDRESS
@@ -274,11 +278,21 @@ const useExchange = ({
 
 	const exchangeRates = exchangeRatesQuery.isSuccess ? exchangeRatesQuery.data ?? null : null;
 
-	const rate = useMemo(
-		() => newGetExchangeRatesForCurrencies(exchangeRates, quoteCurrencyKey, baseCurrencyKey),
+	const [baseRate, quoteRate] = useMemo(
+		() => newGetExchangeRatesTupleForCurrencies(exchangeRates, baseCurrencyKey, quoteCurrencyKey),
 		[exchangeRates, quoteCurrencyKey, baseCurrencyKey]
 	);
 
+	const rate = useMemo(() => {
+		const base = baseRate.lte(0)
+			? newGetCoinGeckoPricesForCurrencies(coinGeckoPrices, baseCurrencyTokenAddress)
+			: baseRate;
+		const quote = quoteRate.lte(0)
+			? newGetCoinGeckoPricesForCurrencies(coinGeckoPrices, quoteCurrencyTokenAddress)
+			: quoteRate;
+		return base.gt(0) && quote.gt(0) ? base.div(quote) : wei(0);
+	}, [baseCurrencyTokenAddress, baseRate, coinGeckoPrices, quoteCurrencyTokenAddress, quoteRate]);
+
 	const inverseRate = useMemo(() => (rate.gt(0) ? wei(1).div(rate) : wei(0)), [rate]);
 
 	const getBalance = useCallback(
@@ -1143,6 +1157,7 @@ const useExchange = ({
 	return {
 		baseCurrencyKey,
 		handleCurrencySwap,
+		rate,
 		inverseRate,
 		quoteCurrencyKey,
 		txProvider,

pages/exchange.tsx

@@ -22,7 +22,7 @@ const Exchange: ExchangeComponent = () => {
 		showNoSynthsCard: true,
 	});
 
-	const { baseCurrencyKey, quoteCurrencyKey, inverseRate } = exchangeData;
+	const { baseCurrencyKey, quoteCurrencyKey, rate } = exchangeData;
 
 	return (
 		<ExchangeContext.Provider value={exchangeData}>
@@ -32,7 +32,7 @@ const Exchange: ExchangeComponent = () => {
 						? t('exchange.page-title-currency-pair', {
 								baseCurrencyKey,
 								quoteCurrencyKey,
-								rate: formatCurrency(quoteCurrencyKey, inverseRate, {
+								rate: formatCurrency(quoteCurrencyKey, rate, {
 									currencyKey: quoteCurrencyKey,
 								}),
 						  })

utils/currencies.ts

@@ -1,8 +1,9 @@
-import { Rates } from '@synthetixio/queries';
+import { Rates, Token } from '@synthetixio/queries';
 import { wei } from '@synthetixio/wei';
 
 import { CurrencyKey, Synths, CRYPTO_CURRENCY_MAP, FIAT_SYNTHS } from 'constants/currency';
 
+import { PriceResponse } from '../queries/coingecko/types';
 import { FuturesMarketKey } from './futures';
 
 export const isSynth = (currencyKey: CurrencyKey) => !!Synths[currencyKey];
@@ -54,5 +55,42 @@ export const newGetExchangeRatesForCurrencies = (
 		: rates[base].div(rates[quote]);
 };
 
+export const newGetExchangeRatesTupleForCurrencies = (
+	rates: Rates | null,
+	base: CurrencyKey | FuturesMarketKey | string | null,
+	quote: CurrencyKey | FuturesMarketKey | null
+) => {
+	base = new Set([
+		FuturesMarketKey.sAPE,
+		FuturesMarketKey.sDYDX,
+		FuturesMarketKey.sXAU,
+		FuturesMarketKey.sXAG,
+	]).has(base as FuturesMarketKey)
+		? synthToAsset(base as CurrencyKey)
+		: base;
+	const baseRate =
+		rates == null || base == null || rates[base] === undefined ? wei(0) : rates[base];
+	const quoteRate =
+		rates == null || quote == null || rates[quote] === undefined ? wei(0) : rates[quote];
+
+	return [baseRate, quoteRate];
+};
+
+export const newGetCoinGeckoPricesForCurrencies = (
+	coinGeckoPrices: PriceResponse | null,
+	baseCurrencyTokenAddress: Token['address'] | null
+) => {
+	if (!coinGeckoPrices || !baseCurrencyTokenAddress) {
+		return wei(0);
+	}
+	const base = baseCurrencyTokenAddress.toLowerCase();
+
+	if (!coinGeckoPrices[base]) {
+		return wei(0);
+	}
+
+	return wei(coinGeckoPrices[base].usd);
+};
+
 export const getCurrencyKeyURLPath = (currencyKey: CurrencyKey) =>
 	`https:///www.synthetix.io/assets/synths/svg/${currencyKey}.svg`;