resolved issues on PositionHistory pages, and usePositionHook, utils,…

… file name
djeck1432 · Dec 18, 2024 · a3ced84 · a3ced84
1 parent 2e24383
commit a3ced84
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 111 deletions.
diff --git a/frontend/src/assets/icons/filter-horizontal.svg b/frontend/src/assets/icons/filter-horizontal.svg
diff --git a/frontend/src/components/Card/card.css b/frontend/src/components/Card/card.css
@@ -1,9 +1,9 @@
 .card {
   width: 309px;
   height: 101px;
-  background: var(--dark-background);
+  background: var(--bg);
   border: 1px solid var(--light-purple);
-  border-radius: 900px;
+  border-radius: 12px;
   padding-top: 4px;
   padding-right: 24px;
   padding-left: 24px;

diff --git a/frontend/src/hooks/usePosition.js → frontend/src/hooks/usePositionHistory.js b/frontend/src/hooks/usePosition.js → frontend/src/hooks/usePositionHistory.js
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { axiosInstance } from 'utils/axios';
+import { useWalletStore } from 'stores/useWalletStore';
 
 const fetchPositionHistoryTable = async (walletId) => {
     if (!walletId) {
@@ -9,15 +10,23 @@ const fetchPositionHistoryTable = async (walletId) => {
     return response.data;
 };
 
-const usePositionHistoryTable = (walletId) => {
-    return useQuery({
+const usePositionHistoryTable = () => {
+    const walletId = useWalletStore((state) => state.walletId);
+
+    const { data, isLoading, error } = useQuery({
         queryKey: ['positionHistory', walletId],
         queryFn: () => fetchPositionHistoryTable(walletId),
         enabled: !!walletId,
-        onError: (error) => {
-            console.error('Error during fetching position history:', error);
+        onError: (err) => {
+            console.error('Error during fetching position history:', err);
         },
     });
+
+    return {
+        data,
+        isLoading,
+        error: walletId ? error : 'Wallet ID is required',
+    };
 };
 
-export { fetchPositionHistoryTable, usePositionHistoryTable };
+export { usePositionHistoryTable };
diff --git a/frontend/src/pages/spotnet/position_history/PositionHistory.jsx b/frontend/src/pages/spotnet/position_history/PositionHistory.jsx
@@ -1,27 +1,22 @@
-import React, { useState, useEffect } from 'react';
-import './position_history.css';
+import React, { useState } from 'react';
+import './positionHistory.css';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
 import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
 import { ReactComponent as StrkIcon } from 'assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from 'assets/icons/usd_coin.svg';
-import { usePositionHistoryTable } from 'hooks/usePosition';
+import { usePositionHistoryTable } from 'hooks/usePositionHistory';
 import Spinner from 'components/spinner/Spinner';
 import { formatDate } from 'utils/formatDate';
+import filterIcon from '../../../assets/icons/filter-horizontal.svg';
 import useDashboardData from 'hooks/useDashboardData';
 import Card from 'components/Card/Card';
 import PositionHistoryModal from 'pages/spotnet/position_history/PositionHistoryModal';
-import { useWalletStore } from 'stores/useWalletStore';
 
 function PositionHistory() {
-  const { walletId } = useWalletStore();
-  const [healthFactor, setHealthFactor] = React.useState('0.00');
-  const [borrowed, setBorrowed] = React.useState('0.00');
   const [selectedPosition, setSelectedPosition] = useState(null);
-  const { data: tableData, isLoading } = usePositionHistoryTable(walletId);
 
-  const { data } = useDashboardData(walletId) || {
-    data: { health_ratio: '1.5', current_sum: '0.05', start_sum: '0.04', borrowed: '10.0' },
-  };
+  const { data: tableData, isPending } = usePositionHistoryTable();
+  const { data: cardData } = useDashboardData();
 
   const tokenIconMap = {
     STRK: <StrkIcon className="token-icon" />,
@@ -35,31 +30,18 @@ function PositionHistory() {
     pending: 'status-pending',
   };
 
-  useEffect(() => {
-    const getData = async () => {
-      if (isLoading || !data) {
-        console.log('Card data not available');
-        return;
-      }
-
-      const { health_ratio, borrowed } = data;
-      console.log(data);
-
-      setHealthFactor(health_ratio || '0.00');
-      setBorrowed(borrowed || '0.00');
-    };
-
-    getData();
-  }, [walletId, data, tableData, isLoading]);
-
   return (
     <div className="position-wrapper">
       <div className="position-container">
         <h1 className="position-title">zkLend Position History</h1>
         <div className="position-content">
           <div className="position-top-cards">
-            <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
-            <Card label="Borrow Balance" cardData={borrowed} icon={<EthIcon className="icon" />} />
+            <Card
+              label="Health Factor"
+              value={cardData?.health_ratio || '0.00'}
+              icon={<HealthIcon className="icon" />}
+            />
+            <Card label="Borrow Balance" cardData={cardData?.borrowed || '0.00'} icon={<EthIcon className="icon" />} />
           </div>
         </div>
 
@@ -69,9 +51,9 @@ function PositionHistory() {
           </div>
 
           <div className="position-table">
-            {isLoading ? (
+            {isPending ? (
               <div className="spinner-container">
-                <Spinner loading={isLoading} />
+                <Spinner loading={isPending} />
               </div>
             ) : (
               <table className="text-white">
@@ -86,35 +68,44 @@ function PositionHistory() {
                     <th>Multiplier</th>
                     <th>Liquidated</th>
                     <th>Closed At</th>
+                    <th className="action-column">
+                      <img src={filterIcon} alt="filter-icon" draggable="false" />
+                    </th>
                   </tr>
                 </thead>
 
                 <tbody>
-                  {tableData?.map((data, index) => (
-                    <tr key={data.id}>
-                      <td className="index">{index + 1}.</td>
-                      <td>
-                        <div className="token-cell">
-                          {tokenIconMap[data.token_symbol]}
-                          <span className="token-symbol">{data.token_symbol.toUpperCase()}</span>
-                        </div>
-                      </td>
-                      <td>{Number(data.amount).toFixed(2)}</td>
-                      <td>{formatDate(data.created_at)}</td>
-                      <td className={`status-cell ${statusStyles[data.status.toLowerCase()] || ''}`}>
-                        {data.status.charAt(0).toUpperCase() + data.status.slice(1)}
-                      </td>
-                      <td>{data.start_price.toFixed(2)}</td>
-                      <td>{data.multiplier.toFixed(1)}</td>
-                      <td>{data.is_liquidated ? 'Yes' : 'No'}</td>
-                      <td>{formatDate(data.datetime_liquidation)}</td>
-                      <td className="action-column">
-                        <span className="action-button" onClick={() => setSelectedPosition(data)}>
-                          &#x22EE;
-                        </span>
-                      </td>
+                  {!tableData || tableData.length === 0 ? (
+                    <tr>
+                      <td colSpan="10">No opened positions</td>
                     </tr>
-                  ))}
+                  ) : (
+                    tableData.map((data, index) => (
+                      <tr key={data.id}>
+                        <td className="index">{index + 1}.</td>
+                        <td>
+                          <div className="token-cell">
+                            {tokenIconMap[data.token_symbol]}
+                            <span className="token-symbol">{data.token_symbol.toUpperCase()}</span>
+                          </div>
+                        </td>
+                        <td>{Number(data.amount).toFixed(2)}</td>
+                        <td>{formatDate(data.created_at)}</td>
+                        <td className={`status-cell ${statusStyles[data.status.toLowerCase()] || ''}`}>
+                          {data.status.charAt(0).toUpperCase() + data.status.slice(1)}
+                        </td>
+                        <td>{data.start_price.toFixed(2)}</td>
+                        <td>{data.multiplier.toFixed(1)}</td>
+                        <td>{data.is_liquidated ? 'True' : 'False'}</td>
+                        <td>{formatDate(data.datetime_liquidation)}</td>
+                        <td className="action-column">
+                          <span className="action-button" onClick={() => setSelectedPosition(data)}>
+                            &#x22EE;
+                          </span>
+                        </td>
+                      </tr>
+                    ))
+                  )}
                 </tbody>
               </table>
             )}

diff --git a/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx b/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './position_history.css';
+import './positionHistory.css';
 import { formatDate } from 'utils/formatDate';
 
 function PositionHistoryModal({ position, onClose }) {

diff --git a/...net/position_history/position_history.css → ...tnet/position_history/positionHistory.css b/...net/position_history/position_history.css → ...tnet/position_history/positionHistory.css
@@ -1,15 +1,3 @@
-body {
-  font-family:
-    'Open Sans',
-    -apple-system,
-    Roboto,
-    Helvetica,
-    sans-serif;
-  margin: 0;
-  padding: 0;
-  background-color: var(--bg);
-}
-
 .position-wrapper {
   background: url('../../../../public/background.png') no-repeat center center;
   background-size: cover;
@@ -44,7 +32,7 @@ body {
 .position-top-cards {
   display: flex;
   justify-content: center;
-  gap: 24px;
+  gap: 10px;
   width: 100%;
   max-width: 642px;
 }
@@ -56,8 +44,7 @@ body {
 }
 
 .position-table-title {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 14px;
   color: var(--primary);
   margin-bottom: 16px;
 }
@@ -66,7 +53,6 @@ body {
   background: rgba(18, 7, 33, 0.5);
   border: 1px solid rgba(54, 41, 78, 1);
   border-radius: 10px;
-  overflow-x: auto;
 }
 
 .position-table table {
@@ -126,10 +112,6 @@ body {
 }
 
 @media (max-width: 768px) {
-  .position-top-cards {
-    flex-direction: column;
-  }
-
   .position-table th:nth-child(4),
   .position-table th:nth-child(6),
   .position-table th:nth-child(7),
@@ -142,24 +124,10 @@ body {
   .position-table td:nth-child(9) {
     display: none;
   }
-}
 
-.position-table::-webkit-scrollbar {
-  height: 6px;
-}
-
-.position-table::-webkit-scrollbar-track {
-  background: rgba(18, 7, 33, 0.5);
-  border-radius: 3px;
-}
-
-.position-table::-webkit-scrollbar-thumb {
-  background: rgba(54, 41, 78, 1);
-  border-radius: 3px;
-}
-
-.position-table::-webkit-scrollbar-thumb:hover {
-  background: rgba(54, 41, 78, 0.8);
+  .position-table {
+    overflow: hidden;
+  }
 }
 
 .action-button {
@@ -244,4 +212,8 @@ body {
   .action-column {
     display: table-cell;
   }
+
+  .position-table-title {
+    text-align: center;
+  }
 }
diff --git a/frontend/src/utils/formatDate.js b/frontend/src/utils/formatDate.js
@@ -1,12 +1,11 @@
 export function formatDate(timestamp) {
     const date = new Date(timestamp);
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = String(date.getFullYear()).slice(2);
-    const hours = String(date.getHours() % 12 || 12).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const period = date.getHours() >= 12 ? 'PM' : 'AM';
-
-    return `${day}/${month}/${year} - ${hours}:${minutes}${period}`
-}
-
+    return new Intl.DateTimeFormat('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    }).format(date).replace(',', ' -');
+}