diff --git a/site/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
index 59cc9dc892..521352dd9f 100644
--- a/site/docs/pages/swap/swap.mdx
+++ b/site/docs/pages/swap/swap.mdx
@@ -14,7 +14,7 @@ The `Swap` component is a comprehensive interface for users to execute token swa
 <Swap>
   <SwapAmountInputV2 type="from" label="Sell" token={fromToken} />
   <SwapAmountInputV2 type="to" label="Buy" token={toToken} />
-  <SwapButton onSubmit={onSubmit} fromToken={fromToken} toToken={toToken} />
+  <SwapButton onSubmit={onSubmit} />
 </Swap>
 ```
 
@@ -51,26 +51,7 @@ The `Swap` component is a comprehensive interface for users to execute token swa
         chainId: 8453,
       }}
     />
-    <SwapButton
-      onSubmit={() => {}}
-      fromToken={{
-        name: 'Ethereum',
-        address: '',
-        symbol: 'ETH',
-        decimals: 18,
-        image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
-        chainId: 8453,
-      }}
-      toToken={{
-        name: 'Dai',
-        address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
-        symbol: 'DAI',
-        decimals: 18,
-        image:
-          'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy',
-        chainId: 8453,
-      }}
-    />
+    <SwapButton />
   </Swap>
 </App>
 
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
index 314539e920..f16155ec7f 100644
--- a/src/swap/components/Swap.tsx
+++ b/src/swap/components/Swap.tsx
@@ -1,18 +1,34 @@
-import { useMemo, useState } from 'react';
-import type { SwapReact } from '../types';
+import { useCallback, useMemo, useState } from 'react';
+import type { SwapParams, SwapReact } from '../types';
 import { SwapContext } from '../context';
 
-export function Swap({ account, children }: SwapReact) {
+export function Swap({ account, children, fromToken, toToken }: SwapReact) {
   const [fromAmount, setFromAmount] = useState('');
   const [toAmount, setToAmount] = useState('');
 
+  const submitSwapTx = (params?: SwapParams) => {
+    // TODO: implement hook
+  };
+
+  const handleSubmit = useCallback(() => {
+    if (account && fromToken && toToken && fromAmount) {
+      submitSwapTx({
+        amount: fromAmount,
+        fromAddress: account.address,
+        from: fromToken,
+        to: toToken,
+      });
+    }
+  }, []);
+
   const value = useMemo(() => {
     return {
+      account,
       fromAmount,
+      onSubmit: handleSubmit,
       setFromAmount,
-      toAmount,
       setToAmount,
-      account,
+      toAmount,
     };
   }, [account, fromAmount, setFromAmount, setToAmount, toAmount]);
 
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index 2356630455..e609fcd3a8 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -13,7 +13,7 @@ export function SwapAmountInput({
   const handleAmountChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (isValidAmount(event.target.value)) {
-        setAmount(event.target.value);
+        setAmount?.(event.target.value);
       }
     },
     [setAmount],
@@ -21,7 +21,7 @@ export function SwapAmountInput({
 
   const handleMaxButtonClick = useCallback(() => {
     if (tokenBalance && isValidAmount(tokenBalance)) {
-      setAmount(tokenBalance);
+      setAmount?.(tokenBalance);
     }
   }, [tokenBalance, setAmount]);
 
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
index 76b8c1b7f4..c11a14372a 100644
--- a/src/swap/components/SwapButton.tsx
+++ b/src/swap/components/SwapButton.tsx
@@ -1,15 +1,15 @@
 import { useCallback, useContext } from 'react';
 import { SwapContext } from '../context';
-import type { SwapButtonReact } from '../types';
+import { SwapButtonReact } from '../types';
 
-export function SwapButton({ fromToken, onSubmit, toToken }: SwapButtonReact) {
-  const { account, fromAmount } = useContext(SwapContext);
+export function SwapButton({ onSubmit }: SwapButtonReact) {
+  const { onSubmit: onSubmitSwap } = useContext(SwapContext);
 
   const handleSubmit = useCallback(() => {
-    if (account && fromToken && toToken && fromAmount) {
-      onSubmit({ fromAddress: account.address, from: fromToken, to: toToken, amount: fromAmount });
-    }
+    onSubmitSwap();
+    onSubmit?.();
   }, []);
+
   return (
     <div className="w-full p-4">
       <button
diff --git a/src/swap/types.ts b/src/swap/types.ts
index 2c84f13934..94b331c683 100644
--- a/src/swap/types.ts
+++ b/src/swap/types.ts
@@ -148,25 +148,26 @@ export type TransactionParams = {
 export type SwapReact = {
   account?: Account;
   children: ReactNode;
+  fromToken?: Token;
+  toToken?: Token;
 };
 
 export type SwapContextType = {
+  account?: Account;
   fromAmount: string;
+  onSubmit: () => void;
   setFromAmount: (a: string) => void;
-  toAmount: string;
   setToAmount: (a: string) => void;
-  account?: Account;
+  toAmount: string;
 };
 
 export type SwapParams = {
+  amount: string;
   fromAddress: `0x${string}`;
   from: Token;
   to: Token;
-  amount: string;
 };
 
 export type SwapButtonReact = {
-  onSubmit: (params?: SwapParams) => void;
-  fromToken: Token;
-  toToken: Token;
+  onSubmit?: (params?: SwapParams) => void;
 };