add success state

Author: alissacrane-cb

src/internal/svg/checkmarkSvg.tsx

@@ -1,7 +1,7 @@
 export const checkmarkSvg = (
   <svg
-    width="25"
-    height="24"
+    width="16"
+    height="16"
     viewBox="0 0 25 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/swap/components/FundSwapButton.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import {
   cn,
@@ -9,24 +9,51 @@ import {
   pressable,
 } from '../../styles/theme';
 import { useFundSwapContext } from './FundSwapProvider';
+import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';
 
 export function FundSwapButton() {
-  const { setIsDropdownOpen } = useFundSwapContext();
-  const isLoading = false;
-  const isDisabled = false;
+  const {
+    setIsDropdownOpen,
+    fromETH,
+    fromUSDC,
+    to,
+    lifecycleStatus: { statusName },
+  } = useFundSwapContext();
+  const isLoading =
+    to?.loading ||
+    fromETH.loading ||
+    fromUSDC.loading ||
+    statusName === 'transactionPending' ||
+    statusName === 'transactionApproved';
+
+  const isDisabled =
+    !fromETH.amount ||
+    !fromUSDC.amount ||
+    !fromETH.token ||
+    !fromUSDC.token ||
+    !to?.amount ||
+    !to?.token ||
+    isLoading;
 
   const handleSubmit = useCallback(() => {
     setIsDropdownOpen(true);
   }, [setIsDropdownOpen]);
 
+  const buttonContent = useMemo(() => {
+    if (statusName === 'success') {
+      return checkmarkSvg;
+    }
+    return 'Buy';
+  }, [statusName]);
+
   return (
     <button
       type="button"
       className={cn(
         background.primary,
         border.radius,
-        'rounded-xl',
-        'px-4 py-3',
+        'flex rounded-xl',
+        'px-4 py-3 h-12 w-24 items-center justify-center',
         isDisabled && pressable.disabled,
         text.headline,
       )}
@@ -36,7 +63,9 @@ export function FundSwapButton() {
       {isLoading ? (
         <Spinner />
       ) : (
-        <span className={cn(text.headline, color.inverse)}>Buy</span>
+        <span className={cn(text.headline, color.foreground)}>
+          {buttonContent}
+        </span>
       )}
     </button>
   );

src/swap/components/FundSwapDropdown.tsx

@@ -1,22 +1,29 @@
 import { TokenImage } from '../../token';
-import { background, cn, color } from '../../styles/theme';
+import { background, cn, color, pressable } from '../../styles/theme';
 import { useFundSwapContext } from './FundSwapProvider';
 import type { SwapUnit } from '../types';
 import { useCallback } from 'react';
 
 function TokenItem({ swapUnit }: { swapUnit: SwapUnit }) {
-  const { handleSubmit } = useFundSwapContext();
+  const { handleSubmit, setIsDropdownOpen } = useFundSwapContext();
 
   if (!swapUnit?.token) {
     return null;
   }
 
   const handleClick = useCallback(() => {
+    setIsDropdownOpen(false);
     handleSubmit(swapUnit);
-  }, [handleSubmit, swapUnit]);
+  }, [handleSubmit, swapUnit, setIsDropdownOpen]);
 
   return (
-    <div className="flex items-center gap-2" onClick={handleClick}>
+    <button
+      className={cn(
+        'flex items-center gap-2 rounded-lg p-2',
+        'hover:bg-[var(--ock-bg-inverse)]',
+      )}
+      onClick={handleClick}
+    >
       <TokenImage token={swapUnit.token} size={36} />
       <div className="flex flex-col">
         <div>
@@ -26,7 +33,7 @@ function TokenItem({ swapUnit }: { swapUnit: SwapUnit }) {
           className={cn('text-xs', color.foregroundMuted)}
         >{`Balance: ${swapUnit.balance}`}</div>
       </div>
-    </div>
+    </button>
   );
 }
 
@@ -38,11 +45,11 @@ export function FundSwapDropdown() {
       className={cn(
         color.foreground,
         background.alternate,
-        'absolute right-0 bottom-0 flex translate-y-[110%] flex-col gap-4',
-        'rounded p-4',
+        'absolute right-0 bottom-0 flex translate-y-[110%] flex-col gap-2',
+        'rounded p-2',
       )}
     >
-      <div>Buy with</div>
+      <div className="px-2 pt-2">Buy with</div>
       <TokenItem swapUnit={fromETH} />
       <TokenItem swapUnit={fromUSDC} />
     </div>

src/swap/components/FundSwapProvider.tsx

@@ -28,6 +28,7 @@ import type {
 import { isSwapError } from '../utils/isSwapError';
 import { processSwapTransaction } from '../utils/processSwapTransaction';
 import { useFundSwapTokens } from '../hooks/useFundSwapTokens';
+import { useResetFundSwapInputs } from '../hooks/useResetFundSwapInputs';
 
 const emptyContext = {} as FundSwapContextType;
 
@@ -84,7 +85,7 @@ export function FundSwapProvider({
   const { sendCallsAsync } = useSendCalls(); // Atomic Batch transactions (and approval, if applicable)
 
   // Refreshes balances and inputs post-swap
-  // const resetInputs = useResetInputs({ from, to });
+  const resetInputs = useResetFundSwapInputs({ fromETH, fromUSDC, to });
   // For batched transactions, listens to and awaits calls from the Wallet server
   const awaitCallsStatus = useAwaitCalls({
     accountConfig,
@@ -123,9 +124,9 @@ export function FundSwapProvider({
     // prevents multiple calls to `onStatus`
     if (lifecycleStatus.statusName === 'init' && hasHandledSuccess) {
       setHasHandledSuccess(false);
-      // resetInputs();
+      resetInputs();
     }
-  }, [hasHandledSuccess, lifecycleStatus.statusName]);
+  }, [hasHandledSuccess, lifecycleStatus.statusName, resetInputs]);
 
   useEffect(() => {
     // For batched transactions, `transactionApproved` will contain the calls ID
@@ -145,16 +146,24 @@ export function FundSwapProvider({
   ]);
 
   useEffect(() => {
+    let timer: NodeJS.Timeout;
     // Reset status to init after success has been handled
     if (lifecycleStatus.statusName === 'success' && hasHandledSuccess) {
-      updateLifecycleStatus({
-        statusName: 'init',
-        statusData: {
-          isMissingRequiredField: true,
-          maxSlippage: config.maxSlippage,
-        },
-      });
+      timer = setTimeout(() => {
+        updateLifecycleStatus({
+          statusName: 'init',
+          statusData: {
+            isMissingRequiredField: true,
+            maxSlippage: config.maxSlippage,
+          },
+        });
+      }, 3000);
     }
+    return () => {
+      if (timer) {
+        return clearTimeout(timer);
+      }
+    };
   }, [
     config.maxSlippage,
     hasHandledSuccess,

src/swap/hooks/useResetFundSwapInputs.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import type { FundSwapTokens } from '../types';
+
+// Refreshes balances and inputs post-swap
+export const useResetFundSwapInputs = ({
+  fromETH,
+  fromUSDC,
+  to,
+}: FundSwapTokens) => {
+  return useCallback(async () => {
+    await Promise.all([
+      fromETH.balanceResponse?.refetch(),
+      fromUSDC.balanceResponse?.refetch(),
+      to.balanceResponse?.refetch(),
+      fromETH.setAmount(''),
+      fromUSDC.setAmount(''),
+      fromETH.setAmountUSD(''),
+      fromUSDC.setAmountUSD(''),
+      to.setAmount(''),
+      to.setAmountUSD(''),
+    ]);
+  }, [fromETH, fromUSDC, to]);
+};