example

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

@@ -1,16 +1,5 @@
 import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
-import {
-  type LifecycleStatus,
-  Swap,
-  SwapAmountInput,
-  SwapButton,
-  SwapMessage,
-  SwapSettings,
-  SwapSettingsSlippageDescription,
-  SwapSettingsSlippageInput,
-  SwapSettingsSlippageTitle,
-  SwapToggleButton,
-} from '@coinbase/onchainkit/swap';
+import { type LifecycleStatus, Swap } from '@coinbase/onchainkit/swap';
 import type { SwapError } from '@coinbase/onchainkit/swap';
 import type { Token } from '@coinbase/onchainkit/token';
 import { useCallback, useContext } from 'react';
@@ -104,39 +93,10 @@ function SwapComponent() {
 
       <Swap
         className="border"
-        onStatus={handleOnStatus}
-        onSuccess={handleOnSuccess}
-        onError={handleOnError}
-        config={{ maxSlippage: defaultMaxSlippage || DEFAULT_MAX_SLIPPAGE }}
-      >
-        <SwapSettings>
-          <SwapSettingsSlippageTitle>Max. slippage</SwapSettingsSlippageTitle>
-          <SwapSettingsSlippageDescription>
-            Your swap will revert if the prices change by more than the selected
-            percentage.
-          </SwapSettingsSlippageDescription>
-          <SwapSettingsSlippageInput />
-        </SwapSettings>
-        <SwapAmountInput
-          label="Sell"
-          swappableTokens={swappableTokens}
-          token={ethToken}
-          type="from"
-        />
-        <SwapToggleButton />
-        <SwapAmountInput
-          label="Buy"
-          swappableTokens={swappableTokens}
-          token={usdcToken}
-          type="to"
-        />
-        <SwapButton
-          disabled={
-            ENVIRONMENT_VARIABLES[ENVIRONMENT.ENVIRONMENT] === 'production'
-          }
-        />
-        <SwapMessage />
-      </Swap>
+        swappableTokens={swappableTokens}
+        fromToken={ethToken}
+        toToken={usdcToken}
+      />
     </div>
   );
 }

src/swap/components/Swap.tsx

@@ -1,15 +1,9 @@
-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 { useSwapComponents } from '../hooks/useSwapComponents';
 import type { SwapReact } from '../types';
-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({
   children,
@@ -18,22 +12,16 @@ export function Swap({
   },
   className,
   experimental = { useAggregator: false },
+  swappableTokens,
+  fromToken,
+  toToken,
   onError,
   onStatus,
   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]);
+    useSwapComponents({ children, swappableTokens, fromToken, toToken });
 
   const isMounted = useIsMounted();
 

src/swap/hooks/useSwapComponents.tsx

@@ -0,0 +1,65 @@
+import { Children, useMemo } from 'react';
+import { findComponent } from '../../internal/utils/findComponent';
+import type { Token } from '../../token';
+import { SwapAmountInput } from '../components/SwapAmountInput';
+import { SwapButton } from '../components/SwapButton';
+import { SwapMessage } from '../components/SwapMessage';
+import { SwapSettings } from '../components/SwapSettings';
+import { SwapSettingsSlippageDescription } from '../components/SwapSettingsSlippageDescription';
+import { SwapSettingsSlippageInput } from '../components/SwapSettingsSlippageInput';
+import { SwapSettingsSlippageTitle } from '../components/SwapSettingsSlippageTitle';
+import { SwapToggleButton } from '../components/SwapToggleButton';
+
+export const useSwapComponents = ({
+  children,
+  swappableTokens,
+  fromToken,
+  toToken,
+}: {
+  children: React.ReactNode;
+  swappableTokens?: Token[];
+  fromToken?: Token;
+  toToken?: Token;
+}) => {
+  return useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return {
+      inputs:
+        childrenArray.filter(findComponent(SwapAmountInput)).length === 0
+          ? [
+              <SwapAmountInput
+                label="Sell"
+                swappableTokens={swappableTokens}
+                token={fromToken}
+                type="from"
+              />,
+              <SwapAmountInput
+                label="Buy"
+                swappableTokens={swappableTokens}
+                token={toToken}
+                type="to"
+              />,
+            ]
+          : childrenArray.filter(findComponent(SwapAmountInput)),
+      toggleButton: childrenArray.find(findComponent(SwapToggleButton)) || (
+        <SwapToggleButton />
+      ),
+      swapButton: childrenArray.find(findComponent(SwapButton)) || (
+        <SwapButton />
+      ),
+      swapMessage: childrenArray.find(findComponent(SwapMessage)) || (
+        <SwapMessage />
+      ),
+      swapSettings: childrenArray.find(findComponent(SwapSettings)) || (
+        <SwapSettings>
+          <SwapSettingsSlippageTitle>Max. slippage</SwapSettingsSlippageTitle>
+          <SwapSettingsSlippageDescription>
+            Your swap will revert if the prices change by more than the selected
+            percentage.
+          </SwapSettingsSlippageDescription>
+          <SwapSettingsSlippageInput />
+        </SwapSettings>
+      ),
+    };
+  }, [children, swappableTokens, fromToken, toToken]);
+};

src/swap/types.ts

@@ -274,12 +274,15 @@ export type SwapProviderReact = {
  * Note: exported as public Type
  */
 export type SwapReact = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string; // Optional className override for top div element.
   config?: SwapConfig;
   experimental?: {
     useAggregator: boolean; // Whether to use a DEX aggregator. (default: true)
   };
+  swappableTokens?: Token[]; // Swappable tokens
+  fromToken?: Token; // The source token for the swap
+  toToken?: Token; // The destination token for the swap
   onError?: (error: SwapError) => void; // An optional callback function that handles errors within the provider.
   onStatus?: (lifecycleStatus: LifecycleStatus) => void; // An optional callback function that exposes the component lifecycle state
   onSuccess?: (transactionReceipt: TransactionReceipt) => void; // An optional callback function that exposes the transaction receipt