@ensofinance/checkout-widget 0.1.8 → 0.1.9

package/src/components/steps/ExchangeFlow.tsx

@@ -5,17 +5,14 @@ import {
     Icon,
     Text,
     Flex,
+    Skeleton,
+    Image,
+    Table,
 } from "@chakra-ui/react";
 import { ChevronLeft, X, TriangleAlert } from "lucide-react";
-import {
-    useContext,
-    useEffect,
-    useMemo,
-    useState,
-    useCallback,
-} from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useAccount } from "wagmi";
+import { useContext, useEffect, useMemo, useState, useCallback } from "react";
+import { useAccount, useSignMessage } from "wagmi";
+import { getUserOperationHash } from "viem/account-abstraction";
 import {
     BodyWrapper,
     HeaderDescription,
@@ -23,13 +20,10 @@ import {
     HeaderWrapper,
     ListWrapper,
 } from "../ui/styled";
-import { IconButton, Button } from "../ui";
+import { IconButton, Button, Input } from "../ui";
+import { AmountInput, AmountInputValue } from "../AmountInput";
 import { CheckoutContext } from "../Checkout";
 import Modal from "../modal";
-import TrackUserOpStep from "@/components/steps/shared/TrackUserOpStep";
-import SharedChooseAmountStep from "@/components/steps/shared/ChooseAmountStep";
-import SharedSignUserOpStep from "@/components/steps/shared/SignUserOpStep";
-import { AnimatedStep } from "../ui/transitions";
 import {
     AccessTokenPayload,
     createLink,
@@ -38,26 +32,69 @@ import {
 import { useAppStore } from "@/store";
 import { AssetCard } from "../cards";
 import {
+    denormalizeValue,
     formatNumber,
     formatUSD,
     normalizeValue,
 } from "@/util";
-import { useTokenFromListBySymbols } from "@/util/common";
 import {
+    useTokenFromListBySymbols,
+    precisionizeNumber,
+    getPositiveDecimalValue,
+} from "@/util/common";
+import {
+    EXCHANGE_MAX_LIMIT_GAP_USD,
+    EXCHANGE_MIN_LIMIT,
     getCexIntermediateChain,
     DEFAULT_CEX_BRIDGE_CHAIN_MAPPING,
-    CHECKOUT_BFF_URL,
 } from "@/util/constants";
-import { useAppDetails } from "@/util/enso-hooks";
-import { ConfirmExchangeStep } from "../ExchangeConfirmSecurity";
 import {
-    ExchangeToIntegrationType,
-    EXCHANGE_ICON_BY_TYPE,
-} from "./shared/exchangeIntegration";
-import type { MatchedToken, CryptocurrencyPosition, SupportedToken } from "./shared/types";
+    useAppDetails,
+    useRouteData,
+    useSmartAccountBalances,
+} from "@/util/enso-hooks";
+import QuoteParameters from "../QuoteParameters";
+import { TransactionDetailRow } from "../TransactionDetailRow";
+import { CircleTimer } from "../CircleTimer";
+import { ConfirmExchangeStep } from "../ExchangeConfirmSecurity";
+
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
+import { SupportedExchanges } from "../../types";
+import { useLayerZeroStatus } from "@/util/tx-tracker";
+import { STARGATE_CHAIN_NAMES, CHAINS_ETHERSCAN } from "@/util/constants";
+
+const ENTRY_POINT_ADDRESS: `0x${string}` =
+    "0x0000000071727de22e5e9d8baf0edac6f37da032";
+
+export const ExchangeToIntegrationType: Record<SupportedExchanges, string> = {
+    [SupportedExchanges.Binance]: "binanceInternationalDirect",
+    [SupportedExchanges.Kraken]: "krakenDirect",
+    [SupportedExchanges.Coinbase]: "coinbase",
+    [SupportedExchanges.Bybit]: "bybitDirect",
+};
 
+// Map Mesh broker types to icon URLs
+export const EXCHANGE_ICON_BY_TYPE: Record<string, string> = {
+    [ExchangeToIntegrationType[SupportedExchanges.Binance]]:
+        "https://assets.coingecko.com/markets/images/52/large/binance.jpg",
+    [ExchangeToIntegrationType[SupportedExchanges.Kraken]]:
+        "https://assets.coingecko.com/markets/images/29/large/kraken.jpg",
+    [ExchangeToIntegrationType[SupportedExchanges.Coinbase]]:
+        "https://assets.coingecko.com/markets/images/23/large/Coinbase_Coin_Primary.png",
+    [ExchangeToIntegrationType[SupportedExchanges.Bybit]]:
+        "https://assets.coingecko.com/markets/images/698/large/bybit_spot.png",
+};
 
 // Types for Mesh Holdings API response
+interface CryptocurrencyPosition {
+    marketValue: number;
+    lastPrice: number;
+    name: string;
+    symbol: string;
+    amount: number;
+}
+
 interface HoldingsContent {
     equityPositions: any[];
     cryptocurrencyPositions: CryptocurrencyPosition[];
@@ -82,30 +119,46 @@ interface HoldingsResponse {
     errorType: string;
 }
 
-type MeshRequestError = Error & {
-    code?: string;
-};
+interface SupportedToken {
+    symbol: string;
+    name: string;
+    networkId: string;
+    chainId: number;
+    integrationNetworks: any[];
+}
+
+interface MatchedToken extends SupportedToken {
+    balance: number;
+    marketValue: number;
+    holding?: CryptocurrencyPosition;
+}
+
+const isDelayedBalanceUsed = (integrationType: string) =>
+    integrationType === "delayed";
+
+// 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 available (optional)
+1. Check if session key is available 
+2. Perform auth if not availble (optional)
 3. Get holdings and show token selector
 4. Select amount
-5. Get userOp signature
-6. Open transfer modal with amount and token
+6. Get userOp signature
+7. Open transfer modal with amount and token
 */
 
 export enum WithdrawalStep {
-    ChooseExchange,
     CheckSessionKey,
+    ChooseExchange,
     ChooseExchangeAsset,
+    ChooseBalanceAsset,
     ChooseAmount,
     SignUserOp,
     InitiateWithdrawal,
     TrackUserOp,
 }
-
 const withdrawalPreviousStep: Partial<Record<WithdrawalStep, WithdrawalStep>> =
     {
         [WithdrawalStep.CheckSessionKey]: WithdrawalStep.ChooseExchange,
@@ -114,6 +167,11 @@ const withdrawalPreviousStep: Partial<Record<WithdrawalStep, WithdrawalStep>> =
         [WithdrawalStep.SignUserOp]: WithdrawalStep.ChooseAmount,
         [WithdrawalStep.InitiateWithdrawal]: WithdrawalStep.SignUserOp,
     };
+const balancePreviousStep: Partial<Record<WithdrawalStep, WithdrawalStep>> = {
+    [WithdrawalStep.ChooseAmount]: WithdrawalStep.ChooseBalanceAsset,
+    [WithdrawalStep.SignUserOp]: WithdrawalStep.ChooseAmount,
+};
+// Integration details are fetched dynamically from Mesh API.
 
 // Mesh network IDs for EVM chains (from Mesh networks API)
 const MESH_NETWORK_IDS: { [chainId: number]: string } = {
@@ -125,6 +183,8 @@ const MESH_NETWORK_IDS: { [chainId: number]: string } = {
     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 MESH_NETWORKS = Object.keys(MESH_NETWORK_IDS).map(Number);
@@ -133,20 +193,6 @@ const getNetworkId = (chainId: number): string => {
     return MESH_NETWORK_IDS[chainId] || MESH_NETWORK_IDS[8453]; // Default to Base
 };
 
-const DEVICE_ID_KEY = "meshDeviceId";
-const useDeviceId = () => {
-    return useMemo(() => {
-        let deviceId = localStorage.getItem(DEVICE_ID_KEY);
-
-        if (!deviceId) {
-            deviceId = `device_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
-            localStorage.setItem(DEVICE_ID_KEY, deviceId);
-        }
-
-        return deviceId;
-    }, []);
-};
-
 const useHandleMeshAccessPayload = () => {
     const { setMeshAccessToken } = useAppStore();
     const deviceKey = useDeviceId();
@@ -154,12 +200,12 @@ const useHandleMeshAccessPayload = () => {
 
     return useCallback(
         (accessTokenPayload: AccessTokenPayload, sessionId: string) => {
-            setMeshAccessToken(accessTokenPayload);
+            setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
 
             sessionStorage.setItem(
                 `${deviceKey}:${selectedIntegration?.type}`,
                 JSON.stringify({
-                    accessTokenPayload,
+                    accessTokenPayload, // Store full object for proper restoration
                     sessionId,
                     timestamp: Date.now(),
                 }),
@@ -171,7 +217,7 @@ const useHandleMeshAccessPayload = () => {
 
 type MeshIntegration = {
     id: string;
-    type: string;
+    type: string; // brokerType
     name: string;
     networks?: {
         id: string;
@@ -187,6 +233,9 @@ const ChooseExchangeStep = ({
     setStep: (step: WithdrawalStep) => void;
 }) => {
     const { chainIdOut, setChainIdIn } = useAppStore();
+    const [integrations, setIntegrations] = useState<MeshIntegration[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
     const setSelectedIntegration = useAppStore(
         (state) => state.setSelectedIntegration,
     );
@@ -195,50 +244,42 @@ const ChooseExchangeStep = ({
     const cexMapping =
         cexBridgeChainMapping ?? DEFAULT_CEX_BRIDGE_CHAIN_MAPPING;
 
+    // Use intermediate chain for filtering if target chain needs bridging
     const effectiveChainId =
         getCexIntermediateChain(chainIdOut, cexMapping) ?? chainIdOut;
 
-    const availableExchanges = useMemo(
-        () =>
-            (enableExchange ?? [])
-                .map((exchange) => ExchangeToIntegrationType[exchange])
-                .filter(Boolean),
-        [enableExchange],
-    );
-
+    // Set chainIdIn to effective chain for cross-chain tracking
     useEffect(() => {
         effectiveChainId ? setChainIdIn(effectiveChainId) : chainIdOut;
     }, [effectiveChainId, setChainIdIn]);
 
-    const {
-        data: integrations = [],
-        isLoading: loading,
-        error,
-    } = useQuery({
-        queryKey: [
-            "mesh-integrations",
-            effectiveChainId,
-            ...availableExchanges,
-        ],
-        queryFn: async (): Promise<MeshIntegration[]> => {
-            if (!effectiveChainId || availableExchanges.length === 0) return [];
-
-            const res = await fetch(`${CHECKOUT_BFF_URL}/integrations`);
-            if (!res.ok) {
-                throw new Error("Failed to load exchanges");
-            }
-
-            const data = (await res.json()) as MeshIntegration[];
+    useEffect(() => {
+        const fetchIntegrations = async () => {
+            try {
+                const res = await fetch(`${MESH_API_URL}/integrations`);
+                const data = await res.json();
+                const availableExchanges = enableExchange
+                    .map((e) => ExchangeToIntegrationType[e])
+                    .filter(Boolean);
+
+                // Filter integrations by effective chain support (intermediate chain if bridging)
+                const filtered = data?.filter(
+                    (i) =>
+                        i.networks.some(
+                            (n) => +n.chainId === effectiveChainId,
+                        ) && availableExchanges.includes(i.type),
+                );
 
-            return (data ?? []).filter(
-                (integration) =>
-                    integration.networks?.some(
-                        (network) => +network.chainId === effectiveChainId,
-                    ) && availableExchanges.includes(integration.type),
-            );
-        },
-        staleTime: 60_000,
-    });
+                setIntegrations(filtered);
+            } catch (e) {
+                console.error("Failed to fetch integrations", e);
+                setError("Failed to load exchanges");
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchIntegrations();
+    }, [effectiveChainId]);
 
     if (loading)
         return (
@@ -250,18 +291,23 @@ const ChooseExchangeStep = ({
         return (
             <BodyWrapper>
                 <Box p={5} color="red.500">
-                    Failed to load exchanges
+                    {error}
                 </Box>
             </BodyWrapper>
         );
 
     return (
         <BodyWrapper>
+            {/*<Box mb={4} width="100%" textAlign="left">*/}
+            {/*    <HeaderTitle>Choose Exchange</HeaderTitle>*/}
+            {/*</Box>*/}
+
             {integrations?.length > 0 ? (
                 <ListWrapper>
                     {integrations.map((integration) => (
                         <AssetCard
                             key={integration.id}
+                            // chainId={chainIdOut || 1}
                             icon={EXCHANGE_ICON_BY_TYPE[integration.type]}
                             title={integration.name}
                             balance={""}
@@ -306,20 +352,26 @@ const CheckSessionKeyStep = ({
     const [showConfirmation, setShowConfirmation] = useState(false);
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
+    // Bridging is required if chainIdIn differs from chainIdOut
     const needsBridging = chainIdIn !== chainIdOut;
+
+    // Invalid only if chain is not in MESH_NETWORKS AND cannot be bridged
     const invalidChainId =
         chainIdOut && !MESH_NETWORKS.includes(chainIdOut) && !needsBridging;
     const handleMeshAccessPayload = useHandleMeshAccessPayload();
 
     useEffect(() => {
         if (!selectedIntegration) {
+            // ensure an exchange is selected
             setStep(WithdrawalStep.ChooseExchange);
             return;
         }
         if (invalidChainId) return;
+        // If connection is persisted, skip fetching a new link token
         const saved = sessionStorage.getItem(
             `${deviceKey}:${selectedIntegration.type}`,
         );
+        // On load: check for persisted connection and hydrate state
         if (saved) {
             try {
                 const parsed = JSON.parse(saved);
@@ -330,17 +382,19 @@ const CheckSessionKeyStep = ({
                     return;
                 }
             } catch (e) {
+                // ignore malformed storage
                 console.error("Failed to parse saved Mesh connection", e);
             }
         }
 
+        // Show confirmation instead of auto-connecting
         setShowConfirmation(true);
     }, [deviceKey, invalidChainId, selectedIntegration]);
 
     const handleConfirmAuth = () => {
         const brokerType = selectedIntegration?.type;
         fetch(
-            `${CHECKOUT_BFF_URL}/linktoken?brokerType=${encodeURIComponent(brokerType)}`,
+            `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(brokerType)}`,
             {
                 method: "POST",
                 headers: {
@@ -366,7 +420,7 @@ const CheckSessionKeyStep = ({
                         handleMeshAccessPayload(
                             payload.accessToken,
                             response.content.sessionId,
-                        );
+                        ); // Persist access token and session id for future reloads
                     },
                     onExit: (error) => {
                         console.log("onExit", error);
@@ -423,6 +477,21 @@ const CheckSessionKeyStep = ({
     return <Spinner m={5} />;
 };
 
+const DEVICE_ID_KEY = "meshDeviceId";
+// Generate a unique device ID to use as user id for Mesh
+const useDeviceId = () => {
+    return useMemo(() => {
+        let deviceId = localStorage.getItem(DEVICE_ID_KEY);
+
+        if (!deviceId) {
+            deviceId = `device_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+            localStorage.setItem(DEVICE_ID_KEY, deviceId);
+        }
+
+        return deviceId;
+    }, []);
+};
+
 const ChooseAssetStep = ({
     setStep,
     onTokenSelect,
@@ -430,9 +499,17 @@ const ChooseAssetStep = ({
     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 {
         meshAccessToken,
         sessionId,
@@ -445,115 +522,108 @@ const ChooseAssetStep = ({
 
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
-    const {
-        data: matchedTokens = [],
-        isLoading: loading,
-        error,
-    } = useQuery({
-        queryKey: [
-            "mesh-matched-tokens",
-            sessionId,
-            chainIdIn,
-            selectedIntegration?.type,
-            meshAccessToken?.accountTokens?.[0]?.accessToken,
-        ],
-        queryFn: async (): Promise<MatchedToken[]> => {
-            const holdingsResponse = await fetch(
-                `${CHECKOUT_BFF_URL}/holdings`,
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "x-session-id": sessionId || "",
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                // Fetch holdings for the selected exchange
+                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: selectedIntegration?.type,
+                        }),
                     },
-                    body: JSON.stringify({
-                        authToken:
-                            meshAccessToken?.accountTokens?.[0]?.accessToken,
-                        brokerType: selectedIntegration?.type,
-                    }),
-                },
-            );
-            const holdingsData =
-                (await holdingsResponse.json()) as HoldingsResponse;
-            console.log("Holdings data:", holdingsData);
-
-            if (
-                holdingsData.status !== "ok" ||
-                !holdingsData.content?.cryptocurrencyPositions
-            ) {
-                const meshError = new Error(
-                    holdingsData.message || "Failed to fetch holdings",
-                ) as MeshRequestError;
-                if (holdingsData.errorType === "invalidIntegrationToken") {
-                    meshError.code = "invalidIntegrationToken";
-                }
-                throw meshError;
-            }
-
-            const tokensResponse = await fetch(
-                `${CHECKOUT_BFF_URL}/tokens?chainId=${chainIdIn}&brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
-            );
-            const tokensData = await tokensResponse.json();
-
-            if (
-                tokensData.status !== "success" ||
-                !tokensData.content?.tokens
-            ) {
-                throw new Error(
-                    tokensData.message || "Failed to fetch supported tokens",
                 );
-            }
 
-            const matched = tokensData.content.tokens
-                .map((token: SupportedToken) => {
-                    const holding =
-                        holdingsData.content.cryptocurrencyPositions.find(
-                            (h: CryptocurrencyPosition) =>
-                                h.symbol === token.symbol,
+                const holdingsData: HoldingsResponse =
+                    await holdingsResponse.json();
+                console.log("Holdings data:", holdingsData);
+
+                if (
+                    holdingsData.status !== "ok" ||
+                    !holdingsData.content?.cryptocurrencyPositions
+                ) {
+                    if (holdingsData.errorType === "invalidIntegrationToken") {
+                        console.log("Invalid integration token");
+                        setStep(WithdrawalStep.CheckSessionKey);
+                        setMeshAccessToken(null);
+                        setSessionId(null);
+                        sessionStorage.removeItem(
+                            `${deviceKey}:${selectedIntegration?.type}`,
                         );
-                    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);
-            return matched;
-        },
-        enabled: Boolean(
-            meshAccessToken && sessionId && chainIdIn && selectedIntegration,
-        ),
-        retry: 0,
-    });
+                    throw new Error(
+                        holdingsData.message || "Failed to fetch holdings",
+                    );
+                }
 
-    useEffect(() => {
-        if (!(error instanceof Error)) return;
-        const meshError = error as MeshRequestError;
-        if (meshError.code !== "invalidIntegrationToken") return;
-
-        console.log("Invalid integration token");
-        setStep(WithdrawalStep.CheckSessionKey);
-        setMeshAccessToken(null);
-        setSessionId(null);
-        sessionStorage.removeItem(`${deviceKey}:${selectedIntegration?.type}`);
-    }, [
-        error,
-        setStep,
-        setMeshAccessToken,
-        setSessionId,
-        deviceKey,
-        selectedIntegration?.type,
-    ]);
+                // Fetch supported tokens for chainIdIn (intermediate chain if bridging)
+                const tokensResponse = await fetch(
+                    `${MESH_API_URL}/tokens?chainId=${chainIdIn}&brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
+                );
+                const tokensData = await tokensResponse.json();
+
+                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 && chainIdIn && selectedIntegration) {
+            fetchData();
+        }
+    }, [address, chainIdIn, meshAccessToken, sessionId, selectedIntegration]);
 
     const geckoTokens = useTokenFromListBySymbols(
         matchedTokens.map((token) => token.symbol),
@@ -569,10 +639,7 @@ const ChooseAssetStep = ({
     if (error)
         return (
             <Box p={5} color="red.500">
-                Error:{" "}
-                {error instanceof Error
-                    ? error.message
-                    : "Failed to fetch data"}
+                Error: {error}
             </Box>
         );
 
@@ -601,24 +668,19 @@ const ChooseAssetStep = ({
                             loading={false}
                             selected={selectedTokenSymbol === token.symbol}
                             onClick={() => {
-                                const tokenAddress =
-                                    geckoTokens?.[index]?.address;
                                 setSelectedTokenSymbol(token.symbol);
-                                onTokenSelect({
-                                    ...token,
-                                    tokenAddress,
-                                });
-                                setTokenIn(tokenAddress);
+                                onTokenSelect(token);
+                                setTokenIn(geckoTokens?.[index]?.address);
                             }}
                         />
                     ))}
                 </ListWrapper>
             </Box>
-            {matchedTokens.length === 0 ? (
+            {matchedTokens.length === 0 && (
                 <Box textAlign="center" color="fg.subtle" py={8}>
                     No tokens with balances found for this chain
                 </Box>
-            ) : null}
+            )}
             {
                 <Button
                     disabled={!selectedTokenSymbol}
@@ -633,6 +695,441 @@ 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 setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+
+    useEffect(() => {
+        setSelectedIntegration({
+            type: "delayed",
+            name: "Smart account",
+            id: "",
+        });
+    }, []);
+
+    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,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    selectedToken: MatchedToken | null;
+}) => {
+    const [amountInput, setAmountInput] = useState<AmountInputValue>({
+        tokenAmount: "",
+        usdAmount: "",
+        mode: "usd",
+    });
+    const setAmountIn = useAppStore((s) => s.setAmountIn);
+    const { tokenInData, selectedIntegration } = useAppDetails();
+    const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
+    const roundingPrecision = isStable ? 2 : 6;
+    const amount = amountInput.tokenAmount;
+    const usdValue = amountInput.usdAmount;
+
+    // Only apply CEX withdrawal limits if using a CEX holding (not smart account)
+    const isWithdrawal = !isDelayedBalanceUsed(selectedIntegration.type);
+
+    const maxUsdAmount = selectedToken
+        ? isWithdrawal
+            ? (selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD).toFixed(
+                  2,
+              )
+            : selectedToken.marketValue.toFixed(2)
+        : 0;
+
+    const tokenPriceUsd = useMemo(() => {
+        if (!selectedToken || !selectedToken.balance) return undefined;
+        return selectedToken.marketValue / selectedToken.balance;
+    }, [selectedToken]);
+
+    // Handle percentage selection with limits (only for CEX withdrawals)
+    const getPercentAmounts = useCallback(
+        (percent: number) => {
+            if (!selectedToken) return;
+
+            // Calculate target USD amount based on percentage
+            const targetUsdAmount = (selectedToken.marketValue * percent) / 100;
+
+            let finalUsdAmount: number;
+            let finalTokenAmount: number;
+
+            if (isWithdrawal) {
+                // Apply limits for CEX withdrawals
+                const minValueForToken =
+                    EXCHANGE_MIN_LIMIT[
+                        selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+                    ] || 0;
+
+                finalUsdAmount = Math.max(
+                    minValueForToken,
+                    Math.min(targetUsdAmount, +maxUsdAmount),
+                );
+
+                const tokenPrice =
+                    selectedToken.marketValue / selectedToken.balance;
+                finalTokenAmount = Math.min(
+                    finalUsdAmount / tokenPrice,
+                    selectedToken.balance,
+                );
+            } else {
+                // No limits for smart account balances
+                finalUsdAmount = targetUsdAmount;
+                finalTokenAmount = (selectedToken.balance * percent) / 100;
+            }
+
+            return {
+                tokenAmount: precisionizeNumber(
+                    finalTokenAmount,
+                    roundingPrecision,
+                ),
+                usdAmount: finalUsdAmount.toFixed(2),
+            };
+        },
+        [selectedToken, isWithdrawal, maxUsdAmount, roundingPrecision],
+    );
+
+    // Set max value on load
+    useEffect(() => {
+        if (selectedToken) {
+            const percentAmounts = getPercentAmounts(100);
+            if (!percentAmounts) return;
+
+            setAmountInput((prev) => ({
+                ...prev,
+                ...percentAmounts,
+            }));
+        }
+    }, [selectedToken, getPercentAmounts]);
+
+    useEffect(() => {
+        if (!tokenInData?.decimals) return;
+
+        const normalizedAmount = amount.endsWith(".")
+            ? amount.slice(0, -1)
+            : amount;
+
+        if (!normalizedAmount || normalizedAmount === ".") {
+            setAmountIn("0");
+            return;
+        }
+
+        try {
+            setAmountIn(
+                denormalizeValue(normalizedAmount, tokenInData.decimals),
+            );
+        } catch (error) {
+            setAmountIn("0");
+        }
+    }, [amount, tokenInData?.decimals, setAmountIn]);
+
+    const numericAmount = getPositiveDecimalValue(amount);
+    const hasPositiveAmount = numericAmount !== null;
+    const hasUsdValue = !!usdValue && usdValue !== ".";
+    const notEnoughBalance = selectedToken
+        ? hasPositiveAmount &&
+          numericAmount !== null &&
+          numericAmount > selectedToken.balance
+        : true;
+
+    // Limits validation logic - only for CEX withdrawals
+    const currentUsdValue = hasUsdValue
+        ? (getPositiveDecimalValue(usdValue) ?? 0)
+        : 0;
+    const minValueForToken =
+        isWithdrawal && selectedToken
+            ? EXCHANGE_MIN_LIMIT[
+                  selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+              ]
+            : 0;
+
+    const isBelowMinAmount =
+        isWithdrawal &&
+        selectedToken &&
+        hasPositiveAmount &&
+        currentUsdValue > 0 &&
+        minValueForToken &&
+        numericAmount !== null &&
+        numericAmount < minValueForToken;
+    const isAboveMaxAmount =
+        isWithdrawal &&
+        selectedToken &&
+        hasPositiveAmount &&
+        currentUsdValue > 0 &&
+        currentUsdValue > +maxUsdAmount;
+
+    const isAmountInvalid =
+        !hasPositiveAmount ||
+        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%"
+            >
+                <AmountInput
+                    value={amountInput}
+                    onChange={setAmountInput}
+                    tokenSymbol={selectedToken.symbol}
+                    tokenPriceUsd={tokenPriceUsd}
+                    roundingPrecision={roundingPrecision}
+                    onPercentSelect={getPercentAmounts}
+                />
+            </Box>
+
+            {
+                <Box
+                    textAlign="center"
+                    color="fg.subtle"
+                    fontSize="xs"
+                    h={3}
+                    m={-1}
+                    visibility={isAmountInvalid ? "visible" : "hidden"}
+                >
+                    {!hasPositiveAmount
+                        ? "Please enter an amount"
+                        : isBelowMinAmount
+                          ? `Minimum amount is ${formatNumber(minValueForToken)} ${selectedToken.symbol}`
+                          : isAboveMaxAmount
+                            ? `Maximum amount is ${formatUSD(maxUsdAmount)} (balance - $${EXCHANGE_MAX_LIMIT_GAP_USD})`
+                            : notEnoughBalance
+                              ? "Amount exceeds available balance"
+                              : ""}
+                </Box>
+            }
+
+            <Button
+                onClick={() =>
+                    isAmountInvalid
+                        ? undefined
+                        : setStep(WithdrawalStep.SignUserOp)
+                }
+                disabled={isAmountInvalid}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+const SignUserOpStep = ({
+    setStep,
+    setUserOp,
+    nextStep,
+}: {
+    nextStep: WithdrawalStep;
+    setStep: (step: WithdrawalStep) => void;
+    setUserOp: (userOp: any) => void;
+}) => {
+    const { chainIdIn } = useAppDetails();
+    const { routeLoading, usdAmountIn, routeData } = useRouteData();
+    const { signMessageAsync } = useSignMessage();
+    const { address } = useAccount();
+    const [isSigning, setIsSigning] = useState(false);
+
+    const handleSignUserOp = async () => {
+        if (!routeData || (routeData as any)?.error) {
+            console.error("No valid router data available");
+            return;
+        }
+
+        try {
+            setIsSigning(true);
+
+            // Extract userOp from routeData
+            const userOperation = routeData?.userOp;
+            if (!userOperation) {
+                console.error("No userOperation found in routeData");
+                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,
+            });
+
+            // 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(nextStep);
+        } 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={routeLoading}
+                    width={routeLoading ? "156px" : "auto"}
+                >
+                    <Input
+                        readOnly
+                        marginY={"8px"}
+                        variant={"text"}
+                        placeholder={"$10.00"}
+                        value={usdAmountIn}
+                    />
+                </Skeleton>
+
+                <QuoteParameters />
+            </Flex>
+
+            <TransactionDetailRow />
+
+            <Button
+                disabled={
+                    !!(routeData as any)?.message || routeLoading || isSigning
+                }
+                loading={routeLoading || isSigning}
+                onClick={handleSignUserOp}
+            >
+                {routeLoading
+                    ? "Loading quote"
+                    : isSigning
+                      ? "Signing..."
+                      : "Sign Transaction"}
+            </Button>
+        </BodyWrapper>
+    );
+};
+
 const InitiateWithdrawalStep = ({
     selectedToken,
     userOp,
@@ -659,6 +1156,7 @@ const InitiateWithdrawalStep = ({
             return;
         }
 
+        // Convert amountIn from wei to token amount
         const transferAmount = tokenInData?.decimals
             ? normalizeValue(amountIn, tokenInData.decimals)
             : 0;
@@ -675,16 +1173,19 @@ const InitiateWithdrawalStep = ({
                         amount: transferAmount,
                     },
                 ];
-
-                console.log("link request body", {
+                const meshData = {
                     restrictMultipleAccounts: true,
                     userId: deviceKey,
                     integrationId: selectedIntegration?.id,
-                    transferOptions: { toAddresses },
-                });
+                    transferOptions: {
+                        toAddresses,
+                    },
+                };
+
+                console.log("link request body", meshData);
 
                 const response = await fetch(
-                    `${CHECKOUT_BFF_URL}/linktoken?brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
+                    `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
                     {
                         method: "POST",
                         headers: {
@@ -721,7 +1222,7 @@ const InitiateWithdrawalStep = ({
                     clientId: address,
                     accessTokens,
                     onIntegrationConnected: (payload) => {
-                        handleMeshAccessPayload(payload.accessToken, sessionId);
+                        handleMeshAccessPayload(payload.accessToken, sessionId); // Persist access token and session id for future reloads
                         console.log("Integration connected", payload);
                     },
                     onTransferFinished: (transferData) => {
@@ -817,24 +1318,657 @@ const InitiateWithdrawalStep = ({
     );
 };
 
+// Phase indicator component for cross-chain tracking
+const PhaseIndicator = ({
+    currentPhase,
+    phases,
+}: {
+    currentPhase: number;
+    phases: string[];
+}) => {
+    return (
+        <Box display="flex" gap={4} justifyContent="center" mb={4}>
+            {phases.map((phase, index) => (
+                <Box key={phase} display="flex" alignItems="center" gap={2}>
+                    <Box
+                        w={6}
+                        h={6}
+                        borderRadius="full"
+                        bg={
+                            index < currentPhase
+                                ? "green.500"
+                                : index === currentPhase
+                                  ? "blue.500"
+                                  : "gray.300"
+                        }
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        color="white"
+                        fontSize="xs"
+                        fontWeight="bold"
+                    >
+                        {index < currentPhase ? "✓" : index + 1}
+                    </Box>
+                    <Text
+                        fontSize="sm"
+                        color={index === currentPhase ? "fg" : "fg.muted"}
+                        fontWeight={
+                            index === currentPhase ? "semibold" : "normal"
+                        }
+                    >
+                        {phase}
+                    </Text>
+                </Box>
+            ))}
+        </Box>
+    );
+};
+
+const TrackUserOpStep = ({
+    selectedToken,
+    userOp,
+    setStep,
+}: {
+    selectedToken: MatchedToken | null;
+    userOp: any;
+    setStep: (step: WithdrawalStep) => void;
+}) => {
+    const { chainIdIn, chainIdOut, tokenInData } = useAppDetails();
+    const { amountIn } = useAppStore();
+
+    // Determine if this is a cross-chain (bridge) flow
+    const isCrosschain = chainIdIn !== chainIdOut;
+
+    // Phase management: for crosschain 'cex' -> 'bridge' -> 'completed', for single-chain just 'cex' -> 'completed'
+    const [phase, setPhase] = useState<
+        "cex" | "bridge" | "completed" | "failed"
+    >("cex");
+    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 [txHash, setTxHash] = useState<`0x${string}` | null>(null);
+    const [isTimerFinished, setIsTimerFinished] = useState(false);
+    const [trackingInterval, setTrackingInterval] =
+        useState<NodeJS.Timeout | null>(null);
+    const [destinationVerified, setDestinationVerified] = useState(false);
+    const [destinationSuccess, setDestinationSuccess] = useState<
+        boolean | null
+    >(null);
+    const [refundDetails, setRefundDetails] = useState<{
+        token: string;
+        amount: string;
+        recipient: string;
+        isNative: boolean;
+    } | null>(null);
+    const [destinationTxHash, setDestinationTxHash] = useState<string | null>(
+        null,
+    );
+
+    // LayerZero tracking for bridge progress (real-time updates)
+    const lzStatus = useLayerZeroStatus(
+        txHash ?? undefined,
+        isCrosschain && phase === "bridge",
+    );
+
+    // Send UserOp to tracker
+    useEffect(() => {
+        const sendUserOpToTracker = async () => {
+            if (!selectedToken || !userOp || !tokenInData) {
+                console.error("Missing required data for tracking");
+                setStatus("failed");
+                setMessage("Missing required data");
+                setPhase("failed");
+                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(
+                        isCrosschain
+                            ? "Funds forwarding in progress..."
+                            : "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");
+                setPhase("failed");
+            }
+        };
+
+        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");
+
+                    if (isCrosschain) {
+                        // For crosschain: move to bridge phase
+                        setMessage("Funds forwarding completed!");
+                        if (data.operation?.bundleTxHash) {
+                            setTxHash(
+                                data.operation.bundleTxHash as `0x${string}`,
+                            );
+                            setPhase("bridge");
+                        } else {
+                            console.warn(
+                                "No bundleTxHash returned from indexer, cannot track bridge",
+                            );
+                            setPhase("completed");
+                        }
+                    } else {
+                        // For single-chain: complete
+                        setMessage("Operation completed successfully!");
+                        setPhase("completed");
+                    }
+
+                    if (trackingInterval) {
+                        clearInterval(trackingInterval);
+                        setTrackingInterval(null);
+                    }
+                } else if (
+                    ["failed", "failed_permanent"].includes(
+                        data.operation?.status,
+                    )
+                ) {
+                    setStatus("failed");
+                    setMessage(
+                        isCrosschain
+                            ? "Bridging failed. Please select Smart-account balance as a source to use withdrawn funds"
+                            : "Operation failed",
+                    );
+                    setPhase("failed");
+                    if (trackingInterval) {
+                        clearInterval(trackingInterval);
+                        setTrackingInterval(null);
+                    }
+                }
+            } catch (error) {
+                console.error("Failed to fetch operation status:", error);
+            }
+        };
+
+        const interval = setInterval(trackOperation, 3000);
+        setTrackingInterval(interval);
+
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [operationId, status, isCrosschain]);
+
+    // Handle bridge completion - verify destination execution once LayerZero shows DELIVERED
+    useEffect(() => {
+        if (!isCrosschain || phase !== "bridge") return;
+
+        // If LayerZero failed, mark as failed immediately
+        if (lzStatus.isFailed) {
+            setPhase("failed");
+            return;
+        }
+
+        // When LayerZero shows DELIVERED, verify destination execution with Enso API
+        if (
+            lzStatus.isComplete &&
+            !destinationVerified &&
+            txHash &&
+            chainIdIn
+        ) {
+            // TODO: use hook
+            const verifyDestination = async () => {
+                try {
+                    const res = await fetch(
+                        `https://api.enso.build/api/v1/layerzero/bridge/check?chainId=${chainIdIn}&txHash=${txHash}`,
+                    );
+                    if (!res.ok) {
+                        // If API call fails, assume success (LayerZero delivered)
+                        setDestinationVerified(true);
+                        setDestinationSuccess(true);
+                        setPhase("completed");
+                        return;
+                    }
+                    const data = await res.json();
+                    setDestinationVerified(true);
+                    setDestinationTxHash(data.destinationTxHash || null);
+
+                    if (data.status === "success") {
+                        setDestinationSuccess(true);
+                        setPhase("completed");
+                    } else if (data.status === "failed") {
+                        setDestinationSuccess(false);
+                        setRefundDetails(
+                            data.ensoDestinationEvent?.refundDetails || null,
+                        );
+                        setPhase("failed");
+                    } else {
+                        // Still pending, assume success since LZ delivered
+                        setDestinationSuccess(true);
+                        setPhase("completed");
+                    }
+                } catch (error) {
+                    console.error("Failed to verify destination:", error);
+                    // On error, assume success since LayerZero delivered
+                    setDestinationVerified(true);
+                    setDestinationSuccess(true);
+                    setPhase("completed");
+                }
+            };
+            verifyDestination();
+        }
+    }, [
+        phase,
+        lzStatus.isComplete,
+        lzStatus.isFailed,
+        isCrosschain,
+        destinationVerified,
+        txHash,
+        chainIdIn,
+    ]);
+
+    const handleTimerFinish = () => {
+        setIsTimerFinished(true);
+    };
+
+    const getOverallStatus = () => {
+        if (phase === "failed") return "failed";
+        if (phase === "completed") return "completed";
+        return "processing";
+    };
+
+    const getStatusColor = () => {
+        switch (getOverallStatus()) {
+            case "completed":
+                return "#14AE5C";
+            case "failed":
+                return "#E84142";
+            default:
+                return "#1E171F";
+        }
+    };
+
+    const getStatusText = () => {
+        switch (getOverallStatus()) {
+            case "completed":
+                return "Success";
+            case "failed":
+                return "Failed";
+            default:
+                return "Processing";
+        }
+    };
+
+    const getCurrentMessage = () => {
+        if (isCrosschain) {
+            if (phase === "cex") {
+                return `(1/2) ${message}`;
+            } else if (phase === "bridge") {
+                return `(2/2) ${lzStatus.message}`;
+            } else if (phase === "completed") {
+                return "Transfer completed successfully!";
+            } else {
+                return refundDetails
+                    ? "Destination execution failed. Funds refunded to smart account."
+                    : "Transfer failed";
+            }
+        } else {
+            if (phase === "completed") {
+                return "Operation completed successfully!";
+            } else if (phase === "failed") {
+                return "Operation failed";
+            }
+            return message;
+        }
+    };
+
+    const renderStatusIcon = () => {
+        const isProcessing = phase === "cex" || phase === "bridge";
+
+        if (isProcessing) {
+            return (
+                <CircleTimer
+                    start={status === "tracking" || phase === "bridge"}
+                    onFinish={handleTimerFinish}
+                    duration={isCrosschain ? 180 : 120}
+                />
+            );
+        }
+
+        if (phase === "completed") {
+            return (
+                <Box display="flex" flexDirection="column" alignItems="center">
+                    <Image
+                        src={SuccessIcon}
+                        boxShadow="0px 0px 20px #14AE5C"
+                        borderRadius="90%"
+                        width="58px"
+                        height="58px"
+                    />
+                </Box>
+            );
+        }
+
+        return (
+            <Box display="flex" flexDirection="column" alignItems="center">
+                <Image
+                    src={FailIcon}
+                    boxShadow="0px 0px 20px #E84142"
+                    borderRadius="90%"
+                    width="58px"
+                    height="58px"
+                />
+            </Box>
+        );
+    };
+
+    const intermediateChainName = chainIdIn
+        ? STARGATE_CHAIN_NAMES[chainIdIn as keyof typeof STARGATE_CHAIN_NAMES]
+        : "Unknown";
+    const targetChainName = chainIdOut
+        ? STARGATE_CHAIN_NAMES[chainIdOut as keyof typeof STARGATE_CHAIN_NAMES]
+        : "Unknown";
+
+    return (
+        <BodyWrapper>
+            {/* Phase Indicator (crosschain only) */}
+            {isCrosschain && (
+                <PhaseIndicator
+                    currentPhase={
+                        phase === "cex" ? 0 : phase === "bridge" ? 1 : 2
+                    }
+                    phases={["Forward funds", "Bridge"]}
+                />
+            )}
+
+            {/* Status Icon */}
+            <Box
+                display="flex"
+                flexDirection="column"
+                paddingBottom="16px"
+                alignItems="center"
+                width="100%"
+            >
+                {renderStatusIcon()}
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="center"
+                    marginTop="16px"
+                    textAlign="center"
+                >
+                    <Text
+                        fontSize="lg"
+                        fontWeight="semibold"
+                        color="fg"
+                        marginBottom="8px"
+                    >
+                        {getCurrentMessage()}
+                    </Text>
+                    {(phase === "cex" || phase === "bridge") &&
+                        isTimerFinished && (
+                            <Text
+                                fontSize="sm"
+                                color="fg.muted"
+                                maxWidth="280px"
+                            >
+                                Your operation is being processed – no action is
+                                required from you.
+                            </Text>
+                        )}
+                </Box>
+            </Box>
+
+            {/* Status Table */}
+            <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>
+                    {isCrosschain && (
+                        <>
+                            <Table.Row>
+                                <Table.Cell>Current Phase</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text>
+                                        {phase === "cex"
+                                            ? "Awaiting funds"
+                                            : phase === "bridge"
+                                              ? "Bridging"
+                                              : phase === "completed"
+                                                ? "Complete"
+                                                : "Failed"}
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                            <Table.Row>
+                                <Table.Cell>Intermediate Chain</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text textTransform="capitalize">
+                                        {intermediateChainName}
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                            <Table.Row>
+                                <Table.Cell>Final Destination</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text textTransform="capitalize">
+                                        {targetChainName}
+                                    </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>
+                    )}
+                    {isCrosschain && txHash && (
+                        <Table.Row>
+                            <Table.Cell>Bridge TX</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text
+                                    fontSize="sm"
+                                    color="blue.500"
+                                    cursor="pointer"
+                                    onClick={() =>
+                                        window.open(
+                                            `https://layerzeroscan.com/tx/${txHash}`,
+                                            "_blank",
+                                        )
+                                    }
+                                >
+                                    View on LayerZero
+                                </Text>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                    {isCrosschain && destinationTxHash && (
+                        <Table.Row>
+                            <Table.Cell>Destination TX</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text
+                                    fontSize="sm"
+                                    color="blue.500"
+                                    cursor="pointer"
+                                    onClick={() => {
+                                        const explorer =
+                                            CHAINS_ETHERSCAN[
+                                                chainIdOut as keyof typeof CHAINS_ETHERSCAN
+                                            ] || "https://etherscan.io";
+                                        window.open(
+                                            `${explorer}/tx/${destinationTxHash}`,
+                                            "_blank",
+                                        );
+                                    }}
+                                >
+                                    View on Explorer
+                                </Text>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                    {isCrosschain && phase === "bridge" && (
+                        <Table.Row>
+                            <Table.Cell>Bridge Progress</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text>({lzStatus.step}/4)</Text>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                    {isCrosschain && refundDetails && (
+                        <Table.Row>
+                            <Table.Cell>Refund</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text fontSize="sm" color="orange.500">
+                                    Funds refunded to smart account
+                                </Text>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                </Table.Body>
+            </Table.Root>
+
+            <QuoteParameters />
+
+            <TransactionDetailRow />
+
+            {(phase === "completed" || phase === "failed") && (
+                <Button
+                    onClick={() => setStep(WithdrawalStep.CheckSessionKey)}
+                    visual="solid"
+                >
+                    {phase === "completed" ? "New Deposit" : "Retry Deposit"}
+                </Button>
+            )}
+        </BodyWrapper>
+    );
+};
+
 const ExchangeFlow = ({
     setFlow,
+    initialStep = WithdrawalStep.ChooseExchange,
 }: {
-    setFlow: (flow: string) => void;
+    setFlow: (string) => void;
+    initialStep?: WithdrawalStep;
 }) => {
     const { handleClose, enforceFlow } = useContext(CheckoutContext);
-    const [currentStep, setCurrentStep] = useState<WithdrawalStep>(
-        WithdrawalStep.ChooseExchange,
-    );
+    const [currentStep, setCurrentStep] = useState(initialStep);
     const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
         null,
     );
     const [userOp, setUserOp] = useState<any | null>(null);
-
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     useEffect(() => {
-        return () => useAppStore.getState().setSelectedIntegration(null);
+        return () => setSelectedIntegration(null);
     }, []);
 
     const currentStepComponent = (() => {
@@ -850,19 +1984,29 @@ const ExchangeFlow = ({
                         onTokenSelect={setSelectedToken}
                     />
                 );
+            case WithdrawalStep.ChooseBalanceAsset:
+                return (
+                    <ChooseDelayedBalance
+                        setStep={setCurrentStep}
+                        onTokenSelect={setSelectedToken}
+                    />
+                );
             case WithdrawalStep.ChooseAmount:
                 return (
-                    <SharedChooseAmountStep
+                    <ChooseAmountStep
                         setStep={setCurrentStep}
-                        nextStep={WithdrawalStep.SignUserOp}
                         selectedToken={selectedToken}
-                        mode="cex"
                     />
                 );
             case WithdrawalStep.SignUserOp:
                 return (
-                    <SharedSignUserOpStep
-                        nextStep={WithdrawalStep.InitiateWithdrawal}
+                    <SignUserOpStep
+                        nextStep={
+                            // skip withdrawal if use existing balance
+                            selectedToken.holding
+                                ? WithdrawalStep.InitiateWithdrawal
+                                : WithdrawalStep.TrackUserOp
+                        }
                         setStep={setCurrentStep}
                         setUserOp={setUserOp}
                     />
@@ -878,10 +2022,9 @@ const ExchangeFlow = ({
             case WithdrawalStep.TrackUserOp:
                 return (
                     <TrackUserOpStep
+                        selectedToken={selectedToken}
                         userOp={userOp}
-                        onReset={() =>
-                            setCurrentStep(WithdrawalStep.CheckSessionKey)
-                        }
+                        setStep={setCurrentStep}
                     />
                 );
             default:
@@ -895,15 +2038,21 @@ const ExchangeFlow = ({
                 <HeaderWrapper>
                     {!(
                         enforceFlow &&
-                        currentStep === WithdrawalStep.ChooseExchange
+                        (currentStep === WithdrawalStep.ChooseExchange ||
+                            currentStep === WithdrawalStep.ChooseBalanceAsset)
                     ) && (
                         <IconButton
                             minWidth={"16px"}
                             minHeight={"16px"}
                             maxWidth={"16px"}
                             onClick={() => {
-                                const previousStep =
-                                    withdrawalPreviousStep[currentStep];
+                                const previousStep = (
+                                    isDelayedBalanceUsed(
+                                        selectedIntegration?.type,
+                                    )
+                                        ? balancePreviousStep
+                                        : withdrawalPreviousStep
+                                )[currentStep];
                                 if (previousStep !== undefined) {
                                     setCurrentStep(previousStep);
                                 } else {
@@ -913,7 +2062,7 @@ const ExchangeFlow = ({
                         >
                             <Icon
                                 as={ChevronLeft}
-                                color="fg.muted"
+                                color="gray"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -942,7 +2091,7 @@ const ExchangeFlow = ({
                         >
                             <Icon
                                 as={X}
-                                color="fg.muted"
+                                color="gray"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -951,9 +2100,33 @@ const ExchangeFlow = ({
                 </HeaderWrapper>
             </Modal.Header>
             <Modal.Body>
-                <AnimatedStep key={currentStep}>
-                    {currentStepComponent}
-                </AnimatedStep>
+                {/*{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>
         </>
     );