@n1xyz/wallet-widget 0.0.22 → 0.0.25

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBook.js

@@ -1,209 +1,248 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+// DEPRECATED: This entire component has been deprecated due to errors
+// All code below has been commented out to prevent issues
+/*
 import { useEffect, useState } from 'react';
 import { useN1WalletContext } from '../../../../Provider/hooks';
 import OrderBookHeader from './OrderBookHeader';
 import OrderBookTable from './OrderBookTable';
 // Create a simple implementation for the missing OrderBookDepthVisualizer component
 import { RefreshCw } from 'lucide-react';
+
 // Simple implementation of OrderBookDepthVisualizer
-var OrderBookDepthVisualizer = function (_a) {
-    var data = _a.data, maxSize = _a.maxSize;
-    if (!data || data.bids.length === 0 || data.asks.length === 0) {
-        return null;
-    }
-    return (_jsxs("div", { className: "mt-3", children: [_jsx("h3", { className: "text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2", children: "Depth Chart" }), _jsx("div", { className: "w-full h-24 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm overflow-hidden flex items-center justify-center", children: _jsxs("div", { className: "relative w-full h-full", children: [_jsxs("div", { className: "absolute inset-0 flex", children: [_jsx("div", { className: "w-1/2 bg-gradient-to-r from-green-500/10 to-green-500/5" }), _jsx("div", { className: "w-1/2 bg-gradient-to-l from-red-500/10 to-red-500/5" })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-full w-px bg-n1-ww-gray-300 dark:bg-n1-ww-gray-600" }) })] }) })] }));
+const OrderBookDepthVisualizer = ({
+  data,
+  maxSize,
+}: {
+  data: {
+    bids: Array<[number, number]>;
+    asks: Array<[number, number]>;
+    timestamp: number;
+  } | null;
+  maxSize: number;
+}) => {
+  if (!data || data.bids.length === 0 || data.asks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-3">
+      <h3 className="text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2">
+        Depth Chart
+      </h3>
+      <div className="w-full h-24 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm overflow-hidden flex items-center justify-center">
+        <div className="relative w-full h-full">
+          <div className="absolute inset-0 flex">
+            <div className="w-1/2 bg-gradient-to-r from-green-500/10 to-green-500/5"></div>
+            <div className="w-1/2 bg-gradient-to-l from-red-500/10 to-red-500/5"></div>
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-full w-px bg-n1-ww-gray-300 dark:bg-n1-ww-gray-600"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
-export default function OrderBook(_a) {
-    var _this = this;
-    var marketSymbol = _a.marketSymbol;
-    var nord = useN1WalletContext().nord;
-    var _b = useState(null), orderBookData = _b[0], setOrderBookData = _b[1];
-    var _c = useState(false), loading = _c[0], setLoading = _c[1];
-    var _d = useState(null), error = _d[0], setError = _d[1];
-    var _e = useState(0.01), aggregationLevel = _e[0], setAggregationLevel = _e[1];
-    // Fetch orderbook data when market changes
-    useEffect(function () {
-        if (!marketSymbol || !nord)
-            return;
-        var subscription = null;
-        var fetchOrderBook = function () { return __awaiter(_this, void 0, void 0, function () {
-            var orderbook, bids, asks, err_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        setError(null);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, nord.getOrderbook({ symbol: marketSymbol })];
-                    case 2:
-                        orderbook = _a.sent();
-                        bids = Array.isArray(orderbook.bids[0])
-                            ? orderbook.bids
-                            : orderbook.bids.map(function (entry) { return [
-                                entry.price,
-                                entry.size,
-                            ]; });
-                        asks = Array.isArray(orderbook.asks[0])
-                            ? orderbook.asks
-                            : orderbook.asks.map(function (entry) { return [
-                                entry.price,
-                                entry.size,
-                            ]; });
-                        setOrderBookData({
-                            bids: bids,
-                            asks: asks,
-                            timestamp: Date.now(),
-                        });
-                        // Subscribe to real-time updates
-                        subscription = nord.subscribeOrderbook(marketSymbol);
-                        subscription.on('update', function (update) {
-                            setOrderBookData(function (prev) {
-                                if (!prev)
-                                    return update;
-                                // Convert OrderbookEntry[] to [number, number][] if needed
-                                var updatedBids = update.bids
-                                    ? update.bids.map(function (entry) { return [
-                                        entry.price,
-                                        entry.size,
-                                    ]; })
-                                    : prev.bids;
-                                var updatedAsks = update.asks
-                                    ? update.asks.map(function (entry) { return [
-                                        entry.price,
-                                        entry.size,
-                                    ]; })
-                                    : prev.asks;
-                                return {
-                                    bids: updatedBids,
-                                    asks: updatedAsks,
-                                    timestamp: Date.now(),
-                                };
-                            });
-                        });
-                        return [3 /*break*/, 5];
-                    case 3:
-                        err_1 = _a.sent();
-                        console.error('Error fetching orderbook:', err_1);
-                        setError('Failed to load orderbook data');
-                        return [3 /*break*/, 5];
-                    case 4:
-                        setLoading(false);
-                        return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchOrderBook();
-        // Cleanup subscription on unmount or market change
-        return function () {
-            if (subscription) {
-                subscription.close();
-            }
-        };
-    }, [marketSymbol, nord]);
-    // Aggregate orderbook data based on aggregation level
-    var aggregateOrderBook = function (data, level) {
-        if (!data)
-            return null;
-        var aggregatedBids = {};
-        var aggregatedAsks = {};
-        // Aggregate bids
-        data.bids.forEach(function (_a) {
-            var price = _a[0], size = _a[1];
-            var aggregatedPrice = Math.floor(price / level) * level;
-            aggregatedBids[aggregatedPrice] =
-                (aggregatedBids[aggregatedPrice] || 0) + size;
+
+interface OrderBookProps {
+  marketSymbol: string | null;
+  marketId?: number;
+}
+
+interface OrderBookData {
+  bids: Array<[number, number]>; // [price, size]
+  asks: Array<[number, number]>; // [price, size]
+  timestamp: number;
+}
+
+// Define the OrderbookEntry interface to match the API response
+interface OrderbookEntry {
+  price: number;
+  size: number;
+}
+
+export default function OrderBook({ marketSymbol, marketId }: OrderBookProps) {
+  const { nord } = useN1WalletContext();
+  const [orderBookData, setOrderBookData] = useState<OrderBookData | null>(
+    null
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [aggregationLevel, setAggregationLevel] = useState<number>(0.01);
+
+  // Fetch orderbook data when market changes
+  useEffect(() => {
+    if (!marketSymbol || !nord) return;
+
+    let subscription: any = null;
+
+    const fetchOrderBook = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Initial fetch
+        const orderbook = await nord.getOrderbook({ symbol: marketSymbol });
+
+        // The API now returns bids and asks directly as arrays of [price, size] pairs
+        // instead of OrderbookEntry objects
+        const bids: Array<[number, number]> = Array.isArray(orderbook.bids[0])
+          ? (orderbook.bids as unknown as Array<[number, number]>)
+          : orderbook.bids.map((entry: OrderbookEntry) => [
+              entry.price,
+              entry.size,
+          ]);
+
+        const asks: Array<[number, number]> = Array.isArray(orderbook.asks[0])
+          ? (orderbook.asks as unknown as Array<[number, number]>)
+          : orderbook.asks.map((entry: OrderbookEntry) => [
+              entry.price,
+              entry.size,
+            ]);
+
+        setOrderBookData({
+          bids,
+          asks,
+          timestamp: Date.now(),
         });
-        // Aggregate asks
-        data.asks.forEach(function (_a) {
-            var price = _a[0], size = _a[1];
-            var aggregatedPrice = Math.ceil(price / level) * level;
-            aggregatedAsks[aggregatedPrice] =
-                (aggregatedAsks[aggregatedPrice] || 0) + size;
+
+        // Subscribe to real-time updates
+        subscription = nord.subscribeOrderbook(marketSymbol);
+        subscription.on('update', (update: any) => {
+          setOrderBookData((prev) => {
+            if (!prev) return update;
+
+            // Convert OrderbookEntry[] to [number, number][] if needed
+            const updatedBids = update.bids
+              ? update.bids.map((entry: OrderbookEntry) => [
+                  entry.price,
+                  entry.size,
+                ])
+              : prev.bids;
+
+            const updatedAsks = update.asks
+              ? update.asks.map((entry: OrderbookEntry) => [
+                  entry.price,
+                  entry.size,
+                ])
+              : prev.asks;
+
+            return {
+              bids: updatedBids,
+              asks: updatedAsks,
+              timestamp: Date.now(),
+            };
+          });
         });
-        // Convert back to arrays and sort
-        var bids = Object.entries(aggregatedBids)
-            .map(function (_a) {
-            var price = _a[0], size = _a[1];
-            return [parseFloat(price), size];
-        })
-            .sort(function (a, b) { return b[0] - a[0]; });
-        var asks = Object.entries(aggregatedAsks)
-            .map(function (_a) {
-            var price = _a[0], size = _a[1];
-            return [parseFloat(price), size];
-        })
-            .sort(function (a, b) { return a[0] - b[0]; });
-        return {
-            bids: bids,
-            asks: asks,
-            timestamp: data.timestamp,
-        };
+      } catch (err) {
+        console.error('Error fetching orderbook:', err);
+        setError('Failed to load orderbook data');
+      } finally {
+        setLoading(false);
+      }
     };
-    var aggregatedData = aggregateOrderBook(orderBookData, aggregationLevel);
-    // Calculate max size for depth visualization
-    var calculateMaxSize = function (data) {
-        if (!data)
-            return 0;
-        var bidSizes = data.bids.map(function (_a) {
-            var _ = _a[0], size = _a[1];
-            return size;
-        });
-        var askSizes = data.asks.map(function (_a) {
-            var _ = _a[0], size = _a[1];
-            return size;
-        });
-        var allSizes = __spreadArray(__spreadArray([], bidSizes, true), askSizes, true);
-        return Math.max.apply(Math, __spreadArray(__spreadArray([], allSizes, false), [0], false));
+
+    fetchOrderBook();
+
+    // Cleanup subscription on unmount or market change
+    return () => {
+      if (subscription) {
+        subscription.close();
+      }
+    };
+  }, [marketSymbol, nord]);
+
+  // Aggregate orderbook data based on aggregation level
+  const aggregateOrderBook = (
+    data: OrderBookData | null,
+    level: number
+  ): OrderBookData | null => {
+    if (!data) return null;
+
+    const aggregatedBids: { [key: number]: number } = {};
+    const aggregatedAsks: { [key: number]: number } = {};
+
+    // Aggregate bids
+    data.bids.forEach(([price, size]) => {
+      const aggregatedPrice = Math.floor(price / level) * level;
+      aggregatedBids[aggregatedPrice] =
+        (aggregatedBids[aggregatedPrice] || 0) + size;
+    });
+
+    // Aggregate asks
+    data.asks.forEach(([price, size]) => {
+      const aggregatedPrice = Math.ceil(price / level) * level;
+      aggregatedAsks[aggregatedPrice] =
+        (aggregatedAsks[aggregatedPrice] || 0) + size;
+    });
+
+    // Convert back to arrays and sort
+    const bids = Object.entries(aggregatedBids)
+      .map(([price, size]) => [parseFloat(price), size])
+      .sort((a, b) => b[0] - a[0]) as Array<[number, number]>;
+
+    const asks = Object.entries(aggregatedAsks)
+      .map(([price, size]) => [parseFloat(price), size])
+      .sort((a, b) => a[0] - b[0]) as Array<[number, number]>;
+
+    return {
+      bids,
+      asks,
+      timestamp: data.timestamp,
     };
-    var maxSize = calculateMaxSize(aggregatedData);
-    return (_jsxs("div", { className: "p-4", children: [_jsx(OrderBookHeader, { marketSymbol: marketSymbol, aggregationLevel: aggregationLevel, onAggregationChange: setAggregationLevel }), error ? (_jsx("div", { className: "p-3 mt-3 border border-red-200 dark:border-red-900/30 rounded-sm text-red-600 dark:text-red-400 text-xs", children: error })) : loading && !orderBookData ? (_jsx("div", { className: "flex items-center justify-center h-40 mt-3", children: _jsx(RefreshCw, { size: 24, className: "text-n1-ww-main n1-animate-spin" }) })) : !marketSymbol ? (_jsx("div", { className: "p-3 mt-3 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-xs", children: "Select a market to view orderbook" })) : (_jsx("div", { className: "mt-3", children: _jsxs("div", { className: "flex flex-col", children: [_jsx(OrderBookTable, { data: aggregatedData, loading: loading, maxSize: maxSize }), _jsx(OrderBookDepthVisualizer, { data: aggregatedData, maxSize: maxSize })] }) }))] }));
+  };
+
+  const aggregatedData = aggregateOrderBook(orderBookData, aggregationLevel);
+
+  // Calculate max size for depth visualization
+  const calculateMaxSize = (data: OrderBookData | null): number => {
+    if (!data) return 0;
+
+    const bidSizes = data.bids.map(([_, size]) => size);
+    const askSizes = data.asks.map(([_, size]) => size);
+    const allSizes = [...bidSizes, ...askSizes];
+
+    return Math.max(...allSizes, 0);
+  };
+
+  const maxSize = calculateMaxSize(aggregatedData);
+
+  return (
+    <div className="p-4">
+      <OrderBookHeader
+        marketSymbol={marketSymbol}
+        aggregationLevel={aggregationLevel}
+        onAggregationChange={setAggregationLevel}
+      />
+
+      {error ? (
+        <div className="p-3 mt-3 border border-red-200 dark:border-red-900/30 rounded-sm text-red-600 dark:text-red-400 text-xs">
+          {error}
+        </div>
+      ) : loading && !orderBookData ? (
+        <div className="flex items-center justify-center h-40 mt-3">
+          <RefreshCw size={24} className="text-n1-ww-main n1-animate-spin" />
+        </div>
+      ) : !marketSymbol ? (
+        <div className="p-3 mt-3 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-xs">
+          Select a market to view orderbook
+        </div>
+      ) : (
+        <div className="mt-3">
+          <div className="flex flex-col">
+            <OrderBookTable
+              data={aggregatedData}
+              loading={loading}
+              maxSize={maxSize}
+            />
+
+            <OrderBookDepthVisualizer data={aggregatedData} maxSize={maxSize} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
+*/ 
 //# sourceMappingURL=OrderBook.js.map

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBook.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderBook.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBook.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,oFAAoF;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,oDAAoD;AACpD,IAAM,wBAAwB,GAAG,UAAC,EAUjC;QATC,IAAI,UAAA,EACJ,OAAO,aAAA;IASP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,MAAM,aACnB,aAAI,SAAS,EAAC,uEAAuE,4BAEhF,EACL,cAAK,SAAS,EAAC,iIAAiI,YAC9I,eAAK,SAAS,EAAC,wBAAwB,aAErC,eAAK,SAAS,EAAC,uBAAuB,aACpC,cAAK,SAAS,EAAC,yDAAyD,GAAO,EAC/E,cAAK,SAAS,EAAC,qDAAqD,GAAO,IACvE,EACN,cAAK,SAAS,EAAC,mDAAmD,YAChE,cAAK,SAAS,EAAC,sDAAsD,GAAO,GACxE,IACF,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAkBF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgC;IAAlE,iBAqLC;QArLmC,YAAY,kBAAA;IACtC,IAAA,IAAI,GAAK,kBAAkB,EAAE,KAAzB,CAA0B;IAChC,IAAA,KAAoC,QAAQ,CAChD,IAAI,CACL,EAFM,aAAa,QAAA,EAAE,gBAAgB,QAErC,CAAC;IACI,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAoB,QAAQ,CAAgB,IAAI,CAAC,EAAhD,KAAK,QAAA,EAAE,QAAQ,QAAiC,CAAC;IAClD,IAAA,KAA0C,QAAQ,CAAS,IAAI,CAAC,EAA/D,gBAAgB,QAAA,EAAE,mBAAmB,QAA0B,CAAC;IAEvE,2CAA2C;IAC3C,SAAS,CAAC;QACR,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI;YAAE,OAAO;QAEnC,IAAI,YAAY,GAAQ,IAAI,CAAC;QAE7B,IAAM,cAAc,GAAG;;;;;wBACrB,UAAU,CAAC,IAAI,CAAC,CAAC;wBACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;;;;wBAIK,qBAAM,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,EAAA;;wBAA7D,SAAS,GAAG,SAAiD;wBAI7D,IAAI,GAA4B,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;4BACpE,CAAC,CAAE,SAAS,CAAC,IAA2C;4BACxD,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,KAAqB,IAAK,OAAA;gCAC5C,KAAK,CAAC,KAAK;gCACX,KAAK,CAAC,IAAI;6BACX,EAH6C,CAG7C,CAAC,CAAC;wBAED,IAAI,GAA4B,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;4BACpE,CAAC,CAAE,SAAS,CAAC,IAA2C;4BACxD,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,KAAqB,IAAK,OAAA;gCAC5C,KAAK,CAAC,KAAK;gCACX,KAAK,CAAC,IAAI;6BACX,EAH6C,CAG7C,CAAC,CAAC;wBAEP,gBAAgB,CAAC;4BACf,IAAI,MAAA;4BACJ,IAAI,MAAA;4BACJ,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;yBACtB,CAAC,CAAC;wBAEH,iCAAiC;wBACjC,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;wBACrD,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAC,MAAW;4BACpC,gBAAgB,CAAC,UAAC,IAAI;gCACpB,IAAI,CAAC,IAAI;oCAAE,OAAO,MAAM,CAAC;gCAEzB,2DAA2D;gCAC3D,IAAM,WAAW,GAAG,MAAM,CAAC,IAAI;oCAC7B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,KAAqB,IAAK,OAAA;wCACzC,KAAK,CAAC,KAAK;wCACX,KAAK,CAAC,IAAI;qCACX,EAH0C,CAG1C,CAAC;oCACJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;gCAEd,IAAM,WAAW,GAAG,MAAM,CAAC,IAAI;oCAC7B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,KAAqB,IAAK,OAAA;wCACzC,KAAK,CAAC,KAAK;wCACX,KAAK,CAAC,IAAI;qCACX,EAH0C,CAG1C,CAAC;oCACJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;gCAEd,OAAO;oCACL,IAAI,EAAE,WAAW;oCACjB,IAAI,EAAE,WAAW;oCACjB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;iCACtB,CAAC;4BACJ,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,CAAC;;;;wBAEH,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAG,CAAC,CAAC;wBAChD,QAAQ,CAAC,+BAA+B,CAAC,CAAC;;;wBAE1C,UAAU,CAAC,KAAK,CAAC,CAAC;;;;;aAErB,CAAC;QAEF,cAAc,EAAE,CAAC;QAEjB,mDAAmD;QACnD,OAAO;YACL,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,CAAC,KAAK,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IAEzB,sDAAsD;IACtD,IAAM,kBAAkB,GAAG,UACzB,IAA0B,EAC1B,KAAa;QAEb,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEvB,IAAM,cAAc,GAA8B,EAAE,CAAC;QACrD,IAAM,cAAc,GAA8B,EAAE,CAAC;QAErD,iBAAiB;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAC,EAAa;gBAAZ,KAAK,QAAA,EAAE,IAAI,QAAA;YAC7B,IAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;YAC1D,cAAc,CAAC,eAAe,CAAC;gBAC7B,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;QAClD,CAAC,CAAC,CAAC;QAEH,iBAAiB;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAC,EAAa;gBAAZ,KAAK,QAAA,EAAE,IAAI,QAAA;YAC7B,IAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;YACzD,cAAc,CAAC,eAAe,CAAC;gBAC7B,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;QAClD,CAAC,CAAC,CAAC;QAEH,kCAAkC;QAClC,IAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;aACxC,GAAG,CAAC,UAAC,EAAa;gBAAZ,KAAK,QAAA,EAAE,IAAI,QAAA;YAAM,OAAA,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;QAAzB,CAAyB,CAAC;aACjD,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAA4B,CAAC;QAE1D,IAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;aACxC,GAAG,CAAC,UAAC,EAAa;gBAAZ,KAAK,QAAA,EAAE,IAAI,QAAA;YAAM,OAAA,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;QAAzB,CAAyB,CAAC;aACjD,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAA4B,CAAC;QAE1D,OAAO;YACL,IAAI,MAAA;YACJ,IAAI,MAAA;YACJ,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG,kBAAkB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAE3E,6CAA6C;IAC7C,IAAM,gBAAgB,GAAG,UAAC,IAA0B;QAClD,IAAI,CAAC,IAAI;YAAE,OAAO,CAAC,CAAC;QAEpB,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,EAAS;gBAAR,CAAC,QAAA,EAAE,IAAI,QAAA;YAAM,OAAA,IAAI;QAAJ,CAAI,CAAC,CAAC;QACpD,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,EAAS;gBAAR,CAAC,QAAA,EAAE,IAAI,QAAA;YAAM,OAAA,IAAI;QAAJ,CAAI,CAAC,CAAC;QACpD,IAAM,QAAQ,mCAAO,QAAQ,SAAK,QAAQ,OAAC,CAAC;QAE5C,OAAO,IAAI,CAAC,GAAG,OAAR,IAAI,kCAAQ,QAAQ,WAAE,CAAC,WAAE;IAClC,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,KAAC,eAAe,IACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,GACxC,EAED,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,yGAAyG,YACrH,KAAK,GACF,CACP,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAC9B,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,iCAAiC,GAAG,GAC/D,CACP,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,cAAK,SAAS,EAAC,kIAAkI,kDAE3I,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,MAAM,YACnB,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAC,cAAc,IACb,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,EAEF,KAAC,wBAAwB,IAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,GAAI,IAChE,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useN1WalletContext } from '../../../../Provider/hooks';\nimport OrderBookHeader from './OrderBookHeader';\nimport OrderBookTable from './OrderBookTable';\n// Create a simple implementation for the missing OrderBookDepthVisualizer component\nimport { RefreshCw } from 'lucide-react';\n\n// Simple implementation of OrderBookDepthVisualizer\nconst OrderBookDepthVisualizer = ({\n  data,\n  maxSize,\n}: {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  maxSize: number;\n}) => {\n  if (!data || data.bids.length === 0 || data.asks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mt-3\">\n      <h3 className=\"text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2\">\n        Depth Chart\n      </h3>\n      <div className=\"w-full h-24 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm overflow-hidden flex items-center justify-center\">\n        <div className=\"relative w-full h-full\">\n          {/* Simple visualization with gradient backgrounds */}\n          <div className=\"absolute inset-0 flex\">\n            <div className=\"w-1/2 bg-gradient-to-r from-green-500/10 to-green-500/5\"></div>\n            <div className=\"w-1/2 bg-gradient-to-l from-red-500/10 to-red-500/5\"></div>\n          </div>\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"h-full w-px bg-n1-ww-gray-300 dark:bg-n1-ww-gray-600\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface OrderBookProps {\n  marketSymbol: string | null;\n}\n\ninterface OrderBookData {\n  bids: Array<[number, number]>; // [price, size]\n  asks: Array<[number, number]>; // [price, size]\n  timestamp: number;\n}\n\n// Define the OrderbookEntry interface to match the API response\ninterface OrderbookEntry {\n  price: number;\n  size: number;\n}\n\nexport default function OrderBook({ marketSymbol }: OrderBookProps) {\n  const { nord } = useN1WalletContext();\n  const [orderBookData, setOrderBookData] = useState<OrderBookData | null>(\n    null\n  );\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [aggregationLevel, setAggregationLevel] = useState<number>(0.01);\n\n  // Fetch orderbook data when market changes\n  useEffect(() => {\n    if (!marketSymbol || !nord) return;\n\n    let subscription: any = null;\n\n    const fetchOrderBook = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        // Initial fetch\n        const orderbook = await nord.getOrderbook({ symbol: marketSymbol });\n\n        // The API now returns bids and asks directly as arrays of [price, size] pairs\n        // instead of OrderbookEntry objects\n        const bids: Array<[number, number]> = Array.isArray(orderbook.bids[0])\n          ? (orderbook.bids as unknown as Array<[number, number]>)\n          : orderbook.bids.map((entry: OrderbookEntry) => [\n              entry.price,\n              entry.size,\n            ]);\n\n        const asks: Array<[number, number]> = Array.isArray(orderbook.asks[0])\n          ? (orderbook.asks as unknown as Array<[number, number]>)\n          : orderbook.asks.map((entry: OrderbookEntry) => [\n              entry.price,\n              entry.size,\n            ]);\n\n        setOrderBookData({\n          bids,\n          asks,\n          timestamp: Date.now(),\n        });\n\n        // Subscribe to real-time updates\n        subscription = nord.subscribeOrderbook(marketSymbol);\n        subscription.on('update', (update: any) => {\n          setOrderBookData((prev) => {\n            if (!prev) return update;\n\n            // Convert OrderbookEntry[] to [number, number][] if needed\n            const updatedBids = update.bids\n              ? update.bids.map((entry: OrderbookEntry) => [\n                  entry.price,\n                  entry.size,\n                ])\n              : prev.bids;\n\n            const updatedAsks = update.asks\n              ? update.asks.map((entry: OrderbookEntry) => [\n                  entry.price,\n                  entry.size,\n                ])\n              : prev.asks;\n\n            return {\n              bids: updatedBids,\n              asks: updatedAsks,\n              timestamp: Date.now(),\n            };\n          });\n        });\n      } catch (err) {\n        console.error('Error fetching orderbook:', err);\n        setError('Failed to load orderbook data');\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchOrderBook();\n\n    // Cleanup subscription on unmount or market change\n    return () => {\n      if (subscription) {\n        subscription.close();\n      }\n    };\n  }, [marketSymbol, nord]);\n\n  // Aggregate orderbook data based on aggregation level\n  const aggregateOrderBook = (\n    data: OrderBookData | null,\n    level: number\n  ): OrderBookData | null => {\n    if (!data) return null;\n\n    const aggregatedBids: { [key: number]: number } = {};\n    const aggregatedAsks: { [key: number]: number } = {};\n\n    // Aggregate bids\n    data.bids.forEach(([price, size]) => {\n      const aggregatedPrice = Math.floor(price / level) * level;\n      aggregatedBids[aggregatedPrice] =\n        (aggregatedBids[aggregatedPrice] || 0) + size;\n    });\n\n    // Aggregate asks\n    data.asks.forEach(([price, size]) => {\n      const aggregatedPrice = Math.ceil(price / level) * level;\n      aggregatedAsks[aggregatedPrice] =\n        (aggregatedAsks[aggregatedPrice] || 0) + size;\n    });\n\n    // Convert back to arrays and sort\n    const bids = Object.entries(aggregatedBids)\n      .map(([price, size]) => [parseFloat(price), size])\n      .sort((a, b) => b[0] - a[0]) as Array<[number, number]>;\n\n    const asks = Object.entries(aggregatedAsks)\n      .map(([price, size]) => [parseFloat(price), size])\n      .sort((a, b) => a[0] - b[0]) as Array<[number, number]>;\n\n    return {\n      bids,\n      asks,\n      timestamp: data.timestamp,\n    };\n  };\n\n  const aggregatedData = aggregateOrderBook(orderBookData, aggregationLevel);\n\n  // Calculate max size for depth visualization\n  const calculateMaxSize = (data: OrderBookData | null): number => {\n    if (!data) return 0;\n\n    const bidSizes = data.bids.map(([_, size]) => size);\n    const askSizes = data.asks.map(([_, size]) => size);\n    const allSizes = [...bidSizes, ...askSizes];\n\n    return Math.max(...allSizes, 0);\n  };\n\n  const maxSize = calculateMaxSize(aggregatedData);\n\n  return (\n    <div className=\"p-4\">\n      <OrderBookHeader\n        marketSymbol={marketSymbol}\n        aggregationLevel={aggregationLevel}\n        onAggregationChange={setAggregationLevel}\n      />\n\n      {error ? (\n        <div className=\"p-3 mt-3 border border-red-200 dark:border-red-900/30 rounded-sm text-red-600 dark:text-red-400 text-xs\">\n          {error}\n        </div>\n      ) : loading && !orderBookData ? (\n        <div className=\"flex items-center justify-center h-40 mt-3\">\n          <RefreshCw size={24} className=\"text-n1-ww-main n1-animate-spin\" />\n        </div>\n      ) : !marketSymbol ? (\n        <div className=\"p-3 mt-3 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-xs\">\n          Select a market to view orderbook\n        </div>\n      ) : (\n        <div className=\"mt-3\">\n          <div className=\"flex flex-col\">\n            <OrderBookTable\n              data={aggregatedData}\n              loading={loading}\n              maxSize={maxSize}\n            />\n\n            <OrderBookDepthVisualizer data={aggregatedData} maxSize={maxSize} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OrderBook.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBook.tsx"],"names":[],"mappings":";AAAA,sEAAsE;AACtE,0DAA0D;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmPE","sourcesContent":["// DEPRECATED: This entire component has been deprecated due to errors\n// All code below has been commented out to prevent issues\n\n/*\nimport { useEffect, useState } from 'react';\nimport { useN1WalletContext } from '../../../../Provider/hooks';\nimport OrderBookHeader from './OrderBookHeader';\nimport OrderBookTable from './OrderBookTable';\n// Create a simple implementation for the missing OrderBookDepthVisualizer component\nimport { RefreshCw } from 'lucide-react';\n\n// Simple implementation of OrderBookDepthVisualizer\nconst OrderBookDepthVisualizer = ({\n  data,\n  maxSize,\n}: {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  maxSize: number;\n}) => {\n  if (!data || data.bids.length === 0 || data.asks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mt-3\">\n      <h3 className=\"text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2\">\n        Depth Chart\n      </h3>\n      <div className=\"w-full h-24 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm overflow-hidden flex items-center justify-center\">\n        <div className=\"relative w-full h-full\">\n          <div className=\"absolute inset-0 flex\">\n            <div className=\"w-1/2 bg-gradient-to-r from-green-500/10 to-green-500/5\"></div>\n            <div className=\"w-1/2 bg-gradient-to-l from-red-500/10 to-red-500/5\"></div>\n          </div>\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"h-full w-px bg-n1-ww-gray-300 dark:bg-n1-ww-gray-600\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface OrderBookProps {\n  marketSymbol: string | null;\n  marketId?: number;\n}\n\ninterface OrderBookData {\n  bids: Array<[number, number]>; // [price, size]\n  asks: Array<[number, number]>; // [price, size]\n  timestamp: number;\n}\n\n// Define the OrderbookEntry interface to match the API response\ninterface OrderbookEntry {\n  price: number;\n  size: number;\n}\n\nexport default function OrderBook({ marketSymbol, marketId }: OrderBookProps) {\n  const { nord } = useN1WalletContext();\n  const [orderBookData, setOrderBookData] = useState<OrderBookData | null>(\n    null\n  );\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [aggregationLevel, setAggregationLevel] = useState<number>(0.01);\n\n  // Fetch orderbook data when market changes\n  useEffect(() => {\n    if (!marketSymbol || !nord) return;\n\n    let subscription: any = null;\n\n    const fetchOrderBook = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        // Initial fetch\n        const orderbook = await nord.getOrderbook({ symbol: marketSymbol });\n\n        // The API now returns bids and asks directly as arrays of [price, size] pairs\n        // instead of OrderbookEntry objects\n        const bids: Array<[number, number]> = Array.isArray(orderbook.bids[0])\n          ? (orderbook.bids as unknown as Array<[number, number]>)\n          : orderbook.bids.map((entry: OrderbookEntry) => [\n              entry.price,\n              entry.size,\n          ]);\n\n        const asks: Array<[number, number]> = Array.isArray(orderbook.asks[0])\n          ? (orderbook.asks as unknown as Array<[number, number]>)\n          : orderbook.asks.map((entry: OrderbookEntry) => [\n              entry.price,\n              entry.size,\n            ]);\n\n        setOrderBookData({\n          bids,\n          asks,\n          timestamp: Date.now(),\n        });\n\n        // Subscribe to real-time updates\n        subscription = nord.subscribeOrderbook(marketSymbol);\n        subscription.on('update', (update: any) => {\n          setOrderBookData((prev) => {\n            if (!prev) return update;\n\n            // Convert OrderbookEntry[] to [number, number][] if needed\n            const updatedBids = update.bids\n              ? update.bids.map((entry: OrderbookEntry) => [\n                  entry.price,\n                  entry.size,\n                ])\n              : prev.bids;\n\n            const updatedAsks = update.asks\n              ? update.asks.map((entry: OrderbookEntry) => [\n                  entry.price,\n                  entry.size,\n                ])\n              : prev.asks;\n\n            return {\n              bids: updatedBids,\n              asks: updatedAsks,\n              timestamp: Date.now(),\n            };\n          });\n        });\n      } catch (err) {\n        console.error('Error fetching orderbook:', err);\n        setError('Failed to load orderbook data');\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchOrderBook();\n\n    // Cleanup subscription on unmount or market change\n    return () => {\n      if (subscription) {\n        subscription.close();\n      }\n    };\n  }, [marketSymbol, nord]);\n\n  // Aggregate orderbook data based on aggregation level\n  const aggregateOrderBook = (\n    data: OrderBookData | null,\n    level: number\n  ): OrderBookData | null => {\n    if (!data) return null;\n\n    const aggregatedBids: { [key: number]: number } = {};\n    const aggregatedAsks: { [key: number]: number } = {};\n\n    // Aggregate bids\n    data.bids.forEach(([price, size]) => {\n      const aggregatedPrice = Math.floor(price / level) * level;\n      aggregatedBids[aggregatedPrice] =\n        (aggregatedBids[aggregatedPrice] || 0) + size;\n    });\n\n    // Aggregate asks\n    data.asks.forEach(([price, size]) => {\n      const aggregatedPrice = Math.ceil(price / level) * level;\n      aggregatedAsks[aggregatedPrice] =\n        (aggregatedAsks[aggregatedPrice] || 0) + size;\n    });\n\n    // Convert back to arrays and sort\n    const bids = Object.entries(aggregatedBids)\n      .map(([price, size]) => [parseFloat(price), size])\n      .sort((a, b) => b[0] - a[0]) as Array<[number, number]>;\n\n    const asks = Object.entries(aggregatedAsks)\n      .map(([price, size]) => [parseFloat(price), size])\n      .sort((a, b) => a[0] - b[0]) as Array<[number, number]>;\n\n    return {\n      bids,\n      asks,\n      timestamp: data.timestamp,\n    };\n  };\n\n  const aggregatedData = aggregateOrderBook(orderBookData, aggregationLevel);\n\n  // Calculate max size for depth visualization\n  const calculateMaxSize = (data: OrderBookData | null): number => {\n    if (!data) return 0;\n\n    const bidSizes = data.bids.map(([_, size]) => size);\n    const askSizes = data.asks.map(([_, size]) => size);\n    const allSizes = [...bidSizes, ...askSizes];\n\n    return Math.max(...allSizes, 0);\n  };\n\n  const maxSize = calculateMaxSize(aggregatedData);\n\n  return (\n    <div className=\"p-4\">\n      <OrderBookHeader\n        marketSymbol={marketSymbol}\n        aggregationLevel={aggregationLevel}\n        onAggregationChange={setAggregationLevel}\n      />\n\n      {error ? (\n        <div className=\"p-3 mt-3 border border-red-200 dark:border-red-900/30 rounded-sm text-red-600 dark:text-red-400 text-xs\">\n          {error}\n        </div>\n      ) : loading && !orderBookData ? (\n        <div className=\"flex items-center justify-center h-40 mt-3\">\n          <RefreshCw size={24} className=\"text-n1-ww-main n1-animate-spin\" />\n        </div>\n      ) : !marketSymbol ? (\n        <div className=\"p-3 mt-3 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-xs\">\n          Select a market to view orderbook\n        </div>\n      ) : (\n        <div className=\"mt-3\">\n          <div className=\"flex flex-col\">\n            <OrderBookTable\n              data={aggregatedData}\n              loading={loading}\n              maxSize={maxSize}\n            />\n\n            <OrderBookDepthVisualizer data={aggregatedData} maxSize={maxSize} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n*/"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/TradeForm.d.ts

@@ -1,8 +1,13 @@
+/**
+ * @deprecated This component is deprecated due to technical issues.
+ * Please refer to DEPRECATED.md for more information.
+ */
 interface TradeFormProps {
     marketSymbol: string | null;
+    marketId?: number;
 }
 export type OrderSide = 'BUY' | 'SELL';
 export type OrderType = 'LIMIT' | 'MARKET';
 export type FillMode = 'GTC' | 'POST_ONLY' | 'IOC' | 'FOK';
-export default function TradeForm({ marketSymbol }: TradeFormProps): JSX.Element;
+export default function TradeForm({ marketSymbol, marketId }: TradeFormProps): JSX.Element;
 export {};

package/dist/Modal/Sidebar/NordTradingView/TradeForm/TradeForm.js

@@ -35,6 +35,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated This component is deprecated due to technical issues.
+ * Please refer to DEPRECATED.md for more information.
+ */
 import { useState, useEffect } from 'react';
 import { useN1WalletContext } from '../../../../Provider/hooks';
 import BuySellTabs from './BuySellTabs';
@@ -70,7 +74,7 @@ var isMarketOrder = function (mode) {
 };
 export default function TradeForm(_a) {
     var _this = this;
-    var marketSymbol = _a.marketSymbol;
+    var marketSymbol = _a.marketSymbol, marketId = _a.marketId;
     var _b = useN1WalletContext(), nord = _b.nord, nordUser = _b.nordUser;
     // Form state
     var _c = useState('BUY'), side = _c[0], setSide = _c[1];
@@ -96,7 +100,7 @@ export default function TradeForm(_a) {
     }, []);
     // Fetch market info and user account ID when market changes
     useEffect(function () {
-        if (!marketSymbol || !nord)
+        if (!marketSymbol || !nord || marketId === undefined)
             return;
         var fetchMarketInfo = function () { return __awaiter(_this, void 0, void 0, function () {
             var stats, selectedMarket, err_1;
@@ -104,10 +108,10 @@ export default function TradeForm(_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, nord.getMarketStats()];
+                        return [4 /*yield*/, nord.getMarketStats({ marketId: marketId })];
                     case 1:
                         stats = _a.sent();
-                        selectedMarket = stats.markets.find(function (m) { return m.symbol === marketSymbol; });
+                        selectedMarket = stats;
                         setMarketInfo(selectedMarket || null);
                         // Set default price to current market price
                         if (selectedMarket === null || selectedMarket === void 0 ? void 0 : selectedMarket.lastPrice) {
@@ -167,7 +171,7 @@ export default function TradeForm(_a) {
     }, [price, amount, fillMode]);
     // Handle order submission
     var handleSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var market, marketId, orderParams, orderId, err_3;
+        var market, marketId_1, orderParams, orderId, err_3;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -192,11 +196,11 @@ export default function TradeForm(_a) {
                 case 1:
                     _b.trys.push([1, 3, 4, 5]);
                     market = (_a = nord === null || nord === void 0 ? void 0 : nord.markets) === null || _a === void 0 ? void 0 : _a.find(function (m) { return m.symbol === marketSymbol; });
-                    marketId = market
+                    marketId_1 = market
                         ? market.id || market.marketId || 0
                         : 0;
                     orderParams = {
-                        marketId: marketId,
+                        marketId: marketId_1,
                         side: mapSide(side),
                         fillMode: mapFillMode(fillMode),
                         isReduceOnly: isReduceOnly,