feat: Add Swap USD values

.changeset/beige-hairs-explain.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+feat: Add Swap USD values. By @cpcramer #1286

src/swap/components/SwapAmountInput.test.tsx

@@ -1,14 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import {
- type Mock,
- type MockedFunction,
- beforeEach,
- describe,
- expect,
- it,
- vi,
-} from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Token } from '../../token';
 import { DAI_TOKEN, ETH_TOKEN, USDC_TOKEN } from '../mocks';
 import type { SwapContextType } from '../types';
@@ -39,12 +30,15 @@ vi.mock('./SwapProvider', () => ({
  useSwapContext: vi.fn(),
 }));
 
-const useSwapContextMock = useSwapContext as Mock;
+const useSwapContextMock = useSwapContext as unknown as ReturnType<
+ typeof vi.fn
+>;
 
 const mockContextValue = {
  address: '0x123',
  from: {
  amount: '10',
+ amountUSD: '1000',
  balance: '0.0002851826238227',
  setAmount: vi.fn(),
  setLoading: vi.fn(),
@@ -54,6 +48,7 @@ const mockContextValue = {
  },
  to: {
  amount: '20',
+ amountUSD: '2000',
  setAmount: vi.fn(),
  setLoading: vi.fn(),
  setToken: vi.fn(),
@@ -66,6 +61,10 @@ const mockContextValue = {
  handleAmountChange: vi.fn(),
 } as SwapContextType;
 
+vi.mock('../../internal/utils/getRoundedAmount', () => ({
+ getRoundedAmount: vi.fn((value) => value.slice(0, 10)),
+}));
+
 const mockSwappableTokens: Token[] = [ETH_TOKEN, USDC_TOKEN, DAI_TOKEN];
 
 describe('SwapAmountInput', () => {
@@ -76,32 +75,26 @@ describe('SwapAmountInput', () => {
  it('should render the component with the correct label and token', () => {
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
- expect(screen.getByText('From')).toBeInTheDocument();
+ expect(screen.getByText('From')).toBeDefined();
  });
 
  it('should render from token input with max button and balance', () => {
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
- expect(screen.getByText('Balance: 0.00028518')).toBeInTheDocument();
- expect(
- screen.getByTestId('ockSwapAmountInput_MaxButton'),
- ).toBeInTheDocument();
+ expect(screen.getByText('Balance: 0.00028518')).toBeDefined();
+ expect(screen.getByTestId('ockSwapAmountInput_MaxButton')).toBeDefined();
  });
 
  it('should not render max button for to token input', () => {
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="to" />);
- expect(
- screen.queryByTestId('ockSwapAmountInput_MaxButton'),
- ).not.toBeInTheDocument();
+ expect(screen.queryByTestId('ockSwapAmountInput_MaxButton')).toBeNull();
  });
 
  it('should not render max button if wallet not connected', () => {
  useSwapContextMock.mockReturnValue({ ...mockContextValue, address: '' });
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
- expect(
- screen.queryByTestId('ockSwapAmountInput_MaxButton'),
- ).not.toBeInTheDocument();
+ expect(screen.queryByTestId('ockSwapAmountInput_MaxButton')).toBeNull();
  });
 
  it('should update input value with balance amount on max button click', () => {
@@ -129,7 +122,7 @@ describe('SwapAmountInput', () => {
  expect(mockContextValue.from.setAmount).not.toHaveBeenCalled();
  });
 
- it('shoukd display the correct amount when this type is "from"', () => {
+ it('should display the correct amount when this type is "from"', () => {
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
  const input = screen.getByTestId('ockTextInput_Input');
@@ -179,7 +172,7 @@ describe('SwapAmountInput', () => {
  expect(mockContextValue.to.setToken).toHaveBeenCalledWith(ETH_TOKEN);
  });
 
- it('should call handleAmountChange when type is "from" and delayMs is 0', () => {
+ it('should call handleAmountChange when type is "from" and delayMs is 0', async () => {
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(
  <SwapAmountInput
@@ -192,7 +185,7 @@ describe('SwapAmountInput', () => {
  const input = screen.getByTestId('ockTextInput_Input');
  fireEvent.change(input, { target: { value: '15' } });
  expect(mockContextValue.from.setAmount).toHaveBeenCalledWith('15');
- waitFor(() => {
+ await waitFor(() => {
  expect(mockContextValue.handleAmountChange).toHaveBeenCalled();
  });
  });
@@ -215,13 +208,10 @@ describe('SwapAmountInput', () => {
  />,
  );
  const dropdown = screen.getByText(/TokenSelectDropdown/i);
- expect(dropdown).toBeInTheDocument();
+ expect(dropdown).toBeDefined();
  });
 
  it('should correctly select a token from the dropdown using mouse and keyboard', () => {
- const useSwapContextMock = useSwapContext as MockedFunction<
- typeof useSwapContext
- >;
  useSwapContextMock.mockReturnValue(mockContextValue);
  render(
  <SwapAmountInput
@@ -264,7 +254,7 @@ describe('SwapAmountInput', () => {
  useSwapContextMock.mockReturnValue(mockContextValueWithLowBalance);
  render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
  const input = screen.getByTestId('ockTextInput_Input');
- expect(input).toHaveClass('text-ock-error');
+ expect(input.className).toContain('text-ock-error');
  });
 
  it('should render a TokenChip component if swappableTokens are not passed as prop', () => {
@@ -278,7 +268,7 @@ describe('SwapAmountInput', () => {
  render(<SwapAmountInput label="To" token={USDC_TOKEN} type="to" />);
  const chips = screen.getAllByText('TokenChip');
  expect(chips.length).toBeGreaterThan(0);
- expect(chips[0]).toBeInTheDocument();
+ expect(chips[0]).toBeDefined();
  });
 
  it('should apply the given className to the button', async () => {
@@ -291,8 +281,32 @@ describe('SwapAmountInput', () => {
  className="custom-class"
  />,
  );
- expect(screen.getByTestId('ockSwapAmountInput_Container')).toHaveClass(
- 'custom-class',
- );
+ expect(
+ screen.getByTestId('ockSwapAmountInput_Container').className,
+ ).toContain('custom-class');
+ });
+
+ it('should not display anything when amountUSD is null', () => {
+ const mockContextValueWithNullUSD = {
+ ...mockContextValue,
+ from: {
+ ...mockContextValue.from,
+ amountUSD: null,
+ },
+ };
+ useSwapContextMock.mockReturnValue(mockContextValueWithNullUSD);
+ expect(screen.queryByText(/\$/)).toBeNull();
+ });
+
+ it('should return null when amount is falsy', () => {
+ useSwapContextMock.mockReturnValue({
+ ...mockContextValue,
+ from: {
+ ...mockContextValue.from,
+ amountUSD: '',
+ },
+ });
+ render(<SwapAmountInput label="From" token={ETH_TOKEN} type="from" />);
+ expect(screen.queryByText(/\$/)).toBeNull();
  });
 });

src/swap/components/SwapAmountInput.tsx

@@ -21,7 +21,6 @@ export function SwapAmountInput({
 
  const source = useValue(type === 'from' ? from : to);
  const destination = useValue(type === 'from' ? to : from);
-
  useEffect(() => {
  if (token) {
  source.setToken(token);
@@ -64,6 +63,14 @@ export function SwapAmountInput({
  const hasInsufficientBalance =
  type === 'from' && Number(source.balance) < Number(source.amount);
 
+ const formatUSD = (amount: string) => {
+ if (!amount) {
+ return null;
+ }
+ const roundedAmount = Number(getRoundedAmount(amount, 2));
+ return `~$${roundedAmount.toFixed(2)}`;
+ };
+
  return (
  <div
  className={cn(
@@ -105,6 +112,11 @@ export function SwapAmountInput({
  )}
  </div>
  <div className="mt-4 flex w-full justify-between">
+ <div className="flex items-center">
+ <span className={cn(text.label2, color.foregroundMuted)}>
+ {formatUSD(source.amountUSD)}
+ </span>
+ </div>
  <span className={cn(text.label2, color.foregroundMuted)}>{''}</span>
  <div className="flex items-center">
  {source.balance && (

src/swap/components/SwapProvider.tsx

@@ -224,7 +224,10 @@ export function SwapProvider({
  return;
  }
  if (amount === '' || amount === '.' || Number.parseFloat(amount) === 0) {
- return destination.setAmount('');
+ destination.setAmount('');
+ destination.setAmountUSD('');
+ source.setAmountUSD('');
+ return;
  }
 
  // When toAmount changes we fetch quote for fromAmount
@@ -272,7 +275,9 @@ export function SwapProvider({
  response.toAmount,
  response.to.decimals,
  );
+ destination.setAmountUSD(response.toAmountUSD);
  destination.setAmount(formattedAmount);
+ source.setAmountUSD(response.fromAmountUSD);
  updateLifecycleStatus({
  statusName: 'amountChange',
  statusData: {

src/swap/hooks/useFromTo.test.ts

@@ -30,31 +30,37 @@ describe('useFromTo', () => {
  (useValue as Mock).mockImplementation((props) => ({
  ...props,
  amount: '100',
+ amountUSD: '150',
  response: props.response,
  setAmount: vi.fn(),
+ setAmountUSD: vi.fn(),
  setLoading: vi.fn(),
  setToken: vi.fn(),
  token: USDC_TOKEN,
  }));
  const { result } = renderHook(() => useFromTo('0x123'));
  expect(result.current.from).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),
  setToken: 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),
  setToken: expect.any(Function),
  token: USDC_TOKEN,

src/swap/hooks/useFromTo.ts

@@ -7,8 +7,10 @@ import { useSwapBalances } from './useSwapBalances';
 
 export const useFromTo = (address?: Address): FromTo => {
  const [fromAmount, setFromAmount] = useState('');
+ const [fromAmountUSD, setFromAmountUSD] = useState('');
  const [fromToken, setFromToken] = useState<Token>();
  const [toAmount, setToAmount] = useState('');
+ const [toAmountUSD, setToAmountUSD] = useState('');
  const [toToken, setToToken] = useState<Token>();
  const [toLoading, setToLoading] = useState(false);
  const [fromLoading, setFromLoading] = useState(false);
@@ -27,6 +29,8 @@ export const useFromTo = (address?: Address): FromTo => {
  balanceResponse: fromTokenResponse,
  amount: fromAmount,
  setAmount: setFromAmount,
+ amountUSD: fromAmountUSD,
+ setAmountUSD: setFromAmountUSD,
  token: fromToken,
  setToken: setFromToken,
  loading: fromLoading,
@@ -38,6 +42,8 @@ export const useFromTo = (address?: Address): FromTo => {
  balance: toBalanceString,
  balanceResponse: toTokenResponse,
  amount: toAmount,
+ amountUSD: toAmountUSD,
+ setAmountUSD: setToAmountUSD,
  setAmount: setToAmount,
  token: toToken,
  setToken: setToToken,

src/swap/types.ts

@@ -242,11 +242,13 @@ export type SwapQuote = {
  amountReference: string; // The reference amount for the quote
  from: Token; // The source token for the swap
  fromAmount: string; // The amount of the source token
+ fromAmountUSD: string; // The USD value of the source token
  hasHighPriceImpact: boolean; // Whether the price impact is high
  priceImpact: string; // The price impact of the swap
  slippage: string; // The slippage of the swap
  to: Token; // The destination token for the swap
  toAmount: string; // The amount of the destination token
+ toAmountUSD: string; // The USD value of the destination token
  warning?: QuoteWarning; // The warning associated with the quote
 };
 
@@ -338,11 +340,13 @@ export type SwapTransactionType = 'Batched' | 'ERC20' | 'Permit2' | 'Swap'; // C
 
 export type SwapUnit = {
  amount: string;
+ amountUSD: string;
  balance?: string;
  balanceResponse?: UseBalanceReturnType | UseReadContractReturnType;
  error?: SwapError;
  loading: boolean;
  setAmount: Dispatch<SetStateAction<string>>;
+ setAmountUSD: Dispatch<SetStateAction<string>>;
  setLoading: Dispatch<SetStateAction<boolean>>;
  setToken: Dispatch<SetStateAction<Token | undefined>>;
  token: Token | undefined;