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/SwapSettingsSlippageLayout.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from '@testing-library/react';
+import type React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
+import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
+import { SwapSettingsSlippageLayout } from './SwapSettingsSlippageLayout';
+import { SwapSettingsSlippageTitle } from './SwapSettingsSlippageTitle';
+
+vi.mock('./SwapSettingsSlippageTitle', () => ({
+ SwapSettingsSlippageTitle: ({ children }: { children: React.ReactNode }) => (
+ <div data-testid="mock-title">{children}</div>
+ ),
+}));
+
+vi.mock('./SwapSettingsSlippageDescription', () => ({
+ SwapSettingsSlippageDescription: ({
+ children,
+ }: { children: React.ReactNode }) => (
+ <div data-testid="mock-description">{children}</div>
+ ),
+}));
+
+vi.mock('./SwapSettingsSlippageInput', () => ({
+ SwapSettingsSlippageInput: () => <div data-testid="mock-input">Input</div>,
+}));
+
+vi.mock('../../styles/theme', () => ({
+ cn: (...args: string[]) => args.join(' '),
+}));
+
+describe('SwapSettingsSlippageLayout', () => {
+ it('renders with all child components', () => {
+ render(
+ <SwapSettingsSlippageLayout>
+ <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+ <SwapSettingsSlippageDescription>
+ Description
+ </SwapSettingsSlippageDescription>
+ <SwapSettingsSlippageInput />
+ </SwapSettingsSlippageLayout>,
+ );
+ expect(
+ screen.getByTestId('ockSwapSettingsLayout_container'),
+ ).toBeInTheDocument();
+ expect(screen.getByTestId('mock-title')).toBeInTheDocument();
+ expect(screen.getByTestId('mock-description')).toBeInTheDocument();
+ expect(screen.getByTestId('mock-input')).toBeInTheDocument();
+ });
+
+ it('renders with only some child components', () => {
+ render(
+ <SwapSettingsSlippageLayout>
+ <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+ </SwapSettingsSlippageLayout>,
+ );
+ expect(
+ screen.getByTestId('ockSwapSettingsLayout_container'),
+ ).toBeInTheDocument();
+ expect(screen.getByTestId('mock-title')).toBeInTheDocument();
+ expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
+ });
+
+ it('applies custom className', () => {
+ render(
+ <SwapSettingsSlippageLayout className="custom-class">
+ <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+ </SwapSettingsSlippageLayout>,
+ );
+ const container = screen.getByTestId('ockSwapSettingsLayout_container');
+ expect(container.className).toContain('custom-class');
+ });
+
+ it('renders without any child components', () => {
+ render(<SwapSettingsSlippageLayout />);
+ expect(
+ screen.getByTestId('ockSwapSettingsLayout_container'),
+ ).toBeInTheDocument();
+ expect(screen.queryByTestId('mock-title')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('mock-toggle')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
+ });
+
+ it('renders with correct layout structure', () => {
+ render(
+ <SwapSettingsSlippageLayout>
+ <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+ <SwapSettingsSlippageDescription>
+ Description
+ </SwapSettingsSlippageDescription>
+ <SwapSettingsSlippageInput />
+ </SwapSettingsSlippageLayout>,
+ );
+ const container = screen.getByTestId('ockSwapSettingsLayout_container');
+ expect(container.children[0]).toHaveTextContent('Title');
+ expect(container.children[1]).toHaveTextContent('Description');
+ expect(container.children[2].children[0]).toHaveTextContent('Input');
+ });
+});

src/swap/components/SwapSettingsSlippageLayout.tsx

@@ -0,0 +1,40 @@
+import { Children, useMemo } from 'react';
+import { findComponent } from '../../internal/utils/findComponent';
+import { cn } from '../../styles/theme';
+import type { SwapSettingsSlippageLayoutReact } from '../types';
+import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
+import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
+import { SwapSettingsSlippageTitle } from './SwapSettingsSlippageTitle';
+
+export function SwapSettingsSlippageLayout({
+ children,
+ className,
+}: SwapSettingsSlippageLayoutReact) {
+ const { title, description, input } = useMemo(() => {
+ const childrenArray = Children.toArray(children);
+ return {
+ title: childrenArray.find(findComponent(SwapSettingsSlippageTitle)),
+ description: childrenArray.find(
+ findComponent(SwapSettingsSlippageDescription),
+ ),
+ input: childrenArray.find(findComponent(SwapSettingsSlippageInput)),
+ };
+ }, [children]);
+
+ return (
+ <div
+ className={cn(
+ 'right-0 z-10 w-[21.75rem] rounded-lg border border-gray-300 bg-gray-50',
+ 'px-3 py-3 shadow-lg dark:border-gray-700 dark:bg-gray-950',
+ className,
+ )}
+ data-testid="ockSwapSettingsLayout_container"
+ >
+ {title}
+ {description}
+ <div className="flex items-center justify-between gap-2">
+ {input && <div className="flex-grow">{input}</div>}
+ </div>
+ </div>
+ );
+}