@silentswap/react 0.0.77 → 0.0.79

package/dist/hooks/silent/useOrderTracking.js

@@ -98,10 +98,73 @@ export function getProgressFromStage(stage) {
             return 0;
     }
 }
+const wsCache = new Map();
+const pendingCleanups = new Map();
+const STATUS_UPDATE_TYPES = ['deposit', 'stage', 'transaction', 'error'];
+function getWsCacheKey(orderId, auth) {
+    return `${orderId}|${auth}`;
+}
+/**
+ * Type guard: result is a full order status snapshot (priority, outputs, optional metadata)
+ * rather than a discriminated StatusUpdate (type + data). Server may push full status
+ * with no `type` field.
+ */
+function isFullOrderStatus(result) {
+    if (typeof result !== 'object' || result === null)
+        return false;
+    const r = result;
+    const hasOutputs = Array.isArray(r.outputs) && r.outputs.length > 0;
+    const hasType = typeof r.type === 'string' && STATUS_UPDATE_TYPES.includes(r.type);
+    return hasOutputs && !hasType;
+}
+/** True if status has at least one output at FINALIZED */
+function hasFinalizedOutput(status) {
+    return status.outputs?.some((o) => o.stage === OutputStage.FINALIZED) ?? false;
+}
+// Build WebSocket URL from client config (pure function, no React deps)
+function buildWsUrl(client) {
+    let wsUrl;
+    if (typeof window !== 'undefined' && window.__WEBSOCKET_URL__) {
+        wsUrl = window.__WEBSOCKET_URL__;
+    }
+    else if (client) {
+        const baseUrl = client.baseUrl;
+        try {
+            const url = new URL(baseUrl);
+            const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+            wsUrl = `${protocol}//${url.host}/websocket`;
+        }
+        catch {
+            wsUrl = baseUrl.replace(/^https?:\/\//, 'wss://').replace(/^http:\/\//, 'ws://') + '/websocket';
+        }
+    }
+    else if (typeof window !== 'undefined') {
+        wsUrl = `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/websocket`;
+    }
+    else {
+        wsUrl = 'ws://localhost/websocket';
+    }
+    // Ensure URL is exactly: wss://domain/websocket (no extra path/query)
+    try {
+        const url = new URL(wsUrl);
+        const protocol = url.protocol === 'https:' || url.protocol === 'wss:' ? 'wss:' : 'ws:';
+        wsUrl = `${protocol}//${url.host}/websocket`;
+    }
+    catch {
+        wsUrl = wsUrl.split('?')[0].split('#')[0].replace(/\/+$/, '') + '/websocket';
+    }
+    return wsUrl;
+}
+// ─── Hook ───────────────────────────────────────────────────────────────────
 /**
  * React hook for tracking SilentSwap orders via WebSocket
+ *
+ * Uses a module-level singleton: one WebSocket per order, reused across
+ * React lifecycle events (Strict Mode, re-renders, effect re-runs).
+ * Reconnection matches Svelte ws_order_subscribe: immediate reconnect,
+ * 5s delay if idle >90s, no exponential backoff.
  */
-export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth: initialAuth, onStatusUpdate, onError, onComplete, } = {}) {
+export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth: initialAuth, onStatusUpdate, onError, onComplete, fetchAssetPrice, } = {}) {
     const [isConnected, setIsConnected] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -112,21 +175,25 @@ export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth:
     const [statusTexts, setStatusTexts] = useState(['Connecting']);
     const [completedTimestamp, setCompletedTimestamp] = useState(null);
     const [isComplete, setIsComplete] = useState(false);
+    // Store callback props in refs — read from handlers without causing re-creation
+    const onStatusUpdateRef = useRef(onStatusUpdate);
+    const onErrorRef = useRef(onError);
+    const onCompleteRef = useRef(onComplete);
+    const fetchAssetPriceRef = useRef(fetchAssetPrice);
+    const clientRef = useRef(client);
+    onStatusUpdateRef.current = onStatusUpdate;
+    onErrorRef.current = onError;
+    onCompleteRef.current = onComplete;
+    fetchAssetPriceRef.current = fetchAssetPrice;
+    clientRef.current = client;
+    // Per-instance refs (point to the shared cached connection)
     const wsRef = useRef(null);
-    const orderIdRef = useRef(initialOrderId);
-    const authRef = useRef(initialAuth);
-    const requestCounterRef = useRef(0);
-    const responseHandlersRef = useRef(new Map());
+    const orderIdRef = useRef(undefined);
+    const authRef = useRef(undefined);
+    const cachedConnRef = useRef(null);
     const reconnectTimeoutRef = useRef(null);
-    const lastReceivedRef = useRef(0);
-    const isReconnectingRef = useRef(false);
-    const reconnectAttemptsRef = useRef(0);
-    const maxReconnectAttempts = 5; // Maximum number of reconnection attempts
-    const reconnectDelayRef = useRef(1000); // Initial delay in ms, will increase exponentially
-    // Track the last connected orderId/auth to prevent unnecessary reconnections
-    // These are used in both the auto-connect useEffect and the onclose handler
-    const lastConnectedOrderIdRef = useRef(undefined);
-    const lastConnectedAuthRef = useRef(undefined);
+    /** Latest order status (for same order) so we never overwrite finalized with stale "Verifying deposit" */
+    const orderStatusRef = useRef(null);
     // Update output state when status changes
     const updateOutput = useCallback((index, stage, timestamp = Date.now(), asset) => {
         const progress = getProgressFromStage(stage);
@@ -149,29 +216,140 @@ export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth:
                 stage,
                 timestamp,
                 ...(asset ? { asset } : {}),
-                // Preserve recipient if it exists
                 ...(prev[index]?.recipient ? { recipient: prev[index].recipient } : {}),
             };
             return newOutputs;
         });
         // Check if all outputs are complete
+        // Use Math.min for earliest completion time (matching Svelte)
         setProgresses((currentProgresses) => {
             if (currentProgresses.every((p) => (p ?? 0) >= 1)) {
                 setIsComplete(true);
-                setCompletedTimestamp(timestamp);
-                onComplete?.();
+                setCompletedTimestamp((prev) => prev ? Math.min(prev, timestamp) : timestamp);
+                onCompleteRef.current?.();
             }
             return currentProgresses;
         });
-    }, [onComplete]);
-    // Submit JSON-RPC request
-    const submitRequest = useCallback((method, params, handler) => {
-        const ws = wsRef.current;
-        if (!ws || ws.readyState !== WebSocket.OPEN) {
+        // Fetch USD price if missing (matching Svelte: k_asset?.priceUsd())
+        if (asset && asset.priceUsd === undefined && fetchAssetPriceRef.current) {
+            fetchAssetPriceRef.current(asset.caip19).then((price) => {
+                if (typeof price === 'number' && price > 0) {
+                    setOutputs((prev) => {
+                        const newOutputs = [...prev];
+                        if (newOutputs[index]?.asset) {
+                            newOutputs[index] = {
+                                ...newOutputs[index],
+                                asset: { ...newOutputs[index].asset, priceUsd: price },
+                            };
+                        }
+                        return newOutputs;
+                    });
+                }
+            }).catch(() => { });
+        }
+    }, []);
+    // Apply full OrderStatus to state (and cache). Used for initial connect response and server pushes with no `type`.
+    // Never overwrite a more advanced state (e.g. FINALIZED) with a stale one (e.g. "Verifying deposit") when messages arrive out of order.
+    const applyFullOrderStatusToState = useCallback((status, cacheConn) => {
+        const current = orderStatusRef.current;
+        const currentFinalized = current && hasFinalizedOutput(current);
+        const incomingFinalized = hasFinalizedOutput(status);
+        if (currentFinalized && !incomingFinalized) {
+            return;
+        }
+        orderStatusRef.current = status;
+        if (cacheConn) {
+            cacheConn.initialStatus = status;
+        }
+        setOrderStatus(status);
+        if (status.deposit) {
+            setDeposit({
+                amount: status.deposit.amount,
+                timestamp: status.deposit.timestamp,
+                duration: status.deposit.duration,
+                orderId: status.deposit.orderId,
+                tx: status.deposit.tx,
+            });
+        }
+        const numOutputs = status.outputs?.length ?? 1;
+        setProgresses(new Array(numOutputs).fill(undefined));
+        setStatusTexts(new Array(numOutputs).fill('Connecting'));
+        status.outputs?.forEach((output, index) => {
+            const outputAsset = output.output ?? (output.asset ? {
+                caip19: output.asset,
+                amount: output.value || '0',
+                decimals: 0,
+            } : undefined);
+            setOutputs((prev) => {
+                const newOutputs = [...prev];
+                newOutputs[index] = {
+                    index,
+                    stage: output.stage,
+                    timestamp: output.timestamp,
+                    recipient: output.recipient,
+                    asset: outputAsset,
+                    txs: output.txs,
+                };
+                return newOutputs;
+            });
+            updateOutput(index, output.stage, output.timestamp, outputAsset);
+        });
+        onStatusUpdateRef.current?.(status);
+    }, [updateOutput]);
+    // Handle status updates from WebSocket — also caches in the connection for future subscribers
+    const handleStatusUpdate = useCallback((update) => {
+        // Cache the update so new subscribers get it immediately
+        cachedConnRef.current?.statusUpdates.push(update);
+        switch (update.type) {
+            case 'deposit': {
+                setDeposit({
+                    amount: update.data.amount,
+                    timestamp: update.data.timestamp,
+                    duration: update.data.duration,
+                    orderId: update.data.orderId,
+                    tx: update.data.tx,
+                });
+                break;
+            }
+            case 'stage': {
+                updateOutput(update.data.index, update.data.stage, update.data.timestamp, update.data.asset);
+                break;
+            }
+            case 'transaction': {
+                setOutputs((prev) => {
+                    const newOutputs = [...prev];
+                    if (newOutputs[update.data.index]) {
+                        const existingTxs = newOutputs[update.data.index].txs || {};
+                        newOutputs[update.data.index] = {
+                            ...newOutputs[update.data.index],
+                            txs: {
+                                ...existingTxs,
+                                [update.data.kind]: {
+                                    txId: update.data.txId,
+                                    chain: update.data.chain,
+                                },
+                            },
+                        };
+                    }
+                    return newOutputs;
+                });
+                break;
+            }
+            case 'error': {
+                const err = new Error(update.data.message || 'Order tracking error');
+                setError(err);
+                onErrorRef.current?.(err);
+                break;
+            }
+        }
+    }, [updateOutput]);
+    // Submit JSON-RPC request on the cached connection
+    const submitRequest = useCallback((conn, method, params, handler) => {
+        if (conn.ws.readyState !== WebSocket.OPEN) {
             console.warn('WebSocket not connected, cannot send request');
             return -1;
         }
-        const requestId = requestCounterRef.current++;
+        const requestId = conn.requestCounter++;
         const request = {
             jsonrpc: '2.0',
             id: requestId,
@@ -179,168 +357,172 @@ export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth:
             params,
         };
         if (handler) {
-            responseHandlersRef.current.set(requestId, handler);
+            conn.responseHandlers.set(requestId, handler);
         }
-        ws.send(JSON.stringify(request));
+        conn.ws.send(JSON.stringify(request));
         return requestId;
     }, []);
-    // Connect to WebSocket using JSON-RPC protocol (matching Svelte implementation)
+    // Connect to WebSocket — uses module-level singleton cache
     const connect = useCallback((orderId, auth) => {
-        orderIdRef.current = orderId;
-        authRef.current = auth;
-        setIsLoading(true);
-        setError(null);
-        isReconnectingRef.current = false;
-        // Clear any existing reconnection timeout
+        const key = getWsCacheKey(orderId, auth);
+        // Cancel any pending cleanup for this order (React Strict Mode recovery)
+        const pendingCleanup = pendingCleanups.get(key);
+        if (pendingCleanup) {
+            clearTimeout(pendingCleanup);
+            pendingCleanups.delete(key);
+        }
+        // Clear any pending reconnect timeout
         if (reconnectTimeoutRef.current) {
             clearTimeout(reconnectTimeoutRef.current);
             reconnectTimeoutRef.current = null;
         }
-        // Close existing connection
-        if (wsRef.current) {
-            wsRef.current.close();
-            wsRef.current = null;
-        }
-        // Clear response handlers
-        responseHandlersRef.current.clear();
-        requestCounterRef.current = 0;
-        // Reset reconnection attempts and delay for new connection
-        reconnectAttemptsRef.current = 0;
-        reconnectDelayRef.current = 1000;
-        // Get WebSocket URL (matching Svelte implementation)
-        // Use env var if available, otherwise use client baseUrl, otherwise construct from location
-        // IMPORTANT: URL should be just /websocket with NO path or query params
-        // Auth is sent via JSON-RPC connect method, not in URL
-        let wsUrl;
-        if (typeof window !== 'undefined' && window.__WEBSOCKET_URL__) {
-            // WebSocket URL from window (for runtime override)
-            wsUrl = window.__WEBSOCKET_URL__;
-        }
-        else if (client) {
-            // Use client baseUrl (convert http/https to ws/wss)
-            const baseUrl = client.baseUrl;
-            try {
-                const url = new URL(baseUrl);
-                const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
-                wsUrl = `${protocol}//${url.host}/websocket`;
+        orderIdRef.current = orderId;
+        authRef.current = auth;
+        // ── Singleton: reuse existing active connection for this order ──
+        const cached = wsCache.get(key);
+        if (cached && (cached.ws.readyState === WebSocket.OPEN || cached.ws.readyState === WebSocket.CONNECTING)) {
+            // Close any WS for a different order
+            if (wsRef.current && wsRef.current !== cached.ws) {
+                wsRef.current.close();
+            }
+            wsRef.current = cached.ws;
+            cachedConnRef.current = cached;
+            if (cached.ws.readyState === WebSocket.OPEN) {
+                setIsConnected(true);
+                setIsLoading(false);
             }
-            catch {
-                // If URL parsing fails, try simple string replacement
-                wsUrl = baseUrl.replace(/^https?:\/\//, 'wss://').replace(/^http:\/\//, 'ws://') + '/websocket';
+            else {
+                setIsLoading(true);
             }
+            // Hydrate React state from cached data so new subscribers skip skeletons
+            if (cached.initialStatus) {
+                const status = cached.initialStatus;
+                orderStatusRef.current = status;
+                setOrderStatus(status);
+                if (status.deposit) {
+                    setDeposit({
+                        amount: status.deposit.amount,
+                        timestamp: status.deposit.timestamp,
+                        duration: status.deposit.duration,
+                        orderId: status.deposit.orderId,
+                        tx: status.deposit.tx,
+                    });
+                }
+                const numOutputs = status.outputs?.length ?? 1;
+                setProgresses(new Array(numOutputs).fill(undefined));
+                setStatusTexts(new Array(numOutputs).fill('Connecting'));
+                status.outputs?.forEach((output, index) => {
+                    // Use resolved output.output if available, otherwise construct from top-level fields
+                    // At early stages (INIT), output.output is undefined but asset/value are present
+                    const outputAsset = output.output ?? (output.asset ? {
+                        caip19: output.asset,
+                        amount: output.value || '0',
+                        decimals: 0,
+                    } : undefined);
+                    setOutputs((prev) => {
+                        const newOutputs = [...prev];
+                        newOutputs[index] = {
+                            index,
+                            stage: output.stage,
+                            timestamp: output.timestamp,
+                            recipient: output.recipient,
+                            asset: outputAsset,
+                            txs: output.txs,
+                        };
+                        return newOutputs;
+                    });
+                    updateOutput(index, output.stage, output.timestamp, outputAsset);
+                });
+                // Replay any status updates that arrived after the initial connect
+                for (const update of cached.statusUpdates) {
+                    handleStatusUpdate(update);
+                }
+                onStatusUpdateRef.current?.(status);
+            }
+            return;
         }
-        else if (typeof window !== 'undefined') {
-            // Construct from current location
-            wsUrl = `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/websocket`;
-        }
-        else {
-            wsUrl = 'ws://localhost/websocket';
-        }
-        // Ensure URL doesn't have any path or query params (just /websocket)
-        // This is critical: the WebSocket URL must be exactly: wss://domain/websocket (no params)
-        try {
-            const url = new URL(wsUrl);
-            // Force protocol to ws/wss (remove any existing path/query)
-            const protocol = url.protocol === 'https:' || url.protocol === 'wss:' ? 'wss:' : 'ws:';
-            // Reconstruct URL with only host and /websocket path
-            wsUrl = `${protocol}//${url.host}/websocket`;
-        }
-        catch {
-            // If URL parsing fails, try to clean it manually
-            // Remove any query params, hash, or extra paths
-            wsUrl = wsUrl.split('?')[0].split('#')[0].replace(/\/+$/, '') + '/websocket';
+        // ── No active connection — create new WebSocket ──
+        // Close any existing WS for a different order
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
         }
+        // Remove stale cache entry
+        wsCache.delete(key);
+        // So first response for this order is not skipped (ref may still hold previous order's finalized state)
+        orderStatusRef.current = null;
+        setIsLoading(true);
+        setError(null);
+        const wsUrl = buildWsUrl(clientRef.current);
         try {
             const ws = new WebSocket(wsUrl);
+            // Create cached connection entry
+            const conn = {
+                ws,
+                orderId,
+                auth,
+                requestCounter: 0,
+                responseHandlers: new Map(),
+                lastReceived: 0,
+                reconnectTimeout: null,
+                initialStatus: null,
+                statusUpdates: [],
+            };
+            wsCache.set(key, conn);
             wsRef.current = ws;
+            cachedConnRef.current = conn;
             ws.onopen = () => {
-                lastReceivedRef.current = Date.now();
+                conn.lastReceived = Date.now();
                 setIsConnected(true);
                 setIsLoading(false);
-                isReconnectingRef.current = false;
-                // Reset reconnection attempts on successful connection
-                reconnectAttemptsRef.current = 0;
-                reconnectDelayRef.current = 1000;
                 // Send connect JSON-RPC request (matching Svelte)
-                const connectRequestId = submitRequest('connect', {
+                const connectRequestId = submitRequest(conn, 'connect', {
                     auth: {
                         orderId,
                         viewingAuth: auth,
                     },
-                }, (error, result) => {
-                    if (error) {
-                        const err = new Error(error.message || 'Connection error');
+                }, (rpcError, result) => {
+                    if (rpcError) {
+                        const err = new Error(rpcError.message || 'Connection error');
                         setError(err);
                         setIsLoading(false);
-                        onError?.(err);
+                        onErrorRef.current?.(err);
                         return;
                     }
-                    // Handle connected response
+                    // Handle connected response — cache for future subscribers
                     const status = result;
-                    setOrderStatus(status);
-                    if (status.deposit) {
-                        setDeposit({
-                            amount: status.deposit.amount,
-                            timestamp: status.deposit.timestamp,
-                            duration: status.deposit.duration,
-                            orderId: status.deposit.orderId,
-                            tx: status.deposit.tx,
-                        });
-                    }
-                    // Initialize outputs
-                    const numOutputs = status.outputs?.length ?? 1;
-                    setProgresses(new Array(numOutputs).fill(undefined));
-                    setStatusTexts(new Array(numOutputs).fill('Connecting'));
-                    // Process initial output statuses
-                    status.outputs?.forEach((output, index) => {
-                        // Set output with recipient information (matching Svelte)
-                        setOutputs((prev) => {
-                            const newOutputs = [...prev];
-                            newOutputs[index] = {
-                                index,
-                                stage: output.stage,
-                                timestamp: output.timestamp,
-                                recipient: output.recipient,
-                                asset: output.output,
-                                txs: output.txs,
-                            };
-                            return newOutputs;
-                        });
-                        // Update progress and status
-                        updateOutput(index, output.stage, output.timestamp, output.output);
-                    });
-                    // Register status handler for subsequent updates (matching Svelte pattern)
-                    // Status updates come as responses to the same request ID
+                    conn.statusUpdates = [];
+                    applyFullOrderStatusToState(status, conn);
+                    // Register status handler for subsequent updates (matching Svelte pattern).
+                    // Server may push full status (priority, outputs, metadata) with no `type` — treat as OrderStatus.
                     if (connectRequestId >= 0) {
-                        responseHandlersRef.current.set(connectRequestId, (statusError, statusResult) => {
+                        conn.responseHandlers.set(connectRequestId, (statusError, statusResult) => {
                             if (statusError) {
                                 const err = new Error(statusError.message || 'Status error');
                                 setError(err);
-                                onError?.(err);
+                                onErrorRef.current?.(err);
+                                return;
+                            }
+                            if (isFullOrderStatus(statusResult)) {
+                                applyFullOrderStatusToState(statusResult, conn);
                                 return;
                             }
-                            // Handle status update
-                            const update = statusResult;
-                            handleStatusUpdate(update);
+                            handleStatusUpdate(statusResult);
                         });
                     }
-                    onStatusUpdate?.(status);
+                    onStatusUpdateRef.current?.(status);
                 });
             };
             ws.onmessage = (event) => {
-                lastReceivedRef.current = Date.now();
+                conn.lastReceived = Date.now();
                 try {
                     const response = JSON.parse(event.data);
-                    // Validate JSON-RPC response
                     if (response.jsonrpc !== '2.0' || typeof response.id !== 'number') {
                         return;
                     }
-                    // Get handler(s) for this request ID (matching Svelte pattern)
-                    // Status updates come as multiple responses to the same request ID
-                    // So we DON'T delete the handler - it stays registered for subsequent updates
-                    const handler = responseHandlersRef.current.get(response.id);
+                    // Status updates reuse the same request ID — don't delete handler
+                    const handler = conn.responseHandlers.get(response.id);
                     if (handler) {
-                        // Call handler but DON'T delete it - status updates reuse the same request ID
                         handler(response.error, response.result);
                     }
                 }
@@ -348,161 +530,88 @@ export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth:
                     console.warn('Failed to parse WebSocket message:', parseError);
                 }
             };
-            ws.onerror = (event) => {
-                const err = new Error('WebSocket connection error');
-                setError(err);
+            ws.onerror = () => {
+                setError(new Error('WebSocket connection error'));
                 setIsLoading(false);
-                // Don't call onError here to prevent infinite error logging
-                // The error will be handled by onclose reconnection logic
             };
-            ws.onclose = async () => {
+            // Reconnection on close (matching Svelte ws_order_subscribe):
+            // Always reconnect if still tracking, 5s delay if idle >90s
+            ws.onclose = () => {
+                // Remove from cache (stale)
+                if (wsCache.get(key)?.ws === ws) {
+                    wsCache.delete(key);
+                }
+                // If this WS was replaced by a new one, don't reconnect
+                if (wsRef.current !== ws)
+                    return;
                 setIsConnected(false);
-                responseHandlersRef.current.clear();
-                // Automatic reconnection with retry limit and exponential backoff
-                // Only reconnect if we still have valid orderId/auth and we're not already reconnecting
-                // Also check that the orderId/auth matches what we're supposed to be tracking
-                if (orderIdRef.current &&
-                    authRef.current &&
-                    !isReconnectingRef.current &&
-                    orderIdRef.current === lastConnectedOrderIdRef.current &&
-                    authRef.current === lastConnectedAuthRef.current) {
-                    // Check if we've exceeded max reconnection attempts
-                    if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
-                        const err = new Error(`WebSocket connection failed after ${maxReconnectAttempts} attempts`);
-                        setError(err);
-                        setIsLoading(false);
-                        onError?.(err);
-                        // Reset attempts after a longer delay (30 seconds) to allow retry later
+                conn.responseHandlers.clear();
+                conn.initialStatus = null;
+                conn.statusUpdates = [];
+                // Reconnect if still tracking this order (matching Svelte)
+                if (orderIdRef.current === orderId && authRef.current === auth) {
+                    const idle = Date.now() - conn.lastReceived > 90_000;
+                    if (idle) {
                         reconnectTimeoutRef.current = setTimeout(() => {
-                            reconnectAttemptsRef.current = 0;
-                            reconnectDelayRef.current = 1000;
-                        }, 30000);
-                        return;
+                            if (orderIdRef.current === orderId && authRef.current === auth) {
+                                connect(orderId, auth);
+                            }
+                        }, 5000);
+                    }
+                    else {
+                        connect(orderId, auth);
                     }
-                    isReconnectingRef.current = true;
-                    reconnectAttemptsRef.current += 1;
-                    // Exponential backoff: delay increases with each attempt (1s, 2s, 4s, 8s, 16s)
-                    const currentDelay = reconnectDelayRef.current;
-                    reconnectDelayRef.current = Math.min(currentDelay * 2, 30000); // Cap at 30 seconds
-                    // If last received was a while ago, add extra delay
-                    const timeSinceLastReceived = Date.now() - lastReceivedRef.current;
-                    const extraDelay = timeSinceLastReceived > 90000 ? 5000 : 0;
-                    const totalDelay = currentDelay + extraDelay;
-                    reconnectTimeoutRef.current = setTimeout(() => {
-                        // Double-check that orderId/auth still match before reconnecting
-                        if (orderIdRef.current &&
-                            authRef.current &&
-                            orderIdRef.current === lastConnectedOrderIdRef.current &&
-                            authRef.current === lastConnectedAuthRef.current) {
-                            isReconnectingRef.current = false; // Reset before connecting
-                            connect(orderIdRef.current, authRef.current);
-                        }
-                        else {
-                            // Order changed, don't reconnect
-                            isReconnectingRef.current = false;
-                            reconnectAttemptsRef.current = 0;
-                            reconnectDelayRef.current = 1000;
-                        }
-                    }, totalDelay);
                 }
             };
         }
         catch (err) {
-            const error = err instanceof Error ? err : new Error('Failed to connect to order tracking');
-            setError(error);
+            const connectError = err instanceof Error ? err : new Error('Failed to connect to order tracking');
+            setError(connectError);
             setIsLoading(false);
-            onError?.(error);
+            onErrorRef.current?.(connectError);
         }
-    }, [submitRequest, updateOutput, onStatusUpdate, onError]);
-    // Handle status updates
-    const handleStatusUpdate = useCallback((update) => {
-        switch (update.type) {
-            case 'deposit': {
-                setDeposit({
-                    amount: update.data.amount,
-                    timestamp: update.data.timestamp,
-                    duration: update.data.duration,
-                    orderId: update.data.orderId,
-                    tx: update.data.tx,
-                });
-                break;
-            }
-            case 'stage': {
-                updateOutput(update.data.index, update.data.stage, update.data.timestamp, update.data.asset);
-                break;
-            }
-            case 'transaction': {
-                setOutputs((prev) => {
-                    const newOutputs = [...prev];
-                    if (newOutputs[update.data.index]) {
-                        const existingTxs = newOutputs[update.data.index].txs || {};
-                        newOutputs[update.data.index] = {
-                            ...newOutputs[update.data.index],
-                            txs: {
-                                ...existingTxs,
-                                [update.data.kind]: {
-                                    txId: update.data.txId,
-                                    chain: update.data.chain,
-                                },
-                            },
-                        };
-                    }
-                    return newOutputs;
-                });
-                break;
-            }
-            case 'error': {
-                const err = new Error(update.data.message || 'Order tracking error');
-                setError(err);
-                onError?.(err);
-                break;
-            }
-        }
-    }, [updateOutput, onError]);
-    // Disconnect from WebSocket
+    }, [submitRequest, updateOutput, handleStatusUpdate, applyFullOrderStatusToState]);
+    // Disconnect — schedules delayed cleanup so WS survives React Strict Mode re-mount
     const disconnect = useCallback(() => {
-        // Clear reconnection timeout
+        // Clear any pending reconnect timeout
         if (reconnectTimeoutRef.current) {
             clearTimeout(reconnectTimeoutRef.current);
             reconnectTimeoutRef.current = null;
         }
-        isReconnectingRef.current = true; // Prevent reconnection
+        const orderId = orderIdRef.current;
+        const auth = authRef.current;
+        // Clear tracked order so onclose won't reconnect
         orderIdRef.current = undefined;
         authRef.current = undefined;
-        if (wsRef.current) {
-            wsRef.current.close();
-            wsRef.current = null;
+        orderStatusRef.current = null;
+        const ws = wsRef.current;
+        wsRef.current = null;
+        cachedConnRef.current = null;
+        // Schedule delayed cleanup — if connect() is called quickly (Strict Mode),
+        // it will cancel this timeout and reuse the cached WS
+        if (ws && orderId && auth) {
+            const key = getWsCacheKey(orderId, auth);
+            pendingCleanups.set(key, setTimeout(() => {
+                pendingCleanups.delete(key);
+                // Only close if still in cache (wasn't reclaimed by a new connect)
+                if (wsCache.get(key)?.ws === ws) {
+                    wsCache.delete(key);
+                    ws.close();
+                }
+            }, 500));
         }
-        responseHandlersRef.current.clear();
         setIsConnected(false);
     }, []);
-    // Auto-connect if orderId and auth are provided
+    // Auto-connect when orderId/auth are provided
+    // connect and disconnect have stable identities (all deps are stable)
     useEffect(() => {
-        // Only connect if orderId/auth changed or if not yet connected
-        // Also check if we're already connected to the same orderId/auth to prevent reconnection
-        const shouldConnect = initialOrderId &&
-            initialAuth &&
-            client &&
-            (lastConnectedOrderIdRef.current !== initialOrderId || lastConnectedAuthRef.current !== initialAuth) &&
-            !isReconnectingRef.current &&
-            (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED);
-        if (shouldConnect) {
-            lastConnectedOrderIdRef.current = initialOrderId;
-            lastConnectedAuthRef.current = initialAuth;
+        if (initialOrderId && initialAuth && clientRef.current) {
             connect(initialOrderId, initialAuth);
         }
         return () => {
-            // Only disconnect if we're actually disconnecting (orderId/auth cleared)
-            if (!initialOrderId || !initialAuth) {
-                lastConnectedOrderIdRef.current = undefined;
-                lastConnectedAuthRef.current = undefined;
-                disconnect();
-            }
+            disconnect();
         };
-        // Only depend on initialOrderId, initialAuth, and client
-        // Don't include connect/disconnect to prevent infinite loops
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialOrderId, initialAuth, client]);
+    }, [initialOrderId, initialAuth, connect, disconnect]);
     return {
         // State
         isConnected,