chore: Update Swap config defaultMaxSlippage naming

.changeset/heavy-carrots-unite.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**chore**: Update `Swap` config parameter `maxSlippage` to `defaultMaxSlippage`. By @cpcramer #1305

playground/nextjs-app-router/components/demo/Swap.tsx

@@ -19,7 +19,7 @@ import type { TransactionReceipt } from 'viem';
 import { base } from 'viem/chains';
 import { AppContext } from '../AppProvider';
 
-const DEFAULT_MAX_SLIPPAGE = 3;
+const FALLBACK_DEFAULT_MAX_SLIPPAGE = 3;
 
 function SwapComponent() {
   const { chainId, defaultMaxSlippage, paymasters } = useContext(AppContext);
@@ -108,7 +108,10 @@ function SwapComponent() {
         onStatus={handleOnStatus}
         onSuccess={handleOnSuccess}
         onError={handleOnError}
-        config={{ maxSlippage: defaultMaxSlippage || DEFAULT_MAX_SLIPPAGE }}
+        config={{
+          defaultMaxSlippage:
+            defaultMaxSlippage || FALLBACK_DEFAULT_MAX_SLIPPAGE,
+        }}
         isSponsored={paymasters != null}
       >
         <SwapSettings>

src/swap/components/Swap.tsx

@@ -2,7 +2,7 @@ import { Children, useMemo } from 'react';
 import { findComponent } from '../../internal/utils/findComponent';
 import { background, cn, text } from '../../styles/theme';
 import { useIsMounted } from '../../useIsMounted';
-import { DEFAULT_MAX_SLIPPAGE } from '../constants';
+import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../constants';
 import type { SwapReact } from '../types';
 import { SwapAmountInput } from './SwapAmountInput';
 import { SwapButton } from './SwapButton';
@@ -15,7 +15,7 @@ import { SwapToggleButton } from './SwapToggleButton';
 export function Swap({
   children,
   config = {
-    maxSlippage: DEFAULT_MAX_SLIPPAGE,
+    defaultMaxSlippage: FALLBACK_DEFAULT_MAX_SLIPPAGE,
   },
   className,
   experimental = { useAggregator: false },

src/swap/components/SwapProvider.test.tsx

@@ -99,7 +99,7 @@ const wrapper = ({ children }) => (
   <WagmiProvider config={accountConfig}>
     <QueryClientProvider client={queryClient}>
       <SwapProvider
-        config={{ maxSlippage: 5 }}
+        config={{ defaultMaxSlippage: 5 }}
         experimental={{ useAggregator: true }}
       >
         {children}
@@ -114,7 +114,7 @@ const renderWithProviders = ({
   onStatus = vi.fn(),
   onSuccess = vi.fn(),
 }) => {
-  const config = { maxSlippage: 10 };
+  const config = { defaultMaxSlippage: 10 };
   const mockExperimental = { useAggregator: true };
   return render(
     <WagmiProvider config={accountConfig}>
@@ -813,12 +813,12 @@ describe('SwapProvider', () => {
     });
   });
 
-  it('should use default maxSlippage when not provided in experimental', () => {
+  it('should use default defaultMaxSlippage when not provided in experimental', () => {
     const useTestHook = () => {
       const { lifecycleStatus } = useSwapContext();
       return lifecycleStatus;
     };
-    const config = { maxSlippage: 3 };
+    const config = { defaultMaxSlippage: 3 };
     const wrapper = ({ children }) => (
       <WagmiProvider config={accountConfig}>
         <QueryClientProvider client={queryClient}>

src/swap/components/SwapProvider.tsx

@@ -17,7 +17,7 @@ import { formatTokenAmount } from '../../internal/utils/formatTokenAmount';
 import type { Token } from '../../token';
 import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants';
 import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError';
-import { DEFAULT_MAX_SLIPPAGE } from '../constants';
+import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../constants';
 import { useAwaitCalls } from '../hooks/useAwaitCalls';
 import { useFromTo } from '../hooks/useFromTo';
 import { useLifecycleStatus } from '../hooks/useLifecycleStatus';
@@ -41,7 +41,7 @@ export function useSwapContext() {
 export function SwapProvider({
   children,
   config = {
-    maxSlippage: DEFAULT_MAX_SLIPPAGE,
+    defaultMaxSlippage: FALLBACK_DEFAULT_MAX_SLIPPAGE,
   },
   experimental,
   isSponsored,
@@ -63,7 +63,7 @@ export function SwapProvider({
     statusName: 'init',
     statusData: {
       isMissingRequiredField: true,
-      maxSlippage: config.maxSlippage,
+      maxSlippage: config.defaultMaxSlippage,
     },
   }); // Component lifecycle
 
@@ -143,12 +143,12 @@ export function SwapProvider({
         statusName: 'init',
         statusData: {
           isMissingRequiredField: true,
-          maxSlippage: config.maxSlippage,
+          maxSlippage: config.defaultMaxSlippage,
         },
       });
     }
   }, [
-    config.maxSlippage,
+    config.defaultMaxSlippage,
     hasHandledSuccess,
     lifecycleStatus.statusName,
     updateLifecycleStatus,

src/swap/components/SwapSettingsSlippageInput.test.tsx

@@ -1,22 +1,22 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { DEFAULT_MAX_SLIPPAGE } from '../constants';
+import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../constants';
 import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
 
 const mockSetLifecycleStatus = vi.fn();
 let mockLifecycleStatus = {
   statusName: 'init',
   statusData: {
     isMissingRequiredField: false,
-    maxSlippage: DEFAULT_MAX_SLIPPAGE,
+    maxSlippage: FALLBACK_DEFAULT_MAX_SLIPPAGE,
   },
 };
 
 vi.mock('./SwapProvider', () => ({
   useSwapContext: () => ({
     updateLifecycleStatus: mockSetLifecycleStatus,
     lifecycleStatus: mockLifecycleStatus,
-    config: { maxSlippage: DEFAULT_MAX_SLIPPAGE },
+    config: { defaultMaxSlippage: FALLBACK_DEFAULT_MAX_SLIPPAGE },
   }),
 }));
 
@@ -31,15 +31,15 @@ describe('SwapSettingsSlippageInput', () => {
       statusName: 'init',
       statusData: {
         isMissingRequiredField: false,
-        maxSlippage: DEFAULT_MAX_SLIPPAGE,
+        maxSlippage: FALLBACK_DEFAULT_MAX_SLIPPAGE,
       },
     };
   });
 
   it('renders with default props', () => {
     render(<SwapSettingsSlippageInput />);
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(screen.getByText('%')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Auto' })).toBeInTheDocument();
@@ -67,7 +67,7 @@ describe('SwapSettingsSlippageInput', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '2.5' } });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
       statusName: 'slippageChange',
@@ -87,7 +87,7 @@ describe('SwapSettingsSlippageInput', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     fireEvent.change(screen.getByRole('textbox'), { target: { value: 'abc' } });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
       statusName: 'slippageChange',
@@ -104,7 +104,7 @@ describe('SwapSettingsSlippageInput', () => {
       target: { value: '2.75' },
     });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
       statusName: 'slippageChange',
@@ -144,7 +144,7 @@ describe('SwapSettingsSlippageInput', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
       statusName: 'slippageChange',
@@ -186,7 +186,7 @@ describe('SwapSettingsSlippageInput', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     fireEvent.change(screen.getByRole('textbox'), { target: { value: 'abc' } });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
       statusName: 'slippageChange',
@@ -202,7 +202,7 @@ describe('SwapSettingsSlippageInput', () => {
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '5' } });
     fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     expect(mockSetLifecycleStatus).toHaveBeenLastCalledWith({
       statusName: 'slippageChange',
@@ -215,19 +215,19 @@ describe('SwapSettingsSlippageInput', () => {
   it('maintains default value when switching between Auto and Custom mode', () => {
     render(<SwapSettingsSlippageInput />);
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '5' } });
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
     fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
     expect(screen.getByRole('textbox')).toHaveValue(
-      DEFAULT_MAX_SLIPPAGE.toString(),
+      FALLBACK_DEFAULT_MAX_SLIPPAGE.toString(),
     );
   });
 });

src/swap/components/SwapSettingsSlippageInput.tsx

@@ -12,7 +12,7 @@ export function SwapSettingsSlippageInput({
   className,
 }: SwapSettingsSlippageInputReact) {
   const {
-    config: { maxSlippage: defaultMaxSlippage },
+    config: { defaultMaxSlippage },
     updateLifecycleStatus,
     lifecycleStatus,
   } = useSwapContext();

src/swap/constants.ts

@@ -1,4 +1,4 @@
-export const DEFAULT_MAX_SLIPPAGE = 3;
+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';
 export const GENERAL_SWAP_BALANCE_ERROR_CODE = 'SWAP_BALANCE_ERROR';

src/swap/types.ts

@@ -197,7 +197,7 @@ export type SwapButtonReact = {
 };
 
 type SwapConfig = {
-  maxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points;
+  defaultMaxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points;
 };
 
 export type SwapContextType = {
@@ -268,7 +268,7 @@ export type SwapParams = {
 export type SwapProviderReact = {
   children: React.ReactNode;
   config?: {
-    maxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points
+    defaultMaxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points
   };
   experimental: {
     useAggregator: boolean; // Whether to use a DEX aggregator. (default: true)