@ensofinance/checkout-widget 0.1.7 → 0.1.8

package/src/components/steps/WalletFlow/WalletConfirmStep.tsx

@@ -1,13 +1,14 @@
 import { Box, Table, Text, Image } from "@chakra-ui/react";
-import { useEffect, useState, useMemo, useCallback } from "react";
+import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { useAccount } from "wagmi";
+import { useCallsStatus } from "wagmi/experimental";
 import { Address } from "viem";
 import { BodyWrapper } from "@/components/ui/styled";
 import { Button } from "@/components/ui";
 import { CircleTimer } from "@/components/CircleTimer";
 import { TransactionDetailRow } from "@/components/TransactionDetailRow";
 import DepositProcessing from "@/components/DepositProcessing";
-import { useSendTxns, useRouteData, useAppDetails } from "@/util/enso-hooks";
+import { useSendTxns, useRouteData, useAppDetails, type TxStep } from "@/util/enso-hooks";
 import { compareCaseInsensitive, getChainIcon } from "@/util";
 import { getChainEtherscanUrl } from "@/util/common";
 import { useTrackTx, useTxByHash } from "@/util/tx-tracker";
@@ -19,7 +20,7 @@ import { ETH_ADDRESS } from "@/util/constants";
 import SuccessIcon from "@/assets/success.svg";
 import FailIcon from "@/assets/fail.svg";
 
-type TransferStatus = "processing" | "success" | "failed" | "idle";
+type TransferStatus = "idle" | "approving" | "executing" | "processing" | "success" | "failed";
 
 const useOperationsCalls = () => {
     const { chainIdIn, tokenIn, amountIn } = useAppDetails();
@@ -70,16 +71,18 @@ const useOperationsCalls = () => {
 const WalletConfirmStep = ({
     setStep,
 }: {
-    setStep: (step: string) => void;
+    setStep: (step: number) => void;
 }) => {
     const [status, setStatus] = useState<TransferStatus>("idle");
     const [isTimerFinished, setIsTimerFinished] = useState(false);
     const { address } = useAccount();
     const [trackingHash, setTrackingHash] = useState("");
-    const [called, setCalled] = useState(false);
+    const [bundleId, setBundleId] = useState<string>();
+    const calledRef = useRef(false);
 
     const { chainIdIn, chainIdOut } = useAppDetails();
     const { calls } = useOperationsCalls();
+    const isCrosschain = chainIdIn !== chainIdOut;
 
     const { sendTxns, ready } = useSendTxns({
         calls,
@@ -87,30 +90,78 @@ const WalletConfirmStep = ({
         chainId: chainIdIn,
     });
 
-    // const [trackingHash, setTrackingHash] = useState("");
     const { track } = useTrackTx();
 
-    const isCrosschain = chainIdIn !== chainIdOut;
+    const callsStatus = useCallsStatus({
+        id: bundleId as string,
+        query: {
+            enabled: !!bundleId,
+            refetchInterval: (query) =>
+                query.state.data?.status === "success" ? false : 2000,
+        },
+    });
+
+    useEffect(() => {
+        if (!callsStatus.data || callsStatus.data.status !== "success") return;
 
-    const onTxSend = useCallback(
-        (hash: string) => {
-            setStatus("processing");
+        const receipt = callsStatus.data.receipts?.[0];
+        const hash = receipt?.transactionHash;
+
+        if (hash) {
             setTrackingHash(hash);
-            track({
-                hash: hash as `0x${string}`,
-                isActive: true,
-                chainId: chainIdIn,
-                crosschain: isCrosschain,
-                status: isCrosschain
-                    ? "(0/4) Waiting for source transaction completion"
-                    : "Transaction in progess",
-                message: "Transaction confirmed",
-                onConfirmed: () => {
-                    setStatus("success");
-                },
-            });
+
+            if (isCrosschain) {
+                track({
+                    hash: hash as `0x${string}`,
+                    isActive: true,
+                    chainId: chainIdIn,
+                    crosschain: true,
+                    status: "(0/4) Waiting for source transaction completion",
+                    message: "Transaction confirmed",
+                    onConfirmed: () => {
+                        setStatus("success");
+                    },
+                });
+                return;
+            }
+        }
+        setStatus("success");
+    }, [callsStatus.data, isCrosschain, chainIdIn, track]);
+
+    const onStep = useCallback(
+        (step: TxStep) => {
+            switch (step.type) {
+                case "approving":
+                    setStatus("approving");
+                    break;
+                case "executing":
+                    setStatus("executing");
+                    break;
+                case "confirmed": {
+                    setStatus("processing");
+                    setTrackingHash(step.hash);
+                    track({
+                        hash: step.hash as `0x${string}`,
+                        isActive: true,
+                        chainId: chainIdIn,
+                        crosschain: isCrosschain,
+                        status: isCrosschain
+                            ? "(0/4) Waiting for source transaction completion"
+                            : "Transaction in progress",
+                        message: "Transaction confirmed",
+                        onConfirmed: () => {
+                            setStatus("success");
+                        },
+                    });
+                    break;
+                }
+                case "atomic":
+                    setBundleId(step.bundleId);
+                    setStatus("processing");
+                    break;
+            }
         },
-        [chainIdIn, chainIdOut],
+        [chainIdIn, isCrosschain, track],
     );
 
     const onFail = useCallback((error: any) => {
@@ -120,12 +171,11 @@ const WalletConfirmStep = ({
 
     // Initiate the transaction when wallet is ready
     useEffect(() => {
-        console.log(called, ready);
-        if (!called && ready) {
-            sendTxns(onTxSend, onFail);
-            setCalled(true);
+        if (!calledRef.current && ready) {
+            calledRef.current = true;
+            sendTxns({ onStep, onFail });
         }
-    }, [called, ready, sendTxns, onTxSend]);
+    }, [ready, sendTxns, onStep, onFail]);
 
     const handleTimerFinish = () => {
         setIsTimerFinished(true);
@@ -133,14 +183,11 @@ const WalletConfirmStep = ({
 
     const handleNewDeposit = () => {
         // Reset to initial step or handle new deposit logic
-        setStep("selectToken");
+        setStep(0);
     };
 
     const handleRetry = () => {
-        // Reset to previous step to retry the transfer
-        // setStatus("processing");
-        // setIsTimerFinished(false);
-        setStep("quote");
+        setStep(2);
     };
 
     const tx = useTxByHash(trackingHash);
@@ -152,26 +199,14 @@ const WalletConfirmStep = ({
               chainId: chainIdIn,
           });
 
-    // useEffect(() => {
-    //     if (status === "processing") {
-    //         // Simulate transfer processing - randomly succeed or fail after timer
-    //         const timer = setTimeout(() => {
-    //             const shouldSucceed = Math.random() > 0.3; // 70% success rate for demo
-    //             setStatus(shouldSucceed ? "success" : "failed");
-    //         }, 2500); // 2.5 seconds processing time
-
-    //         return () => clearTimeout(timer);
-    //     }
-    // }, [status]);
-
     const getStatusColor = () => {
         switch (status) {
             case "success":
-                return "#14AE5C";
+                return "success";
             case "failed":
-                return "#E84142";
+                return "error";
             default:
-                return "#1E171F";
+                return "fg";
         }
     };
 
@@ -181,6 +216,10 @@ const WalletConfirmStep = ({
                 return "Success";
             case "failed":
                 return "Failed";
+            case "approving":
+                return "Approving token access...";
+            case "executing":
+                return "Confirm transaction in wallet";
             case "idle":
                 return "Awaiting wallet approval";
             default:
@@ -192,6 +231,8 @@ const WalletConfirmStep = ({
         switch (status) {
             case "processing":
             case "idle":
+            case "approving":
+            case "executing":
                 return (
                     <CircleTimer
                         start={status === "processing"}
@@ -208,7 +249,7 @@ const WalletConfirmStep = ({
                     >
                         <Image
                             src={SuccessIcon}
-                            boxShadow="0px 0px 20px #14AE5C"
+                            boxShadow="0px 0px 20px var(--chakra-colors-success)"
                             borderRadius="90%"
                             width="58px"
                             height="58px"
@@ -225,7 +266,7 @@ const WalletConfirmStep = ({
                     >
                         <Image
                             src={FailIcon}
-                            boxShadow="0px 0px 20px #E84142"
+                            boxShadow="0px 0px 20px var(--chakra-colors-error)"
                             borderRadius="90%"
                             width="58px"
                             height="58px"

package/src/components/steps/WalletFlow/WalletFlow.tsx

@@ -9,12 +9,13 @@ import { CheckoutContext } from "@/components/Checkout";
 import Modal from "@/components/modal";
 import { IconButton } from "@/components/ui";
 import { HeaderWrapper, HeaderTitle } from "@/components/ui/styled";
+import { AnimatedStep } from "@/components/ui/transitions";
 
 export enum WalletFlowStep {
-    SelectToken = "selectToken",
-    SelectAmount = "selectAmount",
-    Quote = "quote",
-    ConfirmTransfer = "confirmTransfer",
+    SelectToken,
+    SelectAmount,
+    Quote,
+    ConfirmTransfer,
 }
 
 const walletSteps = [
@@ -34,10 +35,6 @@ const WalletFlow = ({
     const [currentStep, setCurrentStep] = useState<WalletFlowStep>(initialStep);
     const { handleClose, enforceFlow } = useContext(CheckoutContext);
 
-    const handleSetStep = (step: WalletFlowStep | string) => {
-        setCurrentStep(step as WalletFlowStep);
-    };
-
     const handleBackClick = () => {
         const index = walletSteps.findIndex((step) => step === currentStep) - 1;
         if (index >= 0) {
@@ -50,15 +47,15 @@ const WalletFlow = ({
     const currentStepComponent = (() => {
         switch (currentStep) {
             case WalletFlowStep.SelectToken:
-                return <WalletTokenStep setStep={handleSetStep} />;
+                return <WalletTokenStep setStep={setCurrentStep} />;
             case WalletFlowStep.SelectAmount:
-                return <WalletAmountStep setStep={handleSetStep} />;
+                return <WalletAmountStep setStep={setCurrentStep} />;
             case WalletFlowStep.Quote:
-                return <WalletQuoteStep setStep={handleSetStep} />;
+                return <WalletQuoteStep setStep={setCurrentStep} />;
             case WalletFlowStep.ConfirmTransfer:
-                return <WalletConfirmStep setStep={handleSetStep} />;
+                return <WalletConfirmStep setStep={setCurrentStep} />;
             default:
-                return <WalletTokenStep setStep={handleSetStep} />;
+                return <WalletTokenStep setStep={setCurrentStep} />;
         }
     })();
 
@@ -78,7 +75,7 @@ const WalletFlow = ({
                         >
                             <Icon
                                 as={ChevronLeft}
-                                color="gray"
+                                color="fg.muted"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -105,7 +102,7 @@ const WalletFlow = ({
                         >
                             <Icon
                                 as={X}
-                                color="gray"
+                                color="fg.muted"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -113,7 +110,11 @@ const WalletFlow = ({
                     )}
                 </HeaderWrapper>
             </Modal.Header>
-            <Modal.Body>{currentStepComponent}</Modal.Body>
+            <Modal.Body>
+                <AnimatedStep key={currentStep}>
+                    {currentStepComponent}
+                </AnimatedStep>
+            </Modal.Body>
         </>
     );
 };

package/src/components/steps/WalletFlow/WalletQuoteStep.tsx

@@ -7,7 +7,7 @@ import { useAppDetails, useRouteData } from "@/util/enso-hooks";
 import { useChainName } from "@/util/common";
 import QuoteParameters from "@/components/QuoteParameters";
 
-const WalletQuoteStep = ({ setStep }: { setStep: (step: string) => void }) => {
+const WalletQuoteStep = ({ setStep }: { setStep: (step: number) => void }) => {
     const { chainIdIn } = useAppDetails();
 
     const { routeLoading, usdAmountIn, routeData } = useRouteData();
@@ -58,7 +58,7 @@ const WalletQuoteStep = ({ setStep }: { setStep: (step: string) => void }) => {
                             onClick={
                                 !routeLoading
                                     ? () => {
-                                          setStep("confirmTransfer");
+                                          setStep(3);
                                       }
                                     : () => {}
                             }

package/src/components/steps/WalletFlow/WalletTokenStep.tsx

@@ -7,7 +7,7 @@ import { useAppStore } from "@/store";
 import { useWalletBalance } from "@/enso-api/api";
 import { formatNumber, formatUSD, normalizeValue } from "@/util";
 
-const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
+const WalletAssetStep = ({ setStep }: { setStep: (step: number) => void }) => {
     const setSelectedIntegration = useAppStore(
         (state) => state.setSelectedIntegration,
     );
@@ -21,8 +21,10 @@ const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
 
     const filteredHoldings = holdingsList?.filter(
         (asset) =>
-            !(asset.token.toLowerCase() === tokenOut.toLowerCase() &&
-              asset.chainId === chainIdOut),
+            !(
+                asset.token.toLowerCase() === tokenOut.toLowerCase() &&
+                asset.chainId === chainIdOut
+            ),
     );
 
     useEffect(() => {
@@ -70,7 +72,7 @@ const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
             </Box>
             <Button
                 onClick={() => {
-                    setStep("selectAmount");
+                    setStep(1);
                 }}
                 disabled={!tokenIn}
             >