@n1xyz/wallet-widget 0.0.1 → 0.0.5

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

@@ -0,0 +1,116 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useN1WalletContext } from '../../../../Provider/hooks';
+import { ArrowDownToLine, ArrowUpFromLine, RefreshCw } from 'lucide-react';
+export default function AccountSummary() {
+    var _this = this;
+    var _a = useN1WalletContext(), nord = _a.nord, nordUser = _a.nordUser;
+    var _b = useState([]), balances = _b[0], setBalances = _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(null), selectedAccount = _e[0], setSelectedAccount = _e[1];
+    // Fetch account balances
+    useEffect(function () {
+        if (!nordUser)
+            return;
+        var fetchBalances = function () { return __awaiter(_this, void 0, void 0, function () {
+            var accountBalances, 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, 4, 5, 6]);
+                        if (!(nordUser.accountIds && nordUser.accountIds.length > 0)) return [3 /*break*/, 3];
+                        // Set default selected account if not already set
+                        if (!selectedAccount) {
+                            setSelectedAccount(nordUser.accountIds[0]);
+                        }
+                        // Refresh user info to get latest balances
+                        return [4 /*yield*/, nordUser.fetchInfo()];
+                    case 2:
+                        // Refresh user info to get latest balances
+                        _a.sent();
+                        accountBalances = Object.values(nordUser.balances)
+                            .flatMap(function (accountBalances) { return accountBalances; })
+                            .filter(function (balance) { return balance.accountId === (selectedAccount || nordUser.accountIds[0]); });
+                        setBalances(accountBalances);
+                        _a.label = 3;
+                    case 3: return [3 /*break*/, 6];
+                    case 4:
+                        err_1 = _a.sent();
+                        console.error('Error fetching balances:', err_1);
+                        setError('Failed to load account balances');
+                        return [3 /*break*/, 6];
+                    case 5:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchBalances();
+        // Set up polling for balance updates
+        var intervalId = setInterval(fetchBalances, 30000); // Update every 30 seconds
+        return function () { return clearInterval(intervalId); };
+    }, [nordUser, selectedAccount]);
+    // Handle account change
+    var handleAccountChange = function (accountId) {
+        setSelectedAccount(accountId);
+    };
+    // Handle deposit
+    var handleDeposit = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            // This would open a deposit modal or flow
+            console.log('Open deposit flow');
+            return [2 /*return*/];
+        });
+    }); };
+    // Handle withdraw
+    var handleWithdraw = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            // This would open a withdraw modal or flow
+            console.log('Open withdraw flow');
+            return [2 /*return*/];
+        });
+    }); };
+    return (_jsx("div", { className: "bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden", children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Account Summary" }), (nordUser === null || nordUser === void 0 ? void 0 : nordUser.accountIds) && nordUser.accountIds.length > 1 && (_jsx("select", { value: selectedAccount || '', onChange: function (e) { return handleAccountChange(Number(e.target.value)); }, className: "px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded-lg text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700", children: nordUser.accountIds.map(function (accountId) { return (_jsxs("option", { value: accountId, children: ["Account ", accountId] }, accountId)); }) }))] }), _jsx("div", { className: "space-y-2", children: loading && balances.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-24", children: _jsx(RefreshCw, { size: 20, className: "text-gray-400 animate-spin" }) })) : error ? (_jsx("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-red-600 dark:text-red-400 text-sm", children: error })) : balances.length === 0 ? (_jsx("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-gray-500 dark:text-gray-400 text-sm", children: "No balances found" })) : (_jsxs(_Fragment, { children: [balances.map(function (balance, index) { return (_jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: balance.token || balance.symbol }), _jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Account ", balance.accountId] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100 font-mono", children: balance.amount || balance.balance }), _jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Available" })] })] }, index)); }), loading && (_jsx("div", { className: "flex justify-center mt-2", children: _jsx(RefreshCw, { size: 16, className: "text-gray-400 animate-spin" }) }))] })) }), _jsxs("div", { className: "grid grid-cols-2 gap-3 mt-4", children: [_jsxs("button", { onClick: handleDeposit, className: "flex items-center justify-center px-4 py-2 bg-blue-100 dark:bg-blue-900/20 hover:bg-blue-200 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg transition-colors duration-200", children: [_jsx(ArrowDownToLine, { size: 16, className: "mr-2" }), "Deposit"] }), _jsxs("button", { onClick: handleWithdraw, className: "flex items-center justify-center px-4 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors duration-200", children: [_jsx(ArrowUpFromLine, { size: 16, className: "mr-2" }), "Withdraw"] })] })] }) }));
+}

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

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

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,38 @@
+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-10", 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,197 @@
+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();
+                        console.log(orderbook, "orderbook");
+                        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;
+        console.log(data, "zzzz");
+        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]; });
+        console.log(bids, asks);
+        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 {};