From 98a5f6b260acbc3c821e6897ede9a738c24988d6 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Thu, 19 Dec 2024 00:41:38 +0100 Subject: [PATCH] replace isLoading with isPending, fix style mismatch in modal --- frontend/src/globals.css | 1 + frontend/src/hooks/usePositionHistory.js | 6 +- .../position_history/PositionHistory.jsx | 5 +- .../position_history/PositionHistoryModal.jsx | 11 ++- .../position_history/positionHistory.css | 82 ++++++++++++------- 5 files changed, 66 insertions(+), 39 deletions(-) diff --git a/frontend/src/globals.css b/frontend/src/globals.css index 1fc66454..844d104d 100644 --- a/frontend/src/globals.css +++ b/frontend/src/globals.css @@ -66,6 +66,7 @@ --dark-background: #130713; --light-dark-background: #130713; --text-gray: #798795; + --modal-border: #170f2e; } body { diff --git a/frontend/src/hooks/usePositionHistory.js b/frontend/src/hooks/usePositionHistory.js index 438d2b62..c1dfe420 100644 --- a/frontend/src/hooks/usePositionHistory.js +++ b/frontend/src/hooks/usePositionHistory.js @@ -27,7 +27,7 @@ const formatPositionHistoryTable = (data) => { const usePositionHistoryTable = () => { const walletId = useWalletStore((state) => state.walletId); - const { data, isLoading, error } = useQuery({ + const { data, isPending, error } = useQuery({ queryKey: ['positionHistory', walletId], queryFn: () => fetchPositionHistoryTable(walletId), enabled: !!walletId, @@ -37,9 +37,11 @@ const usePositionHistoryTable = () => { select: formatPositionHistoryTable, }); + const showSpinner = !!walletId && isPending; + return { data, - isLoading, + isPending: showSpinner, error: walletId ? error : 'Wallet ID is required', }; }; diff --git a/frontend/src/pages/spotnet/position_history/PositionHistory.jsx b/frontend/src/pages/spotnet/position_history/PositionHistory.jsx index d3f46b56..4dc428fe 100644 --- a/frontend/src/pages/spotnet/position_history/PositionHistory.jsx +++ b/frontend/src/pages/spotnet/position_history/PositionHistory.jsx @@ -98,7 +98,7 @@ function PositionHistory() { {data.is_liquidated} {data.datetime_liquidation} - setSelectedPosition(data)}> + setSelectedPosition({ data, index })}> ⋮ @@ -113,10 +113,11 @@ function PositionHistory() { {selectedPosition && ( setSelectedPosition(null)} tokenIcon={tokenIconMap} statusStyles={statusStyles} + index={selectedPosition.index + 1} /> )} diff --git a/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx b/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx index 791f53c5..d37e25bf 100644 --- a/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx +++ b/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx @@ -1,14 +1,17 @@ import React from 'react'; import './positionHistory.css'; -function PositionHistoryModal({ position, onClose, tokenIcon, statusStyles }) { +function PositionHistoryModal({ position, onClose, index, tokenIcon, statusStyles }) { return (

- {tokenIcon[position.token_symbol]} - {position.token_symbol} + + {index}. + {tokenIcon[position.token_symbol]} + {position.token_symbol} + {position.amount} {position.status} @@ -19,7 +22,7 @@ function PositionHistoryModal({ position, onClose, tokenIcon, statusStyles }) { ✕

- +

diff --git a/frontend/src/pages/spotnet/position_history/positionHistory.css b/frontend/src/pages/spotnet/position_history/positionHistory.css index 4bd9f2fb..51d62895 100644 --- a/frontend/src/pages/spotnet/position_history/positionHistory.css +++ b/frontend/src/pages/spotnet/position_history/positionHistory.css @@ -50,8 +50,7 @@ } .position-table { - background: rgba(18, 7, 33, 0.5); - border: 1px solid rgba(54, 41, 78, 1); + border: var(--midnight-purple-border); border-radius: 10px; } @@ -61,6 +60,10 @@ border-spacing: 0; } +.position-table .index { + color: var(--gray); +} + .position-table th, .position-table td { padding: 16px; @@ -111,25 +114,6 @@ color: var(--status-pending); } -@media (max-width: 768px) { - .position-table th:nth-child(4), - .position-table th:nth-child(6), - .position-table th:nth-child(7), - .position-table th:nth-child(8), - .position-table th:nth-child(9), - .position-table td:nth-child(4), - .position-table td:nth-child(6), - .position-table td:nth-child(7), - .position-table td:nth-child(8), - .position-table td:nth-child(9) { - display: none; - } - - .position-table { - overflow: hidden; - } -} - .action-button { background: none; border: none; @@ -160,36 +144,55 @@ .position-modal-content { background-color: var(--bg); - border-radius: 12px; + border-radius: 14px; padding: 24px; - width: 70%; - max-width: 500px; + border: 2px solid var(--modal-border); + width: 400px; + max-width: 90%; } .position-modal-header { display: flex; + align-items: center; justify-content: space-between; - margin-bottom: 16px; } .position-modal-p { display: flex; color: var(--primary); - width: 90%; + gap: 2rem; + margin: 0; + flex-wrap: wrap; + justify-content: space-between; align-items: center; - justify-content: space-evenly; - margin-top: 15px; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; } -.position-close-button { +.position-modal-p span { + display: flex; + align-items: center; +} + +.position-modal-p :first-child :first-child { color: var(--status-closed); } +.position-close-button { + cursor: var(--status-closed); + font-size: 1.5rem; + margin-left: 1rem; +} + +.modal-divider { + border: 0.4px solid var(--gray); +} + .position-modal-body { display: flex; flex-direction: column; - justify-self: center; - gap: 20px; + margin-left: 22px; } .position-detail-row p { @@ -209,6 +212,23 @@ } @media (max-width: 768px) { + .position-table th:nth-child(4), + .position-table th:nth-child(6), + .position-table th:nth-child(7), + .position-table th:nth-child(8), + .position-table th:nth-child(9), + .position-table td:nth-child(4), + .position-table td:nth-child(6), + .position-table td:nth-child(7), + .position-table td:nth-child(8), + .position-table td:nth-child(9) { + display: none; + } + + .position-table { + overflow: hidden; + } + .action-column { display: table-cell; }