feat: SendProvider

src/internal/hooks/useExchangeRate.test.tsx

@@ -1,5 +1,6 @@
 import { getPriceQuote } from '@/api';
 import type { PriceQuoteToken } from '@/api/types';
+import { getNewReactQueryTestProvider } from '@/identity/hooks/getNewReactQueryTestProvider';
 import { ethToken } from '@/token/constants';
 import { renderHook, waitFor } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -14,26 +15,27 @@ describe('useExchangeRate', () => {
     vi.resetAllMocks();
   });
 
-  it('should return undefined without calling setExchangeRate if a token is not provided', async () => {
+  it('should return nullish values without calling setExchangeRate if a token is not provided', async () => {
     const mockSetExchangeRate = vi.fn();
-    const { result } = renderHook(() =>
-      useExchangeRate({
-        token: undefined as unknown as PriceQuoteToken,
-        selectedInputType: 'crypto',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: vi.fn(),
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: undefined as unknown as PriceQuoteToken,
+          selectedInputType: 'crypto',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     const resolvedValue = await result.current;
-    expect(resolvedValue).toBeUndefined();
+    expect(resolvedValue).toEqual({
+      isLoading: false,
+      exchangeRate: 0,
+      error: null,
+    });
     expect(mockSetExchangeRate).not.toHaveBeenCalled();
   });
 
   it('should set the correct exchange rate when the selected input type is crypto', async () => {
-    const mockSetExchangeRate = vi.fn();
-    const mockSetExchangeRateLoading = vi.fn();
-
     (getPriceQuote as Mock).mockResolvedValue({
       priceQuotes: [
         {
@@ -46,24 +48,21 @@ describe('useExchangeRate', () => {
       ],
     });
 
-    renderHook(() =>
-      useExchangeRate({
-        token: ethToken.symbol as PriceQuoteToken,
-        selectedInputType: 'crypto',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: mockSetExchangeRateLoading,
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: ethToken.symbol as PriceQuoteToken,
+          selectedInputType: 'crypto',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     await waitFor(() => {
-      expect(mockSetExchangeRate).toHaveBeenCalledWith(1 / 2400);
+      expect(result.current.exchangeRate).toEqual(2400);
     });
   });
 
   it('should set the correct the exchange rate when the selected input type is fiat', async () => {
-    const mockSetExchangeRate = vi.fn();
-    const mockSetExchangeRateLoading = vi.fn();
-
     (getPriceQuote as Mock).mockResolvedValue({
       priceQuotes: [
         {
@@ -76,76 +75,58 @@ describe('useExchangeRate', () => {
       ],
     });
 
-    renderHook(() =>
-      useExchangeRate({
-        token: ethToken.symbol as PriceQuoteToken,
-        selectedInputType: 'fiat',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: mockSetExchangeRateLoading,
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: ethToken.symbol as PriceQuoteToken,
+          selectedInputType: 'fiat',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     await waitFor(() => {
-      expect(mockSetExchangeRate).toHaveBeenCalledWith(2400);
+      expect(result.current.exchangeRate).toEqual(1 / 2400);
     });
   });
 
   it('should log an error and not set the exchange rate when the api call returns an error', async () => {
-    const mockSetExchangeRate = vi.fn();
-    const mockSetExchangeRateLoading = vi.fn();
-    const consoleSpy = vi.spyOn(console, 'error');
-
     (getPriceQuote as Mock).mockResolvedValue({
       error: 'test error',
     });
 
-    renderHook(() =>
-      useExchangeRate({
-        token: ethToken.symbol as PriceQuoteToken,
-        selectedInputType: 'fiat',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: mockSetExchangeRateLoading,
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: ethToken.symbol as PriceQuoteToken,
+          selectedInputType: 'fiat',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     await waitFor(() => {
-      expect(consoleSpy).toHaveBeenCalledWith(
-        'Error fetching price quote:',
-        'test error',
-      );
-      expect(mockSetExchangeRate).not.toHaveBeenCalled();
+      expect(result.current.error).toEqual({ error: 'test error' });
     });
   });
 
   it('should log an error and not set the exchange rate when the api fails', async () => {
-    const mockSetExchangeRate = vi.fn();
-    const mockSetExchangeRateLoading = vi.fn();
-    const consoleSpy = vi.spyOn(console, 'error');
-
     (getPriceQuote as Mock).mockRejectedValue(new Error('test error'));
 
-    renderHook(() =>
-      useExchangeRate({
-        token: ethToken.symbol as PriceQuoteToken,
-        selectedInputType: 'fiat',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: mockSetExchangeRateLoading,
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: ethToken.symbol as PriceQuoteToken,
+          selectedInputType: 'fiat',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     await waitFor(() => {
-      expect(consoleSpy).toHaveBeenCalledWith(
-        'Uncaught error fetching price quote:',
-        expect.any(Error),
-      );
-      expect(mockSetExchangeRate).not.toHaveBeenCalled();
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect((result.current.error as Error).message).toEqual('test error');
     });
   });
 
   it('should set and unset loading state', async () => {
-    const mockSetExchangeRate = vi.fn();
-    const mockSetExchangeRateLoading = vi.fn();
-
     (getPriceQuote as Mock).mockResolvedValue({
       priceQuotes: [
         {
@@ -158,18 +139,21 @@ describe('useExchangeRate', () => {
       ],
     });
 
-    renderHook(() =>
-      useExchangeRate({
-        token: ethToken.symbol as PriceQuoteToken,
-        selectedInputType: 'crypto',
-        setExchangeRate: mockSetExchangeRate,
-        setExchangeRateLoading: mockSetExchangeRateLoading,
-      }),
+    const { result } = renderHook(
+      () =>
+        useExchangeRate({
+          token: ethToken.symbol as PriceQuoteToken,
+          selectedInputType: 'crypto',
+        }),
+      { wrapper: getNewReactQueryTestProvider() },
     );
 
     await waitFor(() => {
-      expect(mockSetExchangeRateLoading).toHaveBeenCalledWith(true);
-      expect(mockSetExchangeRateLoading).toHaveBeenLastCalledWith(false);
+      expect(result.current.isLoading).toEqual(true);
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toEqual(false);
     });
   });
 });

src/internal/hooks/useExchangeRate.tsx

@@ -1,48 +1,45 @@
-import { getPriceQuote } from '@/api';
 import type { PriceQuoteToken } from '@/api/types';
 import { RequestContext } from '@/core/network/constants';
+import { usePriceQuote } from '@/internal/hooks/usePriceQuote';
 import { isApiError } from '@/internal/utils/isApiResponseError';
-import type { Dispatch, SetStateAction } from 'react';
+import { useMemo } from 'react';
 
 type UseExchangeRateParams = {
-  token: PriceQuoteToken;
+  token: PriceQuoteToken | undefined;
   selectedInputType: 'crypto' | 'fiat';
-  setExchangeRate: Dispatch<SetStateAction<number>>;
-  setExchangeRateLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
-export async function useExchangeRate({
-  token,
-  selectedInputType,
-  setExchangeRate,
-  setExchangeRateLoading,
-}: UseExchangeRateParams) {
-  if (!token) {
-    return;
-  }
+export function useExchangeRate(
+  { token, selectedInputType }: UseExchangeRateParams,
+  _context = RequestContext.Hook,
+) {
+  const { data, isLoading, error } = usePriceQuote(
+    {
+      token,
+      queryOptions: {
+        enabled: !!token,
+      },
+    },
+    _context,
+  );
 
-  setExchangeRateLoading?.(true);
+  const exchangeRate = useMemo(() => {
+    if (!data || isApiError(data) || data.priceQuotes.length === 0) {
+      return 0;
+    }
+
+    const priceQuote = data.priceQuotes[0];
 
-  try {
-    const response = await getPriceQuote(
-      { tokens: [token] },
-      RequestContext.Wallet,
-    );
-    if (isApiError(response)) {
-      console.error('Error fetching price quote:', response.error);
-      return;
+    if (selectedInputType === 'crypto') {
+      return Number(priceQuote.price);
     }
-    const priceQuote = response.priceQuotes[0];
 
-    const rate =
-      selectedInputType === 'crypto'
-        ? 1 / Number(priceQuote.price)
-        : Number(priceQuote.price);
+    return 1 / Number(priceQuote.price);
+  }, [data, selectedInputType]);
 
-    setExchangeRate(rate);
-  } catch (error) {
-    console.error('Uncaught error fetching price quote:', error);
-  } finally {
-    setExchangeRateLoading?.(false);
-  }
+  return {
+    isLoading,
+    exchangeRate,
+    error,
+  };
 }