@n1xyz/wallet-widget 0.0.1 → 0.0.5

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

@@ -0,0 +1,177 @@
+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 { RefreshCw, X } from 'lucide-react';
+import { useEffect, useState, useRef } from 'react';
+import { useN1WalletContext } from '../../../../Provider/hooks';
+export default function UserOrders() {
+    var _this = this;
+    var _a = useN1WalletContext(), nord = _a.nord, nordUser = _a.nordUser;
+    var _b = useState([]), activeOrders = _b[0], setActiveOrders = _b[1];
+    var _c = useState([]), orderHistory = _c[0], setOrderHistory = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _e = useState(null), error = _e[0], setError = _e[1];
+    var _f = useState(null), cancellingOrderId = _f[0], setCancellingOrderId = _f[1];
+    var _g = useState(false), compactView = _g[0], setCompactView = _g[1];
+    var containerRef = useRef(null);
+    // Fetch user orders
+    useEffect(function () {
+        if (!nordUser)
+            return;
+        var fetchOrders = function () { return __awaiter(_this, void 0, void 0, function () {
+            var allOrders_1, 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]);
+                        // Refresh user info to get latest orders
+                        return [4 /*yield*/, nordUser.fetchInfo()];
+                    case 2:
+                        // Refresh user info to get latest orders
+                        _a.sent();
+                        allOrders_1 = [];
+                        // This is a simplified approach - in a real implementation, you would
+                        // properly extract and format orders from the nordUser object
+                        console.log(nord === null || nord === void 0 ? void 0 : nord.markets, nordUser.orders);
+                        Object.values(nordUser.orders || {}).forEach(function (accountOrders) {
+                            if (Array.isArray(accountOrders)) {
+                                accountOrders.forEach(function (order) {
+                                    var _a;
+                                    // Get market name from nord object
+                                    var market = (_a = nord === null || nord === void 0 ? void 0 : nord.markets) === null || _a === void 0 ? void 0 : _a.find(function (m) { return m.marketId === order.marketId; });
+                                    var marketName = (market === null || market === void 0 ? void 0 : market.symbol) || "Unknown Market";
+                                    // Convert to our Order interface format
+                                    var formattedOrder = {
+                                        orderId: order.orderId,
+                                        marketId: order.marketId,
+                                        symbol: marketName,
+                                        isLong: order.isLong,
+                                        size: order.size,
+                                        price: order.price,
+                                        status: order.status || 'OPEN',
+                                        createdAt: order.createdAt || Date.now(),
+                                    };
+                                    allOrders_1.push(formattedOrder);
+                                });
+                            }
+                        });
+                        // Split into active and historical orders
+                        setActiveOrders(allOrders_1.filter(function (order) { return order.status === 'OPEN'; }));
+                        setOrderHistory(allOrders_1.filter(function (order) { return order.status !== 'OPEN'; }));
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.error('Error fetching orders:', err_1);
+                        setError('Failed to load orders');
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchOrders();
+        // Set up polling for order updates
+        var intervalId = setInterval(fetchOrders, 10000); // Update every 10 seconds
+        return function () { return clearInterval(intervalId); };
+    }, [nordUser, nord]);
+    // Check container width and update layout
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var checkWidth = function () {
+            if (containerRef.current) {
+                setCompactView(containerRef.current.offsetWidth < 400);
+            }
+        };
+        // Initial check
+        checkWidth();
+        // Set up resize observer
+        var resizeObserver = new ResizeObserver(checkWidth);
+        resizeObserver.observe(containerRef.current);
+        return function () {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+        };
+    }, []);
+    // Handle order cancellation
+    var handleCancelOrder = function (orderId) { return __awaiter(_this, void 0, void 0, function () {
+        var err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!nordUser)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, 5, 6]);
+                    setCancellingOrderId(orderId); // Set the cancelling order ID to show animation
+                    return [4 /*yield*/, nordUser.cancelOrder(orderId)];
+                case 2:
+                    _a.sent();
+                    // Refresh orders after cancellation
+                    return [4 /*yield*/, nordUser.fetchInfo()];
+                case 3:
+                    // Refresh orders after cancellation
+                    _a.sent();
+                    // Update state (simplified - would be better to wait for the fetchOrders to run)
+                    setActiveOrders(activeOrders.filter(function (order) { return order.orderId !== orderId; }));
+                    return [3 /*break*/, 6];
+                case 4:
+                    err_2 = _a.sent();
+                    console.error('Error cancelling order:', err_2);
+                    setError('Failed to cancel order');
+                    return [3 /*break*/, 6];
+                case 5:
+                    setCancellingOrderId(null); // Reset cancelling order ID
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx("div", { className: "bg-white dark:bg-gray-950 shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden", children: _jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4", children: "Orders" }), _jsxs("div", { className: "overflow-hidden", ref: containerRef, children: [loading && (activeOrders.length === 0 && orderHistory.length === 0) ? (_jsx("div", { className: "flex items-center justify-center h-32", 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 text-red-600 dark:text-red-400 text-sm", children: error })) : activeOrders.length === 0 ? (_jsx("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm text-center", children: "No active orders" })) : !compactView ? (
+                        // Standard table view for larger containers
+                        _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-800", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Market" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Side" }), _jsx("th", { className: "px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Size" }), _jsx("th", { className: "px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Price" }), _jsx("th", { className: "px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Action" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-950 divide-y divide-gray-200 dark:divide-gray-800", children: activeOrders.map(function (order) { return (_jsxs("tr", { className: "hover:bg-gray-50 dark:hover:bg-gray-800", children: [_jsx("td", { className: "px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100", children: order.symbol }), _jsx("td", { className: "px-3 py-2 whitespace-nowrap text-sm", children: _jsx("span", { className: "font-medium ".concat(order.isLong ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'), children: order.isLong ? 'BUY' : 'SELL' }) }), _jsx("td", { className: "px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right font-mono", children: order.size }), _jsx("td", { className: "px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right font-mono", children: order.price }), _jsx("td", { className: "px-3 py-2 whitespace-nowrap text-sm text-right", children: _jsx("button", { onClick: function () { return handleCancelOrder(order.orderId); }, disabled: cancellingOrderId === order.orderId, className: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 relative ".concat(cancellingOrderId === order.orderId ? 'cursor-not-allowed' : ''), children: cancellingOrderId === order.orderId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "opacity-0", children: "Cancel" }), _jsx(X, { size: 16, className: "absolute inset-0 m-auto animate-pulse text-red-500" })] })) : ("Cancel") }) })] }, order.orderId)); }) })] }) })) : (
+                        // Compact card view for smaller containers
+                        _jsx("div", { className: "grid gap-2", children: activeOrders.map(function (order) { return (_jsxs("div", { className: "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded p-2 hover:bg-gray-50 dark:hover:bg-gray-800", children: [_jsxs("div", { className: "flex justify-between items-start mb-1", children: [_jsx("div", { className: "font-medium text-sm text-gray-900 dark:text-gray-100", children: order.symbol }), _jsx("button", { onClick: function () { return handleCancelOrder(order.orderId); }, disabled: cancellingOrderId === order.orderId, className: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-xs relative ".concat(cancellingOrderId === order.orderId ? 'cursor-not-allowed' : ''), children: cancellingOrderId === order.orderId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "opacity-0", children: "Cancel" }), _jsx(X, { size: 14, className: "absolute inset-0 m-auto animate-pulse text-red-500" })] })) : ("Cancel") })] }), _jsxs("div", { className: "grid grid-cols-3 gap-1 text-xs", children: [_jsx("div", { children: _jsx("span", { className: "font-medium ".concat(order.isLong ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'), children: order.isLong ? 'BUY' : 'SELL' }) }), _jsx("div", { className: "text-right font-mono text-gray-700 dark:text-gray-300", children: order.size }), _jsx("div", { className: "text-right font-mono text-gray-700 dark:text-gray-300", children: order.price })] })] }, order.orderId)); }) })), loading && (activeOrders.length > 0 || orderHistory.length > 0) && (_jsx("div", { className: "flex justify-center mt-2", children: _jsx(RefreshCw, { size: 16, className: "text-gray-400 animate-spin" }) }))] })] }) }));
+}

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

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

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

@@ -0,0 +1,188 @@
+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 } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useN1WalletContext } from '../../../../Provider/hooks';
+import { RefreshCw } from 'lucide-react';
+export default function UserPositions() {
+    var _this = this;
+    var _a = useN1WalletContext(), nord = _a.nord, nordUser = _a.nordUser;
+    var _b = useState([]), positions = _b[0], setPositions = _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([]), marketStats = _e[0], setMarketStats = _e[1];
+    // Fetch user positions
+    useEffect(function () {
+        if (!nordUser || !nord)
+            return;
+        var fetchPositions = function () { return __awaiter(_this, void 0, void 0, function () {
+            var stats, statsErr_1, realPositions, _i, _a, accountId, accountPositions, _loop_1, _b, accountPositions_1, position, err_1;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        setLoading(true);
+                        setError(null);
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 7, , 8]);
+                        // Refresh user info to get latest positions
+                        return [4 /*yield*/, nordUser.fetchInfo()];
+                    case 2:
+                        // Refresh user info to get latest positions
+                        _d.sent();
+                        _d.label = 3;
+                    case 3:
+                        _d.trys.push([3, 5, , 6]);
+                        return [4 /*yield*/, nord.marketsStats()];
+                    case 4:
+                        stats = _d.sent();
+                        setMarketStats(stats.markets);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        statsErr_1 = _d.sent();
+                        console.error('Error fetching market stats:', statsErr_1);
+                        return [3 /*break*/, 6];
+                    case 6:
+                        realPositions = [];
+                        // Loop through all accounts
+                        if (nordUser.accountIds) {
+                            for (_i = 0, _a = nordUser.accountIds; _i < _a.length; _i++) {
+                                accountId = _a[_i];
+                                accountPositions = nordUser.positions[accountId];
+                                if (accountPositions && accountPositions.length > 0) {
+                                    _loop_1 = function (position) {
+                                        // Only include positions with perp data and non-zero size
+                                        if (position.perp && Math.abs(position.perp.baseSize) > 0) {
+                                            // Find market info to get symbol
+                                            var market = nord.markets.find(function (m) { return m.marketId === position.marketId; });
+                                            var symbol = market ? market.symbol : "Market-".concat(position.marketId);
+                                            // Calculate PnL
+                                            var totalPnl = position.perp.sizePricePnl + position.perp.fundingPaymentPnl;
+                                            var entryValue = Math.abs(position.perp.baseSize) * position.perp.price;
+                                            var pnlPercentage = entryValue > 0 ? (totalPnl / entryValue) * 100 : 0;
+                                            // Get mark price from market stats or use entry price as fallback
+                                            var stats = marketStats.find(function (m) { return m.market_id === position.marketId; });
+                                            var markPrice = ((_c = stats === null || stats === void 0 ? void 0 : stats.perp_stats) === null || _c === void 0 ? void 0 : _c.mark_price) || position.perp.price;
+                                            realPositions.push({
+                                                marketId: position.marketId,
+                                                symbol: symbol,
+                                                size: position.perp.isLong ? position.perp.baseSize : -position.perp.baseSize,
+                                                entryPrice: position.perp.price,
+                                                markPrice: markPrice,
+                                                pnl: totalPnl,
+                                                pnlPercentage: pnlPercentage,
+                                                accountId: accountId
+                                            });
+                                        }
+                                    };
+                                    // Process each position
+                                    for (_b = 0, accountPositions_1 = accountPositions; _b < accountPositions_1.length; _b++) {
+                                        position = accountPositions_1[_b];
+                                        _loop_1(position);
+                                    }
+                                }
+                            }
+                        }
+                        setPositions(realPositions);
+                        setLoading(false); // Explicitly set loading to false on success
+                        return [3 /*break*/, 8];
+                    case 7:
+                        err_1 = _d.sent();
+                        console.error('Error fetching positions:', err_1);
+                        setError('Failed to load positions');
+                        setLoading(false); // Ensure loading is set to false on error
+                        return [3 /*break*/, 8];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchPositions();
+        // Set up polling for position updates
+        var intervalId = setInterval(fetchPositions, 10000); // Update every 10 seconds
+        return function () { return clearInterval(intervalId); };
+    }, [nordUser, nord]); // Remove marketStats from dependency array to prevent infinite loops
+    // Handle position close
+    var handleClosePosition = function (marketId, accountId) { return __awaiter(_this, void 0, void 0, function () {
+        var position, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!nordUser)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    position = positions.find(function (pos) { return pos.marketId === marketId && pos.accountId === accountId; });
+                    if (!position) {
+                        throw new Error('Position not found');
+                    }
+                    // Place an order to close the position (opposite side, same size)
+                    return [4 /*yield*/, nordUser.placeOrder({
+                            marketId: marketId,
+                            side: position.size > 0 ? 'ask' : 'bid', // Opposite side to close
+                            fillMode: 'market', // Market order to ensure it gets filled
+                            isReduceOnly: true, // Reduce-only to ensure it only closes the position
+                            size: Math.abs(position.size), // Absolute size value
+                            accountId: accountId
+                        })];
+                case 2:
+                    // Place an order to close the position (opposite side, same size)
+                    _a.sent();
+                    // Refresh positions after closing
+                    return [4 /*yield*/, nordUser.fetchInfo()];
+                case 3:
+                    // Refresh positions after closing
+                    _a.sent();
+                    // Remove the position from the local state
+                    setPositions(positions.filter(function (pos) { return !(pos.marketId === marketId && pos.accountId === accountId); }));
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_2 = _a.sent();
+                    console.error('Error closing position:', err_2);
+                    setError('Failed to close position');
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx("div", { className: "bg-white dark:bg-gray-950 overflow-hidden", children: _jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4", children: "Positions" }), loading && positions.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", 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 })) : positions.length === 0 ? (_jsx("div", { className: "p-3 bg-gray-50 dark:bg-gray-950 rounded-lg text-gray-500 dark:text-gray-400 text-sm text-center", children: "No open positions" })) : (_jsxs("div", { className: "space-y-3", children: [positions.map(function (position, index) { return (_jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-950 rounded-lg", children: [_jsx("div", { className: "flex items-center justify-between mb-2", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100 mr-2", children: position.symbol }), _jsxs("span", { className: "text-xs px-2 py-0.5 rounded ".concat(position.size > 0
+                                                    ? 'bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                                                    : 'bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400'), children: [position.size > 0 ? 'Long' : 'Short', " ", Math.abs(position.size)] })] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 dark:text-gray-400", children: "Entry Price" }), _jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100 font-mono", children: position.entryPrice.toFixed(2) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-gray-500 dark:text-gray-400", children: "Mark Price" }), _jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100 font-mono", children: position.markPrice.toFixed(2) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-gray-500 dark:text-gray-400", children: "PnL" }), _jsxs("div", { className: "font-medium font-mono ".concat(position.pnl >= 0
+                                                        ? 'text-green-600 dark:text-green-400'
+                                                        : 'text-red-600 dark:text-red-400'), children: [position.pnl >= 0 ? '+' : '', position.pnl.toFixed(2), " (", position.pnlPercentage.toFixed(2), "%)"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-gray-500 dark:text-gray-400", children: "Liquidation" }), _jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100 font-mono", children: position.liquidationPrice ? position.liquidationPrice.toFixed(2) : 'N/A' })] })] })] }, index)); }), loading && positions.length > 0 && (_jsx("div", { className: "flex justify-center mt-2", children: _jsx(RefreshCw, { size: 16, className: "text-gray-400 animate-spin" }) }))] }))] }) }));
+}

package/dist/Modal/SigningView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ModalHeader } from './ModalHeader';
 export function SigningView() {
-    return (_jsxs("div", { className: "rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200", children: [_jsx(ModalHeader, {}), _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("div", { className: "animate-spin-slow w-16 h-16 border-4 rounded-full border-neutral-200 dark:border-neutral-700 border-t-neutral-900 dark:border-t-white" }), _jsx("p", { className: "text-sm mb-4 mt-6 text-neutral-500 dark:text-neutral-400", children: "Please sign the message to authenticate" })] })] }));
+    return (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity]", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx(ModalHeader, {}) }), _jsx("div", { className: "p-6 overflow-hidden relative", children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx("div", { className: "relative", children: _jsx("div", { className: "animate-spin rounded-full h-16 w-16 border-2 border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "absolute inset-0 rounded-full border-t-2 border-main" }) }) }), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-gray-900 dark:text-white transition-all duration-300 h-[32px] flex items-center justify-center relative font-semibold", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Waiting for signature" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Waiting for signature" })] }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-neutral-400 h-[20px] flex items-center justify-center relative", children: [_jsx("span", { className: "opacity-0 absolute select-none", "aria-hidden": "true", children: "Please sign the message in your wallet" }), _jsx("div", { className: "absolute min-w-[280px]", children: "Please sign the message in your wallet" })] })] })] }) })] }));
 }

package/dist/NordFlow/WalletConnectionFlow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WalletConnectionFlowProps {
+    onClose?: () => void;
+}
+/**
+ * Main component for the wallet connection flow
+ */
+export declare const WalletConnectionFlow: React.FC<WalletConnectionFlowProps>;
+export {};

package/dist/NordFlow/WalletConnectionFlow.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import Logo from '../components/Logo';
+import { CHAINS } from './constants';
+import { useDepositFlow, useFlowState, useInterruptHandler, useNordSession, useWalletConnect } from './hooks';
+import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, EvmWalletAuthScreen, FinalSuccessScreen, NordAuthScreen } from './screens';
+import { FlowState } from './types';
+var ConfirmationDialog = function (_a) {
+    var onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    return (_jsx("div", { className: "fixed inset-0 bg-gray-50 dark:bg-gray-950 flex items-center justify-center z-50 font-era overflow-auto", children: _jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity] animate-fade-in", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "flex items-center justify-between", children: _jsx("div", { className: "flex items-center gap-3", children: _jsx("h2", { className: "text-xl text-gray-700 dark:text-gray-300", children: "Confirm Close" }) }) }) }), _jsxs("div", { className: "p-6 overflow-hidden relative", children: [_jsx("p", { className: "text-gray-700 dark:text-gray-300 text-center mb-6", children: "Are you sure you want to close? This operation is in progress." }), _jsxs("div", { className: "flex flex-col space-y-3", children: [_jsx("button", { onClick: onConfirm, className: "group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center \n            transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "Yes, close" }), _jsx("button", { onClick: onCancel, className: "group relative w-full overflow-hidden rounded-md border-2 bg-gray-100 dark:bg-neutral-950 py-4 text-center \n            transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n            cursor-pointer border-gray-200 dark:border-neutral-800 hover:border-gray-400 dark:hover:border-white/60\n            text-gray-800 dark:text-gray-200", children: "No, continue" })] })] })] }) }));
+};
+/**
+ * Main component for the wallet connection flow
+ */
+export var WalletConnectionFlow = function (_a) {
+    var onClose = _a.onClose;
+    // Handle state changes
+    var handleStateChange = useCallback(function (newState, prevState) {
+        console.log("State changed from ".concat(prevState, " to ").concat(newState));
+    }, []);
+    // Handle errors
+    var handleError = useCallback(function (error) {
+        console.error('Flow error:', error);
+    }, []);
+    // Initialize flow state
+    var _b = useFlowState({
+        autoRecover: false, // We'll handle recovery with a prompt
+        onStateChange: handleStateChange,
+        onError: handleError,
+    }), state = _b.state, context = _b.context, transition = _b.transition, updateContext = _b.updateContext, recover = _b.recover, recordInterruption = _b.recordInterruption, handleFlowError = _b.handleError, isRecoveryAvailable = _b.isRecoveryAvailable;
+    // Initialize wallet connection
+    var _c = useWalletConnect({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }), isConnecting = _c.isConnecting, connectWallet = _c.connectWallet;
+    // Initialize Nord session
+    var hasNordAccount = useNordSession({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+    }).hasNordAccount;
+    // Initialize deposit flow
+    var _d = useDepositFlow({
+        state: state,
+        context: context,
+        transition: transition,
+        handleError: handleFlowError,
+        updateContext: updateContext,
+    }), selectedChain = _d.selectedChain, amount = _d.amount, isDepositing = _d.isDepositing, transactionId = _d.transactionId, selectChain = _d.selectChain, updateAmount = _d.updateAmount, startDeposit = _d.startDeposit, goBackToChainSelection = _d.goBackToChainSelection;
+    // Initialize interrupt handler
+    var _e = useInterruptHandler({
+        state: state,
+        recordInterruption: recordInterruption,
+        onClose: onClose,
+    }), isClosing = _e.isClosing, showConfirmation = _e.showConfirmation, handleCloseRequest = _e.handleCloseRequest, confirmClose = _e.confirmClose, cancelClose = _e.cancelClose;
+    // Check for recovery on mount
+    var _f = useState(false), hasAttemptedRecovery = _f[0], setHasAttemptedRecovery = _f[1];
+    React.useEffect(function () {
+        if (!hasAttemptedRecovery) {
+            if (isRecoveryAvailable) {
+                // Automatically recover without showing a prompt
+                recover();
+            }
+            else {
+                // Start at CONNECTING_WALLET so we show the wallet selection screen
+                // The actual connection will only happen when the user clicks the button
+                transition(FlowState.CONNECTING_WALLET);
+            }
+            setHasAttemptedRecovery(true);
+        }
+    }, [hasAttemptedRecovery, isRecoveryAvailable, transition, recover]);
+    // For deposit progress message
+    var _g = useState({
+        visible: true,
+        title: 'Processing Deposit',
+        subtitle: 'Please wait while we process your deposit',
+        isTyping: false
+    }), depositMessage = _g[0], setDepositMessage = _g[1];
+    // Mock table values for success screen
+    var tableValues = {
+        tx: { text: transactionId || '0x123...456', visible: true, typing: false },
+        from: { text: 'Your Wallet', visible: true, typing: false },
+        to: { text: 'Nord Account', visible: true, typing: false },
+        network: { text: 'Ethereum', visible: true, typing: false },
+        status: { text: 'Completed', visible: true, typing: false }
+    };
+    var handleFinish = function () {
+        if (onClose) {
+            onClose();
+        }
+    };
+    // Render confirmation dialog if needed
+    var renderConfirmationDialog = function () {
+        if (!showConfirmation)
+            return null;
+        return (_jsx(ConfirmationDialog, { onConfirm: confirmClose, onCancel: cancelClose }));
+    };
+    // Render current screen based on state
+    var renderScreen = function () {
+        switch (state) {
+            case FlowState.IDLE:
+            case FlowState.CONNECTING_WALLET:
+                return (_jsx(ConnectWalletScreen, { onConnectWallet: connectWallet, isConnecting: isConnecting }));
+            case FlowState.ETH_TO_SOL_AUTH:
+                return (_jsx(EvmWalletAuthScreen, { onAuth: function () { return transition(FlowState.CHAIN_SELECTION); } }));
+            case FlowState.CHAIN_SELECTION:
+                return (_jsx(ChainSelectionScreen, { chains: CHAINS, onChainSelect: selectChain }));
+            case FlowState.AMOUNT_INPUT:
+                return (_jsx(AmountInputScreen, { amount: amount, onAmountChange: updateAmount, onContinue: startDeposit, balance: 100 }));
+            case FlowState.DEPOSIT_PROGRESS:
+                return (_jsx(DepositProgressScreen, { message: depositMessage, percentComplete: 75 }));
+            case FlowState.DEPOSIT_SUCCESS:
+                return (_jsx(DepositSuccessScreen, { amount: amount, tableValues: tableValues, onContinue: function () { return transition(FlowState.NORD_AUTH); } }));
+            case FlowState.NORD_AUTH:
+                return (_jsx(NordAuthScreen, { hasNordAccount: hasNordAccount, onCreateAccount: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: false }); }, onLogin: function () { return transition(FlowState.AUTH_LOADING, { hasNordAccount: true }); } }));
+            case FlowState.AUTH_LOADING:
+                return (_jsx(AuthLoadingScreen, { isCreatingAccount: !hasNordAccount, onAuthComplete: function (success) {
+                        if (success) {
+                            console.log('Auth complete callback in WalletConnectionFlow, transitioning to FINAL_SUCCESS');
+                            // Update the context first
+                            updateContext({ hasActiveSession: true });
+                            // Then transition to success
+                            transition(FlowState.FINAL_SUCCESS, { hasActiveSession: true });
+                        }
+                        else {
+                            // Handle auth failure
+                            handleFlowError(new Error('Authentication failed'));
+                        }
+                    } }));
+            case FlowState.FINAL_SUCCESS:
+                return (_jsx(FinalSuccessScreen, { onDone: handleFinish }));
+            case FlowState.ERROR:
+                return (_jsx(ErrorScreen, { error: context.error, onRetry: function () {
+                        // Logic to go back to appropriate state based on error
+                        transition(FlowState.CONNECTING_WALLET);
+                    }, onCancel: handleFinish }));
+            default:
+                return _jsx("div", { children: "Loading..." });
+        }
+    };
+    return (_jsx("div", { className: "z-50 flex items-center justify-center overflow-auto font-era ".concat(isClosing ? 'animate-fade-out' : 'animate-fade-in'), children: _jsxs("div", { className: "bg-gray-50 dark:bg-gray-950 relative border border-gray-200 dark:border-gray-800 rounded-md transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] w-full max-w-sm m-4 origin-center will-change-[max-width,transform,opacity min-w-96", children: [_jsx("div", { className: "p-6 border-b border-gray-200 dark:border-gray-800 w-full max-w-2xl mx-auto", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-3", children: _jsx("div", { className: "w-6 h-6 text-gray-50", children: _jsx(Logo, { size: 24 }) }) }), _jsx("button", { onClick: handleCloseRequest, className: "\n                text-neutral-400 hover:text-gray-900 dark:hover:text-white \n                transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\n                h-10 w-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800\n                flex items-center justify-center\n              ", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) })] }) }), _jsxs("div", { className: "wallet-connection-flow-content p-6 overflow-hidden", children: [renderConfirmationDialog(), renderScreen()] })] }) }));
+};

package/dist/NordFlow/components/AnimatedButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonKey, ButtonStates } from '../types';
+interface AnimatedButtonProps {
+    onClick: () => void;
+    text: string;
+    isTyping: boolean;
+    disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const AnimatedButton: ({ onClick, text, isTyping, disabled, onMouseEnter, onMouseLeave, }: AnimatedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useButtonTyping: (buttonStates: ButtonStates, setButtonStates: React.Dispatch<React.SetStateAction<ButtonStates>>, buttonConfigs: Record<ButtonKey, {
+    text: string;
+}>) => void;
+export {};