fix(checkout): Fetch crypto to USD conversion via our own subgraph (#2620)

Author: jeetparikh

packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiat.test.ts

@@ -0,0 +1,59 @@
+/* eslint @typescript-eslint/naming-convention: off */
+
+import axios from 'axios';
+import { Environment } from '@imtbl/config';
+import { getCryptoToUSDConversion, TokenPriceResponse } from './CryptoFiat';
+
+jest.mock('axios');
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+const conversionsMap = new Map<string, number>();
+
+const mockResponse: TokenPriceResponse = {
+  result: [
+    {
+      symbol: 'WOMBAT',
+      token_address: '0x0219d987a75f860e55d936646c60ba9a021e52ac',
+      usd_price: '0.0001359733469',
+    },
+    {
+      symbol: 'BZAI',
+      token_address: '0x0bbb2db8d777c72516a344506fa2130040b48c13',
+      usd_price: '0.03',
+    },
+    {
+      symbol: 'WIMX',
+      token_address: '0x3a0c2ba54d6cbd3121f01b96dfd20e99d1696c9d',
+      usd_price: '0.89',
+    },
+  ],
+};
+
+describe('getCryptoToUSDConversion', () => {
+  beforeEach(() => {
+    conversionsMap.set('wombat', 0.0001359733469);
+    conversionsMap.set('bzai', 0.03);
+    conversionsMap.set('wimx', 0.89);
+    conversionsMap.set('imx', 0.89);
+  });
+
+  afterEach(() => {
+    conversionsMap.clear();
+    jest.clearAllMocks();
+  });
+
+  it('should return the correct conversion for all tokens', async () => {
+    mockedAxios.get.mockResolvedValue({ data: mockResponse });
+
+    const conversions = await getCryptoToUSDConversion(Environment.SANDBOX);
+    expect(conversions.size).toEqual(4);
+    expect(conversions).toEqual(conversionsMap);
+  });
+
+  it('adds IMX to the conversions map', async () => {
+    mockedAxios.get.mockResolvedValue({ data: mockResponse });
+
+    const conversions = await getCryptoToUSDConversion(Environment.SANDBOX);
+    expect(conversions.get('imx')).toEqual(0.89);
+  });
+});

packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiat.ts

@@ -1,4 +1,7 @@
+import axios from 'axios';
 import { CryptoFiat, CryptoFiatConvertReturn } from '@imtbl/cryptofiat';
+import { IMMUTABLE_API_BASE_URL } from '@imtbl/checkout-sdk';
+import { Environment } from '@imtbl/config';
 import { FiatSymbols } from './CryptoFiatContext';
 
 export const updateConversions = (
@@ -39,3 +42,41 @@ export const getCryptoToFiatConversion = async (
     return new Map<string, number>();
   }
 };
+
+export type TokenPriceResponse = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  result: { symbol: string; token_address: string; usd_price: string }[];
+};
+
+async function getUSDConversionsForAll(environment: Environment) {
+  const apiUrl = `${IMMUTABLE_API_BASE_URL[environment]}/checkout/v1/token-prices`;
+  const response = await axios.get<TokenPriceResponse>(apiUrl);
+
+  const { data } = response;
+
+  const result: CryptoFiatConvertReturn = {};
+  const tokens = data.result || [];
+  for (const token of tokens) {
+    result[token.symbol.toLowerCase()] = { usd: +token.usd_price };
+  }
+
+  // if the result has wimx, then add imx to the result
+  if (result.wimx) {
+    result.imx = result.wimx;
+  }
+
+  return result;
+}
+
+// returns the conversion for all tokens in
+export const getCryptoToUSDConversion = async (
+  environment: Environment,
+): Promise<Map<string, number>> => {
+  try {
+    const cryptoToFiatResult = await getUSDConversionsForAll(environment);
+
+    return updateConversions(cryptoToFiatResult, FiatSymbols.USD);
+  } catch (err: any) {
+    return new Map<string, number>();
+  }
+};

packages/checkout/widgets-lib/src/lib/hooks/useCryptoUSDConversion.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { Environment } from '@imtbl/config';
+import { getCryptoToUSDConversion } from '../../context/crypto-fiat-context/CryptoFiat';
+
+export function useCryptoUSDConversion(environment: Environment | undefined) {
+  const [conversions, setConversions] = useState<Map<string, number>>(new Map<string, number>());
+  const [error, setError] = useState<Error | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchConversions() {
+      if (!environment) return;
+
+      try {
+        const data = await getCryptoToUSDConversion(environment);
+        setConversions(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(`Failed to fetch conversions: ${err}`));
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchConversions();
+    const interval = setInterval(fetchConversions, 30000);
+
+    return () => clearInterval(interval);
+  }, [environment]);
+
+  return { conversions, error, loading };
+}