@ensofinance/checkout-widget 0.1.8 → 0.1.9

package/src/components/steps/FlowSelector.tsx

@@ -1,6 +1,6 @@
 import { Box, Icon, Skeleton, Text } from "@chakra-ui/react";
 import { X, AlertCircle } from "lucide-react";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { IconButton } from "../ui";
 import {
@@ -17,58 +17,29 @@ import { CheckoutContext } from "../Checkout";
 import { WalletCard, OptionCard } from "../cards";
 import { WalletStatus } from "../cards/WalletCard";
 import { useWalletIcon, useSmartAccountBalances } from "@/util/enso-hooks";
-import ExchangeFlow from "@/components/steps/ExchangeFlow";
-import CardBuyFlow, { CardBuyStep } from "@/components/steps/CardBuyFlow/CardBuyFlow";
-import SmartAccountFlow from "@/components/steps/SmartAccountFlow";
+import ExchangeFlow, {
+    WithdrawalStep,
+    EXCHANGE_ICON_BY_TYPE,
+    ExchangeToIntegrationType,
+} from "@/components/steps/ExchangeFlow";
 import WalletFlow, {
     WalletFlowStep,
 } from "@/components/steps/WalletFlow/WalletFlow";
-import {
-    isMeldCardBuySupportedChain,
-    useCountryCode,
-    useMeldSupportedCrypto,
-} from "@/util/meld-hooks";
-import { useAppStore } from "@/store";
-import mastercardIcon from "@/assets/mastercard.png";
-import visaIcon from "@/assets/visa.png";
-import {
-    ExchangeToIntegrationType,
-    EXCHANGE_ICON_BY_TYPE,
-} from "./shared/exchangeIntegration";
-// Card brand icons
-const CARD_ICONS = [mastercardIcon, visaIcon];
-
-type FlowLaunchState = {
-    flow: string;
-    presetAmount?: boolean;
-} | null;
 
-type FlowOption = {
-    id: string;
-    title: string;
-    limit: string;
-    delay: string;
-    icons: string[];
-    disabled?: boolean;
-} & {
-    flow: string;
-    firstStep?: number;
+const FLOWS = {
+    exchange: ExchangeFlow,
+    wallet: WalletFlow,
 };
 
 const FlowSelector = () => {
-    const { handleClose, enableExchange, enableCardBuy, enforceFlow } =
+    const { handleClose, enableExchange, enforceFlow } =
         useContext(CheckoutContext);
-    const [flowLaunch, setFlowLaunch] = useState<FlowLaunchState>(null);
+    const [flow, setFlow] = useState("");
+    const [initialStep, setInitialStep] = useState<string | number>("");
     const [enforceError, setEnforceError] = useState<string | null>(null);
 
     const { total, isLoading } = useWalletBalance();
     const { address } = useAccount();
-    const chainIdOut = useAppStore((s) => s.chainIdOut);
-    const { countryCode } = useCountryCode();
-    const { data: supportedCryptos = [] } = useMeldSupportedCrypto({
-        countryCode,
-        enabled: !!enableCardBuy && !!chainIdOut,
-    });
 
     const { walletIcon, walletDisplayName } = useWalletIcon();
 
@@ -76,25 +47,6 @@ const FlowSelector = () => {
     const { total: smartAccountTotal, isLoading: isLoadingSmartAccount } =
         useSmartAccountBalances(1);
 
-    // Check if card buy is available for this chain
-    const isCardBuyAvailable =
-        enableCardBuy &&
-        chainIdOut &&
-        isMeldCardBuySupportedChain(chainIdOut, supportedCryptos);
-
-    const handleSetFlow = useCallback((nextFlow: string) => {
-        if (!nextFlow) {
-            setFlowLaunch(null);
-            return;
-        }
-
-        setFlowLaunch({ flow: nextFlow });
-    }, []);
-
-    const handleCardBuyDepositDetected = useCallback(() => {
-        setFlowLaunch({ flow: "smart-account", presetAmount: true });
-    }, []);
-
     // Handle enforceFlow on mount
     useEffect(() => {
         if (!enforceFlow) return;
@@ -106,15 +58,14 @@ const FlowSelector = () => {
                 );
                 return;
             }
-            setFlowLaunch({
-                flow: "exchange",
-            });
+            setFlow("exchange");
+            setInitialStep(WithdrawalStep.ChooseExchange);
         } else if (enforceFlow === "wallet") {
             if (address) {
-                setFlowLaunch({
-                    flow: "wallet",
-                });
+                setFlow("wallet");
+                setInitialStep(WalletFlowStep.SelectToken);
             }
+            // If no address, we'll show the wallet connection prompt in the UI
         }
     }, [enforceFlow, enableExchange, address]);
 
@@ -135,7 +86,37 @@ const FlowSelector = () => {
     }, [address]);
 
     const OPTIONS = useMemo(() => {
-        const options: FlowOption[] = [];
+        const options: {
+            id: string;
+            title: string;
+            limit: string;
+            delay: string;
+            icons: string[];
+            flow: string;
+            firstStep: string | number;
+            disabled?: boolean;
+        }[] = [
+            // {
+            //     id: "1",
+            //     title: "Crypto Transfer",
+            //     limit: address ? "No Limit" : "Connect wallet to proceed",
+            //     delay: address ? "Instant - 2 min" : "",
+            //     icons: [RabbyIcon, MetamaskIcon],
+            //     flow: "mainFlow",
+            //     firstStep: "selectToken",
+            //     disabled: !address,
+            // },
+            // {
+            //     id: "3",
+            //     title: "Deposit with card",
+            //     limit: "$10,000 limit",
+            //     delay: "5 min",
+            //     icons: [MastercardIcon, VisaIcon],
+            //     flow: "",
+            //     firstStep: "",
+            //     disabled: true,
+            // },
+        ];
 
         // Add Smart Balance option if balance > $20
         if (!isLoadingSmartAccount && smartAccountTotal > 20) {
@@ -145,12 +126,12 @@ const FlowSelector = () => {
                 limit: formatUSD(smartAccountTotal),
                 delay: "2 min",
                 icons: [],
-                flow: "smart-account",
+                flow: "exchange",
+                firstStep: WithdrawalStep.ChooseBalanceAsset,
             });
         }
 
-        // Add CEX exchange option
-        if (Array.isArray(enableExchange) && enableExchange.length > 0) {
+        if (Array.isArray(enableExchange) && enableExchange.length > 0)
             options.unshift({
                 id: "exchange",
                 title: "Connect Exchange",
@@ -165,51 +146,16 @@ const FlowSelector = () => {
                     )
                     .filter(Boolean),
                 flow: "exchange",
+                // Start at ChooseExchange to allow picking among multiple integrations
+                firstStep: WithdrawalStep.ChooseExchange,
             });
-        }
-
-        // Add card buy option (MELD)
-        if (isCardBuyAvailable) {
-            options.push({
-                id: "card-buy",
-                title: "Buy with Card",
-                limit: "$10,000 limit",
-                delay: "1-5 min",
-                icons: CARD_ICONS,
-                flow: "card-buy",
-            });
-        }
-
         return options;
-    }, [
-        enableExchange,
-        isCardBuyAvailable,
-        isLoadingSmartAccount,
-        smartAccountTotal,
-    ]);
+    }, [address, enableExchange, smartAccountTotal, isLoadingSmartAccount]);
 
-    switch (flowLaunch?.flow) {
-        case "exchange":
-            return <ExchangeFlow setFlow={handleSetFlow} />;
-
-        case "smart-account":
-            return (
-                <SmartAccountFlow
-                    setFlow={handleSetFlow}
-                    presetAmount={flowLaunch.presetAmount}
-                />
-            );
-
-        case "card-buy":
-            return (
-                <CardBuyFlow
-                    setFlow={handleSetFlow}
-                    onCardBuyDepositDetected={handleCardBuyDepositDetected}
-                />
-            );
+    const FlowComponent = flow && FLOWS[flow];
 
-        case "wallet":
-            return <WalletFlow setFlow={handleSetFlow} />;
+    if (FlowComponent) {
+        return <FlowComponent setFlow={setFlow} initialStep={initialStep} />;
     }
 
     // Error state for enforced exchange mode with no exchanges configured
@@ -329,9 +275,7 @@ const FlowSelector = () => {
                                     status={WalletStatus.CONNECTED}
                                     badge={walletDisplayName}
                                     onClick={() => {
-                                        setFlowLaunch({
-                                            flow: "wallet",
-                                        });
+                                        setFlow("wallet");
                                     }}
                                 />
                             }
@@ -350,9 +294,8 @@ const FlowSelector = () => {
                                         icons={option.icons}
                                         onClick={() => {
                                             if (option.disabled) return;
-                                            setFlowLaunch({
-                                                flow: option.flow,
-                                            });
+                                            setFlow(option.flow);
+                                            setInitialStep(option.firstStep);
                                         }}
                                     />
                                 ))}

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

@@ -10,7 +10,7 @@ import { normalizeValue, denormalizeValue } from "@/util";
 import { precisionizeNumber, getPositiveDecimalValue } from "@/util/common";
 import { useTokenBalance } from "@/util/wallet";
 import { useAppDetails } from "@/util/enso-hooks";
-const WalletAmountStep = ({ setStep }: { setStep: (step: number) => void }) => {
+const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
     const [amountInput, setAmountInput] = useState<AmountInputValue>({
         tokenAmount: "",
         usdAmount: "10.10",
@@ -124,7 +124,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: number) => void }) => {
             />
 
             <Button
-                onClick={() => setStep(2)}
+                onClick={() => setStep("quote")}
                 disabled={isAmountInvalid}
             >
                 Continue

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

@@ -1,14 +1,13 @@
 import { Box, Table, Text, Image } from "@chakra-ui/react";
-import { useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { useEffect, useState, useMemo, useCallback } 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, type TxStep } from "@/util/enso-hooks";
+import { useSendTxns, useRouteData, useAppDetails } from "@/util/enso-hooks";
 import { compareCaseInsensitive, getChainIcon } from "@/util";
 import { getChainEtherscanUrl } from "@/util/common";
 import { useTrackTx, useTxByHash } from "@/util/tx-tracker";
@@ -20,7 +19,7 @@ import { ETH_ADDRESS } from "@/util/constants";
 import SuccessIcon from "@/assets/success.svg";
 import FailIcon from "@/assets/fail.svg";
 
-type TransferStatus = "idle" | "approving" | "executing" | "processing" | "success" | "failed";
+type TransferStatus = "processing" | "success" | "failed" | "idle";
 
 const useOperationsCalls = () => {
     const { chainIdIn, tokenIn, amountIn } = useAppDetails();
@@ -71,18 +70,16 @@ const useOperationsCalls = () => {
 const WalletConfirmStep = ({
     setStep,
 }: {
-    setStep: (step: number) => void;
+    setStep: (step: string) => void;
 }) => {
     const [status, setStatus] = useState<TransferStatus>("idle");
     const [isTimerFinished, setIsTimerFinished] = useState(false);
     const { address } = useAccount();
     const [trackingHash, setTrackingHash] = useState("");
-    const [bundleId, setBundleId] = useState<string>();
-    const calledRef = useRef(false);
+    const [called, setCalled] = useState(false);
 
     const { chainIdIn, chainIdOut } = useAppDetails();
     const { calls } = useOperationsCalls();
-    const isCrosschain = chainIdIn !== chainIdOut;
 
     const { sendTxns, ready } = useSendTxns({
         calls,
@@ -90,78 +87,30 @@ const WalletConfirmStep = ({
         chainId: chainIdIn,
     });
 
+    // const [trackingHash, setTrackingHash] = useState("");
     const { track } = useTrackTx();
 
-    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 receipt = callsStatus.data.receipts?.[0];
-        const hash = receipt?.transactionHash;
+    const isCrosschain = chainIdIn !== chainIdOut;
 
-        if (hash) {
+    const onTxSend = useCallback(
+        (hash: string) => {
+            setStatus("processing");
             setTrackingHash(hash);
-
-            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;
-            }
+            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");
+                },
+            });
         },
-        [chainIdIn, isCrosschain, track],
+        [chainIdIn, chainIdOut],
     );
 
     const onFail = useCallback((error: any) => {
@@ -171,11 +120,12 @@ const WalletConfirmStep = ({
 
     // Initiate the transaction when wallet is ready
     useEffect(() => {
-        if (!calledRef.current && ready) {
-            calledRef.current = true;
-            sendTxns({ onStep, onFail });
+        console.log(called, ready);
+        if (!called && ready) {
+            sendTxns(onTxSend, onFail);
+            setCalled(true);
         }
-    }, [ready, sendTxns, onStep, onFail]);
+    }, [called, ready, sendTxns, onTxSend]);
 
     const handleTimerFinish = () => {
         setIsTimerFinished(true);
@@ -183,11 +133,14 @@ const WalletConfirmStep = ({
 
     const handleNewDeposit = () => {
         // Reset to initial step or handle new deposit logic
-        setStep(0);
+        setStep("selectToken");
     };
 
     const handleRetry = () => {
-        setStep(2);
+        // Reset to previous step to retry the transfer
+        // setStatus("processing");
+        // setIsTimerFinished(false);
+        setStep("quote");
     };
 
     const tx = useTxByHash(trackingHash);
@@ -199,14 +152,26 @@ 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 "success";
+                return "#14AE5C";
             case "failed":
-                return "error";
+                return "#E84142";
             default:
-                return "fg";
+                return "#1E171F";
         }
     };
 
@@ -216,10 +181,6 @@ 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:
@@ -231,8 +192,6 @@ const WalletConfirmStep = ({
         switch (status) {
             case "processing":
             case "idle":
-            case "approving":
-            case "executing":
                 return (
                     <CircleTimer
                         start={status === "processing"}
@@ -249,7 +208,7 @@ const WalletConfirmStep = ({
                     >
                         <Image
                             src={SuccessIcon}
-                            boxShadow="0px 0px 20px var(--chakra-colors-success)"
+                            boxShadow="0px 0px 20px #14AE5C"
                             borderRadius="90%"
                             width="58px"
                             height="58px"
@@ -266,7 +225,7 @@ const WalletConfirmStep = ({
                     >
                         <Image
                             src={FailIcon}
-                            boxShadow="0px 0px 20px var(--chakra-colors-error)"
+                            boxShadow="0px 0px 20px #E84142"
                             borderRadius="90%"
                             width="58px"
                             height="58px"

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

@@ -9,13 +9,12 @@ 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,
-    SelectAmount,
-    Quote,
-    ConfirmTransfer,
+    SelectToken = "selectToken",
+    SelectAmount = "selectAmount",
+    Quote = "quote",
+    ConfirmTransfer = "confirmTransfer",
 }
 
 const walletSteps = [
@@ -35,6 +34,10 @@ 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) {
@@ -47,15 +50,15 @@ const WalletFlow = ({
     const currentStepComponent = (() => {
         switch (currentStep) {
             case WalletFlowStep.SelectToken:
-                return <WalletTokenStep setStep={setCurrentStep} />;
+                return <WalletTokenStep setStep={handleSetStep} />;
             case WalletFlowStep.SelectAmount:
-                return <WalletAmountStep setStep={setCurrentStep} />;
+                return <WalletAmountStep setStep={handleSetStep} />;
             case WalletFlowStep.Quote:
-                return <WalletQuoteStep setStep={setCurrentStep} />;
+                return <WalletQuoteStep setStep={handleSetStep} />;
             case WalletFlowStep.ConfirmTransfer:
-                return <WalletConfirmStep setStep={setCurrentStep} />;
+                return <WalletConfirmStep setStep={handleSetStep} />;
             default:
-                return <WalletTokenStep setStep={setCurrentStep} />;
+                return <WalletTokenStep setStep={handleSetStep} />;
         }
     })();
 
@@ -75,7 +78,7 @@ const WalletFlow = ({
                         >
                             <Icon
                                 as={ChevronLeft}
-                                color="fg.muted"
+                                color="gray"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -102,7 +105,7 @@ const WalletFlow = ({
                         >
                             <Icon
                                 as={X}
-                                color="fg.muted"
+                                color="gray"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -110,11 +113,7 @@ const WalletFlow = ({
                     )}
                 </HeaderWrapper>
             </Modal.Header>
-            <Modal.Body>
-                <AnimatedStep key={currentStep}>
-                    {currentStepComponent}
-                </AnimatedStep>
-            </Modal.Body>
+            <Modal.Body>{currentStepComponent}</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: number) => void }) => {
+const WalletQuoteStep = ({ setStep }: { setStep: (step: string) => void }) => {
     const { chainIdIn } = useAppDetails();
 
     const { routeLoading, usdAmountIn, routeData } = useRouteData();
@@ -58,7 +58,7 @@ const WalletQuoteStep = ({ setStep }: { setStep: (step: number) => void }) => {
                             onClick={
                                 !routeLoading
                                     ? () => {
-                                          setStep(3);
+                                          setStep("confirmTransfer");
                                       }
                                     : () => {}
                             }

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: number) => void }) => {
+const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
     const setSelectedIntegration = useAppStore(
         (state) => state.setSelectedIntegration,
     );
@@ -21,10 +21,8 @@ const WalletAssetStep = ({ setStep }: { setStep: (step: number) => void }) => {
 
     const filteredHoldings = holdingsList?.filter(
         (asset) =>
-            !(
-                asset.token.toLowerCase() === tokenOut.toLowerCase() &&
-                asset.chainId === chainIdOut
-            ),
+            !(asset.token.toLowerCase() === tokenOut.toLowerCase() &&
+              asset.chainId === chainIdOut),
     );
 
     useEffect(() => {
@@ -72,7 +70,7 @@ const WalletAssetStep = ({ setStep }: { setStep: (step: number) => void }) => {
             </Box>
             <Button
                 onClick={() => {
-                    setStep(1);
+                    setStep("selectAmount");
                 }}
                 disabled={!tokenIn}
             >