@ensofinance/checkout-widget 0.0.1

package/src/components/steps/ExchangeFlow.tsx

@@ -0,0 +1,1402 @@
+import {
+    Center,
+    Spinner,
+    Box,
+    Icon,
+    Text,
+    Flex,
+    Skeleton,
+    Image,
+    Table,
+} from "@chakra-ui/react";
+import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { IconButton, Button, Tab, Input, Tooltip } from "../ui";
+import { useAccount, useSignMessage, useChainId, useSwitchChain } from "wagmi";
+import { getUserOperationHash } from "viem/account-abstraction";
+import {
+    BodyWrapper,
+    HeaderDescription,
+    HeaderTitle,
+    HeaderWrapper,
+    ListWrapper,
+} from "../ui/styled";
+import { CheckoutContext } from "../Checkout";
+import Modal from "../modal";
+import { createLink, IntegrationAccessToken } from "@meshconnect/web-link-sdk";
+import { useAppStore } from "@/store";
+import { AssetCard } from "../cards";
+import { formatNumber, formatUSD } from "@/util";
+import { useTokenFromListBySymbols, getChainName } from "@/util/common";
+import { MIN_AMOUNT } from "@/util/constants";
+import { useAppDetails, useRouteData } 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";
+
+const ENTRY_POINT_ADDRESS: `0x${string}` =
+    "0x0000000071727de22e5e9d8baf0edac6f37da032";
+
+// // Styled components
+// export const BodyWrapper = chakra("div", {
+//     base: {
+//         display: "flex",
+//         flexDirection: "column",
+//         width: "100%",
+//         justifyContent: "center",
+//         alignItems: "center",
+//         gap: "16px",
+//         paddingTop: "16px",
+//     },
+// });
+
+// Types for Mesh Holdings API response
+interface CryptocurrencyPosition {
+    marketValue: number;
+    lastPrice: number;
+    name: string;
+    symbol: string;
+    amount: number;
+}
+
+interface HoldingsContent {
+    equityPositions: any[];
+    cryptocurrencyPositions: CryptocurrencyPosition[];
+    status: string;
+    errorMessage: string;
+    displayMessage: string;
+    notSupportedEquityPositions: any[];
+    notSupportedCryptocurrencyPositions: any[];
+    nftPositions: any[];
+    optionPositions: any[];
+    type: string;
+    accountId: string;
+    institutionName: string;
+    accountName: string;
+}
+
+interface HoldingsResponse {
+    content: HoldingsContent;
+    status: string;
+    message: string;
+    errorHash: string;
+    errorType: string;
+}
+
+interface SupportedToken {
+    symbol: string;
+    name: string;
+    networkId: string;
+    chainId: number;
+    integrationNetworks: any[];
+}
+
+interface MatchedToken extends SupportedToken {
+    balance: number;
+    marketValue: number;
+    holding: CryptocurrencyPosition;
+}
+
+// const MESH_API_URL = "http://localhost:8787";
+const MESH_API_URL = "https://mesh-bff.enso-checkout.workers.dev";
+
+/*
+Withdrawal steps:
+1. Check if session key is available 
+2. Perform auth if not availble (optional)
+3. Get holdings and show token selector
+4. Select amount
+6. Get userOp signature
+7. Open transfer modal with amount and token
+*/
+
+enum WithdrawalStep {
+    CheckSessionKey,
+    GetHoldings,
+    SelectAmount,
+    GetUserOpSignature,
+    InitiateWithdrawal,
+    TrackUserOp,
+}
+const withdrawalSteps = [
+    WithdrawalStep.CheckSessionKey,
+    WithdrawalStep.GetHoldings,
+    WithdrawalStep.SelectAmount,
+    WithdrawalStep.GetUserOpSignature,
+    WithdrawalStep.InitiateWithdrawal,
+];
+
+const BINANCE_INTEGRATION_ID = "9226e5c2-ebc3-4fdd-94f6-ed52cdce1420";
+
+// Mesh network IDs for EVM chains (from Mesh networks API)
+const MESH_NETWORK_IDS: { [chainId: number]: string } = {
+    1: "e3c7fdd8-b1fc-4e51-85ae-bb276e075611", // Ethereum
+    8453: "aa883b03-120d-477c-a588-37c2afd3ca71", // Base
+    42161: "a34f2431-0ddd-4de4-bc22-4a8143287aeb", // Arbitrum
+    137: "7436e9d0-ba42-4d2b-b4c0-8e4e606b2c12", // Polygon
+    10: "18fa36b0-88a8-43ca-83db-9a874e0a2288", // Optimism
+    43114: "bad16371-c22a-4bf4-a311-274d046cd760", // Avalanche C-Chain
+    56: "ed0ebeec-b166-4c8b-8574-cb078f7af8cf", // BSC
+    146: "385f0b3a-8471-4b8f-884f-c4f4496f1603", // Sonic
+    // 81457: "0c17e03f-77fa-4644-b84c-eb247af8c4c1", // Blast
+    // 11155111: "03b2d786-7092-4a6a-9737-d6013e21819b", // Sepolia (testnet)
+};
+
+const getNetworkId = (chainId: number): string => {
+    return MESH_NETWORK_IDS[chainId] || MESH_NETWORK_IDS[8453]; // Default to Base
+};
+
+const CheckSessionKeyStep = ({
+    setStep,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+}) => {
+    const { chainIdOut, setMeshAccessToken, setSessionId } = useAppStore();
+    const { address } = useAccount();
+    const storageKey = useStorageKey();
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    useEffect(() => {
+        // If connection is persisted, skip fetching a new link token
+        const saved = localStorage.getItem(storageKey);
+        // On load: check for persisted connection and hydrate state
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                if (parsed?.accessToken && parsed?.sessionId) {
+                    setMeshAccessToken(parsed.accessToken);
+                    setSessionId(parsed.sessionId);
+                    setStep(WithdrawalStep.GetHoldings);
+                    return;
+                }
+            } catch (e) {
+                // ignore malformed storage
+                console.error("Failed to parse saved Mesh connection", e);
+            }
+        }
+
+        // Show confirmation instead of auto-connecting
+        setShowConfirmation(true);
+    }, [chainIdOut, address, storageKey]);
+
+    const handleConfirmAuth = () => {
+        fetch(`${MESH_API_URL}/linktoken`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                userId: address,
+                integrationId: BINANCE_INTEGRATION_ID,
+                address,
+            }),
+        })
+            .then((response) => response.json())
+            .then((response) => {
+                setSessionId(response.content.sessionId);
+
+                const meshLink = createLink({
+                    clientId: address,
+                    onIntegrationConnected: (payload) => {
+                        console.log("onIntegrationConnected", payload);
+                        setMeshAccessToken(payload.accessToken);
+                        setStep(WithdrawalStep.GetHoldings);
+                        // Persist access token and session id for future reloads
+                        try {
+                            localStorage.setItem(
+                                storageKey,
+                                JSON.stringify({
+                                    accessToken: payload.accessToken,
+                                    sessionId: response.content.sessionId,
+                                    timestamp: Date.now(),
+                                }),
+                            );
+                            meshLink.closeLink();
+                        } catch (e) {
+                            console.error(
+                                "Failed to persist Mesh connection",
+                                e,
+                            );
+                        }
+                    },
+                    onExit: (error) => {
+                        debugger;
+                    },
+                    onTransferFinished: (transferData) => {
+                        debugger;
+                    },
+                    onEvent: (ev) => {
+                        console.log(ev);
+                    },
+                });
+
+                meshLink.openLink(response.content.linkToken);
+            })
+            .catch((err) => console.error(err));
+    };
+
+    if (showConfirmation) {
+        return <ConfirmExchangeStep onConfirm={handleConfirmAuth} />;
+    }
+
+    return <Spinner m={5} />;
+};
+
+// Generate a unique device ID to use as user id for Mesh
+const useStorageKey = () => {
+    return useMemo(() => {
+        const deviceIdKey = "meshDeviceId";
+        let deviceId = localStorage.getItem(deviceIdKey);
+
+        if (!deviceId) {
+            deviceId = `device_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+            localStorage.setItem(deviceIdKey, deviceId);
+        }
+
+        return deviceId;
+    }, []);
+};
+
+const ChooseAssetStep = ({
+    setStep,
+    onTokenSelect,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    onTokenSelect: (token: MatchedToken) => void;
+}) => {
+    const [holdings, setHoldings] = useState<CryptocurrencyPosition[]>([]);
+    const [supportedTokens, setSupportedTokens] = useState<SupportedToken[]>(
+        [],
+    );
+    const [matchedTokens, setMatchedTokens] = useState<MatchedToken[]>([]);
+    const [selectedTokenSymbol, setSelectedTokenSymbol] = useState<
+        string | null
+    >(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const { address } = useAccount();
+    const {
+        chainIdOut,
+        meshAccessToken,
+        sessionId,
+        setMeshAccessToken,
+        setSessionId,
+        setTokenIn,
+        chainIdIn,
+    } = useAppStore();
+
+    const storageKey = useStorageKey();
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                // Fetch holdings from Binance
+                const holdingsResponse = await fetch(
+                    `${MESH_API_URL}/holdings`,
+                    {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                            "x-session-id": sessionId,
+                        },
+                        body: JSON.stringify({
+                            authToken:
+                                meshAccessToken.accountTokens[0].accessToken,
+                            brokerType: "binanceInternationalDirect",
+                        }),
+                    },
+                );
+
+                const holdingsData: HoldingsResponse =
+                    await holdingsResponse.json();
+                console.log("Holdings data:", holdingsData);
+
+                if (
+                    holdingsData.status === "ok" &&
+                    holdingsData.content?.cryptocurrencyPositions
+                ) {
+                    setHoldings(holdingsData.content.cryptocurrencyPositions);
+                } else {
+                    if (holdingsData.errorType === "invalidIntegrationToken") {
+                        console.log("Invalid integration token");
+                        setStep(WithdrawalStep.CheckSessionKey);
+                        setMeshAccessToken(null);
+                        setSessionId(null);
+                        localStorage.removeItem(storageKey);
+                    }
+                    throw new Error(
+                        holdingsData.message || "Failed to fetch holdings",
+                    );
+                }
+
+                // Fetch supported tokens for current chain
+                const tokensResponse = await fetch(
+                    `${MESH_API_URL}/tokens?chainId=${chainIdIn}`,
+                );
+                const tokensData = await tokensResponse.json();
+                console.log("Tokens data:", tokensData);
+
+                if (
+                    tokensData.status === "success" &&
+                    tokensData.content?.tokens
+                ) {
+                    setSupportedTokens(tokensData.content.tokens);
+
+                    // Match holdings with supported tokens
+                    const matched = tokensData.content.tokens
+                        .map((token: SupportedToken) => {
+                            const holding =
+                                holdingsData.content.cryptocurrencyPositions.find(
+                                    (h: CryptocurrencyPosition) =>
+                                        h.symbol === token.symbol,
+                                );
+                            if (holding) {
+                                return {
+                                    ...token,
+                                    balance: holding.amount,
+                                    marketValue: holding.marketValue,
+                                    holding: holding,
+                                } as MatchedToken;
+                            }
+                            return null;
+                        })
+                        .filter(
+                            (token): token is MatchedToken =>
+                                token !== null && token.marketValue > 5,
+                        )
+                        .sort((a, b) => b.marketValue - a.marketValue);
+
+                    console.log("Matched tokens with balances:", matched);
+                    setMatchedTokens(matched);
+                } else {
+                    throw new Error(
+                        tokensData.message ||
+                            "Failed to fetch supported tokens",
+                    );
+                }
+            } catch (err) {
+                debugger;
+                console.error("Error fetching data:", err);
+                setError(
+                    err instanceof Error ? err.message : "Failed to fetch data",
+                );
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (meshAccessToken && sessionId && chainIdOut) {
+            fetchData();
+        }
+    }, [address, chainIdOut, meshAccessToken, sessionId]);
+
+    const geckoTokens = useTokenFromListBySymbols(
+        matchedTokens.map((token) => token.symbol),
+        chainIdIn,
+    );
+
+    console.log("geckoTokens", geckoTokens);
+
+    if (loading)
+        return (
+            <Center>
+                <Spinner m={5} />
+            </Center>
+        );
+    if (error)
+        return (
+            <Box p={5} color="red.500">
+                Error: {error}
+            </Box>
+        );
+
+    return (
+        <BodyWrapper>
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderTitle>Your Holdings</HeaderTitle>
+                <HeaderDescription>
+                    Found {matchedTokens.length} tokens with balances
+                </HeaderDescription>
+            </Box>
+            <Box overflowY={"scroll"} maxH={"400px"}>
+                <ListWrapper>
+                    {matchedTokens.map((token, index) => (
+                        <AssetCard
+                            key={`${token.symbol}-${index}`}
+                            chainId={chainIdOut || 1}
+                            icon={geckoTokens?.[index]?.logoURI?.replace(
+                                "/thumb/",
+                                "/large/",
+                            )}
+                            title={token.name}
+                            balance={`${formatNumber(token.balance)} ${token.symbol}`}
+                            usdBalance={formatUSD(token.marketValue || 0)}
+                            tag=""
+                            loading={false}
+                            selected={selectedTokenSymbol === token.symbol}
+                            onClick={() => {
+                                setSelectedTokenSymbol(token.symbol);
+                                onTokenSelect(token);
+                                setTokenIn(geckoTokens?.[index]?.address);
+                            }}
+                        />
+                    ))}
+                </ListWrapper>
+            </Box>
+            {matchedTokens.length === 0 && (
+                <Box textAlign="center" color="fg.subtle" py={8}>
+                    No tokens with balances found for this chain
+                </Box>
+            )}
+            {
+                <Button
+                    disabled={!selectedTokenSymbol}
+                    onClick={() => {
+                        setStep(WithdrawalStep.SelectAmount);
+                    }}
+                >
+                    Continue
+                </Button>
+            }
+        </BodyWrapper>
+    );
+};
+
+const ChooseAmountStep = ({
+    setStep,
+    selectedToken,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    selectedToken: MatchedToken | null;
+}) => {
+    const [amount, setAmount] = useState<string>("");
+    const [inputMode, setInputMode] = useState<"usd" | "token">("usd");
+    const [usdValue, setUsdValue] = useState<string>("");
+    const { setAmountIn } = useAppStore();
+    const { tokenInData, tokenIn } = useAppDetails();
+
+    // Set max value on load
+    useEffect(() => {
+        if (selectedToken) {
+            setAmount(selectedToken.balance.toString());
+            setUsdValue(selectedToken.marketValue.toFixed(2));
+        }
+    }, [selectedToken]);
+
+    useEffect(() => {
+        console.log("tokenIn", tokenIn);
+        if (tokenInData?.decimals)
+            setAmountIn(
+                (Number(amount) * 10 ** tokenInData?.decimals).toFixed(),
+            );
+    }, [amount, tokenInData?.decimals]);
+
+    // Handle percentage selection
+    const handlePercentageSelect = (percent: number) => {
+        if (!selectedToken) return;
+
+        const amountToSet = (selectedToken.balance * percent) / 100;
+        const usdAmountToSet = (selectedToken.marketValue * percent) / 100;
+
+        setAmount(amountToSet.toString());
+        setUsdValue(usdAmountToSet.toFixed(2));
+    };
+
+    // Handle input change based on current mode
+    const handleInputChange = (value: string) => {
+        if (!selectedToken) return;
+
+        if (inputMode === "usd") {
+            const cleanUsd = value.replace("$", "");
+            setUsdValue(cleanUsd);
+            // Calculate token amount from USD value
+            const tokenPrice =
+                selectedToken.marketValue / selectedToken.balance;
+            const tokenAmount = parseFloat(cleanUsd) / tokenPrice;
+            setAmount(tokenAmount.toString());
+        } else {
+            setAmount(value);
+            // Calculate USD value from token amount
+            const tokenPrice =
+                selectedToken.marketValue / selectedToken.balance;
+            const usdAmount = parseFloat(value) * tokenPrice;
+            setUsdValue(usdAmount.toFixed(2));
+        }
+    };
+
+    // Toggle between USD and token input modes
+    const handleToggleMode = () => {
+        setInputMode(inputMode === "usd" ? "token" : "usd");
+    };
+
+    // Get input placeholder and display value
+    const getInputDisplay = () => {
+        if (inputMode === "usd") {
+            return {
+                placeholder: "$10.00",
+                displayValue: usdValue ? `$${usdValue}` : "",
+                equivalentValue: amount
+                    ? `${formatNumber(parseFloat(amount))} ${selectedToken?.symbol}`
+                    : "—",
+            };
+        } else {
+            return {
+                placeholder: "0.00",
+                displayValue: amount,
+                equivalentValue: usdValue ? `$${usdValue}` : "—",
+            };
+        }
+    };
+
+    const { placeholder, displayValue, equivalentValue } = getInputDisplay();
+    const notEnoughBalance = selectedToken
+        ? parseFloat(amount) > selectedToken.balance
+        : true;
+
+    // Limits validation logic
+    const currentUsdValue = parseFloat(usdValue);
+    const minAmountForToken = selectedToken
+        ? MIN_AMOUNT[selectedToken.symbol as keyof typeof MIN_AMOUNT]
+        : 0;
+    const maxUsdAmount = selectedToken ? selectedToken.marketValue - 5 : 0;
+
+    const isBelowMinAmount =
+        selectedToken &&
+        currentUsdValue > 0 &&
+        minAmountForToken &&
+        currentUsdValue < minAmountForToken;
+    const isAboveMaxAmount =
+        selectedToken && currentUsdValue > 0 && currentUsdValue > maxUsdAmount;
+
+    const isAmountInvalid =
+        isBelowMinAmount || isAboveMaxAmount || notEnoughBalance;
+
+    if (!selectedToken) {
+        return (
+            <BodyWrapper>
+                <Box textAlign="center" color="fg.subtle" py={8}>
+                    No token selected
+                </Box>
+            </BodyWrapper>
+        );
+    }
+
+    return (
+        <BodyWrapper>
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderTitle>Enter Amount</HeaderTitle>
+                <HeaderDescription>
+                    Available: {formatNumber(selectedToken.balance)}{" "}
+                    {selectedToken.symbol} ($
+                    {formatUSD(selectedToken.marketValue)})
+                </HeaderDescription>
+            </Box>
+
+            <Box
+                display={"flex"}
+                flexDirection={"column"}
+                gap={"8px"}
+                width="100%"
+            >
+                <Box
+                    display={"flex"}
+                    flexDirection={"column"}
+                    gap={"8px"}
+                    alignItems={"center"}
+                    padding={"25.5px"}
+                >
+                    {/* Main Input */}
+                    <Input
+                        inputMode="decimal"
+                        marginY={"8px"}
+                        variant={"text"}
+                        placeholder={placeholder}
+                        value={displayValue}
+                        onChange={(e) => handleInputChange(e.target.value)}
+                    />
+
+                    {/* Toggle Button and Equivalent Display */}
+                    <Box
+                        display={"flex"}
+                        gap={"3"}
+                        alignItems={"center"}
+                        onClick={handleToggleMode}
+                        _hover={{ background: "bg.subtle" }}
+                        cursor={"pointer"}
+                        borderRadius={"lg"}
+                        px={"3"}
+                    >
+                        <IconButton
+                            minWidth={"24px"}
+                            minHeight={"24px"}
+                            maxWidth={"24px"}
+                            background={"transparent"}
+                        >
+                            <Icon
+                                as={ArrowDownUpIcon}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+
+                        {/* Small equivalent value display */}
+                        <Text fontSize="sm" color="fg.muted">
+                            {equivalentValue}
+                        </Text>
+                    </Box>
+                </Box>
+
+                <Box
+                    display={"flex"}
+                    gap={"4px"}
+                    justifyContent={"center"}
+                    paddingBottom={"35px"}
+                >
+                    {[25, 50, 75, 100].map((percent) => (
+                        <Tab
+                            key={percent}
+                            onClick={() => handlePercentageSelect(percent)}
+                        >
+                            {percent === 100 ? "Max" : `${percent}%`}
+                        </Tab>
+                    ))}
+                </Box>
+            </Box>
+
+            <Tooltip
+                disabled={!isAmountInvalid && !!amount}
+                content={
+                    !amount
+                        ? "Please enter an amount"
+                        : isBelowMinAmount
+                          ? `Minimum amount is $${minAmountForToken} USD`
+                          : isAboveMaxAmount
+                            ? `Maximum amount is $${maxUsdAmount.toFixed(2)} USD (balance - $10)`
+                            : notEnoughBalance
+                              ? "Amount exceeds available balance"
+                              : ""
+                }
+                showArrow
+            >
+                <Button
+                    onClick={() =>
+                        isAmountInvalid || !amount
+                            ? undefined
+                            : setStep(WithdrawalStep.GetUserOpSignature)
+                    }
+                    disabled={isAmountInvalid || !amount}
+                >
+                    Continue
+                </Button>
+            </Tooltip>
+        </BodyWrapper>
+    );
+};
+
+const SignUserOpStep = ({
+    setStep,
+    setUserOp,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    setUserOp: (userOp: any) => void;
+}) => {
+    const { chainIdIn } = useAppDetails();
+    const { isLoading, usdAmountIn, routerData } = useRouteData();
+    const { signMessageAsync } = useSignMessage();
+    const { address } = useAccount();
+    const [isSigning, setIsSigning] = useState(false);
+
+    const handleSignUserOp = async () => {
+        if (!routerData || (routerData as any)?.error) {
+            console.error("No valid router data available");
+            return;
+        }
+
+        try {
+            setIsSigning(true);
+
+            // Extract userOp from routerData
+            const userOperation = routerData?.userOp;
+            if (!userOperation) {
+                console.error("No userOperation found in routerData");
+                return;
+            }
+
+            console.log("Signing userOperation:", userOperation);
+
+            // Use viem's getUserOperationHash function
+            const userOpHash = getUserOperationHash({
+                // @ts-ignore
+                userOperation,
+                entryPointAddress: ENTRY_POINT_ADDRESS,
+                entryPointVersion: "0.7",
+                chainId: chainIdIn,
+            });
+
+            console.log("Signing userOpHash:", userOpHash);
+
+            // Sign the userOperation hash directly
+            const signature = await signMessageAsync({
+                account: address as `0x${string}`,
+                message: { raw: userOpHash as `0x${string}` },
+            });
+
+            // Update userOperation with signature
+            const signedUserOp = {
+                ...userOperation,
+                signature,
+            };
+
+            console.log("signedUserOp", JSON.stringify(signedUserOp));
+
+            setUserOp(signedUserOp);
+            setStep(WithdrawalStep.InitiateWithdrawal);
+        } catch (error) {
+            console.error("Failed to sign userOperation:", error);
+        } finally {
+            setIsSigning(false);
+        }
+    };
+
+    return (
+        <BodyWrapper>
+            <Flex
+                flexDirection={"column"}
+                gap={"16px"}
+                alignItems={"center"}
+                width={"100%"}
+            >
+                <Skeleton
+                    loading={isLoading}
+                    width={isLoading ? "156px" : "auto"}
+                >
+                    <Input
+                        readOnly
+                        marginY={"8px"}
+                        variant={"text"}
+                        placeholder={"$10.00"}
+                        value={usdAmountIn}
+                    />
+                </Skeleton>
+
+                <QuoteParameters />
+            </Flex>
+
+            <TransactionDetailRow />
+
+            <Button
+                disabled={
+                    !!(routerData as any)?.message || isLoading || isSigning
+                }
+                loading={isLoading || isSigning}
+                onClick={handleSignUserOp}
+            >
+                {isLoading
+                    ? "Loading quote"
+                    : isSigning
+                      ? "Signing..."
+                      : "Sign Transaction"}
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+const InitiateWithdrawalStep = ({
+    selectedToken,
+    userOp,
+    setStep,
+}: {
+    selectedToken: MatchedToken | null;
+    userOp: any;
+    setStep: (step: WithdrawalStep) => void;
+}) => {
+    const { meshAccessToken, amountIn, chainIdOut } = useAppStore();
+    const { address } = useAccount();
+    const { tokenInData } = useAppDetails();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        if (!selectedToken || !userOp || !meshAccessToken) {
+            console.error("Missing required data for withdrawal initiation");
+            return;
+        }
+
+        // Convert amountIn from wei to token amount
+        const transferAmount = tokenInData?.decimals
+            ? Number(amountIn) / 10 ** tokenInData.decimals
+            : 0;
+
+        const fetchLinkTokenAndOpen = async () => {
+            try {
+                const toAddresses = [
+                    {
+                        networkId: getNetworkId(chainIdOut),
+                        symbol: selectedToken.symbol,
+                        address: userOp.sender,
+                        amount: transferAmount,
+                    },
+                ];
+                const meshData = {
+                    restrictMultipleAccounts: true,
+                    userId: address,
+                    integrationId: BINANCE_INTEGRATION_ID,
+                    transferOptions: {
+                        toAddresses,
+                    },
+                };
+
+                console.log("link request body", meshData);
+
+                const response = await fetch(`${MESH_API_URL}/linktoken`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        restrictMultipleAccounts: true,
+                        userId: address,
+                        integrationId: BINANCE_INTEGRATION_ID,
+                        transferOptions: {
+                            toAddresses,
+                        },
+                    }),
+                });
+
+                const data = await response.json();
+                console.log("Link token response:", data);
+
+                const accessTokens: IntegrationAccessToken[] =
+                    meshAccessToken.accountTokens.map((token) => ({
+                        ...token,
+                        accountId: token.account.accountId,
+                        accountName: token.account.accountName,
+                        brokerName: "Binance",
+                        brokerType: "binanceInternationalDirect",
+                    }));
+
+                console.log("accessTokens", accessTokens);
+
+                const link = createLink({
+                    clientId: address,
+                    accessTokens,
+                    onIntegrationConnected: (e) => {
+                        console.log("Integration connected", e);
+                    },
+                    onTransferFinished: (transferData) => {
+                        console.log("Transfer finished:", transferData);
+                        setIsLoading(false);
+                    },
+                    onExit: (error) => {
+                        console.log("Mesh link exited:", error);
+                        setIsLoading(false);
+                        setStep(WithdrawalStep.GetHoldings);
+                    },
+                    onEvent: (ev) => {
+                        console.log("Mesh event:", ev);
+                        if (ev.type === "transferExecuted") {
+                            console.log(
+                                "Transfer executed, closing mesh link and moving to TrackUserOp step",
+                            );
+                            link.closeLink();
+                            setStep(WithdrawalStep.TrackUserOp);
+                        }
+                    },
+                });
+
+                link.openLink(data.content.linkToken);
+            } catch (error) {
+                console.error("Failed to fetch link token:", error);
+                setIsLoading(false);
+            }
+        };
+
+        fetchLinkTokenAndOpen();
+    }, [selectedToken, userOp]);
+
+    return (
+        <BodyWrapper>
+            <Center>
+                <Text mt={4}>
+                    {isLoading ? (
+                        <Flex alignItems={"center"} gap={2}>
+                            <Spinner m={5} />
+                            <Text>Intiating Mesh</Text>
+                        </Flex>
+                    ) : (
+                        "Transfer completed"
+                    )}
+                </Text>
+            </Center>
+        </BodyWrapper>
+    );
+};
+
+const TrackUserOpStep = ({
+    selectedToken,
+    userOp,
+    setStep,
+}: {
+    selectedToken: MatchedToken | null;
+    userOp: any;
+    setStep: (step: WithdrawalStep) => void;
+}) => {
+    const { chainIdIn, tokenInData } = useAppDetails();
+    const { amountIn } = useAppStore();
+    const [operationId, setOperationId] = useState<string | null>(null);
+    const [status, setStatus] = useState<
+        "sending" | "tracking" | "completed" | "failed"
+    >("sending");
+    const [message, setMessage] = useState("Sending operation to tracker...");
+    const [isTimerFinished, setIsTimerFinished] = useState(false);
+    const [trackingInterval, setTrackingInterval] =
+        useState<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        const sendUserOpToTracker = async () => {
+            if (!selectedToken || !userOp || !tokenInData) {
+                console.error("Missing required data for tracking");
+                setStatus("failed");
+                setMessage("Missing required data");
+                return;
+            }
+
+            try {
+                const response = await fetch(
+                    "https://alpha-scanners-dev-054573dc8549.herokuapp.com/operations",
+                    {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            userOperationData: {
+                                sender: userOp.sender,
+                                nonce: userOp.nonce,
+                                factory: userOp.factory,
+                                factoryData: userOp.factoryData,
+                                callData: userOp.callData,
+                                callGasLimit: userOp.callGasLimit,
+                                verificationGasLimit:
+                                    userOp.verificationGasLimit,
+                                preVerificationGas: userOp.preVerificationGas,
+                                maxFeePerGas: userOp.maxFeePerGas,
+                                maxPriorityFeePerGas:
+                                    userOp.maxPriorityFeePerGas,
+                                paymaster: userOp.paymaster,
+                                paymasterData: userOp.paymasterData,
+                                paymasterVerificationGasLimit:
+                                    userOp.paymasterVerificationGasLimit,
+                                paymasterPostOpGasLimit:
+                                    userOp.paymasterPostOpGasLimit,
+                                signature: userOp.signature,
+                            },
+                            chainId: chainIdIn,
+                            expectedBalance: amountIn,
+                            tokenAddress: tokenInData.address,
+                        }),
+                    },
+                );
+
+                const data = await response.json();
+                console.log("Operation tracking response:", data);
+
+                if (data.success && data.operationId) {
+                    setOperationId(data.operationId);
+                    setStatus("tracking");
+                    setMessage("Tracking operation progress...");
+                } else {
+                    throw new Error(
+                        data.message || "Failed to send operation to tracker",
+                    );
+                }
+            } catch (error) {
+                console.error("Failed to send operation to tracker:", error);
+                setStatus("failed");
+                setMessage("Failed to send operation to tracker");
+            }
+        };
+
+        sendUserOpToTracker();
+    }, []);
+
+    // Track operation status
+    useEffect(() => {
+        if (!operationId || status !== "tracking") return;
+
+        const trackOperation = async () => {
+            try {
+                const response = await fetch(
+                    `https://alpha-scanners-dev-054573dc8549.herokuapp.com/operations/${operationId}/status`,
+                );
+                const data = await response.json();
+                console.log("Operation status:", data);
+
+                if (data.operation?.status === "completed") {
+                    setStatus("completed");
+                    setMessage("Operation completed successfully!");
+                    if (trackingInterval) {
+                        clearInterval(trackingInterval);
+                        setTrackingInterval(null);
+                    }
+                } else if (data.operation?.status === "failed") {
+                    setStatus("failed");
+                    setMessage("Operation failed");
+                    if (trackingInterval) {
+                        clearInterval(trackingInterval);
+                        setTrackingInterval(null);
+                    }
+                }
+            } catch (error) {
+                console.error("Failed to fetch operation status:", error);
+            }
+        };
+
+        const interval = setInterval(trackOperation, 3000); // Check every 3 seconds
+        setTrackingInterval(interval);
+
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [operationId]);
+
+    const handleTimerFinish = () => {
+        setIsTimerFinished(true);
+    };
+
+    const getStatusColor = () => {
+        switch (status) {
+            case "completed":
+                return "#14AE5C";
+            case "failed":
+                return "#E84142";
+            default:
+                return "#1E171F";
+        }
+    };
+
+    const renderStatusIcon = () => {
+        switch (status) {
+            case "sending":
+            case "tracking":
+                return (
+                    <CircleTimer
+                        start={status === "tracking"}
+                        onFinish={handleTimerFinish}
+                        duration={120}
+                    />
+                );
+
+            case "completed":
+                return (
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Image
+                            src={SuccessIcon}
+                            boxShadow="0px 0px 20px #14AE5C"
+                            borderRadius="90%"
+                            width="58px"
+                            height="58px"
+                        />
+                    </Box>
+                );
+
+            case "failed":
+                return (
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Image
+                            src={FailIcon}
+                            boxShadow="0px 0px 20px #E84142"
+                            borderRadius="90%"
+                            width="58px"
+                            height="58px"
+                        />
+                    </Box>
+                );
+        }
+    };
+
+    const renderProcessingText = () => {
+        if (status === "tracking" && isTimerFinished) {
+            return (
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="center"
+                    marginTop="16px"
+                    textAlign="center"
+                >
+                    <Text
+                        fontSize="lg"
+                        fontWeight="semibold"
+                        color="fg"
+                        marginBottom="8px"
+                    >
+                        {message}
+                    </Text>
+                    <Text fontSize="sm" color="fg.muted" maxWidth="280px">
+                        Your operation is being processed – no action is
+                        required from you.
+                    </Text>
+                </Box>
+            );
+        }
+        return null;
+    };
+
+    const getStatusText = () => {
+        switch (status) {
+            case "completed":
+                return "Success";
+            case "failed":
+                return "Failed";
+            case "tracking":
+                return "Processing";
+            case "sending":
+                return "Sending";
+            default:
+                return "Unknown";
+        }
+    };
+
+    return (
+        <BodyWrapper>
+            <Box
+                display={"flex"}
+                flexDirection={"column"}
+                paddingBottom={"16px"}
+                alignItems={"center"}
+                width={"100%"}
+            >
+                {renderStatusIcon()}
+                {renderProcessingText()}
+            </Box>
+
+            <Table.Root
+                key={"status"}
+                size="sm"
+                variant={"outline"}
+                width={"100%"}
+            >
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Status</Table.Cell>
+                        <Table.Cell
+                            display="flex"
+                            textAlign="end"
+                            justifyContent="end"
+                        >
+                            <Text color={getStatusColor()}>
+                                {getStatusText()}
+                            </Text>
+                        </Table.Cell>
+                    </Table.Row>
+                    {operationId && (
+                        <Table.Row>
+                            <Table.Cell>Operation ID</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text fontSize="sm" color="fg.muted">
+                                    {operationId}
+                                </Text>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                </Table.Body>
+            </Table.Root>
+
+            <QuoteParameters />
+
+            <TransactionDetailRow />
+
+            {(status === "completed" || status === "failed") && (
+                <Button
+                    onClick={() => setStep(WithdrawalStep.CheckSessionKey)}
+                    visual="solid"
+                >
+                    {status === "completed" ? "New Deposit" : "Retry Deposit"}
+                </Button>
+            )}
+        </BodyWrapper>
+    );
+};
+
+const ExchangeFlow = () => {
+    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
+    const [currentStep, setCurrentStep] = useState(
+        WithdrawalStep.CheckSessionKey,
+    );
+    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);
+    };
+
+    useEffect(() => {
+        setChainIdIn(chainIdOut);
+        setIsCheckout(true);
+    }, [chainIdOut]);
+
+    const currentStepComponent = (() => {
+        switch (currentStep) {
+            case WithdrawalStep.CheckSessionKey:
+                return <CheckSessionKeyStep setStep={setCurrentStep} />;
+            case WithdrawalStep.GetHoldings:
+                return (
+                    <ChooseAssetStep
+                        setStep={setCurrentStep}
+                        onTokenSelect={handleTokenSelect}
+                    />
+                );
+            case WithdrawalStep.SelectAmount:
+                return (
+                    <ChooseAmountStep
+                        setStep={setCurrentStep}
+                        selectedToken={selectedToken}
+                    />
+                );
+            case WithdrawalStep.GetUserOpSignature:
+                return (
+                    <SignUserOpStep
+                        setStep={setCurrentStep}
+                        setUserOp={setUserOp}
+                    />
+                );
+            case WithdrawalStep.InitiateWithdrawal:
+                return (
+                    <InitiateWithdrawalStep
+                        selectedToken={selectedToken}
+                        userOp={userOp}
+                        setStep={setCurrentStep}
+                    />
+                );
+            case WithdrawalStep.TrackUserOp:
+                return (
+                    <TrackUserOpStep
+                        selectedToken={selectedToken}
+                        userOp={userOp}
+                        setStep={setCurrentStep}
+                    />
+                );
+            default:
+                return null;
+        }
+    })();
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={() => {
+                            const index =
+                                withdrawalSteps.findIndex(
+                                    (step) => step === currentStep,
+                                ) - 1;
+                            if (index > 0) {
+                                setCurrentStep(withdrawalSteps[index]);
+                            } else {
+                                setFlow("");
+                                setStep("");
+                            }
+                        }}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        gap={"4px"}
+                        alignItems={"center"}
+                        width="100%"
+                    >
+                        <HeaderTitle>Deposit from Binance</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>
+                {wrongChain ? (
+                    <BodyWrapper>
+                        <Box
+                            display="flex"
+                            flexDirection="column"
+                            alignItems="center"
+                            gap="16px"
+                            textAlign="center"
+                        >
+                            <Text fontSize="16px" fontWeight="600">
+                                Wrong Network
+                            </Text>
+                            <Text fontSize="14px" color="fg.muted">
+                                Please switch to {getChainName(chainIdOut)} to
+                                continue with your Binance withdrawal.
+                            </Text>
+                            <Button
+                                onClick={() => {
+                                    switchChain({ chainId: chainIdOut });
+                                }}
+                            >
+                                Switch to {getChainName(chainIdOut)}
+                            </Button>
+                        </Box>
+                    </BodyWrapper>
+                ) : (
+                    currentStepComponent
+                )}
+            </Modal.Body>
+        </>
+    );
+};
+
+export default ExchangeFlow;