npm - @n1xyz/wallet-widget - Versions diffs - 0.0.32 → 0.0.33-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1152) hide show

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

@@ -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 DELETED Viewed

@@ -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.d.ts DELETED Viewed

File without changes

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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"]}