@silentswap/react 0.0.79 → 0.0.81

package/dist/hooks/silent/useOrderTracking.js

@@ -1,632 +1,47 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
 /**
- * Output stage enum matching Svelte's OutputStage (string values)
- */
-export var OutputStage;
-(function (OutputStage) {
-    OutputStage["NONE"] = "NONE";
-    OutputStage["INIT"] = "INIT";
-    OutputStage["FUNDED"] = "FUNDED";
-    OutputStage["REDEEMED"] = "REDEEMED";
-    OutputStage["IBC_SENT"] = "IBC_SENT";
-    OutputStage["IBC_RCVD"] = "IBC_RCVD";
-    OutputStage["BRIDGE_SENT"] = "BRIDGE_SENT";
-    OutputStage["BRIDGE_CFRM"] = "BRIDGE_CFRM";
-    OutputStage["BRIDGE_RCVD"] = "BRIDGE_RCVD";
-    OutputStage["SWAP_USDC_GAS"] = "SWAP_USDC_GAS";
-    OutputStage["SWAP_USDC_TRG"] = "SWAP_USDC_TRG";
-    OutputStage["LTRL_TRG_SENT"] = "LTRL_TRG_SENT";
-    OutputStage["LTRL_TRG_RCVD"] = "LTRL_TRG_RCVD";
-    OutputStage["SWAP_TRG_DST"] = "SWAP_TRG_DST";
-    OutputStage["XFER_TRG_DST"] = "XFER_TRG_DST";
-    OutputStage["REFUND_NATIVE"] = "REFUND_NATIVE";
-    OutputStage["FINALIZED"] = "FINALIZED";
-})(OutputStage || (OutputStage = {}));
-/**
- * Get human-readable status text from output stage
- */
-export function getStatusTextFromStage(stage) {
-    switch (stage) {
-        case OutputStage.NONE:
-            return 'Uncertain state';
-        case OutputStage.INIT:
-            return 'Verifying deposit';
-        case OutputStage.FUNDED:
-            return 'Initializing';
-        case OutputStage.REDEEMED:
-            return 'Anonymizing';
-        case OutputStage.IBC_SENT:
-            return 'Moving';
-        case OutputStage.IBC_RCVD:
-            return 'Staging';
-        case OutputStage.BRIDGE_SENT:
-        case OutputStage.BRIDGE_CFRM:
-        case OutputStage.BRIDGE_RCVD:
-            return 'Bridging';
-        case OutputStage.SWAP_USDC_GAS:
-            return 'Fueling';
-        case OutputStage.SWAP_USDC_TRG:
-            return 'Swapping';
-        case OutputStage.LTRL_TRG_SENT:
-        case OutputStage.LTRL_TRG_RCVD:
-        case OutputStage.SWAP_TRG_DST:
-            return 'Finalizing';
-        case OutputStage.XFER_TRG_DST:
-        case OutputStage.REFUND_NATIVE:
-        case OutputStage.FINALIZED:
-            return 'Complete';
-        default:
-            return 'Processing';
-    }
-}
-/**
- * Get progress value (0-1) from output stage
- */
-export function getProgressFromStage(stage) {
-    switch (stage) {
-        case OutputStage.NONE:
-            return 0;
-        case OutputStage.INIT:
-            return 0;
-        case OutputStage.FUNDED:
-            return 0.1;
-        case OutputStage.REDEEMED:
-            return 0.15;
-        case OutputStage.IBC_SENT:
-            return 0.25;
-        case OutputStage.IBC_RCVD:
-            return 0.35;
-        case OutputStage.BRIDGE_SENT:
-            return 0.5;
-        case OutputStage.BRIDGE_CFRM:
-            return 0.6;
-        case OutputStage.BRIDGE_RCVD:
-            return 0.7;
-        case OutputStage.SWAP_USDC_GAS:
-            return 0.8;
-        case OutputStage.SWAP_USDC_TRG:
-            return 0.9;
-        case OutputStage.LTRL_TRG_SENT:
-        case OutputStage.LTRL_TRG_RCVD:
-        case OutputStage.SWAP_TRG_DST:
-            return 0.95;
-        case OutputStage.XFER_TRG_DST:
-        case OutputStage.REFUND_NATIVE:
-        case OutputStage.FINALIZED:
-            return 1;
-        default:
-            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.
+ * Order tracking via WebSocket — state and connections live in OrdersContext.
+ * This hook subscribes to tracking for (orderId, auth) and returns the state from context.
  */
+import { useEffect, useMemo } from 'react';
+import { useOrdersContext } from '../../contexts/OrdersContext.js';
+import { getOrderTrackingCacheKey, getStatusTextFromStage, getProgressFromStage, DEFAULT_ORDER_TRACKING_STATE, } from '../../contexts/orderTrackingTypes.js';
+// Re-export types and helpers for consumers
+export { OutputStage, getStatusTextFromStage, getProgressFromStage, getOrderTrackingCacheKey, } from '../../contexts/orderTrackingTypes.js';
 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);
-    const [orderStatus, setOrderStatus] = useState(null);
-    const [deposit, setDeposit] = useState(null);
-    const [outputs, setOutputs] = useState([]);
-    const [progresses, setProgresses] = useState([undefined]);
-    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(undefined);
-    const authRef = useRef(undefined);
-    const cachedConnRef = useRef(null);
-    const reconnectTimeoutRef = useRef(null);
-    /** 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);
-        const status = getStatusTextFromStage(stage);
-        setProgresses((prev) => {
-            const newProgresses = [...prev];
-            newProgresses[index] = progress;
-            return newProgresses;
-        });
-        setStatusTexts((prev) => {
-            const newTexts = [...prev];
-            newTexts[index] = status;
-            return newTexts;
-        });
-        setOutputs((prev) => {
-            const newOutputs = [...prev];
-            newOutputs[index] = {
-                ...newOutputs[index],
-                index,
-                stage,
-                timestamp,
-                ...(asset ? { asset } : {}),
-                ...(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((prev) => prev ? Math.min(prev, timestamp) : timestamp);
-                onCompleteRef.current?.();
-            }
-            return currentProgresses;
-        });
-        // 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 = conn.requestCounter++;
-        const request = {
-            jsonrpc: '2.0',
-            id: requestId,
-            method,
-            params,
-        };
-        if (handler) {
-            conn.responseHandlers.set(requestId, handler);
-        }
-        conn.ws.send(JSON.stringify(request));
-        return requestId;
-    }, []);
-    // Connect to WebSocket — uses module-level singleton cache
-    const connect = useCallback((orderId, auth) => {
-        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;
-        }
-        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);
-            }
-            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;
-        }
-        // ── 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 = () => {
-                conn.lastReceived = Date.now();
-                setIsConnected(true);
-                setIsLoading(false);
-                // Send connect JSON-RPC request (matching Svelte)
-                const connectRequestId = submitRequest(conn, 'connect', {
-                    auth: {
-                        orderId,
-                        viewingAuth: auth,
-                    },
-                }, (rpcError, result) => {
-                    if (rpcError) {
-                        const err = new Error(rpcError.message || 'Connection error');
-                        setError(err);
-                        setIsLoading(false);
-                        onErrorRef.current?.(err);
-                        return;
-                    }
-                    // Handle connected response — cache for future subscribers
-                    const status = result;
-                    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) {
-                        conn.responseHandlers.set(connectRequestId, (statusError, statusResult) => {
-                            if (statusError) {
-                                const err = new Error(statusError.message || 'Status error');
-                                setError(err);
-                                onErrorRef.current?.(err);
-                                return;
-                            }
-                            if (isFullOrderStatus(statusResult)) {
-                                applyFullOrderStatusToState(statusResult, conn);
-                                return;
-                            }
-                            handleStatusUpdate(statusResult);
-                        });
-                    }
-                    onStatusUpdateRef.current?.(status);
-                });
-            };
-            ws.onmessage = (event) => {
-                conn.lastReceived = Date.now();
-                try {
-                    const response = JSON.parse(event.data);
-                    if (response.jsonrpc !== '2.0' || typeof response.id !== 'number') {
-                        return;
-                    }
-                    // Status updates reuse the same request ID — don't delete handler
-                    const handler = conn.responseHandlers.get(response.id);
-                    if (handler) {
-                        handler(response.error, response.result);
-                    }
-                }
-                catch (parseError) {
-                    console.warn('Failed to parse WebSocket message:', parseError);
-                }
-            };
-            ws.onerror = () => {
-                setError(new Error('WebSocket connection error'));
-                setIsLoading(false);
-            };
-            // 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);
-                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(() => {
-                            if (orderIdRef.current === orderId && authRef.current === auth) {
-                                connect(orderId, auth);
-                            }
-                        }, 5000);
-                    }
-                    else {
-                        connect(orderId, auth);
-                    }
-                }
-            };
-        }
-        catch (err) {
-            const connectError = err instanceof Error ? err : new Error('Failed to connect to order tracking');
-            setError(connectError);
-            setIsLoading(false);
-            onErrorRef.current?.(connectError);
-        }
-    }, [submitRequest, updateOutput, handleStatusUpdate, applyFullOrderStatusToState]);
-    // Disconnect — schedules delayed cleanup so WS survives React Strict Mode re-mount
-    const disconnect = useCallback(() => {
-        // Clear any pending reconnect timeout
-        if (reconnectTimeoutRef.current) {
-            clearTimeout(reconnectTimeoutRef.current);
-            reconnectTimeoutRef.current = null;
-        }
-        const orderId = orderIdRef.current;
-        const auth = authRef.current;
-        // Clear tracked order so onclose won't reconnect
-        orderIdRef.current = undefined;
-        authRef.current = undefined;
-        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));
-        }
-        setIsConnected(false);
-    }, []);
-    // Auto-connect when orderId/auth are provided
-    // connect and disconnect have stable identities (all deps are stable)
+    const ctx = useOrdersContext();
+    const stableState = useMemo(() => {
+        const key = initialOrderId && initialAuth
+            ? getOrderTrackingCacheKey(initialOrderId, initialAuth)
+            : '';
+        const state = key ? ctx.getOrderTrackingState(initialOrderId, initialAuth) : null;
+        return state ?? DEFAULT_ORDER_TRACKING_STATE;
+    }, [initialOrderId, initialAuth, ctx]);
+    const options = useMemo(() => ({
+        client,
+        onStatusUpdate,
+        onError,
+        onComplete,
+        fetchAssetPrice,
+    }), [client, onStatusUpdate, onError, onComplete, fetchAssetPrice]);
+    const { connectOrderTracking, disconnectOrderTracking } = ctx;
     useEffect(() => {
-        if (initialOrderId && initialAuth && clientRef.current) {
-            connect(initialOrderId, initialAuth);
-        }
+        if (!initialOrderId || !initialAuth || !client)
+            return;
+        connectOrderTracking(initialOrderId, initialAuth, options);
         return () => {
-            disconnect();
+            disconnectOrderTracking(initialOrderId, initialAuth);
         };
-    }, [initialOrderId, initialAuth, connect, disconnect]);
+    }, [initialOrderId, initialAuth, client, options, connectOrderTracking, disconnectOrderTracking]);
     return {
-        // State
-        isConnected,
-        isLoading,
-        error,
-        orderStatus,
-        deposit,
-        outputs,
-        progresses,
-        statusTexts,
-        completedTimestamp,
-        isComplete,
-        // Methods
-        connect,
-        disconnect,
+        ...stableState,
+        connect: (orderId, auth) => {
+            ctx.connectOrderTracking(orderId, auth, options);
+        },
+        disconnect: () => {
+            if (initialOrderId && initialAuth) {
+                ctx.disconnectOrderTracking(initialOrderId, initialAuth);
+            }
+        },
         getStatusText: getStatusTextFromStage,
         getProgress: getProgressFromStage,
     };