@n1xyz/wallet-widget 0.0.1 → 0.0.5

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,28 @@
+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,22 @@
+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" }) }));
+    }
+    console.log(data);
+    // 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 {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function AmountInput(_a) {
+    var amount = _a.amount, onChange = _a.onChange, marketInfo = _a.marketInfo;
+    // Handle amount change
+    var handleAmountChange = function (e) {
+        var value = e.target.value;
+        // Allow only numbers and decimal point
+        if (/^[0-9]*\.?[0-9]*$/.test(value) || value === '') {
+            onChange(value);
+        }
+    };
+    // Calculate percentage of available balance
+    var handlePercentClick = function (percent) {
+        // This is a placeholder. In a real implementation, you would calculate
+        // the percentage of the available balance based on marketInfo
+        onChange((percent * 0.01).toString());
+    };
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Amount" }), _jsx("div", { className: "relative", children: _jsx("input", { type: "text", value: amount, onChange: handleAmountChange, className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-800 rounded-sm text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 bg-white dark:bg-dark-950 font-mono transition-colors duration-200", placeholder: "Enter amount" }) }), _jsx("div", { className: "grid grid-cols-4 gap-1 mt-1", children: [25, 50, 75, 100].map(function (percent) { return (_jsxs("button", { type: "button", onClick: function () { return handlePercentClick(percent); }, className: "text-[10px] px-1 py-0.5 border border-gray-200 dark:border-gray-800 hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white rounded-sm text-gray-700 dark:text-gray-300 transition-colors duration-200 bg-white dark:bg-dark-950", children: [percent, "%"] }, percent)); }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import { OrderSide } from './TradeForm';
+interface BuySellTabsProps {
+    side: OrderSide;
+    onChange: (side: OrderSide) => void;
+}
+export default function BuySellTabs({ side, onChange }: BuySellTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export default function BuySellTabs(_a) {
+    var side = _a.side, onChange = _a.onChange;
+    var _b = useState(null), hoveredSide = _b[0], setHoveredSide = _b[1];
+    var _c = useState(false), animating = _c[0], setAnimating = _c[1];
+    var handleSideChange = function (newSide) {
+        if (side !== newSide) {
+            setAnimating(true);
+            onChange(newSide);
+            setTimeout(function () { return setAnimating(false); }, 300);
+        }
+    };
+    return (_jsxs("div", { className: "flex rounded-sm overflow-hidden border border-gray-200 dark:border-gray-700 relative", children: [_jsx("div", { className: "absolute top-0 bottom-0 w-1/2 transition-all duration-300 ease-in-out ".concat(side === 'BUY'
+                    ? 'left-0 bg-emerald-600 dark:bg-emerald-600 rounded-r-sm'
+                    : 'left-1/2 bg-red-700 dark:bg-red-700 rounded-l-sm') }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('BUY'); }, onMouseEnter: function () { return setHoveredSide('BUY'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'BUY' ? 'text-white' : 'text-gray-700 dark:text-gray-300'), children: "Buy" }), side === 'BUY' && hoveredSide === 'BUY' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] animate-shimmer", style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }))] }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('SELL'); }, onMouseEnter: function () { return setHoveredSide('SELL'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'SELL' ? 'text-white' : 'text-gray-700 dark:text-gray-300'), children: "Sell" }), side === 'SELL' && hoveredSide === 'SELL' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] animate-shimmer", style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }))] })] }));
+}

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

@@ -0,0 +1,7 @@
+import { FillMode } from './TradeForm';
+interface FillModeSelectorProps {
+    fillMode: FillMode;
+    onFillModeChange: (mode: FillMode) => void;
+}
+export default function FillModeSelector({ fillMode, onFillModeChange }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+export default function FillModeSelector(_a) {
+    var fillMode = _a.fillMode, onFillModeChange = _a.onFillModeChange;
+    var _b = useState(false), isFillModeOpen = _b[0], setIsFillModeOpen = _b[1];
+    var _c = useState(null), hoveredFillMode = _c[0], setHoveredFillMode = _c[1];
+    var fillModeRef = useRef(null);
+    var _d = useState(null), fillModeRect = _d[0], setFillModeRect = _d[1];
+    // Update rect when dropdown opens
+    useEffect(function () {
+        if (isFillModeOpen && fillModeRef.current) {
+            setFillModeRect(fillModeRef.current.getBoundingClientRect());
+        }
+    }, [isFillModeOpen]);
+    // Close dropdowns when clicking outside
+    useEffect(function () {
+        function handleClickOutside(event) {
+            if (fillModeRef.current && !fillModeRef.current.contains(event.target)) {
+                setIsFillModeOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Fill mode options
+    var fillModes = ['GTC', 'POST_ONLY', 'IOC', 'FOK'];
+    // Fill mode descriptions and display names
+    var fillModeInfo = {
+        'GTC': {
+            displayName: 'Limit',
+            description: 'Good Till Cancelled'
+        },
+        'POST_ONLY': {
+            displayName: 'Post Only',
+            description: 'Only maker orders'
+        },
+        'IOC': {
+            displayName: 'Market',
+            description: 'Immediate or Cancel'
+        },
+        'FOK': {
+            displayName: 'Fill or Kill',
+            description: 'Fill completely or cancel'
+        }
+    };
+    // Render fill mode dropdown via portal
+    var renderFillModeDropdown = function () {
+        if (!isFillModeOpen || !fillModeRect)
+            return null;
+        var dropdownStyle = {
+            position: 'fixed',
+            top: "".concat(fillModeRect.bottom + window.scrollY, "px"),
+            left: "".concat(fillModeRect.left + window.scrollX, "px"),
+            width: "".concat(fillModeRect.width, "px"),
+            zIndex: 9999,
+            maxHeight: '200px',
+            overflowY: 'auto'
+        };
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-dark-950 rounded-sm shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
+                    onFillModeChange(mode);
+                    setIsFillModeOpen(false);
+                }, onMouseEnter: function () { return setHoveredFillMode(mode); }, onMouseLeave: function () { return setHoveredFillMode(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(fillMode === mode
+                    ? 'bg-gray-100 dark:bg-gray-800 font-medium text-gray-900 dark:text-white'
+                    : 'text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
+                                    ? 'bg-emerald-600 dark:bg-emerald-500'
+                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { className: "font-medium", children: fillModeInfo[mode].displayName }), _jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: fillModeInfo[mode].description })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] animate-shimmer dark:via-gray-300", style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }))] }, mode)); }) }), document.body);
+    };
+    return (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-sm text-sm text-gray-900 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors duration-200 bg-white dark:bg-dark-950 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600", children: [_jsx("span", { children: fillModeInfo[fillMode].displayName }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen ? 'rotate-180 text-gray-700 dark:text-gray-300' : 'text-gray-500 dark:text-gray-400') })] }), renderFillModeDropdown()] }));
+}

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

@@ -0,0 +1,9 @@
+import { OrderType, FillMode } from './TradeForm';
+interface FillModeSelectorProps {
+    orderType: OrderType;
+    fillMode: FillMode;
+    onOrderTypeChange: (type: OrderType) => void;
+    onFillModeChange: (mode: FillMode) => void;
+}
+export default function FillModeSelector({ orderType, fillMode, onOrderTypeChange, onFillModeChange }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+export default function FillModeSelector(_a) {
+    var orderType = _a.orderType, fillMode = _a.fillMode, onOrderTypeChange = _a.onOrderTypeChange, onFillModeChange = _a.onFillModeChange;
+    var _b = useState(false), isOrderTypeOpen = _b[0], setIsOrderTypeOpen = _b[1];
+    var _c = useState(false), isFillModeOpen = _c[0], setIsFillModeOpen = _c[1];
+    var _d = useState(null), hoveredOrderType = _d[0], setHoveredOrderType = _d[1];
+    var _e = useState(null), hoveredFillMode = _e[0], setHoveredFillMode = _e[1];
+    var orderTypeRef = useRef(null);
+    var fillModeRef = useRef(null);
+    var _f = useState(null), orderTypeRect = _f[0], setOrderTypeRect = _f[1];
+    var _g = useState(null), fillModeRect = _g[0], setFillModeRect = _g[1];
+    // Update rect when dropdown opens
+    useEffect(function () {
+        if (isOrderTypeOpen && orderTypeRef.current) {
+            setOrderTypeRect(orderTypeRef.current.getBoundingClientRect());
+        }
+    }, [isOrderTypeOpen]);
+    useEffect(function () {
+        if (isFillModeOpen && fillModeRef.current) {
+            setFillModeRect(fillModeRef.current.getBoundingClientRect());
+        }
+    }, [isFillModeOpen]);
+    // Close dropdowns when clicking outside
+    useEffect(function () {
+        function handleClickOutside(event) {
+            if (orderTypeRef.current && !orderTypeRef.current.contains(event.target)) {
+                setIsOrderTypeOpen(false);
+            }
+            if (fillModeRef.current && !fillModeRef.current.contains(event.target)) {
+                setIsFillModeOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Order type options
+    var orderTypes = ['LIMIT', 'MARKET'];
+    // Fill mode options
+    var fillModes = ['GTC', 'IOC', 'FOK', 'POST_ONLY'];
+    // Fill mode descriptions
+    var fillModeDescriptions = {
+        'GTC': 'Good Till Cancelled',
+        'IOC': 'Immediate or Cancel',
+        'FOK': 'Fill or Kill',
+        'POST_ONLY': 'Post Only'
+    };
+    // Render dropdown via portal
+    var renderOrderTypeDropdown = function () {
+        if (!isOrderTypeOpen || !orderTypeRect)
+            return null;
+        var dropdownStyle = {
+            position: 'fixed',
+            top: "".concat(orderTypeRect.bottom + window.scrollY, "px"),
+            left: "".concat(orderTypeRect.left + window.scrollX, "px"),
+            width: "".concat(orderTypeRect.width, "px"),
+            zIndex: 9999,
+            maxHeight: '200px',
+            overflowY: 'auto'
+        };
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-dark-950 rounded-sm shadow-lg border border-gray-200 dark:border-gray-800 overflow-hidden animate-dropdown-open", style: dropdownStyle, children: orderTypes.map(function (type) { return (_jsxs("button", { type: "button", onClick: function () {
+                    onOrderTypeChange(type);
+                    setIsOrderTypeOpen(false);
+                }, onMouseEnter: function () { return setHoveredOrderType(type); }, onMouseLeave: function () { return setHoveredOrderType(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(orderType === type
+                    ? 'bg-gray-100 dark:bg-gray-800 font-medium text-gray-900 dark:text-white'
+                    : 'text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(orderType === type
+                                    ? 'bg-emerald-600 dark:bg-emerald-500'
+                                    : 'bg-transparent') }), _jsx("span", { className: "ml-1", children: type })] }), orderType === type && hoveredOrderType === type && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] animate-shimmer dark:via-gray-300", style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }))] }, type)); }) }), document.body);
+    };
+    // Render fill mode dropdown via portal
+    var renderFillModeDropdown = function () {
+        if (!isFillModeOpen || !fillModeRect)
+            return null;
+        var dropdownStyle = {
+            position: 'fixed',
+            top: "".concat(fillModeRect.bottom + window.scrollY, "px"),
+            left: "".concat(fillModeRect.left + window.scrollX, "px"),
+            width: "".concat(fillModeRect.width, "px"),
+            zIndex: 9999,
+            maxHeight: '200px',
+            overflowY: 'auto'
+        };
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-dark-950 rounded-sm shadow-lg border border-gray-200 dark:border-gray-800 overflow-hidden animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
+                    onFillModeChange(mode);
+                    setIsFillModeOpen(false);
+                }, onMouseEnter: function () { return setHoveredFillMode(mode); }, onMouseLeave: function () { return setHoveredFillMode(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(fillMode === mode
+                    ? 'bg-gray-100 dark:bg-gray-800 font-medium text-gray-900 dark:text-white'
+                    : 'text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
+                                    ? 'bg-emerald-600 dark:bg-emerald-500'
+                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { children: mode }), _jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: fillModeDescriptions[mode] })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] animate-shimmer dark:via-gray-300", style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }))] }, mode)); }) }), document.body);
+    };
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "relative", ref: orderTypeRef, children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsOrderTypeOpen(!isOrderTypeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-gray-200 dark:border-gray-800 rounded-sm text-sm text-gray-900 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors duration-200 bg-white dark:bg-dark-950 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600", children: [_jsx("span", { children: orderType }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOrderTypeOpen ? 'rotate-180 text-gray-700 dark:text-gray-300' : 'text-gray-500 dark:text-gray-400') })] }), renderOrderTypeDropdown()] }), orderType === 'LIMIT' && (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Fill Mode" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-gray-200 dark:border-gray-800 rounded-sm text-sm text-gray-900 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors duration-200 bg-white dark:bg-dark-950 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600", children: [_jsx("span", { children: fillMode }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen ? 'rotate-180 text-gray-700 dark:text-gray-300' : 'text-gray-500 dark:text-gray-400') })] }), renderFillModeDropdown()] }))] }));
+}

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

@@ -0,0 +1,7 @@
+interface PriceInputProps {
+    price: string;
+    onChange: (price: string) => void;
+    marketPrice?: number;
+}
+export default function PriceInput({ price, onChange, marketPrice }: PriceInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PriceInput(_a) {
+    var price = _a.price, onChange = _a.onChange, marketPrice = _a.marketPrice;
+    // Handle price change
+    var handlePriceChange = function (e) {
+        var value = e.target.value;
+        // Allow only numbers and decimal point
+        if (/^[0-9]*\.?[0-9]*$/.test(value) || value === '') {
+            onChange(value);
+        }
+    };
+    // Set price to market price
+    var setMarketPrice = function () {
+        if (marketPrice) {
+            onChange(marketPrice.toString());
+        }
+    };
+    // Adjust price by percentage
+    var adjustPrice = function (percentage) {
+        if (!price)
+            return;
+        var currentPrice = parseFloat(price);
+        if (isNaN(currentPrice))
+            return;
+        var newPrice = currentPrice * (1 + percentage / 100);
+        onChange(newPrice.toString());
+    };
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Price" }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: price, onChange: handlePriceChange, className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-800 rounded-sm text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 bg-white dark:bg-dark-950 font-mono transition-colors duration-200", placeholder: "Enter price" }), marketPrice && (_jsx("button", { type: "button", onClick: setMarketPrice, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[10px] border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 px-1.5 py-0.5 rounded-sm hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white transition-colors duration-200", children: "Market" }))] }), _jsxs("div", { className: "grid grid-cols-4 gap-1 mt-2", children: [_jsx("button", { type: "button", onClick: function () { return adjustPrice(-1); }, className: "text-xs px-1 py-0.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300 transition-colors duration-200", children: "-1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(-0.1); }, className: "text-xs px-1 py-0.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300 transition-colors duration-200", children: "-0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(0.1); }, className: "text-xs px-1 py-0.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300 transition-colors duration-200", children: "+0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(1); }, className: "text-xs px-1 py-0.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300 transition-colors duration-200", children: "+1%" })] })] }));
+}

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

@@ -0,0 +1,9 @@
+import { OrderSide, OrderType } from './TradeForm';
+interface SubmitButtonProps {
+    loading: boolean;
+    side: OrderSide;
+    orderType: OrderType;
+    disabled: boolean;
+}
+export default function SubmitButton({ loading, side, orderType, disabled }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+export default function SubmitButton(_a) {
+    var loading = _a.loading, side = _a.side, orderType = _a.orderType, disabled = _a.disabled;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(false), isPressed = _c[0], setIsPressed = _c[1];
+    // Generate button text based on side and order type
+    var getButtonText = function () {
+        if (side === 'BUY') {
+            return "Buy ".concat(orderType === 'MARKET' ? 'Market' : 'Limit');
+        }
+        else {
+            return "Sell ".concat(orderType === 'MARKET' ? 'Market' : 'Limit');
+        }
+    };
+    // Generate button color based on side
+    var getButtonClass = function () {
+        var baseClasses = "w-full py-3 rounded-sm font-medium transition-all duration-200 flex items-center justify-center relative overflow-hidden";
+        if (disabled || loading) {
+            return "".concat(baseClasses, " bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-500 cursor-not-allowed");
+        }
+        if (side === 'BUY') {
+            return "".concat(baseClasses, " bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm transform hover:scale-[0.99] active:scale-[0.98]");
+        }
+        else {
+            return "".concat(baseClasses, " bg-red-700 hover:bg-red-800 text-white shadow-sm transform hover:scale-[0.99] active:scale-[0.98]");
+        }
+    };
+    return (_jsxs("button", { type: "submit", disabled: disabled || loading, className: getButtonClass(), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+            setIsHovered(false);
+            setIsPressed(false);
+        }, onMouseDown: function () { return setIsPressed(true); }, onMouseUp: function () { return setIsPressed(false); }, children: [_jsx("span", { className: "relative z-10 flex items-center justify-center transition-transform duration-200 ".concat(isPressed ? 'scale-95' : ''), children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "animate-spin mr-2 inline-block" }), "Processing..."] })) : (_jsxs(_Fragment, { children: [side === 'BUY' ? (_jsx("svg", { className: "w-4 h-4 mr-2", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 5L12 19M12 5L6 11M12 5L18 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "transition-transform duration-300 ".concat(isHovered ? 'translate-y-[-2px]' : '') }) })) : (_jsx("svg", { className: "w-4 h-4 mr-2", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 19L12 5M12 19L6 13M12 19L18 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "transition-transform duration-300 ".concat(isHovered ? 'translate-y-[2px]' : '') }) })), getButtonText()] })) }), !disabled && !loading && (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] ".concat(isHovered ? 'animate-shimmer' : ''), style: {
+                            backgroundSize: '200% 100%',
+                            animationDuration: '1.5s'
+                        } }), _jsx("span", { className: "absolute inset-0 rounded-sm transition-opacity duration-300 pointer-events-none ".concat(isPressed
+                            ? 'bg-black opacity-10 dark:bg-white dark:opacity-10'
+                            : 'opacity-0') })] }))] }));
+}

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

@@ -0,0 +1,7 @@
+type OrderType = 'LIMIT' | 'MARKET';
+interface TotalCalculatorProps {
+    total: string;
+    orderType: OrderType;
+}
+export default function TotalCalculator({ total, orderType }: TotalCalculatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TotalCalculator(_a) {
+    var total = _a.total, orderType = _a.orderType;
+    // Calculate fee (example: 0.1% fee)
+    var fee = total && orderType === 'LIMIT' ? (parseFloat(total) * 0.001).toFixed(6) : '0.00';
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Total" }), _jsx("div", { className: "px-3 py-2 border border-gray-200 dark:border-gray-800 rounded-sm text-sm text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-dark-950 font-mono", children: orderType === 'MARKET' ? (_jsx("span", { className: "text-gray-500 dark:text-gray-400", children: "Market Order" })) : total ? (total) : (_jsx("span", { className: "text-gray-400 dark:text-gray-500", children: "0.00" })) }), _jsxs("div", { className: "mt-1 text-[10px] text-gray-500 dark:text-gray-400 flex justify-between", children: [_jsx("span", { children: "Estimated fee:" }), _jsx("span", { className: "font-mono", children: fee })] })] }));
+}

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

@@ -0,0 +1,8 @@
+interface TradeFormProps {
+    marketSymbol: string | null;
+}
+export type OrderSide = 'BUY' | 'SELL';
+export type OrderType = 'LIMIT' | 'MARKET';
+export type FillMode = 'GTC' | 'POST_ONLY' | 'IOC' | 'FOK';
+export default function TradeForm({ marketSymbol }: TradeFormProps): import("react/jsx-runtime").JSX.Element;
+export {};