@n1xyz/wallet-widget 0.0.32 → 0.0.33-alpha.0

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

@@ -1,143 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// DEPRECATED: This entire component has been deprecated due to errors
-// All code below has been commented out to prevent issues
-/*
-import { useState, useEffect } from 'react';
-import { useN1WalletContext } from '../../../Provider/hooks';
-import { N1SessionMode } from '../../../Provider/types';
-import MarketOverview from './MarketOverview/MarketOverview';
-import OrderBook from './OrderBook/OrderBook';
-import TradeForm from './TradeForm/TradeForm';
-import UserOrders from './UserOrders/UserOrders';
-import UserPositions from './UserPositions/UserPositions';
-import UserBalances from './UserBalances/UserBalances';
-
-// Define the available view types
-type ViewType =
-  | 'orderbook'
-  | 'tradeform'
-  | 'orders'
-  | 'positions'
-  | 'balances'
-  | 'history';
-
-export default function NordTradingView() {
-  const { sessionMode, nord, nordUser } = useN1WalletContext();
-  const [selectedMarket, setSelectedMarket] = useState<{symbol: string; id: number} | null>(null);
-  const [activeView, setActiveView] = useState<ViewType>('orderbook');
-
-  // Early return if not in Nord session mode or if Nord/NordUser is not available
-  if (sessionMode !== N1SessionMode.Nord || !nord || !nordUser) {
-    return null;
-  }
-
-  // Set default selected market if not already set and markets are available
-  useEffect(() => {
-    if (!selectedMarket && nord.markets?.length > 0) {
-      const defaultMarket = nord.markets[0];
-      setSelectedMarket({
-        symbol: defaultMarket.symbol,
-        id: defaultMarket.marketId
-      });
-    }
-  }, [nord.markets, selectedMarket]);
-
-  // Render the active view component
-  const renderActiveView = () => {
-    if (!selectedMarket) return null;
-    
-    switch (activeView) {
-      case 'orderbook':
-        return <OrderBook marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />;
-      case 'tradeform':
-        return <TradeForm marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />;
-      case 'orders':
-        return <UserOrders />;
-      case 'positions':
-        return (
-          <div className="space-y-4">
-            <UserPositions />
-            <UserBalances />
-          </div>
-        );
-      case 'balances':
-        return <UserBalances />;
-      default:
-        return selectedMarket ? (
-          <OrderBook marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />
-        ) : null;
-    }
-  };
-
-  // Map view types to display names
-  const viewLabels: Record<ViewType, string> = {
-    orderbook: 'Order Book',
-    tradeform: 'Trade',
-    positions: 'Positions',
-    orders: 'Orders',
-    balances: 'Balances',
-    history: 'History',
-  };
-
-  return (
-    <div className="space-y-4 @container">
-      <div className="flex flex-col @md:flex-row justify-between items-start @md:items-center bg-transparent mb-3 gap-3 @md:gap-0">
-        <div className="flex justify-start gap-2 flex-wrap w-full @md:w-auto">
-          {['orderbook', 'tradeform', 'positions', 'orders'].map((view) => (
-            <button
-              key={view}
-              onClick={() => setActiveView(view as ViewType)}
-              className={`
-                relative px-4 @md:px-5 py-2 text-sm font-medium tracking-wide transition-all duration-150
-                border ${
-                  activeView === view
-                    ? 'border-n1-ww-main/80 text-n1-ww-main bg-n1-ww-main/[0.03] shadow-[0_0_0_1px_rgba(255,68,26,0.1)]'
-                    : 'border-n1-ww-gray-200 dark:border-n1-ww-gray-800 text-n1-ww-gray-500 dark:text-n1-ww-gray-400 hover:border-n1-ww-gray-300 dark:hover:border-n1-ww-gray-700'
-                }
-                first:ml-0 last:mr-0 group rounded-[2px] overflow-hidden flex-grow @md:flex-grow-0
-              `}
-            >
-              <span className="relative z-10">
-                {viewLabels[view as ViewType]}
-              </span>
-              <span
-                className={`
-                  absolute inset-0 bg-n1-ww-main/[0.02] opacity-0 transition-opacity duration-150
-                  ${activeView !== view ? 'group-hover:opacity-100' : ''}
-                `}
-              />
-            </button>
-          ))}
-        </div>
-
-        <div className="min-w-[160px] w-full @md:w-auto border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-[2px] overflow-visible hover:border-n1-ww-gray-300 dark:hover:border-n1-ww-gray-700 transition-colors duration-150 relative z-20">
-          <div className="px-5 py-2 text-sm">
-            <MarketOverview
-              selectedMarketSymbol={selectedMarket?.symbol || null}
-              selectedMarketId={selectedMarket?.id || null}
-              onMarketChange={(symbol: string) => {
-                const market = nord.markets?.find(m => m.symbol === symbol);
-                if (market) {
-                  setSelectedMarket({
-                    symbol: market.symbol,
-                    id: market.marketId
-                  });
-                }
-              }}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-[3px] shadow-sm bg-white dark:bg-n1-ww-gray-950">
-        {renderActiveView()}
-      </div>
-    </div>
-  );
-}
-*/
-// Temporary replacement component to prevent import errors
-export default function NordTradingView() {
-    return (_jsxs("div", { className: "p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl text-yellow-600 dark:text-yellow-400 text-center", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Nord Trading View Deprecated" }), _jsx("p", { className: "text-sm", children: "The Nord Trading View has been temporarily disabled due to technical issues." })] }));
-}
-//# sourceMappingURL=NordTradingView.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NordTradingView.js","sourceRoot":"","sources":["../../../../src/Modal/Sidebar/NordTradingView/NordTradingView.tsx"],"names":[],"mappings":";AAAA,sEAAsE;AACtE,0DAA0D;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIE;AAEF,2DAA2D;AAC3D,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,OAAO,CACL,eAAK,SAAS,EAAC,oGAAoG,aACjH,aAAI,SAAS,EAAC,oBAAoB,6CAAkC,EACpE,YAAG,SAAS,EAAC,SAAS,6FAAiF,IACnG,CACP,CAAC;AACJ,CAAC","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 { useState, useEffect } from 'react';\nimport { useN1WalletContext } from '../../../Provider/hooks';\nimport { N1SessionMode } from '../../../Provider/types';\nimport MarketOverview from './MarketOverview/MarketOverview';\nimport OrderBook from './OrderBook/OrderBook';\nimport TradeForm from './TradeForm/TradeForm';\nimport UserOrders from './UserOrders/UserOrders';\nimport UserPositions from './UserPositions/UserPositions';\nimport UserBalances from './UserBalances/UserBalances';\n\n// Define the available view types\ntype ViewType =\n  | 'orderbook'\n  | 'tradeform'\n  | 'orders'\n  | 'positions'\n  | 'balances'\n  | 'history';\n\nexport default function NordTradingView() {\n  const { sessionMode, nord, nordUser } = useN1WalletContext();\n  const [selectedMarket, setSelectedMarket] = useState<{symbol: string; id: number} | null>(null);\n  const [activeView, setActiveView] = useState<ViewType>('orderbook');\n\n  // Early return if not in Nord session mode or if Nord/NordUser is not available\n  if (sessionMode !== N1SessionMode.Nord || !nord || !nordUser) {\n    return null;\n  }\n\n  // Set default selected market if not already set and markets are available\n  useEffect(() => {\n    if (!selectedMarket && nord.markets?.length > 0) {\n      const defaultMarket = nord.markets[0];\n      setSelectedMarket({\n        symbol: defaultMarket.symbol,\n        id: defaultMarket.marketId\n      });\n    }\n  }, [nord.markets, selectedMarket]);\n\n  // Render the active view component\n  const renderActiveView = () => {\n    if (!selectedMarket) return null;\n    \n    switch (activeView) {\n      case 'orderbook':\n        return <OrderBook marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />;\n      case 'tradeform':\n        return <TradeForm marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />;\n      case 'orders':\n        return <UserOrders />;\n      case 'positions':\n        return (\n          <div className=\"space-y-4\">\n            <UserPositions />\n            <UserBalances />\n          </div>\n        );\n      case 'balances':\n        return <UserBalances />;\n      default:\n        return selectedMarket ? (\n          <OrderBook marketSymbol={selectedMarket.symbol} marketId={selectedMarket.id} />\n        ) : null;\n    }\n  };\n\n  // Map view types to display names\n  const viewLabels: Record<ViewType, string> = {\n    orderbook: 'Order Book',\n    tradeform: 'Trade',\n    positions: 'Positions',\n    orders: 'Orders',\n    balances: 'Balances',\n    history: 'History',\n  };\n\n  return (\n    <div className=\"space-y-4 @container\">\n      <div className=\"flex flex-col @md:flex-row justify-between items-start @md:items-center bg-transparent mb-3 gap-3 @md:gap-0\">\n        <div className=\"flex justify-start gap-2 flex-wrap w-full @md:w-auto\">\n          {['orderbook', 'tradeform', 'positions', 'orders'].map((view) => (\n            <button\n              key={view}\n              onClick={() => setActiveView(view as ViewType)}\n              className={`\n                relative px-4 @md:px-5 py-2 text-sm font-medium tracking-wide transition-all duration-150 \n                border ${\n                  activeView === view\n                    ? 'border-n1-ww-main/80 text-n1-ww-main bg-n1-ww-main/[0.03] shadow-[0_0_0_1px_rgba(255,68,26,0.1)]'\n                    : 'border-n1-ww-gray-200 dark:border-n1-ww-gray-800 text-n1-ww-gray-500 dark:text-n1-ww-gray-400 hover:border-n1-ww-gray-300 dark:hover:border-n1-ww-gray-700'\n                }\n                first:ml-0 last:mr-0 group rounded-[2px] overflow-hidden flex-grow @md:flex-grow-0\n              `}\n            >\n              <span className=\"relative z-10\">\n                {viewLabels[view as ViewType]}\n              </span>\n              <span\n                className={`\n                  absolute inset-0 bg-n1-ww-main/[0.02] opacity-0 transition-opacity duration-150\n                  ${activeView !== view ? 'group-hover:opacity-100' : ''}\n                `}\n              />\n            </button>\n          ))}\n        </div>\n\n        <div className=\"min-w-[160px] w-full @md:w-auto border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-[2px] overflow-visible hover:border-n1-ww-gray-300 dark:hover:border-n1-ww-gray-700 transition-colors duration-150 relative z-20\">\n          <div className=\"px-5 py-2 text-sm\">\n            <MarketOverview\n              selectedMarketSymbol={selectedMarket?.symbol || null}\n              selectedMarketId={selectedMarket?.id || null}\n              onMarketChange={(symbol: string) => {\n                const market = nord.markets?.find(m => m.symbol === symbol);\n                if (market) {\n                  setSelectedMarket({\n                    symbol: market.symbol,\n                    id: market.marketId\n                  });\n                }\n              }}\n            />\n          </div>\n        </div>\n      </div>\n\n      <div className=\"border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-[3px] shadow-sm bg-white dark:bg-n1-ww-gray-950\">\n        {renderActiveView()}\n      </div>\n    </div>\n  );\n}\n*/\n\n// Temporary replacement component to prevent import errors\nexport default function NordTradingView() {\n  return (\n    <div className=\"p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl text-yellow-600 dark:text-yellow-400 text-center\">\n      <h3 className=\"font-semibold mb-2\">Nord Trading View Deprecated</h3>\n      <p className=\"text-sm\">The Nord Trading View has been temporarily disabled due to technical issues.</p>\n    </div>\n  );\n}\n"]}

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

@@ -1,248 +0,0 @@
-"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
-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>
-  );
-};
-
-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(),
-        });
-
-        // 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(),
-            };
-          });
-        });
-      } catch (err) {
-        console.error('Error fetching orderbook:', err);
-        setError('Failed to load orderbook data');
-      } finally {
-        setLoading(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,
-    };
-  };
-
-  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 +0,0 @@
-{"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/OrderBook/OrderBookDepthVisualizer.d.ts

@@ -1,10 +0,0 @@
-interface OrderBookDepthVisualizerProps {
-    data: {
-        bids: Array<[number, number]>;
-        asks: Array<[number, number]>;
-        timestamp: number;
-    } | null;
-    maxSize: number;
-}
-export default function OrderBookDepthVisualizer({ data, maxSize, }: OrderBookDepthVisualizerProps): JSX.Element | null;
-export {};

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

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function OrderBookDepthVisualizer(_a) {
-    var data = _a.data, maxSize = _a.maxSize;
-    if (!data || data.bids.length === 0 || data.asks.length === 0) {
-        return null;
-    }
-    // Calculate cumulative sizes
-    var calculateCumulativeSizes = function (orders) {
-        var cumulative = 0;
-        return orders.map(function (_a) {
-            var price = _a[0], size = _a[1];
-            cumulative += size;
-            return [price, cumulative];
-        });
-    };
-    var cumulativeBids = calculateCumulativeSizes(data.bids);
-    var cumulativeAsks = calculateCumulativeSizes(data.asks);
-    // Find max cumulative size for scaling
-    var maxCumulativeSize = Math.max(cumulativeBids[cumulativeBids.length - 1][1], cumulativeAsks[cumulativeAsks.length - 1][1]);
-    // Calculate price range for x-axis
-    var minPrice = cumulativeBids[cumulativeBids.length - 1][0];
-    var maxPrice = cumulativeAsks[cumulativeAsks.length - 1][0];
-    var priceRange = maxPrice - minPrice;
-    // Helper function to calculate x position based on price
-    var getPricePosition = function (price) {
-        return ((price - minPrice) / priceRange) * 100;
-    };
-    // Helper function to calculate y position based on cumulative size
-    var getSizePosition = function (size) {
-        return (size / maxCumulativeSize) * 100;
-    };
-    // Generate SVG path for bids
-    var generateBidPath = function () {
-        if (cumulativeBids.length === 0)
-            return '';
-        var path = "M ".concat(getPricePosition(cumulativeBids[0][0]), " 100 ");
-        cumulativeBids.forEach(function (_a) {
-            var price = _a[0], size = _a[1];
-            var x = getPricePosition(price);
-            var y = 100 - getSizePosition(size);
-            path += "L ".concat(x, " ").concat(y, " ");
-        });
-        path += "L ".concat(getPricePosition(cumulativeBids[cumulativeBids.length - 1][0]), " 100 Z");
-        return path;
-    };
-    // Generate SVG path for asks
-    var generateAskPath = function () {
-        if (cumulativeAsks.length === 0)
-            return '';
-        var path = "M ".concat(getPricePosition(cumulativeAsks[0][0]), " 100 ");
-        cumulativeAsks.forEach(function (_a) {
-            var price = _a[0], size = _a[1];
-            var x = getPricePosition(price);
-            var y = 100 - getSizePosition(size);
-            path += "L ".concat(x, " ").concat(y, " ");
-        });
-        path += "L ".concat(getPricePosition(cumulativeAsks[cumulativeAsks.length - 1][0]), " 100 Z");
-        return path;
-    };
-    return (_jsxs("div", { className: "mt-4", children: [_jsx("h3", { className: "text-sm font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2", children: "Depth Chart" }), _jsx("div", { className: "w-full h-32 bg-n1-ww-gray-50 dark:bg-n1-ww-gray-800 rounded-lg overflow-hidden", children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("path", { d: generateBidPath(), fill: "rgba(16, 185, 129, 0.2)", stroke: "rgb(16, 185, 129)", strokeWidth: "0.5" }), _jsx("path", { d: generateAskPath(), fill: "rgba(239, 68, 68, 0.2)", stroke: "rgb(239, 68, 68)", strokeWidth: "0.5" }), _jsx("line", { x1: getPricePosition(data.asks[0][0]), y1: "0", x2: getPricePosition(data.asks[0][0]), y2: "100", stroke: "rgba(156, 163, 175, 0.5)", strokeWidth: "0.5", strokeDasharray: "2,2" })] }) }), _jsxs("div", { className: "flex justify-between mt-1 text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: [_jsx("span", { children: minPrice.toFixed(2) }), _jsx("span", { children: ((minPrice + maxPrice) / 2).toFixed(2) }), _jsx("span", { children: maxPrice.toFixed(2) })] })] }));
-}
-//# sourceMappingURL=OrderBookDepthVisualizer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrderBookDepthVisualizer.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["interface OrderBookDepthVisualizerProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  maxSize: number;\n}\n\nexport default function OrderBookDepthVisualizer({\n  data,\n  maxSize,\n}: OrderBookDepthVisualizerProps) {\n  if (!data || data.bids.length === 0 || data.asks.length === 0) {\n    return null;\n  }\n\n  // Calculate cumulative sizes\n  const calculateCumulativeSizes = (\n    orders: Array<[number, number]>\n  ): Array<[number, number]> => {\n    let cumulative = 0;\n    return orders.map(([price, size]) => {\n      cumulative += size;\n      return [price, cumulative];\n    });\n  };\n\n  const cumulativeBids = calculateCumulativeSizes(data.bids);\n  const cumulativeAsks = calculateCumulativeSizes(data.asks);\n\n  // Find max cumulative size for scaling\n  const maxCumulativeSize = Math.max(\n    cumulativeBids[cumulativeBids.length - 1][1],\n    cumulativeAsks[cumulativeAsks.length - 1][1]\n  );\n\n  // Calculate price range for x-axis\n  const minPrice = cumulativeBids[cumulativeBids.length - 1][0];\n  const maxPrice = cumulativeAsks[cumulativeAsks.length - 1][0];\n  const priceRange = maxPrice - minPrice;\n\n  // Helper function to calculate x position based on price\n  const getPricePosition = (price: number): number => {\n    return ((price - minPrice) / priceRange) * 100;\n  };\n\n  // Helper function to calculate y position based on cumulative size\n  const getSizePosition = (size: number): number => {\n    return (size / maxCumulativeSize) * 100;\n  };\n\n  // Generate SVG path for bids\n  const generateBidPath = (): string => {\n    if (cumulativeBids.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeBids[0][0])} 100 `;\n\n    cumulativeBids.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeBids[cumulativeBids.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  // Generate SVG path for asks\n  const generateAskPath = (): string => {\n    if (cumulativeAsks.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeAsks[0][0])} 100 `;\n\n    cumulativeAsks.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeAsks[cumulativeAsks.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  return (\n    <div className=\"mt-4\">\n      <h3 className=\"text-sm 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-32 bg-n1-ww-gray-50 dark:bg-n1-ww-gray-800 rounded-lg overflow-hidden\">\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Bid depth (green) */}\n          <path\n            d={generateBidPath()}\n            fill=\"rgba(16, 185, 129, 0.2)\"\n            stroke=\"rgb(16, 185, 129)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Ask depth (red) */}\n          <path\n            d={generateAskPath()}\n            fill=\"rgba(239, 68, 68, 0.2)\"\n            stroke=\"rgb(239, 68, 68)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Center line (current price) */}\n          <line\n            x1={getPricePosition(data.asks[0][0])}\n            y1=\"0\"\n            x2={getPricePosition(data.asks[0][0])}\n            y2=\"100\"\n            stroke=\"rgba(156, 163, 175, 0.5)\"\n            strokeWidth=\"0.5\"\n            strokeDasharray=\"2,2\"\n          />\n        </svg>\n      </div>\n\n      {/* Price labels */}\n      <div className=\"flex justify-between mt-1 text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n        <span>{minPrice.toFixed(2)}</span>\n        <span>{((minPrice + maxPrice) / 2).toFixed(2)}</span>\n        <span>{maxPrice.toFixed(2)}</span>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.d.ts

@@ -1,7 +0,0 @@
-interface OrderBookHeaderProps {
-    marketSymbol: string | null;
-    aggregationLevel: number;
-    onAggregationChange: (level: number) => void;
-}
-export default function OrderBookHeader({ marketSymbol, aggregationLevel, onAggregationChange, }: OrderBookHeaderProps): JSX.Element;
-export {};

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
-export default function OrderBookHeader(_a) {
-    var marketSymbol = _a.marketSymbol, aggregationLevel = _a.aggregationLevel, onAggregationChange = _a.onAggregationChange;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var dropdownRef = useRef(null);
-    // Common aggregation levels
-    var aggregationOptions = [0.0001, 0.001, 0.01, 0.1, 1, 10, 100];
-    // Close dropdown when clicking outside
-    useEffect(function () {
-        function handleClickOutside(event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        }
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "text-base font-semibold text-n1-ww-gray-900 dark:text-n1-ww-gray-100", children: ["Order Book", ' ', marketSymbol ? _jsx("span", { className: "text-n1-ww-main", children: marketSymbol }) : ''] }), _jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { onClick: function () { return setIsOpen(!isOpen); }, className: "flex items-center gap-1 px-2 py-1 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-950 rounded-sm text-xs text-n1-ww-gray-900 dark:text-n1-ww-gray-100 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:border-n1-ww-main dark:hover:border-n1-ww-main transition-colors duration-200", children: [_jsxs("span", { children: ["Precision:", ' ', _jsx("span", { className: "font-mono font-medium", children: aggregationLevel })] }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOpen ? 'rotate-180 text-n1-ww-main' : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400') })] }), isOpen && (_jsx("div", { className: "absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-ww-gray-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden", children: aggregationOptions.map(function (level) { return (_jsx("button", { onClick: function () {
-                                onAggregationChange(level);
-                                setIsOpen(false);
-                            }, className: "w-full text-left px-3 py-1.5 text-xs hover:bg-n1-ww-gray-100 dark:hover:bg-n1-ww-gray-800 transition-colors duration-200 ".concat(aggregationLevel === level
-                                ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 border-l-2 border-n1-ww-main text-n1-ww-main'
-                                : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100'), children: level }, level)); }) }))] })] }));
-}
-//# sourceMappingURL=OrderBookHeader.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrderBookHeader.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAIjB;QAHrB,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA;IAEb,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAC5C,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,4BAA4B;IAC5B,IAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAElE,uCAAuC;IACvC,SAAS,CAAC;QACR,SAAS,kBAAkB,CAAC,KAAiB;YAC3C,IACE,WAAW,CAAC,OAAO;gBACnB,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACnD,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,cAAI,SAAS,EAAC,sEAAsE,2BACvE,GAAG,EACb,YAAY,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,iBAAiB,YAAE,YAAY,GAAQ,CAAC,CAAC,CAAC,EAAE,IACzE,EAEL,eAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,WAAW,aACxC,kBACE,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,EACjC,SAAS,EAAC,wRAAwR,aAElS,yCACa,GAAG,EACd,eAAM,SAAS,EAAC,uBAAuB,YAAE,gBAAgB,GAAQ,IAC5D,EACP,KAAC,WAAW,IACV,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,4CAAqC,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,8CAA8C,CAAE,GACxI,IACK,EAER,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,8JAA8J,YAC1K,kBAAkB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACjC,iBAEE,OAAO,EAAE;gCACP,mBAAmB,CAAC,KAAK,CAAC,CAAC;gCAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,EACD,SAAS,EAAE,mIACT,gBAAgB,KAAK,KAAK;gCACxB,CAAC,CAAC,uFAAuF;gCACzF,CAAC,CAAC,8CAA8C,CAClD,YAED,KAAK,IAXD,KAAK,CAYH,CACV,EAfkC,CAelC,CAAC,GACE,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport { useState, useRef, useEffect } from 'react';\n\ninterface OrderBookHeaderProps {\n  marketSymbol: string | null;\n  aggregationLevel: number;\n  onAggregationChange: (level: number) => void;\n}\n\nexport default function OrderBookHeader({\n  marketSymbol,\n  aggregationLevel,\n  onAggregationChange,\n}: OrderBookHeaderProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Common aggregation levels\n  const aggregationOptions = [0.0001, 0.001, 0.01, 0.1, 1, 10, 100];\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <h2 className=\"text-base font-semibold text-n1-ww-gray-900 dark:text-n1-ww-gray-100\">\n        Order Book{' '}\n        {marketSymbol ? <span className=\"text-n1-ww-main\">{marketSymbol}</span> : ''}\n      </h2>\n\n      <div className=\"relative\" ref={dropdownRef}>\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex items-center gap-1 px-2 py-1 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-950 rounded-sm text-xs text-n1-ww-gray-900 dark:text-n1-ww-gray-100 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:border-n1-ww-main dark:hover:border-n1-ww-main transition-colors duration-200\"\n        >\n          <span>\n            Precision:{' '}\n            <span className=\"font-mono font-medium\">{aggregationLevel}</span>\n          </span>\n          <ChevronDown\n            size={14}\n            className={`transition-transform duration-200 ${isOpen ? 'rotate-180 text-n1-ww-main' : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400'}`}\n          />\n        </button>\n\n        {isOpen && (\n          <div className=\"absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-ww-gray-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden\">\n            {aggregationOptions.map((level) => (\n              <button\n                key={level}\n                onClick={() => {\n                  onAggregationChange(level);\n                  setIsOpen(false);\n                }}\n                className={`w-full text-left px-3 py-1.5 text-xs hover:bg-n1-ww-gray-100 dark:hover:bg-n1-ww-gray-800 transition-colors duration-200 ${\n                  aggregationLevel === level\n                    ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 border-l-2 border-n1-ww-main text-n1-ww-main'\n                    : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100'\n                }`}\n              >\n                {level}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.d.ts

@@ -1,11 +0,0 @@
-interface OrderBookTableProps {
-    data: {
-        bids: Array<[number, number]>;
-        asks: Array<[number, number]>;
-        timestamp: number;
-    } | null;
-    loading: boolean;
-    maxSize: number;
-}
-export default function OrderBookTable({ data, loading, maxSize, }: OrderBookTableProps): JSX.Element;
-export {};

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RefreshCw } from 'lucide-react';
-export default function OrderBookTable(_a) {
-    var data = _a.data, loading = _a.loading, maxSize = _a.maxSize;
-    if (!data) {
-        return (_jsx("div", { className: "flex items-center justify-center h-40", children: _jsx("p", { className: "text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: "No orderbook data available" }) }));
-    }
-    // Limit the number of rows to display
-    var maxRows = 8;
-    var bids = data.bids.slice(0, maxRows);
-    var asks = data.asks.slice(0, maxRows).reverse(); // Reverse to show highest ask at the bottom
-    return (_jsxs("div", { className: "relative", children: [loading && (_jsx("div", { className: "absolute top-2 right-2 z-10", children: _jsx(RefreshCw, { size: 14, className: "text-n1-ww-main n1-animate-spin" }) })), _jsxs("div", { className: "grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 font-medium uppercase tracking-wider", children: [_jsx("div", { className: "text-left", children: "Size" }), _jsx("div", { className: "text-center", children: "Price" }), _jsx("div", { className: "text-right", children: "Size" })] }), _jsx("div", { className: "space-y-px mb-2", children: asks.map(function (_a, index) {
-                    var price = _a[0], size = _a[1];
-                    var sizePercentage = (size / maxSize) * 100;
-                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs" }), _jsx("div", { className: "text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "ask-".concat(index)));
-                }) }), bids.length > 0 && asks.length > 0 && (_jsx("div", { className: "py-1 px-2 mb-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-center", children: _jsxs("span", { className: "text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: ["Spread:", ' ', _jsx("span", { className: "font-mono font-medium", children: (asks[asks.length - 1][0] - bids[0][0]).toFixed(4) }), ' ', "(", _jsxs("span", { className: "font-mono", children: [((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2), "%"] }), ")"] }) })), _jsx("div", { className: "space-y-px", children: bids.map(function (_a, index) {
-                    var price = _a[0], size = _a[1];
-                    var sizePercentage = (size / maxSize) * 100;
-                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs" }), _jsx("div", { className: "absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "bid-".concat(index)));
-                }) }), _jsxs("div", { className: "mt-2 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-right", children: ["Last updated:", ' ', _jsx("span", { className: "font-mono", children: new Date(data.timestamp).toLocaleTimeString() })] })] }));
-}
-//# sourceMappingURL=OrderBookTable.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrderBookTable.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefreshCw } from 'lucide-react';\n\ninterface OrderBookTableProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  loading: boolean;\n  maxSize: number;\n}\n\nexport default function OrderBookTable({\n  data,\n  loading,\n  maxSize,\n}: OrderBookTableProps) {\n  if (!data) {\n    return (\n      <div className=\"flex items-center justify-center h-40\">\n        <p className=\"text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n          No orderbook data available\n        </p>\n      </div>\n    );\n  }\n\n  // Limit the number of rows to display\n  const maxRows = 8;\n  const bids = data.bids.slice(0, maxRows);\n  const asks = data.asks.slice(0, maxRows).reverse(); // Reverse to show highest ask at the bottom\n\n  return (\n    <div className=\"relative\">\n      {loading && (\n        <div className=\"absolute top-2 right-2 z-10\">\n          <RefreshCw size={14} className=\"text-n1-ww-main n1-animate-spin\" />\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 font-medium uppercase tracking-wider\">\n        <div className=\"text-left\">Size</div>\n        <div className=\"text-center\">Price</div>\n        <div className=\"text-right\">Size</div>\n      </div>\n\n      {/* Asks (Sell orders) */}\n      <div className=\"space-y-px mb-2\">\n        {asks.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`ask-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs\"></div>\n              <div className=\"text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div\n                className=\"absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Spread */}\n      {bids.length > 0 && asks.length > 0 && (\n        <div className=\"py-1 px-2 mb-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-center\">\n          <span className=\"text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n            Spread:{' '}\n            <span className=\"font-mono font-medium\">\n              {(asks[asks.length - 1][0] - bids[0][0]).toFixed(4)}\n            </span>{' '}\n            (\n            <span className=\"font-mono\">\n              {((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2)}%\n            </span>\n            )\n          </span>\n        </div>\n      )}\n\n      {/* Bids (Buy orders) */}\n      <div className=\"space-y-px\">\n        {bids.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`bid-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div className=\"text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs\"></div>\n              <div\n                className=\"absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Last updated timestamp */}\n      <div className=\"mt-2 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-right\">\n        Last updated:{' '}\n        <span className=\"font-mono\">\n          {new Date(data.timestamp).toLocaleTimeString()}\n        </span>\n      </div>\n    </div>\n  );\n}\n"]}