@ensofinance/checkout-widget 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.12",
+    "version": "0.0.13",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {

package/src/components/Checkout.tsx

@@ -1,56 +1,17 @@
-import {
-    createContext,
-    ReactElement,
-    useEffect,
-    useMemo,
-    useState,
-    ComponentType,
-} from "react";
+import { createContext, useEffect, useMemo, ComponentType } from "react";
 import { Box } from "@chakra-ui/react";
-import InitialStep from "./steps/InitialStep";
-import SelectTokenStep from "./steps/WalletTokenStep";
-import SelectAmountStep from "./steps/WalletAmountStep";
-import QuoteStep from "./steps/QuoteStep";
-import WalletConfirmStep from "./steps/WalletConfirmStep";
-import ExchangeFlow from "./steps/ExchangeFlow";
+import FlowSelector from "./steps/FlowSelector";
 import { useAppStore } from "@/store";
 import { TxTracker } from "@/util/tx-tracker";
 import ChakraProvider from "./ChakraProvider";
 import { type CheckoutConfig, type SupportedExchanges } from "@/types";
 
 type ICheckoutContext = {
-    step: string;
-    setStep: (step: string) => void;
-
-    flow: string;
-    setFlow: (flow: string) => void;
-
     handleClose: () => void;
 
     enableExchanges?: SupportedExchanges[];
 };
 
-const FLOWS: Record<
-    string,
-    {
-        steps: Record<string, ReactElement>;
-    }
-> = {
-    mainFlow: {
-        steps: {
-            selectToken: <SelectTokenStep />,
-            selectAmount: <SelectAmountStep />,
-            quote: <QuoteStep />,
-            confirmTransfer: <WalletConfirmStep />,
-        },
-    },
-    exchangeFlow: {
-        steps: {
-            connectExchange: <ExchangeFlow />,
-        },
-    },
-};
-
 const CheckoutContext = createContext<ICheckoutContext>({} as ICheckoutContext);
 
 const Checkout = ({
@@ -62,9 +23,6 @@ const Checkout = ({
     wrapper?: ComponentType;
     onClose?: () => void;
 }) => {
-    const [step, setStep] = useState("");
-    const [flow, setFlow] = useState("");
-
     const setEnsoApiToken = useAppStore((state) => state.setEnsoApiToken);
     const setTokenOut = useAppStore((state) => state.setTokenOut);
     const setChainIdOut = useAppStore((state) => state.setChainIdOut);
@@ -76,8 +34,6 @@ const Checkout = ({
                       if (onClose) {
                           onClose();
                       }
-                      setStep("");
-                      setFlow("");
                   }
                 : undefined,
         [onClose],
@@ -107,10 +63,6 @@ const Checkout = ({
     return (
         <CheckoutContext.Provider
             value={{
-                step,
-                setStep,
-                flow,
-                setFlow,
                 handleClose,
                 enableExchanges: enableExchange,
             }}
@@ -118,7 +70,7 @@ const Checkout = ({
             <ChakraProvider themeConfig={theme}>
                 <WrapperComponent>
                     <TxTracker />
-                    {!flow && !step ? <InitialStep /> : FLOWS[flow].steps[step]}
+                    <FlowSelector />
                 </WrapperComponent>
             </ChakraProvider>
         </CheckoutContext.Provider>

package/src/components/QuoteParameters.tsx

@@ -4,23 +4,31 @@ import {
     Flex,
     Icon,
     Image,
+    Link,
     Skeleton,
-    Text,
     Table,
-    Link,
+    Text,
 } from "@chakra-ui/react";
 import { ExternalLink } from "lucide-react";
 import { useAppDetails, useRouteData, useWalletIcon } from "@/util/enso-hooks";
-import { formatNumber, getChainIcon, normalizeValue } from "@/util";
-import { shortenAddress } from "@/util";
-import { getChainName, Token } from "@/util/common";
+import {
+    formatNumber,
+    getChainIcon,
+    normalizeValue,
+    shortenAddress,
+} from "@/util";
+import { getChainEtherscanUrl, getChainName, Token } from "@/util/common";
 import { Tooltip } from "@/components/ui/tooltip";
-import { getChainEtherscanUrl } from "@/util/common";
-import { MOCK_IMAGE_URL, SupportedChainId } from "@/util/constants";
-import { STARGATE_CHAIN_NAMES } from "@/util/constants";
+import {
+    MOCK_IMAGE_URL,
+    STARGATE_CHAIN_NAMES,
+    SupportedChainId,
+} from "@/util/constants";
 import { useAppStore } from "@/store";
 // @ts-ignore
 import BinanceBadge from "../assets/BinanceBadge.svg";
+import { useMemo } from "react";
+import { ExchangeNames, ExchangeType } from "@/components/steps/ExchangeFlow";
 
 export const ERROR_MSG =
     "Swap not found for a required underlying of defi route, please make sure your amount is within an acceptable range";
@@ -97,7 +105,7 @@ const QuoteParameters = () => {
         useAppDetails();
     const { routeLoading, routeData, routeFetched, routerError } =
         useRouteData();
-    const { isCheckout } = useAppStore();
+    const { activeExchange } = useAppStore();
     const showRouteLoading = routeLoading || (!routeFetched && !routerError);
 
     const routeErrorMessage: string | null =
@@ -117,6 +125,47 @@ const QuoteParameters = () => {
         type: "/address",
     });
 
+    const sourceInfo = useMemo(() => {
+        if (activeExchange === ExchangeType.binance)
+            return (
+                <>
+                    <Image src={BinanceBadge} width={"16px"} height={"16px"} />
+                    <Text>Binance</Text>
+                </>
+            );
+
+        if (activeExchange === ExchangeType.delayed)
+            return <Text>{ExchangeNames[ExchangeType.delayed]}</Text>;
+
+        return (
+            <>
+                {typeof walletIcon === "string" ? (
+                    <Image src={walletIcon} width={"16px"} height={"16px"} />
+                ) : (
+                    walletIcon
+                )}
+                <Tooltip content={walletDisplayName}>
+                    <Text>
+                        {address &&
+                            walletDisplayName +
+                                " " +
+                                shortenAddress(address, true)}
+                    </Text>
+                </Tooltip>
+                {inWalletUrl && (
+                    <Link href={inWalletUrl} target="_blank">
+                        <Icon
+                            as={ExternalLink}
+                            color="fg.muted"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </Link>
+                )}
+            </>
+        );
+    }, [activeExchange]);
+
     return (
         <>
             <Table.Root
@@ -126,7 +175,7 @@ const QuoteParameters = () => {
                 width={"100%"}
                 borderRadius={"sm"}
             >
-                <Table.Body >
+                <Table.Body>
                     <Table.Row>
                         <Table.Cell>Source</Table.Cell>
                         <Table.Cell
@@ -139,52 +188,7 @@ const QuoteParameters = () => {
                                 gap={"8px"}
                                 alignItems={"center"}
                             >
-                                {isCheckout ? (
-                                    <>
-                                        <Image
-                                            src={BinanceBadge}
-                                            width={"16px"}
-                                            height={"16px"}
-                                        />
-                                        <Text>Binance</Text>
-                                    </>
-                                ) : (
-                                    <>
-                                        {typeof walletIcon === "string" ? (
-                                            <Image
-                                                src={walletIcon}
-                                                width={"16px"}
-                                                height={"16px"}
-                                            />
-                                        ) : (
-                                            walletIcon
-                                        )}
-                                        <Tooltip content={walletDisplayName}>
-                                            <Text>
-                                                {address &&
-                                                    walletDisplayName +
-                                                        " " +
-                                                        shortenAddress(
-                                                            address,
-                                                            true,
-                                                        )}
-                                            </Text>
-                                        </Tooltip>
-                                        {inWalletUrl && (
-                                            <Link
-                                                href={inWalletUrl}
-                                                target="_blank"
-                                            >
-                                                <Icon
-                                                    as={ExternalLink}
-                                                    color="fg.muted"
-                                                    width={"16px"}
-                                                    height={"16px"}
-                                                />
-                                            </Link>
-                                        )}
-                                    </>
-                                )}
+                                {sourceInfo}
                             </Box>
                         </Table.Cell>
                     </Table.Row>
@@ -243,7 +247,7 @@ const QuoteParameters = () => {
                                 width={showRouteLoading ? "80px" : "auto"}
                             >
                                 <Text>
-                                    {isCheckout
+                                    {activeExchange === "binance"
                                         ? `~2min`
                                         : chainIdIn !== chainIdOut
                                           ? `~1 min`

package/src/components/steps/ExchangeFlow.tsx

@@ -11,8 +11,8 @@ import {
 } from "@chakra-ui/react";
 import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
 import { useContext, useEffect, useMemo, useState, useCallback } from "react";
-import { IconButton, Button, Tab, Input, Tooltip } from "../ui";
-import { useAccount, useSignMessage, useChainId, useSwitchChain } from "wagmi";
+import { IconButton, Button, Tab, Input } from "../ui";
+import { useAccount, useSignMessage } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
 import {
     BodyWrapper,
@@ -36,28 +36,36 @@ import {
     formatUSD,
     normalizeValue,
 } from "@/util";
-import {
-    useTokenFromListBySymbols,
-    getChainName,
-    precisionizeNumber,
-} from "@/util/common";
+import { useTokenFromListBySymbols, precisionizeNumber } from "@/util/common";
 import {
     EXCHANGE_MAX_LIMIT_GAP_USD,
     EXCHANGE_MIN_LIMIT,
 } from "@/util/constants";
-import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import {
+    useAppDetails,
+    useRouteData,
+    useSmartAccountBalances,
+} from "@/util/enso-hooks";
 import QuoteParameters from "../QuoteParameters";
 import { TransactionDetailRow } from "../TransactionDetailRow";
-// @ts-ignore
-import SuccessIcon from "../../assets/success.svg";
-// @ts-ignore
-import FailIcon from "../../assets/fail.svg";
 import { CircleTimer } from "../CircleTimer";
 import { ConfirmExchangeStep } from "../ExchangeConfirmSecurity";
 
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
+
 const ENTRY_POINT_ADDRESS: `0x${string}` =
     "0x0000000071727de22e5e9d8baf0edac6f37da032";
 
+export enum ExchangeType {
+    binance = "binance",
+    delayed = "delayed",
+}
+export const ExchangeNames = {
+    [ExchangeType.binance]: "Binance",
+    [ExchangeType.delayed]: "Smart Account",
+};
+
 // // Styled components
 // export const BodyWrapper = chakra("div", {
 //     base: {
@@ -115,7 +123,7 @@ interface SupportedToken {
 interface MatchedToken extends SupportedToken {
     balance: number;
     marketValue: number;
-    holding: CryptocurrencyPosition;
+    holding?: CryptocurrencyPosition;
 }
 
 // const MESH_API_URL = "http://localhost:8787";
@@ -131,22 +139,27 @@ Withdrawal steps:
 7. Open transfer modal with amount and token
 */
 
-enum WithdrawalStep {
+export enum WithdrawalStep {
     CheckSessionKey,
-    GetHoldings,
-    SelectAmount,
-    GetUserOpSignature,
+    ChooseExchangeAsset,
+    ChooseBalanceAsset,
+    ChooseAmount,
+    SignUserOp,
     InitiateWithdrawal,
     TrackUserOp,
 }
 const withdrawalSteps = [
     WithdrawalStep.CheckSessionKey,
-    WithdrawalStep.GetHoldings,
-    WithdrawalStep.SelectAmount,
-    WithdrawalStep.GetUserOpSignature,
+    WithdrawalStep.ChooseExchangeAsset,
+    WithdrawalStep.ChooseAmount,
+    WithdrawalStep.SignUserOp,
     WithdrawalStep.InitiateWithdrawal,
 ];
-
+const balanceSteps = [
+    WithdrawalStep.ChooseBalanceAsset,
+    WithdrawalStep.ChooseAmount,
+    WithdrawalStep.SignUserOp,
+];
 const BINANCE_INTEGRATION_ID = "9226e5c2-ebc3-4fdd-94f6-ed52cdce1420";
 
 // Mesh network IDs for EVM chains (from Mesh networks API)
@@ -192,13 +205,23 @@ const CheckSessionKeyStep = ({
 }: {
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { chainIdOut, setMeshAccessToken, setSessionId } = useAppStore();
+    const { chainIdOut, setMeshAccessToken, setSessionId, setChainIdIn } =
+        useAppStore();
     const { address } = useAccount();
     const deviceKey = useDeviceKey();
     const [showConfirmation, setShowConfirmation] = useState(false);
 
     const invalidChainId = chainIdOut && !MESH_NETWORKS.includes(chainIdOut);
     const handleMeshAccessPayload = useHandleMeshAccessPayload();
+    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
+
+    useEffect(() => {
+        setActiveExchange("binance");
+    }, []);
+
+    useEffect(() => {
+        setChainIdIn(chainIdOut);
+    }, [chainIdOut]);
 
     useEffect(() => {
         if (invalidChainId) return;
@@ -211,7 +234,7 @@ const CheckSessionKeyStep = ({
                 if (parsed?.accessToken && parsed?.sessionId) {
                     setMeshAccessToken(parsed.accessToken);
                     setSessionId(parsed.sessionId);
-                    setStep(WithdrawalStep.GetHoldings);
+                    setStep(WithdrawalStep.ChooseExchangeAsset);
                     return;
                 }
             } catch (e) {
@@ -245,7 +268,7 @@ const CheckSessionKeyStep = ({
                     onIntegrationConnected: (payload) => {
                         console.log("onIntegrationConnected", payload);
                         meshLink.closeLink();
-                        setStep(WithdrawalStep.GetHoldings);
+                        setStep(WithdrawalStep.ChooseExchangeAsset);
                         handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
                     },
                     onExit: (error) => {
@@ -500,7 +523,7 @@ const ChooseAssetStep = ({
                 <Button
                     disabled={!selectedTokenSymbol}
                     onClick={() => {
-                        setStep(WithdrawalStep.SelectAmount);
+                        setStep(WithdrawalStep.ChooseAmount);
                     }}
                 >
                     Continue
@@ -510,6 +533,99 @@ const ChooseAssetStep = ({
     );
 };
 
+const ChooseDelayedBalance = ({
+    setStep,
+    onTokenSelect,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    onTokenSelect: (token: MatchedToken) => void;
+}) => {
+    const { chainIdIn, setTokenIn, setChainIdIn } = useAppStore();
+    const [selectedToken, setSelectedToken] = useState<string | null>(null);
+
+    // Get smart account balances
+    const { holdingsList, total, isLoading } = useSmartAccountBalances(1);
+    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
+
+    useEffect(() => {
+        setActiveExchange("delayed");
+    }, []);
+
+    if (isLoading) {
+        return (
+            <Center>
+                <Spinner m={5} />
+            </Center>
+        );
+    }
+
+    return (
+        <BodyWrapper>
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderDescription>
+                    Smart Account Balance: {formatUSD(total)}
+                </HeaderDescription>
+            </Box>
+            <Box overflowY={"scroll"} maxH={"400px"}>
+                <ListWrapper>
+                    {holdingsList?.map((asset) => (
+                        <AssetCard
+                            key={`${asset.token}-${asset.chainId}`}
+                            chainId={asset.chainId}
+                            icon={asset.logoUri}
+                            title={asset.name}
+                            balance={`${formatNumber(
+                                normalizeValue(asset.amount, asset.decimals),
+                            )} ${asset.symbol}`}
+                            usdBalance={formatUSD(asset.total)}
+                            tag=""
+                            loading={false}
+                            selected={
+                                selectedToken === asset.token &&
+                                chainIdIn === asset.chainId
+                            }
+                            onClick={() => {
+                                setSelectedToken(asset.token);
+                                setTokenIn(asset.token);
+                                setChainIdIn(asset.chainId);
+                                // Mock MatchedToken from balance data
+                                const mockMatchedToken: MatchedToken = {
+                                    symbol: asset.symbol,
+                                    name: asset.name,
+                                    networkId: asset.chainId.toString(),
+                                    chainId: asset.chainId,
+                                    integrationNetworks: [],
+                                    balance: Number(
+                                        normalizeValue(
+                                            asset.amount,
+                                            asset.decimals,
+                                        ),
+                                    ),
+                                    marketValue: asset.total,
+                                };
+                                onTokenSelect(mockMatchedToken);
+                            }}
+                        />
+                    ))}
+                </ListWrapper>
+            </Box>
+            {holdingsList?.length === 0 && (
+                <Box textAlign="center" color="fg.subtle" py={8}>
+                    No tokens found in smart account
+                </Box>
+            )}
+            <Button
+                disabled={!selectedToken}
+                onClick={() => {
+                    setStep(WithdrawalStep.ChooseAmount);
+                }}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
 const ChooseAmountStep = ({
     setStep,
     selectedToken,
@@ -770,7 +886,7 @@ const ChooseAmountStep = ({
                 onClick={() =>
                     isAmountInvalid || !amount
                         ? undefined
-                        : setStep(WithdrawalStep.GetUserOpSignature)
+                        : setStep(WithdrawalStep.SignUserOp)
                 }
                 disabled={isAmountInvalid || !amount}
             >
@@ -783,7 +899,9 @@ const ChooseAmountStep = ({
 const SignUserOpStep = ({
     setStep,
     setUserOp,
+    nextStep,
 }: {
+    nextStep: WithdrawalStep;
     setStep: (step: WithdrawalStep) => void;
     setUserOp: (userOp: any) => void;
 }) => {
@@ -820,8 +938,6 @@ const SignUserOpStep = ({
                 chainId: chainIdIn,
             });
 
-            console.log("Signing userOpHash:", userOpHash);
-
             // Sign the userOperation hash directly
             const signature = await signMessageAsync({
                 account: address as `0x${string}`,
@@ -837,9 +953,7 @@ const SignUserOpStep = ({
             console.log("signedUserOp", JSON.stringify(signedUserOp));
 
             setUserOp(signedUserOp);
-            if (sessionStorage.getItem("sendUserOp"))
-                setStep(WithdrawalStep.TrackUserOp);
-            else setStep(WithdrawalStep.InitiateWithdrawal);
+            setStep(nextStep);
         } catch (error) {
             console.error("Failed to sign userOperation:", error);
         } finally {
@@ -984,7 +1098,7 @@ const InitiateWithdrawalStep = ({
                     onExit: (error) => {
                         console.log("Mesh link exited:", error);
                         setIsLoading(false);
-                        setStep(WithdrawalStep.GetHoldings);
+                        setStep(WithdrawalStep.ChooseExchangeAsset);
                     },
                     onEvent: (ev) => {
                         console.log("Mesh event:", ev);
@@ -1325,54 +1439,60 @@ const TrackUserOpStep = ({
     );
 };
 
-const ExchangeFlow = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
-    const [currentStep, setCurrentStep] = useState(
-        WithdrawalStep.CheckSessionKey,
-    );
+const ExchangeFlow = ({
+    setFlow,
+    initialStep = WithdrawalStep.CheckSessionKey,
+}: {
+    setFlow: (string) => void;
+    initialStep?: WithdrawalStep;
+}) => {
+    const { handleClose } = useContext(CheckoutContext);
+    const [currentStep, setCurrentStep] = useState(initialStep);
     const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
         null,
     );
     const [userOp, setUserOp] = useState<any | null>(null);
-    const { chainIdOut } = useAppStore();
-    const setIsCheckout = useAppStore((state) => state.setIsCheckout);
-    const setChainIdIn = useAppStore((state) => state.setChainIdIn);
-    // const walletChainId = useChainId();
-    // const { switchChain } = useSwitchChain();
-    //
-    // const wrongChain = walletChainId !== chainIdOut;
-
-    const handleTokenSelect = (token: MatchedToken) => {
-        setSelectedToken(token);
-        console.log("Selected token:", token);
-    };
+    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
+    const activeExchange = useAppStore((state) => state.activeExchange);
 
     useEffect(() => {
-        setChainIdIn(chainIdOut);
-        setIsCheckout(true);
-    }, [chainIdOut]);
+        return () => setActiveExchange("");
+    }, []);
 
     const currentStepComponent = (() => {
         switch (currentStep) {
             case WithdrawalStep.CheckSessionKey:
                 return <CheckSessionKeyStep setStep={setCurrentStep} />;
-            case WithdrawalStep.GetHoldings:
+            case WithdrawalStep.ChooseExchangeAsset:
                 return (
                     <ChooseAssetStep
                         setStep={setCurrentStep}
-                        onTokenSelect={handleTokenSelect}
+                        onTokenSelect={setSelectedToken}
                     />
                 );
-            case WithdrawalStep.SelectAmount:
+            case WithdrawalStep.ChooseBalanceAsset:
+                return (
+                    <ChooseDelayedBalance
+                        setStep={setCurrentStep}
+                        onTokenSelect={setSelectedToken}
+                    />
+                );
+            case WithdrawalStep.ChooseAmount:
                 return (
                     <ChooseAmountStep
                         setStep={setCurrentStep}
                         selectedToken={selectedToken}
                     />
                 );
-            case WithdrawalStep.GetUserOpSignature:
+            case WithdrawalStep.SignUserOp:
                 return (
                     <SignUserOpStep
+                        nextStep={
+                            // skip withdrawal if use existing balance
+                            selectedToken.holding
+                                ? WithdrawalStep.InitiateWithdrawal
+                                : WithdrawalStep.TrackUserOp
+                        }
                         setStep={setCurrentStep}
                         setUserOp={setUserOp}
                     />
@@ -1415,7 +1535,6 @@ const ExchangeFlow = () => {
                                 setCurrentStep(withdrawalSteps[index]);
                             } else {
                                 setFlow("");
-                                setStep("");
                             }
                         }}
                     >
@@ -1434,7 +1553,9 @@ const ExchangeFlow = () => {
                         alignItems={"center"}
                         width="100%"
                     >
-                        <HeaderTitle>Deposit from Binance</HeaderTitle>
+                        <HeaderTitle>
+                            Deposit from {ExchangeNames[activeExchange]}
+                        </HeaderTitle>
                     </Box>
 
                     {handleClose && (