@n1xyz/wallet-widget 0.0.5 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Logic/sessionManager.d.ts +1 -1
- package/dist/Logic/sessionManager.js +9 -5
- package/dist/Logic/transactionManager.js +7 -3
- package/dist/Logic/utils.js +9 -12
- package/dist/Modal/N1WalletModal.js +2 -3
- package/dist/Modal/NTSFlow/NTSFlow.js +7 -3
- package/dist/Modal/NTSFlow/components/BackButton.js +0 -1
- package/dist/Modal/NTSFlow/views/CreateSessionView.js +1 -1
- package/dist/Modal/NordFlow/NordFlow.js +27 -22
- package/dist/Modal/NordFlow/components/ChainButton.d.ts +1 -1
- package/dist/Modal/NordFlow/components/ChainButton.js +8 -8
- package/dist/Modal/NordFlow/components/EVMChainsButton.d.ts +8 -0
- package/dist/Modal/NordFlow/components/EVMChainsButton.js +18 -0
- package/dist/Modal/NordFlow/components/MoreButton.d.ts +8 -0
- package/dist/Modal/NordFlow/components/MoreButton.js +18 -0
- package/dist/Modal/NordFlow/components/TransactionTable.d.ts +1 -1
- package/dist/Modal/NordFlow/components/TransactionTable.js +8 -6
- package/dist/Modal/NordFlow/constants.js +9 -4
- package/dist/Modal/NordFlow/hooks/useDepositFlow.js +39 -18
- package/dist/Modal/NordFlow/hooks/useFlowState.js +5 -4
- package/dist/Modal/NordFlow/hooks/useNordInstance.js +17 -8
- package/dist/Modal/NordFlow/hooks/useNordWalletConnect.js +28 -20
- package/dist/Modal/NordFlow/screens/02-EvmWalletAuthScreen.js +1 -1
- package/dist/Modal/NordFlow/screens/03-ChainSelectionScreen.js +39 -23
- package/dist/Modal/NordFlow/screens/04-AmountInputScreen.d.ts +4 -1
- package/dist/Modal/NordFlow/screens/04-AmountInputScreen.js +38 -16
- package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.d.ts +1 -1
- package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.js +3 -2
- package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.js +3 -1
- package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.d.ts +1 -1
- package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.js +19 -10
- package/dist/Modal/NordFlow/screens/08-FinalSuccessScreen.d.ts +1 -1
- package/dist/Modal/NordFlow/screens/08-FinalSuccessScreen.js +3 -3
- package/dist/Modal/NordFlow/screens/09-ErrorScreen.d.ts +1 -1
- package/dist/Modal/NordFlow/screens/09-ErrorScreen.js +11 -6
- package/dist/Modal/NordFlow/types.d.ts +4 -1
- package/dist/Modal/NordFlow/types.js +1 -0
- package/dist/Modal/NordFlow/utils/imageUtils.js +3 -3
- package/dist/Modal/NordFlow/utils/nordUtils.js +3 -1
- package/dist/Modal/Sidebar/N1Sidebar.js +11 -5
- package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketOverview.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketSelector.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketSelector.js +7 -3
- package/dist/Modal/Sidebar/NordTradingView/MarketOverview/MarketStats.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/NordTradingView.js +7 -7
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBook.js +27 -16
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.js +3 -2
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.js +2 -3
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/AmountInput.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/BuySellTabs.js +2 -2
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.js +16 -13
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.js +17 -11
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/PriceInput.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/SubmitButton.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/SubmitButton.js +2 -2
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/TotalCalculator.d.ts +1 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/TotalCalculator.js +3 -1
- package/dist/Modal/Sidebar/NordTradingView/TradeForm/TradeForm.js +21 -11
- package/dist/Modal/Sidebar/NordTradingView/UserBalances/UserBalances.js +1 -1
- package/dist/Modal/Sidebar/NordTradingView/UserOrders/UserOrders.js +11 -6
- package/dist/Modal/Sidebar/NordTradingView/UserPositions/UserPositions.js +14 -7
- package/dist/Provider/LazyWalletProvider.js +11 -5
- package/dist/Provider/N1WalletProvider.js +6 -5
- package/dist/components/logos/ArbitrumLogo.d.ts +8 -0
- package/dist/components/logos/ArbitrumLogo.js +5 -0
- package/dist/components/logos/BaseLogo.d.ts +8 -0
- package/dist/components/logos/BaseLogo.js +5 -0
- package/dist/components/logos/BeraLogo.d.ts +8 -0
- package/dist/components/logos/BeraLogo.js +5 -0
- package/dist/components/logos/BitcoinLogo.d.ts +8 -0
- package/dist/components/logos/BitcoinLogo.js +5 -0
- package/dist/components/logos/EVMChainsGroup.d.ts +7 -0
- package/dist/components/logos/EVMChainsGroup.js +18 -0
- package/dist/components/logos/EthereumLogo.d.ts +8 -0
- package/dist/components/logos/EthereumLogo.js +5 -0
- package/dist/components/logos/HyperliquidLogo.d.ts +8 -0
- package/dist/components/logos/HyperliquidLogo.js +5 -0
- package/dist/components/logos/MoreChainsGroup.d.ts +7 -0
- package/dist/components/logos/MoreChainsGroup.js +18 -0
- package/dist/components/logos/OptimismLogo.d.ts +8 -0
- package/dist/components/logos/OptimismLogo.js +5 -0
- package/dist/components/logos/SolanaLogo.d.ts +8 -0
- package/dist/components/logos/SolanaLogo.js +5 -0
- package/dist/components/logos/index.d.ts +10 -0
- package/dist/components/logos/index.js +10 -0
- package/dist/main.css +1 -1
- package/package.json +1 -1
|
@@ -84,17 +84,22 @@ export default function OrderBook(_a) {
|
|
|
84
84
|
return [4 /*yield*/, nord.getOrderbook({ symbol: marketSymbol })];
|
|
85
85
|
case 2:
|
|
86
86
|
orderbook = _a.sent();
|
|
87
|
-
console.log(orderbook, "orderbook");
|
|
88
87
|
bids = Array.isArray(orderbook.bids[0])
|
|
89
88
|
? orderbook.bids
|
|
90
|
-
: orderbook.bids.map(function (entry) { return [
|
|
89
|
+
: orderbook.bids.map(function (entry) { return [
|
|
90
|
+
entry.price,
|
|
91
|
+
entry.size,
|
|
92
|
+
]; });
|
|
91
93
|
asks = Array.isArray(orderbook.asks[0])
|
|
92
94
|
? orderbook.asks
|
|
93
|
-
: orderbook.asks.map(function (entry) { return [
|
|
95
|
+
: orderbook.asks.map(function (entry) { return [
|
|
96
|
+
entry.price,
|
|
97
|
+
entry.size,
|
|
98
|
+
]; });
|
|
94
99
|
setOrderBookData({
|
|
95
100
|
bids: bids,
|
|
96
101
|
asks: asks,
|
|
97
|
-
timestamp: Date.now()
|
|
102
|
+
timestamp: Date.now(),
|
|
98
103
|
});
|
|
99
104
|
// Subscribe to real-time updates
|
|
100
105
|
subscription = nord.subscribeOrderbook(marketSymbol);
|
|
@@ -103,16 +108,22 @@ export default function OrderBook(_a) {
|
|
|
103
108
|
if (!prev)
|
|
104
109
|
return update;
|
|
105
110
|
// Convert OrderbookEntry[] to [number, number][] if needed
|
|
106
|
-
var updatedBids = update.bids
|
|
107
|
-
update.bids.map(function (entry) { return [
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
prev.
|
|
111
|
+
var updatedBids = update.bids
|
|
112
|
+
? update.bids.map(function (entry) { return [
|
|
113
|
+
entry.price,
|
|
114
|
+
entry.size,
|
|
115
|
+
]; })
|
|
116
|
+
: prev.bids;
|
|
117
|
+
var updatedAsks = update.asks
|
|
118
|
+
? update.asks.map(function (entry) { return [
|
|
119
|
+
entry.price,
|
|
120
|
+
entry.size,
|
|
121
|
+
]; })
|
|
122
|
+
: prev.asks;
|
|
112
123
|
return {
|
|
113
124
|
bids: updatedBids,
|
|
114
125
|
asks: updatedAsks,
|
|
115
|
-
timestamp: Date.now()
|
|
126
|
+
timestamp: Date.now(),
|
|
116
127
|
};
|
|
117
128
|
});
|
|
118
129
|
});
|
|
@@ -141,20 +152,21 @@ export default function OrderBook(_a) {
|
|
|
141
152
|
var aggregateOrderBook = function (data, level) {
|
|
142
153
|
if (!data)
|
|
143
154
|
return null;
|
|
144
|
-
console.log(data, "zzzz");
|
|
145
155
|
var aggregatedBids = {};
|
|
146
156
|
var aggregatedAsks = {};
|
|
147
157
|
// Aggregate bids
|
|
148
158
|
data.bids.forEach(function (_a) {
|
|
149
159
|
var price = _a[0], size = _a[1];
|
|
150
160
|
var aggregatedPrice = Math.floor(price / level) * level;
|
|
151
|
-
aggregatedBids[aggregatedPrice] =
|
|
161
|
+
aggregatedBids[aggregatedPrice] =
|
|
162
|
+
(aggregatedBids[aggregatedPrice] || 0) + size;
|
|
152
163
|
});
|
|
153
164
|
// Aggregate asks
|
|
154
165
|
data.asks.forEach(function (_a) {
|
|
155
166
|
var price = _a[0], size = _a[1];
|
|
156
167
|
var aggregatedPrice = Math.ceil(price / level) * level;
|
|
157
|
-
aggregatedAsks[aggregatedPrice] =
|
|
168
|
+
aggregatedAsks[aggregatedPrice] =
|
|
169
|
+
(aggregatedAsks[aggregatedPrice] || 0) + size;
|
|
158
170
|
});
|
|
159
171
|
// Convert back to arrays and sort
|
|
160
172
|
var bids = Object.entries(aggregatedBids)
|
|
@@ -169,11 +181,10 @@ export default function OrderBook(_a) {
|
|
|
169
181
|
return [parseFloat(price), size];
|
|
170
182
|
})
|
|
171
183
|
.sort(function (a, b) { return a[0] - b[0]; });
|
|
172
|
-
console.log(bids, asks);
|
|
173
184
|
return {
|
|
174
185
|
bids: bids,
|
|
175
186
|
asks: asks,
|
|
176
|
-
timestamp: data.timestamp
|
|
187
|
+
timestamp: data.timestamp,
|
|
177
188
|
};
|
|
178
189
|
};
|
|
179
190
|
var aggregatedData = aggregateOrderBook(orderBookData, aggregationLevel);
|
|
@@ -6,5 +6,5 @@ interface OrderBookDepthVisualizerProps {
|
|
|
6
6
|
} | null;
|
|
7
7
|
maxSize: number;
|
|
8
8
|
}
|
|
9
|
-
export default function OrderBookDepthVisualizer({ data, maxSize }: OrderBookDepthVisualizerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
9
|
+
export default function OrderBookDepthVisualizer({ data, maxSize, }: OrderBookDepthVisualizerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
10
10
|
export {};
|
|
@@ -3,5 +3,5 @@ interface OrderBookHeaderProps {
|
|
|
3
3
|
aggregationLevel: number;
|
|
4
4
|
onAggregationChange: (level: number) => void;
|
|
5
5
|
}
|
|
6
|
-
export default function OrderBookHeader({ marketSymbol, aggregationLevel, onAggregationChange }: OrderBookHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function OrderBookHeader({ marketSymbol, aggregationLevel, onAggregationChange, }: OrderBookHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -10,7 +10,8 @@ export default function OrderBookHeader(_a) {
|
|
|
10
10
|
// Close dropdown when clicking outside
|
|
11
11
|
useEffect(function () {
|
|
12
12
|
function handleClickOutside(event) {
|
|
13
|
-
if (dropdownRef.current &&
|
|
13
|
+
if (dropdownRef.current &&
|
|
14
|
+
!dropdownRef.current.contains(event.target)) {
|
|
14
15
|
setIsOpen(false);
|
|
15
16
|
}
|
|
16
17
|
}
|
|
@@ -19,7 +20,7 @@ export default function OrderBookHeader(_a) {
|
|
|
19
20
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
20
21
|
};
|
|
21
22
|
}, []);
|
|
22
|
-
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
|
|
23
|
+
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 () {
|
|
23
24
|
onAggregationChange(level);
|
|
24
25
|
setIsOpen(false);
|
|
25
26
|
}, 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
|
|
@@ -7,5 +7,5 @@ interface OrderBookTableProps {
|
|
|
7
7
|
loading: boolean;
|
|
8
8
|
maxSize: number;
|
|
9
9
|
}
|
|
10
|
-
export default function OrderBookTable({ data, loading, maxSize }: OrderBookTableProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default function OrderBookTable({ data, loading, maxSize, }: OrderBookTableProps): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -5,7 +5,6 @@ export default function OrderBookTable(_a) {
|
|
|
5
5
|
if (!data) {
|
|
6
6
|
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" }) }));
|
|
7
7
|
}
|
|
8
|
-
console.log(data);
|
|
9
8
|
// Limit the number of rows to display
|
|
10
9
|
var maxRows = 8;
|
|
11
10
|
var bids = data.bids.slice(0, maxRows);
|
|
@@ -14,9 +13,9 @@ export default function OrderBookTable(_a) {
|
|
|
14
13
|
var price = _a[0], size = _a[1];
|
|
15
14
|
var sizePercentage = (size / maxSize) * 100;
|
|
16
15
|
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)));
|
|
17
|
-
}) }), 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:
|
|
16
|
+
}) }), 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) {
|
|
18
17
|
var price = _a[0], size = _a[1];
|
|
19
18
|
var sizePercentage = (size / maxSize) * 100;
|
|
20
19
|
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)));
|
|
21
|
-
}) }), _jsxs("div", { className: "mt-2 text-[10px] text-gray-500 dark:text-gray-400 text-right", children: ["Last updated:
|
|
20
|
+
}) }), _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() })] })] }));
|
|
22
21
|
}
|
|
@@ -3,5 +3,5 @@ interface AmountInputProps {
|
|
|
3
3
|
onChange: (amount: string) => void;
|
|
4
4
|
marketInfo?: any;
|
|
5
5
|
}
|
|
6
|
-
export default function AmountInput({ amount, onChange, marketInfo }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function AmountInput({ amount, onChange, marketInfo, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -15,9 +15,9 @@ export default function BuySellTabs(_a) {
|
|
|
15
15
|
? 'left-0 bg-emerald-600 dark:bg-emerald-600 rounded-r-sm'
|
|
16
16
|
: '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: {
|
|
17
17
|
backgroundSize: '200% 100%',
|
|
18
|
-
animationDuration: '1.5s'
|
|
18
|
+
animationDuration: '1.5s',
|
|
19
19
|
} }))] }), _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: {
|
|
20
20
|
backgroundSize: '200% 100%',
|
|
21
|
-
animationDuration: '1.5s'
|
|
21
|
+
animationDuration: '1.5s',
|
|
22
22
|
} }))] })] }));
|
|
23
23
|
}
|
|
@@ -3,5 +3,5 @@ interface FillModeSelectorProps {
|
|
|
3
3
|
fillMode: FillMode;
|
|
4
4
|
onFillModeChange: (mode: FillMode) => void;
|
|
5
5
|
}
|
|
6
|
-
export default function FillModeSelector({ fillMode, onFillModeChange }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function FillModeSelector({ fillMode, onFillModeChange, }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -17,7 +17,8 @@ export default function FillModeSelector(_a) {
|
|
|
17
17
|
// Close dropdowns when clicking outside
|
|
18
18
|
useEffect(function () {
|
|
19
19
|
function handleClickOutside(event) {
|
|
20
|
-
if (fillModeRef.current &&
|
|
20
|
+
if (fillModeRef.current &&
|
|
21
|
+
!fillModeRef.current.contains(event.target)) {
|
|
21
22
|
setIsFillModeOpen(false);
|
|
22
23
|
}
|
|
23
24
|
}
|
|
@@ -30,22 +31,22 @@ export default function FillModeSelector(_a) {
|
|
|
30
31
|
var fillModes = ['GTC', 'POST_ONLY', 'IOC', 'FOK'];
|
|
31
32
|
// Fill mode descriptions and display names
|
|
32
33
|
var fillModeInfo = {
|
|
33
|
-
|
|
34
|
+
GTC: {
|
|
34
35
|
displayName: 'Limit',
|
|
35
|
-
description: 'Good Till Cancelled'
|
|
36
|
+
description: 'Good Till Cancelled',
|
|
36
37
|
},
|
|
37
|
-
|
|
38
|
+
POST_ONLY: {
|
|
38
39
|
displayName: 'Post Only',
|
|
39
|
-
description: 'Only maker orders'
|
|
40
|
+
description: 'Only maker orders',
|
|
40
41
|
},
|
|
41
|
-
|
|
42
|
+
IOC: {
|
|
42
43
|
displayName: 'Market',
|
|
43
|
-
description: 'Immediate or Cancel'
|
|
44
|
+
description: 'Immediate or Cancel',
|
|
44
45
|
},
|
|
45
|
-
|
|
46
|
+
FOK: {
|
|
46
47
|
displayName: 'Fill or Kill',
|
|
47
|
-
description: 'Fill completely or cancel'
|
|
48
|
-
}
|
|
48
|
+
description: 'Fill completely or cancel',
|
|
49
|
+
},
|
|
49
50
|
};
|
|
50
51
|
// Render fill mode dropdown via portal
|
|
51
52
|
var renderFillModeDropdown = function () {
|
|
@@ -58,7 +59,7 @@ export default function FillModeSelector(_a) {
|
|
|
58
59
|
width: "".concat(fillModeRect.width, "px"),
|
|
59
60
|
zIndex: 9999,
|
|
60
61
|
maxHeight: '200px',
|
|
61
|
-
overflowY: 'auto'
|
|
62
|
+
overflowY: 'auto',
|
|
62
63
|
};
|
|
63
64
|
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 () {
|
|
64
65
|
onFillModeChange(mode);
|
|
@@ -69,8 +70,10 @@ export default function FillModeSelector(_a) {
|
|
|
69
70
|
? 'bg-emerald-600 dark:bg-emerald-500'
|
|
70
71
|
: '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: {
|
|
71
72
|
backgroundSize: '200% 100%',
|
|
72
|
-
animationDuration: '1.5s'
|
|
73
|
+
animationDuration: '1.5s',
|
|
73
74
|
} }))] }, mode)); }) }), document.body);
|
|
74
75
|
};
|
|
75
|
-
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
|
|
76
|
+
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
|
|
77
|
+
? 'rotate-180 text-gray-700 dark:text-gray-300'
|
|
78
|
+
: 'text-gray-500 dark:text-gray-400') })] }), renderFillModeDropdown()] }));
|
|
76
79
|
}
|
|
@@ -5,5 +5,5 @@ interface FillModeSelectorProps {
|
|
|
5
5
|
onOrderTypeChange: (type: OrderType) => void;
|
|
6
6
|
onFillModeChange: (mode: FillMode) => void;
|
|
7
7
|
}
|
|
8
|
-
export default function FillModeSelector({ orderType, fillMode, onOrderTypeChange, onFillModeChange }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default function FillModeSelector({ orderType, fillMode, onOrderTypeChange, onFillModeChange, }: FillModeSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -26,10 +26,12 @@ export default function FillModeSelector(_a) {
|
|
|
26
26
|
// Close dropdowns when clicking outside
|
|
27
27
|
useEffect(function () {
|
|
28
28
|
function handleClickOutside(event) {
|
|
29
|
-
if (orderTypeRef.current &&
|
|
29
|
+
if (orderTypeRef.current &&
|
|
30
|
+
!orderTypeRef.current.contains(event.target)) {
|
|
30
31
|
setIsOrderTypeOpen(false);
|
|
31
32
|
}
|
|
32
|
-
if (fillModeRef.current &&
|
|
33
|
+
if (fillModeRef.current &&
|
|
34
|
+
!fillModeRef.current.contains(event.target)) {
|
|
33
35
|
setIsFillModeOpen(false);
|
|
34
36
|
}
|
|
35
37
|
}
|
|
@@ -44,10 +46,10 @@ export default function FillModeSelector(_a) {
|
|
|
44
46
|
var fillModes = ['GTC', 'IOC', 'FOK', 'POST_ONLY'];
|
|
45
47
|
// Fill mode descriptions
|
|
46
48
|
var fillModeDescriptions = {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
GTC: 'Good Till Cancelled',
|
|
50
|
+
IOC: 'Immediate or Cancel',
|
|
51
|
+
FOK: 'Fill or Kill',
|
|
52
|
+
POST_ONLY: 'Post Only',
|
|
51
53
|
};
|
|
52
54
|
// Render dropdown via portal
|
|
53
55
|
var renderOrderTypeDropdown = function () {
|
|
@@ -60,7 +62,7 @@ export default function FillModeSelector(_a) {
|
|
|
60
62
|
width: "".concat(orderTypeRect.width, "px"),
|
|
61
63
|
zIndex: 9999,
|
|
62
64
|
maxHeight: '200px',
|
|
63
|
-
overflowY: 'auto'
|
|
65
|
+
overflowY: 'auto',
|
|
64
66
|
};
|
|
65
67
|
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 () {
|
|
66
68
|
onOrderTypeChange(type);
|
|
@@ -71,7 +73,7 @@ export default function FillModeSelector(_a) {
|
|
|
71
73
|
? 'bg-emerald-600 dark:bg-emerald-500'
|
|
72
74
|
: '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: {
|
|
73
75
|
backgroundSize: '200% 100%',
|
|
74
|
-
animationDuration: '1.5s'
|
|
76
|
+
animationDuration: '1.5s',
|
|
75
77
|
} }))] }, type)); }) }), document.body);
|
|
76
78
|
};
|
|
77
79
|
// Render fill mode dropdown via portal
|
|
@@ -85,7 +87,7 @@ export default function FillModeSelector(_a) {
|
|
|
85
87
|
width: "".concat(fillModeRect.width, "px"),
|
|
86
88
|
zIndex: 9999,
|
|
87
89
|
maxHeight: '200px',
|
|
88
|
-
overflowY: 'auto'
|
|
90
|
+
overflowY: 'auto',
|
|
89
91
|
};
|
|
90
92
|
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 () {
|
|
91
93
|
onFillModeChange(mode);
|
|
@@ -96,8 +98,12 @@ export default function FillModeSelector(_a) {
|
|
|
96
98
|
? 'bg-emerald-600 dark:bg-emerald-500'
|
|
97
99
|
: '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: {
|
|
98
100
|
backgroundSize: '200% 100%',
|
|
99
|
-
animationDuration: '1.5s'
|
|
101
|
+
animationDuration: '1.5s',
|
|
100
102
|
} }))] }, mode)); }) }), document.body);
|
|
101
103
|
};
|
|
102
|
-
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
|
|
104
|
+
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
|
|
105
|
+
? 'rotate-180 text-gray-700 dark:text-gray-300'
|
|
106
|
+
: '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
|
|
107
|
+
? 'rotate-180 text-gray-700 dark:text-gray-300'
|
|
108
|
+
: 'text-gray-500 dark:text-gray-400') })] }), renderFillModeDropdown()] }))] }));
|
|
103
109
|
}
|
|
@@ -3,5 +3,5 @@ interface PriceInputProps {
|
|
|
3
3
|
onChange: (price: string) => void;
|
|
4
4
|
marketPrice?: number;
|
|
5
5
|
}
|
|
6
|
-
export default function PriceInput({ price, onChange, marketPrice }: PriceInputProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function PriceInput({ price, onChange, marketPrice, }: PriceInputProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -5,5 +5,5 @@ interface SubmitButtonProps {
|
|
|
5
5
|
orderType: OrderType;
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
}
|
|
8
|
-
export default function SubmitButton({ loading, side, orderType, disabled }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default function SubmitButton({ loading, side, orderType, disabled, }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -16,7 +16,7 @@ export default function SubmitButton(_a) {
|
|
|
16
16
|
};
|
|
17
17
|
// Generate button color based on side
|
|
18
18
|
var getButtonClass = function () {
|
|
19
|
-
var baseClasses =
|
|
19
|
+
var baseClasses = 'w-full py-3 rounded-sm font-medium transition-all duration-200 flex items-center justify-center relative overflow-hidden';
|
|
20
20
|
if (disabled || loading) {
|
|
21
21
|
return "".concat(baseClasses, " bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-500 cursor-not-allowed");
|
|
22
22
|
}
|
|
@@ -32,7 +32,7 @@ export default function SubmitButton(_a) {
|
|
|
32
32
|
setIsPressed(false);
|
|
33
33
|
}, 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: {
|
|
34
34
|
backgroundSize: '200% 100%',
|
|
35
|
-
animationDuration: '1.5s'
|
|
35
|
+
animationDuration: '1.5s',
|
|
36
36
|
} }), _jsx("span", { className: "absolute inset-0 rounded-sm transition-opacity duration-300 pointer-events-none ".concat(isPressed
|
|
37
37
|
? 'bg-black opacity-10 dark:bg-white dark:opacity-10'
|
|
38
38
|
: 'opacity-0') })] }))] }));
|
|
@@ -3,5 +3,5 @@ interface TotalCalculatorProps {
|
|
|
3
3
|
total: string;
|
|
4
4
|
orderType: OrderType;
|
|
5
5
|
}
|
|
6
|
-
export default function TotalCalculator({ total, orderType }: TotalCalculatorProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function TotalCalculator({ total, orderType, }: TotalCalculatorProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
export default function TotalCalculator(_a) {
|
|
3
3
|
var total = _a.total, orderType = _a.orderType;
|
|
4
4
|
// Calculate fee (example: 0.1% fee)
|
|
5
|
-
var fee = total && orderType === 'LIMIT'
|
|
5
|
+
var fee = total && orderType === 'LIMIT'
|
|
6
|
+
? (parseFloat(total) * 0.001).toFixed(6)
|
|
7
|
+
: '0.00';
|
|
6
8
|
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 })] })] }));
|
|
7
9
|
}
|
|
@@ -44,14 +44,20 @@ import AmountInput from './AmountInput';
|
|
|
44
44
|
import TotalCalculator from './TotalCalculator';
|
|
45
45
|
import SubmitButton from './SubmitButton';
|
|
46
46
|
import { AlertCircle, Check, Lock, Unlock, Info } from 'lucide-react';
|
|
47
|
+
import { logger } from '../../../../utils/logger';
|
|
47
48
|
// Map our FillMode to the Nord FillMode enum
|
|
48
49
|
var mapFillMode = function (mode) {
|
|
49
50
|
switch (mode) {
|
|
50
|
-
case 'GTC':
|
|
51
|
-
|
|
52
|
-
case '
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
case 'GTC':
|
|
52
|
+
return 0; // LIMIT
|
|
53
|
+
case 'POST_ONLY':
|
|
54
|
+
return 1; // POST_ONLY
|
|
55
|
+
case 'IOC':
|
|
56
|
+
return 2; // IMMEDIATE_OR_CANCEL
|
|
57
|
+
case 'FOK':
|
|
58
|
+
return 3; // FILL_OR_KILL
|
|
59
|
+
default:
|
|
60
|
+
return 0;
|
|
55
61
|
}
|
|
56
62
|
};
|
|
57
63
|
// Map our OrderSide to the Nord Side enum
|
|
@@ -186,7 +192,9 @@ export default function TradeForm(_a) {
|
|
|
186
192
|
case 1:
|
|
187
193
|
_b.trys.push([1, 3, 4, 5]);
|
|
188
194
|
market = (_a = nord === null || nord === void 0 ? void 0 : nord.markets) === null || _a === void 0 ? void 0 : _a.find(function (m) { return m.symbol === marketSymbol; });
|
|
189
|
-
marketId = market
|
|
195
|
+
marketId = market
|
|
196
|
+
? market.id || market.marketId || 0
|
|
197
|
+
: 0;
|
|
190
198
|
orderParams = {
|
|
191
199
|
marketId: marketId,
|
|
192
200
|
side: mapSide(side),
|
|
@@ -199,9 +207,9 @@ export default function TradeForm(_a) {
|
|
|
199
207
|
// For market BUY orders, we need quoteSize (total amount to spend)
|
|
200
208
|
quoteSize: isMarketOrder(fillMode) && side === 'BUY' ? total : undefined,
|
|
201
209
|
// Use the first account ID if available
|
|
202
|
-
accountId: accountId
|
|
210
|
+
accountId: accountId,
|
|
203
211
|
};
|
|
204
|
-
|
|
212
|
+
logger.debug('Placing order with params:', orderParams);
|
|
205
213
|
return [4 /*yield*/, nordUser.placeOrder(orderParams)];
|
|
206
214
|
case 2:
|
|
207
215
|
orderId = _b.sent();
|
|
@@ -219,7 +227,7 @@ export default function TradeForm(_a) {
|
|
|
219
227
|
return [3 /*break*/, 5];
|
|
220
228
|
case 3:
|
|
221
229
|
err_3 = _b.sent();
|
|
222
|
-
|
|
230
|
+
logger.error('Error placing order:', err_3);
|
|
223
231
|
setError(err_3.message || 'Failed to place order');
|
|
224
232
|
return [3 /*break*/, 5];
|
|
225
233
|
case 4:
|
|
@@ -229,7 +237,9 @@ export default function TradeForm(_a) {
|
|
|
229
237
|
}
|
|
230
238
|
});
|
|
231
239
|
}); };
|
|
232
|
-
return (_jsxs("div", { className: "p-4 bg-white dark:bg-dark-950 transition-colors duration-300", children: [_jsxs("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3 transform transition-all duration-500 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: ["Place Order
|
|
240
|
+
return (_jsxs("div", { className: "p-4 bg-white dark:bg-dark-950 transition-colors duration-300", children: [_jsxs("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3 transform transition-all duration-500 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: ["Place Order", ' ', marketSymbol ? (_jsx("span", { className: side === 'BUY'
|
|
241
|
+
? 'text-emerald-600 dark:text-emerald-500'
|
|
242
|
+
: 'text-red-700 dark:text-red-600', children: marketSymbol })) : ('')] }), !marketSymbol ? (_jsx("div", { className: "p-3 border border-gray-200 dark:border-gray-800 rounded-sm text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-dark-950 transform transition-all duration-500 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: "Select a market to place orders" })) : (_jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "transform transition-all duration-500 delay-100 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(BuySellTabs, { side: side, onChange: setSide }) }), _jsx("div", { className: "transform transition-all duration-500 delay-200 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(FillModeSelector, { fillMode: fillMode, onFillModeChange: setFillMode }) }), !isMarketOrder(fillMode) && (_jsx("div", { className: "transform transition-all duration-500 delay-300 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(PriceInput, { price: price, onChange: setPrice, marketPrice: marketInfo === null || marketInfo === void 0 ? void 0 : marketInfo.lastPrice }) })), _jsx("div", { className: "transform transition-all duration-500 delay-400 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(AmountInput, { amount: amount, onChange: setAmount, marketInfo: marketInfo }) }), _jsx("div", { className: "transform transition-all duration-500 delay-500 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(TotalCalculator, { total: total, orderType: isMarketOrder(fillMode) ? 'MARKET' : 'LIMIT' }) }), accountId && (_jsx("div", { className: "transform transition-all duration-500 delay-550 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsxs("div", { className: "flex items-center text-xs text-gray-500 dark:text-gray-400", children: [_jsx(Info, { size: 12, className: "mr-1" }), _jsxs("span", { children: ["Account ID: ", accountId] })] }) })), _jsx("div", { className: "transform transition-all duration-500 delay-600 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsxs("button", { type: "button", onClick: function () { return setIsReduceOnly(!isReduceOnly); }, className: "w-full flex items-center justify-between px-3 py-2 rounded-sm text-sm transition-all duration-300 ".concat(isReduceOnly
|
|
233
243
|
? side === 'BUY'
|
|
234
244
|
? 'bg-emerald-50 dark:bg-emerald-900/10 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/30'
|
|
235
245
|
: 'bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800/30'
|
|
@@ -243,7 +253,7 @@ export default function TradeForm(_a) {
|
|
|
243
253
|
: 'bg-red-600 dark:bg-red-500 text-white'
|
|
244
254
|
: 'bg-gray-200 dark:bg-gray-700'), children: isReduceOnly && _jsx(Check, { size: 10 }) })] }) }), _jsxs("div", { className: "p-2 border rounded-sm text-xs transition-all duration-300 transform ".concat(error
|
|
245
255
|
? 'opacity-100 max-h-20 border-red-200 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 flex items-center translate-y-0'
|
|
246
|
-
: 'opacity-0 max-h-0 overflow-hidden border-transparent translate-y-2'), children: [error && _jsx(AlertCircle, { size: 14, className: "mr-2 flex-shrink-0" }), error] }), _jsx("div", { className: "p-2 border rounded-sm text-xs transition-all duration-300 transform ".concat(success
|
|
256
|
+
: 'opacity-0 max-h-0 overflow-hidden border-transparent translate-y-2'), children: [error && (_jsx(AlertCircle, { size: 14, className: "mr-2 flex-shrink-0" })), error] }), _jsx("div", { className: "p-2 border rounded-sm text-xs transition-all duration-300 transform ".concat(success
|
|
247
257
|
? 'opacity-100 max-h-20 border-emerald-200 dark:border-emerald-900/30 bg-emerald-50 dark:bg-emerald-900/10 text-emerald-700 dark:text-emerald-400 translate-y-0'
|
|
248
258
|
: 'opacity-0 max-h-0 overflow-hidden border-transparent translate-y-2'), children: success }), _jsx("div", { className: "transform transition-all duration-500 delay-700 ".concat(formVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'), children: _jsx(SubmitButton, { loading: loading, side: side, orderType: isMarketOrder(fillMode) ? 'MARKET' : 'LIMIT', disabled: !marketSymbol || loading }) })] }) }))] }));
|
|
249
259
|
}
|
|
@@ -38,6 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
38
38
|
import { RefreshCw, X } from 'lucide-react';
|
|
39
39
|
import { useEffect, useState, useRef } from 'react';
|
|
40
40
|
import { useN1WalletContext } from '../../../../Provider/hooks';
|
|
41
|
+
import { logger } from '../../../../utils/logger';
|
|
41
42
|
export default function UserOrders() {
|
|
42
43
|
var _this = this;
|
|
43
44
|
var _a = useN1WalletContext(), nord = _a.nord, nordUser = _a.nordUser;
|
|
@@ -70,7 +71,7 @@ export default function UserOrders() {
|
|
|
70
71
|
allOrders_1 = [];
|
|
71
72
|
// This is a simplified approach - in a real implementation, you would
|
|
72
73
|
// properly extract and format orders from the nordUser object
|
|
73
|
-
|
|
74
|
+
logger.debug(nord === null || nord === void 0 ? void 0 : nord.markets, nordUser.orders);
|
|
74
75
|
Object.values(nordUser.orders || {}).forEach(function (accountOrders) {
|
|
75
76
|
if (Array.isArray(accountOrders)) {
|
|
76
77
|
accountOrders.forEach(function (order) {
|
|
@@ -99,7 +100,7 @@ export default function UserOrders() {
|
|
|
99
100
|
return [3 /*break*/, 5];
|
|
100
101
|
case 3:
|
|
101
102
|
err_1 = _a.sent();
|
|
102
|
-
|
|
103
|
+
logger.error('Error fetching orders:', err_1);
|
|
103
104
|
setError('Failed to load orders');
|
|
104
105
|
return [3 /*break*/, 5];
|
|
105
106
|
case 4:
|
|
@@ -159,7 +160,7 @@ export default function UserOrders() {
|
|
|
159
160
|
return [3 /*break*/, 6];
|
|
160
161
|
case 4:
|
|
161
162
|
err_2 = _a.sent();
|
|
162
|
-
|
|
163
|
+
logger.error('Error cancelling order:', err_2);
|
|
163
164
|
setError('Failed to cancel order');
|
|
164
165
|
return [3 /*break*/, 6];
|
|
165
166
|
case 5:
|
|
@@ -169,9 +170,13 @@ export default function UserOrders() {
|
|
|
169
170
|
}
|
|
170
171
|
});
|
|
171
172
|
}); };
|
|
172
|
-
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 &&
|
|
173
|
+
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 ? (
|
|
173
174
|
// Standard table view for larger containers
|
|
174
|
-
_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
|
|
175
|
+
_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
|
|
176
|
+
? 'cursor-not-allowed'
|
|
177
|
+
: ''), 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)); }) })] }) })) : (
|
|
175
178
|
// Compact card view for smaller containers
|
|
176
|
-
_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
|
|
179
|
+
_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
|
|
180
|
+
? 'cursor-not-allowed'
|
|
181
|
+
: ''), 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" }) }))] })] }) }));
|
|
177
182
|
}
|