@ensofinance/checkout-widget 0.0.17 → 0.0.19

package/src/components/steps/ExchangeFlow.tsx

@@ -11,7 +11,6 @@ import {
 } from "@chakra-ui/react";
 import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
 import { useContext, useEffect, useMemo, useState, useCallback } from "react";
-import { IconButton, Button, Tab, Input } from "../ui";
 import { useAccount, useSignMessage } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
 import {
@@ -21,6 +20,7 @@ import {
     HeaderWrapper,
     ListWrapper,
 } from "../ui/styled";
+import { IconButton, Button, Tab, Input } from "../ui";
 import { CheckoutContext } from "../Checkout";
 import Modal from "../modal";
 import {
@@ -40,6 +40,8 @@ import { useTokenFromListBySymbols, precisionizeNumber } from "@/util/common";
 import {
     EXCHANGE_MAX_LIMIT_GAP_USD,
     EXCHANGE_MIN_LIMIT,
+    getCexIntermediateChain,
+    DEFAULT_CEX_BRIDGE_CHAIN_MAPPING,
 } from "@/util/constants";
 import {
     useAppDetails,
@@ -54,6 +56,8 @@ 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";
@@ -124,6 +128,9 @@ interface MatchedToken extends SupportedToken {
     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";
 
@@ -194,8 +201,7 @@ const useHandleMeshAccessPayload = () => {
             sessionStorage.setItem(
                 `${deviceKey}:${selectedIntegration?.type}`,
                 JSON.stringify({
-                    accessToken:
-                        accessTokenPayload.accountTokens[0].accessToken,
+                    accessTokenPayload, // Store full object for proper restoration
                     sessionId,
                     timestamp: Date.now(),
                 }),
@@ -222,14 +228,26 @@ const ChooseExchangeStep = ({
 }: {
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { chainIdOut } = useAppStore();
+    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,
     );
-    const { enableExchange } = useContext(CheckoutContext);
+    const { enableExchange, cexBridgeChainMapping } =
+        useContext(CheckoutContext);
+    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
+    useEffect(() => {
+        effectiveChainId ? setChainIdIn(effectiveChainId) : chainIdOut;
+    }, [effectiveChainId, setChainIdIn]);
 
     useEffect(() => {
         const fetchIntegrations = async () => {
@@ -240,11 +258,12 @@ const ChooseExchangeStep = ({
                     .map((e) => ExchangeToIntegrationType[e])
                     .filter(Boolean);
 
-                // Filter integrations by current chain support
+                // Filter integrations by effective chain support (intermediate chain if bridging)
                 const filtered = data?.filter(
                     (i) =>
-                        i.networks.some((n) => +n.chainId === chainIdOut) &&
-                        availableExchanges.includes(i.type),
+                        i.networks.some(
+                            (n) => +n.chainId === effectiveChainId,
+                        ) && availableExchanges.includes(i.type),
                 );
 
                 setIntegrations(filtered);
@@ -256,7 +275,7 @@ const ChooseExchangeStep = ({
             }
         };
         fetchIntegrations();
-    }, [chainIdOut]);
+    }, [effectiveChainId]);
 
     if (loading)
         return (
@@ -322,19 +341,20 @@ const CheckSessionKeyStep = ({
 }: {
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { chainIdOut, setMeshAccessToken, setSessionId, setChainIdIn } =
+    const { chainIdIn, chainIdOut, setMeshAccessToken, setSessionId } =
         useAppStore();
     const { address } = useAccount();
     const deviceKey = useDeviceId();
     const [showConfirmation, setShowConfirmation] = useState(false);
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
-    const invalidChainId = chainIdOut && !MESH_NETWORKS.includes(chainIdOut);
-    const handleMeshAccessPayload = useHandleMeshAccessPayload();
+    // Bridging is required if chainIdIn differs from chainIdOut
+    const needsBridging = chainIdIn !== chainIdOut;
 
-    useEffect(() => {
-        setChainIdIn(chainIdOut);
-    }, [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) {
@@ -351,8 +371,8 @@ const CheckSessionKeyStep = ({
         if (saved) {
             try {
                 const parsed = JSON.parse(saved);
-                if (parsed?.accessToken && parsed?.sessionId) {
-                    setMeshAccessToken(parsed.accessToken);
+                if (parsed?.accessTokenPayload && parsed?.sessionId) {
+                    setMeshAccessToken(parsed.accessTokenPayload);
                     setSessionId(parsed.sessionId);
                     setStep(WithdrawalStep.ChooseExchangeAsset);
                     return;
@@ -488,7 +508,6 @@ const ChooseAssetStep = ({
     const [error, setError] = useState<string | null>(null);
     const { address } = useAccount();
     const {
-        chainIdOut,
         meshAccessToken,
         sessionId,
         setMeshAccessToken,
@@ -513,7 +532,9 @@ const ChooseAssetStep = ({
                             "x-session-id": sessionId,
                         },
                         body: JSON.stringify({
-                            authToken: meshAccessToken,
+                            authToken:
+                                meshAccessToken?.accountTokens?.[0]
+                                    ?.accessToken,
                             brokerType: selectedIntegration?.type,
                         }),
                     },
@@ -541,7 +562,7 @@ const ChooseAssetStep = ({
                     );
                 }
 
-                // Fetch supported tokens for current chain
+                // Fetch supported tokens for chainIdIn (intermediate chain if bridging)
                 const tokensResponse = await fetch(
                     `${MESH_API_URL}/tokens?chainId=${chainIdIn}&brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
                 );
@@ -596,10 +617,10 @@ const ChooseAssetStep = ({
             }
         };
 
-        if (meshAccessToken && sessionId && chainIdOut && selectedIntegration) {
+        if (meshAccessToken && sessionId && chainIdIn && selectedIntegration) {
             fetchData();
         }
-    }, [address, chainIdOut, meshAccessToken, sessionId, selectedIntegration]);
+    }, [address, chainIdIn, meshAccessToken, sessionId, selectedIntegration]);
 
     const geckoTokens = useTokenFromListBySymbols(
         matchedTokens.map((token) => token.symbol),
@@ -632,7 +653,7 @@ const ChooseAssetStep = ({
                     {matchedTokens.map((token, index) => (
                         <AssetCard
                             key={`${token.symbol}-${index}`}
-                            chainId={chainIdOut || 1}
+                            chainId={chainIdIn}
                             icon={geckoTokens?.[index]?.logoURI?.replace(
                                 "/thumb/",
                                 "/large/",
@@ -780,48 +801,61 @@ const ChooseAmountStep = ({
     const [amount, setAmount] = useState<string>("");
     const [inputMode, setInputMode] = useState<"usd" | "token">("usd");
     const [usdValue, setUsdValue] = useState<string>("");
-    const { setAmountIn } = useAppStore();
-    const { tokenInData } = useAppDetails();
+    const setAmountIn = useAppStore((s) => s.setAmountIn);
+    const { tokenInData, selectedIntegration } = useAppDetails();
     const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
     const roundingPrecision = isStable ? 2 : 6;
 
+    // Only apply CEX withdrawal limits if using a CEX holding (not smart account)
+    const isWithdrawal = !isDelayedBalanceUsed(selectedIntegration.type);
+
     const maxUsdAmount = selectedToken
-        ? (selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD).toFixed(2)
+        ? isWithdrawal
+            ? (selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD).toFixed(
+                  2,
+              )
+            : selectedToken.marketValue.toFixed(2)
         : 0;
 
-    // Handle percentage selection with limits
+    // Handle percentage selection with limits (only for CEX withdrawals)
     const handlePercentageSelect = useCallback(
         (percent: number) => {
             if (!selectedToken) return;
 
-            const minValueForToken =
-                EXCHANGE_MIN_LIMIT[
-                    selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
-                ] || 0;
-
             // Calculate target USD amount based on percentage
             const targetUsdAmount = (selectedToken.marketValue * percent) / 100;
 
-            // Apply limits to the target USD amount
-            const limitedUsdAmount = Math.max(
-                minValueForToken,
-                Math.min(targetUsdAmount, +maxUsdAmount),
-            );
+            let finalUsdAmount: number;
+            let finalTokenAmount: number;
 
-            // Convert back to token amount
-            const tokenPrice =
-                selectedToken.marketValue / selectedToken.balance;
-            const limitedTokenAmount = Math.min(
-                limitedUsdAmount / tokenPrice,
-                selectedToken.balance,
-            );
+            if (isWithdrawal) {
+                // Apply limits for CEX withdrawals
+                const minValueForToken =
+                    EXCHANGE_MIN_LIMIT[
+                        selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+                    ] || 0;
 
-            setAmount(
-                precisionizeNumber(limitedTokenAmount, roundingPrecision),
-            );
-            setUsdValue(limitedUsdAmount.toFixed(2));
+                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;
+            }
+
+            setAmount(precisionizeNumber(finalTokenAmount, roundingPrecision));
+            setUsdValue(finalUsdAmount.toFixed(2));
         },
-        [selectedToken],
+        [selectedToken, isWithdrawal, maxUsdAmount, roundingPrecision],
     );
 
     // Set max value on load
@@ -891,21 +925,26 @@ const ChooseAmountStep = ({
         ? parseFloat(amount) > selectedToken.balance
         : true;
 
-    // Limits validation logic
+    // Limits validation logic - only for CEX withdrawals
     const currentUsdValue = parseFloat(usdValue);
-    const minValueForToken = selectedToken
-        ? EXCHANGE_MIN_LIMIT[
-              selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
-          ]
-        : 0;
+    const minValueForToken =
+        isWithdrawal && selectedToken
+            ? EXCHANGE_MIN_LIMIT[
+                  selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+              ]
+            : 0;
 
     const isBelowMinAmount =
+        isWithdrawal &&
         selectedToken &&
         currentUsdValue > 0 &&
         minValueForToken &&
         +amount < minValueForToken;
     const isAboveMaxAmount =
-        selectedToken && currentUsdValue > 0 && currentUsdValue > +maxUsdAmount;
+        isWithdrawal &&
+        selectedToken &&
+        currentUsdValue > 0 &&
+        currentUsdValue > +maxUsdAmount;
 
     const isAmountInvalid =
         isBelowMinAmount || isAboveMaxAmount || notEnoughBalance;
@@ -1157,7 +1196,7 @@ const InitiateWithdrawalStep = ({
     userOp: any;
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { meshAccessToken, amountIn, chainIdOut } = useAppStore();
+    const { meshAccessToken, amountIn, chainIdIn } = useAppStore();
     const { address } = useAccount();
     const { tokenInData } = useAppDetails();
     const sessionId = useAppStore((state) => state.sessionId);
@@ -1184,7 +1223,7 @@ const InitiateWithdrawalStep = ({
             try {
                 const toAddresses = [
                     {
-                        networkId: getNetworkId(chainIdOut),
+                        networkId: getNetworkId(chainIdIn),
                         symbol: selectedToken.symbol,
                         address: userOp.sender,
                         amount: transferAmount,
@@ -1290,6 +1329,53 @@ 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,
@@ -1299,23 +1385,53 @@ const TrackUserOpStep = ({
     userOp: any;
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { chainIdIn, tokenInData } = useAppDetails();
+    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;
             }
 
@@ -1362,7 +1478,11 @@ const TrackUserOpStep = ({
                 if (data.success && data.operationId) {
                     setOperationId(data.operationId);
                     setStatus("tracking");
-                    setMessage("Tracking operation progress...");
+                    setMessage(
+                        isCrosschain
+                            ? "Funds forwarding in progress..."
+                            : "Tracking operation progress...",
+                    );
                 } else {
                     throw new Error(
                         data.message || "Failed to send operation to tracker",
@@ -1372,6 +1492,7 @@ const TrackUserOpStep = ({
                 console.error("Failed to send operation to tracker:", error);
                 setStatus("failed");
                 setMessage("Failed to send operation to tracker");
+                setPhase("failed");
             }
         };
 
@@ -1392,14 +1513,43 @@ const TrackUserOpStep = ({
 
                 if (data.operation?.status === "completed") {
                     setStatus("completed");
-                    setMessage("Operation completed successfully!");
+
+                    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 (data.operation?.status === "failed") {
+                } else if (
+                    ["failed", "failed_permanent"].includes(
+                        data.operation?.status,
+                    )
+                ) {
                     setStatus("failed");
-                    setMessage("Operation 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);
@@ -1410,20 +1560,94 @@ const TrackUserOpStep = ({
             }
         };
 
-        const interval = setInterval(trackOperation, 3000); // Check every 3 seconds
+        const interval = setInterval(trackOperation, 3000);
         setTrackingInterval(interval);
 
         return () => {
             if (interval) clearInterval(interval);
         };
-    }, [operationId]);
+    }, [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.finance/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 (status) {
+        switch (getOverallStatus()) {
             case "completed":
                 return "#14AE5C";
             case "failed":
@@ -1433,57 +1657,108 @@ const TrackUserOpStep = ({
         }
     };
 
-    const renderStatusIcon = () => {
-        switch (status) {
-            case "sending":
-            case "tracking":
-                return (
-                    <CircleTimer
-                        start={status === "tracking"}
-                        onFinish={handleTimerFinish}
-                        duration={120}
-                    />
-                );
-
+    const getStatusText = () => {
+        switch (getOverallStatus()) {
             case "completed":
-                return (
-                    <Box
-                        display="flex"
-                        flexDirection="column"
-                        alignItems="center"
-                    >
-                        <Image
-                            src={SuccessIcon}
-                            boxShadow="0px 0px 20px #14AE5C"
-                            borderRadius="90%"
-                            width="58px"
-                            height="58px"
-                        />
-                    </Box>
-                );
-
+                return "Success";
             case "failed":
-                return (
-                    <Box
-                        display="flex"
-                        flexDirection="column"
-                        alignItems="center"
-                    >
-                        <Image
-                            src={FailIcon}
-                            boxShadow="0px 0px 20px #E84142"
-                            borderRadius="90%"
-                            width="58px"
-                            height="58px"
-                        />
-                    </Box>
-                );
+                return "Failed";
+            default:
+                return "Processing";
         }
     };
 
-    const renderProcessingText = () => {
-        if (status === "tracking" && isTimerFinished) {
+    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"
@@ -1497,52 +1772,24 @@ const TrackUserOpStep = ({
                         color="fg"
                         marginBottom="8px"
                     >
-                        {message}
-                    </Text>
-                    <Text fontSize="sm" color="fg.muted" maxWidth="280px">
-                        Your operation is being processed – no action is
-                        required from you.
+                        {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>
-            );
-        }
-        return null;
-    };
-
-    const getStatusText = () => {
-        switch (status) {
-            case "completed":
-                return "Success";
-            case "failed":
-                return "Failed";
-            case "tracking":
-                return "Processing";
-            case "sending":
-                return "Sending";
-            default:
-                return "Unknown";
-        }
-    };
-
-    return (
-        <BodyWrapper>
-            <Box
-                display={"flex"}
-                flexDirection={"column"}
-                paddingBottom={"16px"}
-                alignItems={"center"}
-                width={"100%"}
-            >
-                {renderStatusIcon()}
-                {renderProcessingText()}
             </Box>
 
-            <Table.Root
-                key={"status"}
-                size="sm"
-                variant={"outline"}
-                width={"100%"}
-            >
+            {/* Status Table */}
+            <Table.Root key="status" size="sm" variant="outline" width="100%">
                 <Table.Body>
                     <Table.Row>
                         <Table.Cell>Status</Table.Cell>
@@ -1556,6 +1803,52 @@ const TrackUserOpStep = ({
                             </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>
@@ -1570,6 +1863,84 @@ const TrackUserOpStep = ({
                             </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>
 
@@ -1577,12 +1948,12 @@ const TrackUserOpStep = ({
 
             <TransactionDetailRow />
 
-            {(status === "completed" || status === "failed") && (
+            {(phase === "completed" || phase === "failed") && (
                 <Button
                     onClick={() => setStep(WithdrawalStep.CheckSessionKey)}
                     visual="solid"
                 >
-                    {status === "completed" ? "New Deposit" : "Retry Deposit"}
+                    {phase === "completed" ? "New Deposit" : "Retry Deposit"}
                 </Button>
             )}
         </BodyWrapper>