@ensofinance/checkout-widget 0.1.6 → 0.1.8

package/src/components/steps/ExchangeFlow.tsx

@@ -5,14 +5,17 @@ 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 { useAccount, useSignMessage } from "wagmi";
-import { getUserOperationHash } from "viem/account-abstraction";
+import {
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    useCallback,
+} from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useAccount } from "wagmi";
 import {
     BodyWrapper,
     HeaderDescription,
@@ -20,10 +23,13 @@ import {
     HeaderWrapper,
     ListWrapper,
 } from "../ui/styled";
-import { IconButton, Button, Input } from "../ui";
-import { AmountInput, AmountInputValue } from "../AmountInput";
+import { IconButton, Button } from "../ui";
 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,
@@ -32,69 +38,26 @@ 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,
-    useRouteData,
-    useSmartAccountBalances,
-} from "@/util/enso-hooks";
-import QuoteParameters from "../QuoteParameters";
-import { TransactionDetailRow } from "../TransactionDetailRow";
-import { CircleTimer } from "../CircleTimer";
+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";
 
-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[];
@@ -119,59 +82,38 @@ interface HoldingsResponse {
     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 isDelayedBalanceUsed = (integrationType: string) =>
-    integrationType === "delayed";
-
-// const MESH_API_URL = "http://localhost:8787";
-const MESH_API_URL = "https://mesh-bff.enso-checkout.workers.dev";
+type MeshRequestError = Error & {
+    code?: string;
+};
 
 /*
 Withdrawal steps:
-1. Check if session key is available 
-2. Perform auth if not availble (optional)
+1. Check if session key is available
+2. Perform auth if not available (optional)
 3. Get holdings and show token selector
 4. Select amount
-6. Get userOp signature
-7. Open transfer modal with amount and token
+5. Get userOp signature
+6. Open transfer modal with amount and token
 */
 
 export enum WithdrawalStep {
-    CheckSessionKey,
     ChooseExchange,
+    CheckSessionKey,
     ChooseExchangeAsset,
-    ChooseBalanceAsset,
     ChooseAmount,
     SignUserOp,
     InitiateWithdrawal,
     TrackUserOp,
 }
-const withdrawalSteps = [
-    WithdrawalStep.ChooseExchange,
-    WithdrawalStep.ChooseExchangeAsset,
-    WithdrawalStep.ChooseAmount,
-    WithdrawalStep.SignUserOp,
-    WithdrawalStep.InitiateWithdrawal,
-];
-const balanceSteps = [
-    WithdrawalStep.ChooseBalanceAsset,
-    WithdrawalStep.ChooseAmount,
-    WithdrawalStep.SignUserOp,
-];
-// Integration details are fetched dynamically from Mesh API.
+
+const withdrawalPreviousStep: Partial<Record<WithdrawalStep, WithdrawalStep>> =
+    {
+        [WithdrawalStep.CheckSessionKey]: WithdrawalStep.ChooseExchange,
+        [WithdrawalStep.ChooseExchangeAsset]: WithdrawalStep.ChooseExchange,
+        [WithdrawalStep.ChooseAmount]: WithdrawalStep.ChooseExchangeAsset,
+        [WithdrawalStep.SignUserOp]: WithdrawalStep.ChooseAmount,
+        [WithdrawalStep.InitiateWithdrawal]: WithdrawalStep.SignUserOp,
+    };
 
 // Mesh network IDs for EVM chains (from Mesh networks API)
 const MESH_NETWORK_IDS: { [chainId: number]: string } = {
@@ -183,8 +125,6 @@ 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);
@@ -193,6 +133,20 @@ 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();
@@ -200,12 +154,12 @@ const useHandleMeshAccessPayload = () => {
 
     return useCallback(
         (accessTokenPayload: AccessTokenPayload, sessionId: string) => {
-            setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
+            setMeshAccessToken(accessTokenPayload);
 
             sessionStorage.setItem(
                 `${deviceKey}:${selectedIntegration?.type}`,
                 JSON.stringify({
-                    accessTokenPayload, // Store full object for proper restoration
+                    accessTokenPayload,
                     sessionId,
                     timestamp: Date.now(),
                 }),
@@ -217,7 +171,7 @@ const useHandleMeshAccessPayload = () => {
 
 type MeshIntegration = {
     id: string;
-    type: string; // brokerType
+    type: string;
     name: string;
     networks?: {
         id: string;
@@ -233,9 +187,6 @@ 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,
     );
@@ -244,42 +195,50 @@ 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;
 
-    // Set chainIdIn to effective chain for cross-chain tracking
+    const availableExchanges = useMemo(
+        () =>
+            (enableExchange ?? [])
+                .map((exchange) => ExchangeToIntegrationType[exchange])
+                .filter(Boolean),
+        [enableExchange],
+    );
+
     useEffect(() => {
         effectiveChainId ? setChainIdIn(effectiveChainId) : chainIdOut;
     }, [effectiveChainId, setChainIdIn]);
 
-    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),
-                );
-
-                setIntegrations(filtered);
-            } catch (e) {
-                console.error("Failed to fetch integrations", e);
-                setError("Failed to load exchanges");
-            } finally {
-                setLoading(false);
+    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");
             }
-        };
-        fetchIntegrations();
-    }, [effectiveChainId]);
+
+            const data = (await res.json()) as MeshIntegration[];
+
+            return (data ?? []).filter(
+                (integration) =>
+                    integration.networks?.some(
+                        (network) => +network.chainId === effectiveChainId,
+                    ) && availableExchanges.includes(integration.type),
+            );
+        },
+        staleTime: 60_000,
+    });
 
     if (loading)
         return (
@@ -291,23 +250,18 @@ const ChooseExchangeStep = ({
         return (
             <BodyWrapper>
                 <Box p={5} color="red.500">
-                    {error}
+                    Failed to load exchanges
                 </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={""}
@@ -352,26 +306,20 @@ 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);
@@ -382,19 +330,17 @@ 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(
-            `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(brokerType)}`,
+            `${CHECKOUT_BFF_URL}/linktoken?brokerType=${encodeURIComponent(brokerType)}`,
             {
                 method: "POST",
                 headers: {
@@ -420,7 +366,7 @@ const CheckSessionKeyStep = ({
                         handleMeshAccessPayload(
                             payload.accessToken,
                             response.content.sessionId,
-                        ); // Persist access token and session id for future reloads
+                        );
                     },
                     onExit: (error) => {
                         console.log("onExit", error);
@@ -477,21 +423,6 @@ 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,
@@ -499,17 +430,9 @@ 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,
@@ -522,108 +445,115 @@ const ChooseAssetStep = ({
 
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
-    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,
-                        }),
+    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 || "",
                     },
-                );
-
-                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}`,
-                        );
-                    }
-                    throw new Error(
-                        holdingsData.message || "Failed to fetch holdings",
-                    );
+                    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;
+            }
 
-                // 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",
+            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",
                 );
-            } finally {
-                setLoading(false);
             }
-        };
 
-        if (meshAccessToken && sessionId && chainIdIn && selectedIntegration) {
-            fetchData();
-        }
-    }, [address, chainIdIn, meshAccessToken, sessionId, selectedIntegration]);
+            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);
+            return matched;
+        },
+        enabled: Boolean(
+            meshAccessToken && sessionId && chainIdIn && selectedIntegration,
+        ),
+        retry: 0,
+    });
+
+    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,
+    ]);
 
     const geckoTokens = useTokenFromListBySymbols(
         matchedTokens.map((token) => token.symbol),
@@ -639,7 +569,10 @@ const ChooseAssetStep = ({
     if (error)
         return (
             <Box p={5} color="red.500">
-                Error: {error}
+                Error:{" "}
+                {error instanceof Error
+                    ? error.message
+                    : "Failed to fetch data"}
             </Box>
         );
 
@@ -668,19 +601,24 @@ const ChooseAssetStep = ({
                             loading={false}
                             selected={selectedTokenSymbol === token.symbol}
                             onClick={() => {
+                                const tokenAddress =
+                                    geckoTokens?.[index]?.address;
                                 setSelectedTokenSymbol(token.symbol);
-                                onTokenSelect(token);
-                                setTokenIn(geckoTokens?.[index]?.address);
+                                onTokenSelect({
+                                    ...token,
+                                    tokenAddress,
+                                });
+                                setTokenIn(tokenAddress);
                             }}
                         />
                     ))}
                 </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}
@@ -695,441 +633,6 @@ 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,
@@ -1156,7 +659,6 @@ const InitiateWithdrawalStep = ({
             return;
         }
 
-        // Convert amountIn from wei to token amount
         const transferAmount = tokenInData?.decimals
             ? normalizeValue(amountIn, tokenInData.decimals)
             : 0;
@@ -1173,19 +675,16 @@ const InitiateWithdrawalStep = ({
                         amount: transferAmount,
                     },
                 ];
-                const meshData = {
+
+                console.log("link request body", {
                     restrictMultipleAccounts: true,
                     userId: deviceKey,
                     integrationId: selectedIntegration?.id,
-                    transferOptions: {
-                        toAddresses,
-                    },
-                };
-
-                console.log("link request body", meshData);
+                    transferOptions: { toAddresses },
+                });
 
                 const response = await fetch(
-                    `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
+                    `${CHECKOUT_BFF_URL}/linktoken?brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
                     {
                         method: "POST",
                         headers: {
@@ -1222,7 +721,7 @@ const InitiateWithdrawalStep = ({
                     clientId: address,
                     accessTokens,
                     onIntegrationConnected: (payload) => {
-                        handleMeshAccessPayload(payload.accessToken, sessionId); // Persist access token and session id for future reloads
+                        handleMeshAccessPayload(payload.accessToken, sessionId);
                         console.log("Integration connected", payload);
                     },
                     onTransferFinished: (transferData) => {
@@ -1270,7 +769,14 @@ const InitiateWithdrawalStep = ({
     if (error) {
         return (
             <BodyWrapper>
-                <Flex direction="column" align="center" justify="center" flex={1} p={6} gap={4}>
+                <Flex
+                    direction="column"
+                    align="center"
+                    justify="center"
+                    flex={1}
+                    p={6}
+                    gap={4}
+                >
                     <Flex
                         align="center"
                         justify="center"
@@ -1279,7 +785,11 @@ const InitiateWithdrawalStep = ({
                         borderRadius="full"
                         bg="orange.100"
                     >
-                        <Icon as={TriangleAlert} boxSize={6} color="orange.500" />
+                        <Icon
+                            as={TriangleAlert}
+                            boxSize={6}
+                            color="orange.500"
+                        />
                     </Flex>
                     <Text fontSize="md" textAlign="center" color="gray.700">
                         {error}
@@ -1307,657 +817,24 @@ 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: (string) => void;
-    initialStep?: WithdrawalStep;
+    setFlow: (flow: string) => void;
 }) => {
     const { handleClose, enforceFlow } = useContext(CheckoutContext);
-    const [currentStep, setCurrentStep] = useState(initialStep);
+    const [currentStep, setCurrentStep] = useState<WithdrawalStep>(
+        WithdrawalStep.ChooseExchange,
+    );
     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 () => setSelectedIntegration(null);
+        return () => useAppStore.getState().setSelectedIntegration(null);
     }, []);
 
     const currentStepComponent = (() => {
@@ -1973,29 +850,19 @@ const ExchangeFlow = ({
                         onTokenSelect={setSelectedToken}
                     />
                 );
-            case WithdrawalStep.ChooseBalanceAsset:
-                return (
-                    <ChooseDelayedBalance
-                        setStep={setCurrentStep}
-                        onTokenSelect={setSelectedToken}
-                    />
-                );
             case WithdrawalStep.ChooseAmount:
                 return (
-                    <ChooseAmountStep
+                    <SharedChooseAmountStep
                         setStep={setCurrentStep}
+                        nextStep={WithdrawalStep.SignUserOp}
                         selectedToken={selectedToken}
+                        mode="cex"
                     />
                 );
             case WithdrawalStep.SignUserOp:
                 return (
-                    <SignUserOpStep
-                        nextStep={
-                            // skip withdrawal if use existing balance
-                            selectedToken.holding
-                                ? WithdrawalStep.InitiateWithdrawal
-                                : WithdrawalStep.TrackUserOp
-                        }
+                    <SharedSignUserOpStep
+                        nextStep={WithdrawalStep.InitiateWithdrawal}
                         setStep={setCurrentStep}
                         setUserOp={setUserOp}
                     />
@@ -2011,9 +878,10 @@ const ExchangeFlow = ({
             case WithdrawalStep.TrackUserOp:
                 return (
                     <TrackUserOpStep
-                        selectedToken={selectedToken}
                         userOp={userOp}
-                        setStep={setCurrentStep}
+                        onReset={() =>
+                            setCurrentStep(WithdrawalStep.CheckSessionKey)
+                        }
                     />
                 );
             default:
@@ -2027,23 +895,17 @@ const ExchangeFlow = ({
                 <HeaderWrapper>
                     {!(
                         enforceFlow &&
-                        (currentStep === WithdrawalStep.ChooseExchange ||
-                            currentStep === WithdrawalStep.ChooseBalanceAsset)
+                        currentStep === WithdrawalStep.ChooseExchange
                     ) && (
                         <IconButton
                             minWidth={"16px"}
                             minHeight={"16px"}
                             maxWidth={"16px"}
                             onClick={() => {
-                                const index =
-                                    (selectedIntegration?.type === "delayed"
-                                        ? balanceSteps
-                                        : withdrawalSteps
-                                    ).findIndex(
-                                        (step) => step === currentStep,
-                                    ) - 1;
-                                if (index >= 0) {
-                                    setCurrentStep(withdrawalSteps[index]);
+                                const previousStep =
+                                    withdrawalPreviousStep[currentStep];
+                                if (previousStep !== undefined) {
+                                    setCurrentStep(previousStep);
                                 } else {
                                     setFlow("");
                                 }
@@ -2051,7 +913,7 @@ const ExchangeFlow = ({
                         >
                             <Icon
                                 as={ChevronLeft}
-                                color="gray"
+                                color="fg.muted"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -2080,7 +942,7 @@ const ExchangeFlow = ({
                         >
                             <Icon
                                 as={X}
-                                color="gray"
+                                color="fg.muted"
                                 width={"16px"}
                                 height={"16px"}
                             />
@@ -2089,33 +951,9 @@ const ExchangeFlow = ({
                 </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}
+                <AnimatedStep key={currentStep}>
+                    {currentStepComponent}
+                </AnimatedStep>
             </Modal.Body>
         </>
     );