add useFundSwapTokens utility

Author: alissacrane-cb

src/swap/constants.ts

@@ -1,3 +1,6 @@
+import type { Token } from '../token';
+import { base } from 'viem/chains';
+
 export const FALLBACK_DEFAULT_MAX_SLIPPAGE = 3;
 export const GENERAL_SWAP_ERROR_CODE = 'SWAP_ERROR';
 export const GENERAL_SWAP_QUOTE_ERROR_CODE = 'SWAP_QUOTE_ERROR';
@@ -23,3 +26,23 @@ export enum SwapMessage {
   TOO_MANY_REQUESTS = 'Too many requests. Please try again later.',
   USER_REJECTED = 'User rejected the transaction',
 }
+
+export const ethToken: Token = {
+  name: 'ETH',
+  address: '',
+  symbol: 'ETH',
+  decimals: 18,
+  image:
+    'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
+  chainId: base.id,
+};
+
+export const usdcToken: Token = {
+  name: 'USDC',
+  address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+  symbol: 'USDC',
+  decimals: 6,
+  image:
+    'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+  chainId: base.id,
+};

src/swap/hooks/useFundSwapTokens.test.ts

@@ -0,0 +1,116 @@
+import { act, renderHook } from '@testing-library/react';
+import { base } from 'viem/chains';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useValue } from '../../internal/hooks/useValue';
+import type { Token } from '../../token';
+import { USDC_TOKEN } from '../mocks';
+import { useFundSwapTokens } from './useFundSwapTokens';
+import { useSwapBalances } from './useSwapBalances';
+
+vi.mock('./useSwapBalances', () => ({
+  useSwapBalances: vi.fn(),
+}));
+
+vi.mock('../../internal/hooks/useValue', () => ({
+  useValue: vi.fn(),
+}));
+
+const toToken: Token = {
+  name: 'DEGEN',
+  address: '0x4ed4e862860bed51a9570b96d89af5e1b0efefed',
+  symbol: 'DEGEN',
+  decimals: 18,
+  image:
+    'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/3b/bf/3bbf118b5e6dc2f9e7fc607a6e7526647b4ba8f0bea87125f971446d57b296d2-MDNmNjY0MmEtNGFiZi00N2I0LWIwMTItMDUyMzg2ZDZhMWNm',
+  chainId: base.id,
+};
+
+describe('useFundSwapTokens', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return correct values', () => {
+    (useSwapBalances as Mock).mockReturnValue({
+      fromBalanceString: '100',
+      fromTokenBalanceError: null,
+      fromTokenResponse: { refetch: vi.fn() },
+      toBalanceString: '200',
+      toTokenBalanceError: null,
+      toTokenResponse: { refetch: vi.fn() },
+    });
+    (useValue as Mock).mockImplementation((props) => ({
+      ...props,
+      amount: '100',
+      amountUSD: '150',
+      response: props.response,
+      setAmount: vi.fn(),
+      setAmountUSD: vi.fn(),
+      setLoading: vi.fn(),
+      token: USDC_TOKEN,
+    }));
+    const { result } = renderHook(() => useFundSwapTokens(toToken, '0x123'));
+    expect(result.current.fromETH).toEqual({
+      amount: '100',
+      amountUSD: '150',
+      balance: '100',
+      balanceResponse: { refetch: expect.any(Function) },
+      error: null,
+      loading: false,
+      setAmount: expect.any(Function),
+      setAmountUSD: expect.any(Function),
+      setLoading: expect.any(Function),
+      token: USDC_TOKEN,
+    });
+    expect(result.current.to).toEqual({
+      amount: '100',
+      amountUSD: '150',
+      balance: '200',
+      balanceResponse: { refetch: expect.any(Function) },
+      error: null,
+      loading: false,
+      setAmount: expect.any(Function),
+      setAmountUSD: expect.any(Function),
+      setLoading: expect.any(Function),
+      token: USDC_TOKEN,
+    });
+  });
+
+  it('should call fromTokenResponse.refetch when fromETH.response.refetch is called', async () => {
+    const mockFromRefetch = vi.fn().mockResolvedValue(undefined);
+    const mockToRefetch = vi.fn().mockResolvedValue(undefined);
+    (useSwapBalances as Mock).mockReturnValue({
+      fromTokenResponse: { refetch: mockFromRefetch },
+      toTokenResponse: { refetch: mockToRefetch },
+    });
+    (useValue as Mock).mockImplementation((props) => ({
+      ...props,
+      response: props.response,
+    }));
+    const { result } = renderHook(() => useFundSwapTokens(toToken, '0x123'));
+    await act(async () => {
+      await result.current.fromETH.balanceResponse?.refetch();
+    });
+    expect(mockFromRefetch).toHaveBeenCalledTimes(1);
+    expect(mockToRefetch).not.toHaveBeenCalled();
+  });
+
+  it('should call toTokenResponse.refetch when to.response.refetch is called', async () => {
+    const mockFromRefetch = vi.fn().mockResolvedValue(undefined);
+    const mockToRefetch = vi.fn().mockResolvedValue(undefined);
+    (useSwapBalances as Mock).mockReturnValue({
+      fromTokenResponse: { refetch: mockFromRefetch },
+      toTokenResponse: { refetch: mockToRefetch },
+    });
+    (useValue as Mock).mockImplementation((props) => ({
+      ...props,
+      response: props.response,
+    }));
+    const { result } = renderHook(() => useFundSwapTokens(toToken, '0x123'));
+    await act(async () => {
+      await result.current.to.balanceResponse?.refetch();
+    });
+    expect(mockToRefetch).toHaveBeenCalledTimes(1);
+    expect(mockFromRefetch).not.toHaveBeenCalled();
+  });
+});

src/swap/hooks/useFundSwapTokens.ts

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import type { Address } from 'viem';
+import { ethToken, usdcToken } from '../constants';
+import { useValue } from '../../internal/hooks/useValue';
+import type { Token } from '../../token';
+import type { FundSwapTokens } from '../types';
+import { useSwapBalances } from './useSwapBalances';
+
+export const useFundSwapTokens = (
+  toToken: Token,
+  address?: Address,
+): FundSwapTokens => {
+  const [toAmount, setToAmount] = useState('');
+  const [toAmountUSD, setToAmountUSD] = useState('');
+  const [toLoading, setToLoading] = useState(false);
+  const [fromETHAmount, setFromETHAmount] = useState('');
+  const [fromETHAmountUSD, setFromETHAmountUSD] = useState('');
+  const [fromETHLoading, setFromETHLoading] = useState(false);
+  const [fromUSDCAmount, setFromUSDCAmount] = useState('');
+  const [fromUSDCAmountUSD, setFromUSDCAmountUSD] = useState('');
+  const [fromUSDCLoading, setFromUSDCLoading] = useState(false);
+
+  const {
+    fromBalanceString: fromETHBalanceString,
+    fromTokenBalanceError: fromEthBalanceError,
+    toBalanceString,
+    toTokenBalanceError,
+    fromTokenResponse: fromETHResponse,
+    toTokenResponse,
+  } = useSwapBalances({ address, fromToken: ethToken, toToken });
+
+  const {
+    fromBalanceString: fromUSDCBalanceString,
+    fromTokenBalanceError: fromUSDCBalanceError,
+    fromTokenResponse: fromUSDCResponse,
+  } = useSwapBalances({ address, fromToken: usdcToken, toToken });
+
+  const fromETH = useValue({
+    balance: fromETHBalanceString,
+    balanceResponse: fromETHResponse,
+    amount: fromETHAmount,
+    setAmount: setFromETHAmount,
+    amountUSD: fromETHAmountUSD,
+    setAmountUSD: setFromETHAmountUSD,
+    token: ethToken,
+    loading: fromETHLoading,
+    setLoading: setFromETHLoading,
+    error: fromEthBalanceError,
+  });
+
+  const fromUSDC = useValue({
+    balance: fromUSDCBalanceString,
+    balanceResponse: fromUSDCResponse,
+    amount: fromUSDCAmount,
+    setAmount: setFromUSDCAmount,
+    amountUSD: fromUSDCAmountUSD,
+    setAmountUSD: setFromUSDCAmountUSD,
+    token: usdcToken,
+    loading: fromUSDCLoading,
+    setLoading: setFromUSDCLoading,
+    error: fromUSDCBalanceError,
+  });
+
+  const to = useValue({
+    balance: toBalanceString,
+    balanceResponse: toTokenResponse,
+    amount: toAmount,
+    amountUSD: toAmountUSD,
+    setAmountUSD: setToAmountUSD,
+    setAmount: setToAmount,
+    token: toToken,
+    loading: toLoading,
+    setLoading: setToLoading,
+    error: toTokenBalanceError,
+  });
+
+  return { fromETH, fromUSDC, to };
+};

src/swap/types.ts

@@ -51,6 +51,14 @@ export type FromTo = {
   to: SwapUnit;
 };
 
+export type FundSwapTokens = {
+  fromETH: FundSwapUnit;
+  fromUSDC: FundSwapUnit;
+  to: FundSwapUnit;
+};
+
+export type FundSwapUnit = Omit<SwapUnit, 'setToken'>;
+
 export type GetSwapMessageParams = {
   address?: Address;
   lifecycleStatus: LifecycleStatus;