Add button type prop

site/docs/pages/swap/types.mdx

@@ -180,16 +180,6 @@ type SwapReact = {
 };
 ```
 
-## `SwapSettingsReact`
-
-```ts
-type SwapSettingsReact = {
-  className?: string; // Optional className override for top div element.
-  icon?: ReactNode; // Optional icon override
-  text?: string; // Optional text override
-};
-```
-
 ## `SwapToggleButtonReact`
 
 ```ts

src/swap/components/Swap.tsx

@@ -7,7 +7,6 @@ import { SwapAmountInput } from './SwapAmountInput';
 import { SwapButton } from './SwapButton';
 import { SwapMessage } from './SwapMessage';
 import { SwapProvider } from './SwapProvider';
-import { SwapSettings } from './SwapSettings';
 import { SwapToggleButton } from './SwapToggleButton';
 
 export function Swap({
@@ -19,17 +18,15 @@ export function Swap({
   onSuccess,
   title = 'Swap',
 }: SwapReact) {
-  const { inputs, toggleButton, swapButton, swapMessage, swapSettings } =
-    useMemo(() => {
-      const childrenArray = Children.toArray(children);
-      return {
-        inputs: childrenArray.filter(findComponent(SwapAmountInput)),
-        toggleButton: childrenArray.find(findComponent(SwapToggleButton)),
-        swapButton: childrenArray.find(findComponent(SwapButton)),
-        swapMessage: childrenArray.find(findComponent(SwapMessage)),
-        swapSettings: childrenArray.find(findComponent(SwapSettings)),
-      };
-    }, [children]);
+  const { inputs, toggleButton, swapButton, swapMessage } = useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return {
+      inputs: childrenArray.filter(findComponent(SwapAmountInput)),
+      toggleButton: childrenArray.find(findComponent(SwapToggleButton)),
+      swapButton: childrenArray.find(findComponent(SwapButton)),
+      swapMessage: childrenArray.find(findComponent(SwapMessage)),
+    };
+  }, [children]);
 
   const isMounted = useIsMounted();
 
@@ -53,14 +50,10 @@ export function Swap({
         )}
         data-testid="ockSwap_Container"
       >
-        <div className="mb-4 flex items-center justify-between">
-          <h3
-            className={cn(text.title3, 'text-inherit')}
-            data-testid="ockSwap_Title"
-          >
+        <div className="mb-4">
+          <h3 className={text.title3} data-testid="ockSwap_Title">
             {title}
           </h3>
-          <div>{swapSettings}</div>
         </div>
         {inputs[0]}
         <div className="relative h-1">{toggleButton}</div>

src/swap/components/SwapSettingsSlippageInput.test.tsx

@@ -0,0 +1,120 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
+
+const mockSetMaxSlippage = vi.fn();
+let mockMaxSlippage = 3;
+
+vi.mock('./SwapProvider', () => ({
+  useSwapContext: () => ({
+    get maxSlippage() {
+      return mockMaxSlippage;
+    },
+    setMaxSlippage: (value: number) => {
+      mockSetMaxSlippage(value);
+      mockMaxSlippage = value;
+    },
+  }),
+}));
+
+vi.mock('../../styles/theme', () => ({
+  cn: (...args: string[]) => args.join(' '),
+}));
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+
+describe('SwapSettingsSlippageInput', () => {
+  beforeEach(() => {
+    mockMaxSlippage = 3;
+    mockSetMaxSlippage.mockClear();
+  });
+
+  it('renders with default props', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe('3');
+    expect(screen.getByText('%')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Auto' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <SwapSettingsSlippageInput className="custom-class" />,
+      {
+        wrapper: TestWrapper,
+      },
+    );
+    const elementWithCustomClass = container.querySelector('.custom-class');
+    expect(elementWithCustomClass).not.toBeNull();
+  });
+
+  it('uses provided defaultSlippage', () => {
+    render(<SwapSettingsSlippageInput defaultSlippage={1.0} />, {
+      wrapper: TestWrapper,
+    });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toBe('3');
+    fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
+    expect(input.value).toBe('1');
+  });
+
+  it('allows input changes in Custom mode', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
+    fireEvent.change(input, { target: { value: '2.0' } });
+    expect(input.value).toBe('2');
+    expect(mockSetMaxSlippage).toHaveBeenCalledWith(2);
+  });
+
+  it('disables input in Auto mode', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input).toBeDisabled();
+  });
+
+  it('switches between Auto and Custom modes', () => {
+    render(<SwapSettingsSlippageInput defaultSlippage={1.5} />, {
+      wrapper: TestWrapper,
+    });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input).toBeDisabled();
+    expect(input.value).toBe('3');
+    fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
+    expect(input).not.toBeDisabled();
+    fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
+    expect(input).toBeDisabled();
+    expect(input.value).toBe('1.5');
+    expect(mockSetMaxSlippage).toHaveBeenCalledWith(1.5);
+  });
+
+  it('prevents invalid input', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
+    fireEvent.change(input, { target: { value: 'abc' } });
+    expect(input.value).toBe('abc');
+    expect(mockSetMaxSlippage).not.toHaveBeenCalled();
+  });
+
+  it('applies correct styles', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const container = screen.getByText('%').closest('div');
+    expect(container).toHaveClass(
+      'flex items-center justify-between rounded-lg border border-gray-300',
+    );
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input).toHaveClass('flex-grow bg-transparent');
+  });
+
+  it('applies disabled styles in Auto mode', () => {
+    render(<SwapSettingsSlippageInput />, { wrapper: TestWrapper });
+    const inputContainer = screen.getByRole('textbox').closest('div');
+    expect(inputContainer).toHaveClass('opacity-50');
+  });
+});