move handleSubmit to SwapButton

coinbase · Jun 12, 2024 · e8378d9 · e8378d9
1 parent dc7899c
commit e8378d9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 37 deletions.
diff --git a/site/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
@@ -8,10 +8,10 @@ The `Swap` component is a comprehensive interface for users to execute token swa
 ## Usage
 
 ```tsx [code]
-<Swap account={account} onError={onError} onSuccess={onSuccess}>
+<Swap account={account}>
   <SwapAmountInputV2 label="Sell" token={fromToken} type="from" />
   <SwapAmountInputV2 label="Buy" token={toToken} type="to" />
-  <SwapButton />
+  <SwapButton onError={onError} onSuccess={onSuccess} />
 </Swap>
 ```
 

diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { buildSwapTransaction } from '../core/buildSwapTransaction';
 import { getSwapQuote } from '../core/getSwapQuote';
 import { cn } from '../../lib/utils';
 import { isSwapError } from '../utils';
 import { SwapContext } from '../context';
 import type { SwapError, SwapReact } from '../types';
 import type { Token } from '../../token';
 
-export function Swap({ account, children, onError, onSuccess }: SwapReact) {
+export function Swap({ account, children, onError }: SwapReact) {
   const [fromAmount, setFromAmount] = useState('');
   const [fromToken, setFromToken] = useState<Token>();
   const [toAmount, setToAmount] = useState('');
@@ -16,29 +15,6 @@ export function Swap({ account, children, onError, onSuccess }: SwapReact) {
   const [swapTransactionError, setSwapTransactionError] = useState('');
   const [lastTokenAmountUpdated, setLastTokenAmountUpdated] = useState<'to' | 'from' | undefined>();
 
-  const handleSubmit = useCallback(async () => {
-    setSwapQuoteError('');
-    setSwapTransactionError('');
-    if (account && fromToken && toToken && fromAmount) {
-      try {
-        const response = await buildSwapTransaction({
-          amount: fromAmount,
-          fromAddress: account.address,
-          from: fromToken,
-          to: toToken,
-        });
-        if (isSwapError(response)) {
-          setSwapTransactionError(response.error);
-          onError?.(response);
-        } else {
-          onSuccess?.(response);
-        }
-      } catch (error) {
-        onError?.(error as SwapError);
-      }
-    }
-  }, [account, fromAmount, fromToken, toToken]);
-
   const handleGetSwapQuote = useCallback(
     /* the reference amount for the swap */
     async (amountReference: 'to' | 'from') => {
@@ -110,9 +86,9 @@ export function Swap({ account, children, onError, onSuccess }: SwapReact) {
 
   const value = useMemo(() => {
     return {
+      account,
       fromAmount,
       fromToken,
-      onSubmit: handleSubmit,
       setFromAmount: handleFromAmountChange,
       setFromToken,
       setToAmount: handleToAmountChange,
@@ -121,13 +97,14 @@ export function Swap({ account, children, onError, onSuccess }: SwapReact) {
       toToken,
     };
   }, [
+    account,
     fromAmount,
     fromToken,
     handleFromAmountChange,
-    handleSubmit,
     handleToAmountChange,
     setToAmount,
     setToToken,
+    toAmount,
     toToken,
   ]);
 

diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
@@ -1,13 +1,32 @@
 import { useCallback, useContext } from 'react';
 import { cn } from '../../lib/utils';
+import { buildSwapTransaction } from '../core/buildSwapTransaction';
+import { isSwapError } from '../utils';
 import { SwapContext } from '../context';
+import type { SwapButtonReact, SwapError } from '../types';
 
-export function SwapButton() {
-  const { onSubmit, fromAmount, fromToken, toAmount, toToken } = useContext(SwapContext);
+export function SwapButton({ onError, onSuccess }: SwapButtonReact) {
+  const { account, fromAmount, fromToken, toToken } = useContext(SwapContext);
 
-  const handleSubmit = useCallback(() => {
-    onSubmit();
-  }, [onSubmit]);
+  const handleSubmit = useCallback(async () => {
+    if (account && fromToken && toToken && fromAmount) {
+      try {
+        const response = await buildSwapTransaction({
+          amount: fromAmount,
+          fromAddress: account.address,
+          from: fromToken,
+          to: toToken,
+        });
+        if (isSwapError(response)) {
+          onError?.(response);
+        } else {
+          onSuccess?.(response);
+        }
+      } catch (error) {
+        onError?.(error as SwapError);
+      }
+    }
+  }, [account, fromAmount, fromToken, toToken]);
 
   return (
     <div className="w-full p-4">
@@ -17,7 +36,7 @@ export function SwapButton() {
           'px-4 py-3 text-base font-medium leading-6 text-white',
         )}
         onClick={handleSubmit}
-        disabled={!fromAmount || !fromToken || !toAmount || !toToken}
+        disabled={!fromAmount || !fromToken || !toToken}
       >
         Swap
       </button>

diff --git a/src/swap/types.ts b/src/swap/types.ts
@@ -105,10 +105,15 @@ export type SwapAPIResponse = {
   tx: RawTransactionData; // The trade transaction
 };
 
+export type SwapButtonReact = {
+  onError?: (error: SwapError) => void;
+  onSuccess?: (swapTransaction: BuildSwapTransaction) => void;
+};
+
 export type SwapContextType = {
+  account: Account;
   fromAmount: string;
   fromToken?: Token;
-  onSubmit: () => void;
   setFromAmount: (a: string) => void;
   setFromToken: (t: Token) => void;
   setToAmount: (a: string) => void;
@@ -128,7 +133,6 @@ export type SwapReact = {
   account: Account;
   children: ReactNode;
   onError?: (error: SwapError) => void;
-  onSuccess?: (swapTransaction: BuildSwapTransaction) => void;
 };
 
 /**