@n1xyz/wallet-widget 0.0.4 → 0.0.7

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

@@ -0,0 +1,86 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useN1WalletContext } from '../../../../Provider/hooks';
+import MarketSelector from '../MarketOverview/MarketSelector';
+export default function MarketOverview(_a) {
+    var _this = this;
+    var selectedMarket = _a.selectedMarket, onMarketChange = _a.onMarketChange, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var nord = useN1WalletContext().nord;
+    var _c = useState(null), marketStats = _c[0], setMarketStats = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _e = useState(null), error = _e[0], setError = _e[1];
+    // Fetch market stats when selected market changes
+    useEffect(function () {
+        if (!selectedMarket || !nord)
+            return;
+        var fetchMarketStats = function () { return __awaiter(_this, void 0, void 0, function () {
+            var stats, selectedStats, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setLoading(true);
+                        setError(null);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, nord.getMarketStats()];
+                    case 2:
+                        stats = _a.sent();
+                        selectedStats = stats.markets.find(function (m) { return m.symbol === selectedMarket; });
+                        setMarketStats(selectedStats || null);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.error('Error fetching market stats:', err_1);
+                        setError('Failed to load market statistics');
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchMarketStats();
+        // Set up polling for market stats updates
+        var intervalId = setInterval(fetchMarketStats, 30000); // Update every 30 seconds
+        return function () { return clearInterval(intervalId); };
+    }, [selectedMarket, nord]);
+    return (_jsx("div", { className: "".concat(className), children: _jsx(MarketSelector, { selectedMarket: selectedMarket, onMarketChange: onMarketChange }) }));
+}

package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketSelector.d.ts

@@ -0,0 +1,6 @@
+interface MarketSelectorProps {
+    selectedMarket: string | null;
+    onMarketChange: (market: string) => void;
+}
+export default function MarketSelector({ selectedMarket, onMarketChange, }: MarketSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useN1WalletContext } from '../../../../Provider/hooks';
+import { ChevronDown } from 'lucide-react';
+export default function MarketSelector(_a) {
+    var _b;
+    var selectedMarket = _a.selectedMarket, onMarketChange = _a.onMarketChange;
+    var nord = useN1WalletContext().nord;
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var _d = useState(''), searchQuery = _d[0], setSearchQuery = _d[1];
+    var dropdownRef = useRef(null);
+    var buttonRef = useRef(null);
+    var containerRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        function handleClickOutside(event) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Filter markets based on search query
+    var filteredMarkets = ((_b = nord === null || nord === void 0 ? void 0 : nord.markets) === null || _b === void 0 ? void 0 : _b.filter(function (market) {
+        return market.symbol.toLowerCase().includes(searchQuery.toLowerCase());
+    })) || [];
+    return (_jsxs("div", { className: "relative w-full", ref: containerRef, children: [_jsxs("button", { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, className: "w-full flex items-center justify-between font-medium text-gray-900 dark:text-gray-100 transition-colors duration-200", children: [_jsx("span", { className: "truncate", children: selectedMarket || 'Select Market' }), _jsx(ChevronDown, { size: 16, className: "ml-2 transition-transform duration-200 ".concat(isOpen ? 'rotate-180 text-main' : 'text-gray-500 dark:text-gray-400') })] }), isOpen && (_jsx("div", { ref: dropdownRef, className: "absolute right-0 top-full mt-1 bg-white dark:bg-gray-950 rounded-[2px] shadow-lg border border-gray-200 dark:border-gray-800 overflow-hidden z-50 w-[250px] max-h-[300px]", children: _jsx("div", { className: "overflow-y-auto max-h-[300px]", children: filteredMarkets.length > 0 ? (filteredMarkets.map(function (market) { return (_jsx("button", { onClick: function () {
+                            onMarketChange(market.symbol);
+                            setIsOpen(false);
+                            setSearchQuery('');
+                        }, className: "w-full text-left px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors duration-200 ".concat(selectedMarket === market.symbol
+                            ? 'border-l-2 border-main text-main dark:text-main bg-gray-50 dark:bg-gray-950'
+                            : 'text-gray-900 dark:text-gray-100'), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium", children: market.symbol }), market.change24h !== undefined && (_jsxs("span", { className: "text-sm ".concat(market.change24h >= 0
+                                        ? 'text-green-500'
+                                        : 'text-red-500'), children: [market.change24h >= 0 ? '+' : '', market.change24h.toFixed(2), "%"] }))] }) }, market.symbol)); })) : (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: "No markets found" })) }) }))] }));
+}

package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketStats.d.ts

@@ -0,0 +1,7 @@
+interface MarketStatsProps {
+    marketStats: any;
+    loading: boolean;
+    error: string | null;
+}
+export default function MarketStats({ marketStats, loading, error, }: MarketStatsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react';
+export default function MarketStats(_a) {
+    var _b, _c, _d, _e;
+    var marketStats = _a.marketStats, loading = _a.loading, error = _a.error;
+    if (error) {
+        return (_jsx("div", { className: "bg-red-50 dark:bg-red-900/20 p-3 rounded-sm text-red-600 dark:text-red-400 text-sm border border-red-200 dark:border-red-900/30", children: error }));
+    }
+    if (!marketStats && !loading) {
+        return (_jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-3 rounded-sm text-gray-500 dark:text-gray-400 text-sm border border-gray-200 dark:border-gray-800", children: "Select a market to view statistics" }));
+    }
+    return (_jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-3 rounded-sm border border-gray-200 dark:border-gray-800", children: loading && !marketStats ? (_jsx("div", { className: "flex items-center justify-center h-24", children: _jsx(RefreshCw, { size: 24, className: "text-main animate-spin" }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: marketStats === null || marketStats === void 0 ? void 0 : marketStats.symbol }), _jsxs("div", { className: "flex items-center", children: [_jsxs("span", { className: "text-xs font-medium px-2 py-1 rounded-sm ".concat((marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceChangePercent) >= 0
+                                        ? 'bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-900/30'
+                                        : 'bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900/30'), children: [(marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceChangePercent) >= 0 ? (_jsx(ArrowUp, { size: 12, className: "inline mr-1" })) : (_jsx(ArrowDown, { size: 12, className: "inline mr-1" })), Math.abs((marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceChangePercent) || 0).toFixed(2), "%"] }), loading && (_jsx(RefreshCw, { size: 14, className: "ml-2 text-main animate-spin" }))] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Last Price" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100 font-mono", children: (_b = marketStats === null || marketStats === void 0 ? void 0 : marketStats.lastPrice) === null || _b === void 0 ? void 0 : _b.toFixed((marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceDecimals) || 2) })] }), _jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "24h High" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100 font-mono", children: (_c = marketStats === null || marketStats === void 0 ? void 0 : marketStats.highPrice) === null || _c === void 0 ? void 0 : _c.toFixed((marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceDecimals) || 2) })] }), _jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "24h Low" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100 font-mono", children: (_d = marketStats === null || marketStats === void 0 ? void 0 : marketStats.lowPrice) === null || _d === void 0 ? void 0 : _d.toFixed((marketStats === null || marketStats === void 0 ? void 0 : marketStats.priceDecimals) || 2) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "24h Volume" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100 font-mono", children: (_e = marketStats === null || marketStats === void 0 ? void 0 : marketStats.volume) === null || _e === void 0 ? void 0 : _e.toFixed(2) })] }), _jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Base Asset" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100", children: marketStats === null || marketStats === void 0 ? void 0 : marketStats.baseAsset })] }), _jsxs("div", { className: "flex justify-between items-center bg-white dark:bg-gray-950 p-2 rounded-sm border border-gray-200 dark:border-gray-800", children: [_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Quote Asset" }), _jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-gray-100", children: marketStats === null || marketStats === void 0 ? void 0 : marketStats.quoteAsset })] })] })] })] })) }));
+}

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

@@ -0,0 +1 @@
+export default function NordTradingView(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+export default function NordTradingView() {
+    var _a = useN1WalletContext(), sessionMode = _a.sessionMode, nord = _a.nord, nordUser = _a.nordUser;
+    var _b = useState(null), selectedMarket = _b[0], setSelectedMarket = _b[1];
+    var _c = useState('orderbook'), activeView = _c[0], setActiveView = _c[1];
+    // 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(function () {
+        if (!selectedMarket && nord.markets && nord.markets.length > 0) {
+            setSelectedMarket(nord.markets[0].symbol);
+        }
+    }, [nord.markets, selectedMarket]);
+    // Render the active view component
+    var renderActiveView = function () {
+        switch (activeView) {
+            case 'orderbook':
+                return _jsx(OrderBook, { marketSymbol: selectedMarket });
+            case 'tradeform':
+                return _jsx(TradeForm, { marketSymbol: selectedMarket });
+            case 'orders':
+                return _jsx(UserOrders, {});
+            case 'positions':
+                return (_jsxs("div", { className: "space-y-4", children: [_jsx(UserPositions, {}), _jsx(UserBalances, {})] }));
+            case 'balances':
+                return _jsx(UserBalances, {});
+            default:
+                return _jsx(OrderBook, { marketSymbol: selectedMarket });
+        }
+    };
+    // Map view types to display names
+    var viewLabels = {
+        orderbook: 'Order Book',
+        tradeform: 'Trade',
+        positions: 'Positions',
+        orders: 'Orders',
+        balances: 'Balances',
+        history: 'History',
+    };
+    return (_jsxs("div", { className: "space-y-4 @container", children: [_jsxs("div", { className: "flex flex-col @md:flex-row justify-between items-start @md:items-center bg-transparent mb-3 gap-3 @md:gap-0", children: [_jsx("div", { className: "flex justify-start gap-2 flex-wrap w-full @md:w-auto", children: ['orderbook', 'tradeform', 'positions', 'orders'].map(function (view) { return (_jsxs("button", { onClick: function () { return setActiveView(view); }, className: "\n                relative px-4 @md:px-5 py-2 text-sm font-medium tracking-wide transition-all duration-150 \n                border ".concat(activeView === view
+                                ? 'border-main/80 text-main bg-main/[0.03] shadow-[0_0_0_1px_rgba(255,68,26,0.1)]'
+                                : 'border-gray-200 dark:border-gray-800 text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-700', "\n                first:ml-0 last:mr-0 group rounded-[2px] overflow-hidden flex-grow @md:flex-grow-0\n              "), children: [_jsx("span", { className: "relative z-10", children: viewLabels[view] }), _jsx("span", { className: "\n                  absolute inset-0 bg-main/[0.02] opacity-0 transition-opacity duration-150\n                  ".concat(activeView !== view ? 'group-hover:opacity-100' : '', "\n                ") })] }, view)); }) }), _jsx("div", { className: "min-w-[160px] w-full @md:w-auto border border-gray-200 dark:border-gray-800 rounded-[2px] overflow-visible hover:border-gray-300 dark:hover:border-gray-700 transition-colors duration-150 relative z-20", children: _jsx("div", { className: "px-5 py-2 text-sm", children: _jsx(MarketOverview, { selectedMarket: selectedMarket, onMarketChange: setSelectedMarket }) }) })] }), _jsx("div", { className: "border border-gray-200 dark:border-gray-800 rounded-[3px] shadow-sm bg-white dark:bg-gray-950", children: renderActiveView() })] }));
+}

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

@@ -0,0 +1,5 @@
+interface OrderBookProps {
+    marketSymbol: string | null;
+}
+export default function OrderBook({ marketSymbol }: OrderBookProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

@@ -0,0 +1,61 @@
+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-gray-900 dark:text-gray-100 mb-2", children: "Depth Chart" }), _jsx("div", { className: "w-full h-32 bg-gray-50 dark:bg-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-gray-500 dark:text-gray-400", children: [_jsx("span", { children: minPrice.toFixed(2) }), _jsx("span", { children: ((minPrice + maxPrice) / 2).toFixed(2) }), _jsx("span", { children: maxPrice.toFixed(2) })] })] }));
+}

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

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

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

@@ -0,0 +1,29 @@
+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-gray-900 dark:text-gray-100", children: ["Order Book", ' ', marketSymbol ? _jsx("span", { className: "text-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-gray-100 dark:bg-gray-950 rounded-sm text-xs text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800 hover:border-main dark:hover:border-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-main' : 'text-gray-500 dark:text-gray-400') })] }), isOpen && (_jsx("div", { className: "absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-gray-950 rounded-sm shadow-lg border border-gray-200 dark:border-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-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 ".concat(aggregationLevel === level
+                                ? 'bg-gray-100 dark:bg-gray-800 border-l-2 border-main text-main'
+                                : 'text-gray-900 dark:text-gray-100'), children: level }, level)); }) }))] })] }));
+}

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

@@ -0,0 +1,11 @@
+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): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+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-gray-500 dark:text-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-main animate-spin" }) })), _jsxs("div", { className: "grid grid-cols-3 gap-1 mb-1 text-[10px] text-gray-500 dark:text-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-gray-900 dark:text-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-gray-200 dark:border-gray-800 rounded-sm text-center", children: _jsxs("span", { className: "text-[10px] text-gray-500 dark:text-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-gray-900 dark:text-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-gray-500 dark:text-gray-400 text-right", children: ["Last updated:", ' ', _jsx("span", { className: "font-mono", children: new Date(data.timestamp).toLocaleTimeString() })] })] }));
+}

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

@@ -0,0 +1,7 @@
+interface AmountInputProps {
+    amount: string;
+    onChange: (amount: string) => void;
+    marketInfo?: any;
+}
+export default function AmountInput({ amount, onChange, marketInfo, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+export {};