Skip to content

Commit

Permalink
feat: add history page, implement usePosition hook to fetch table data
Browse files Browse the repository at this point in the history
  • Loading branch information
Ibinola committed Dec 17, 2024
1 parent 60e7dd0 commit d15c8b4
Show file tree
Hide file tree
Showing 5 changed files with 625 additions and 15 deletions.
29 changes: 14 additions & 15 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import OverviewPage from 'pages/spotnet/overview/Overview';
import { ActionModal } from 'components/ui/ActionModal';
import Stake from 'pages/vault/stake/Stake';
import { notifyError } from 'utils/notification';
import PositionHistory from 'pages/spotnet/position_history/PositionHistory';

function App() {
const { walletId, setWalletId, removeWalletId } = useWalletStore();
Expand All @@ -27,7 +28,6 @@ function App() {

const connectWalletMutation = useConnectWallet(setWalletId);


const handleConnectWallet = () => {
connectWalletMutation.mutate();
};
Expand All @@ -49,14 +49,16 @@ function App() {

useEffect(() => {
if (window.Telegram?.WebApp?.initData) {
getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id).then((linked_wallet_id) => {
setWalletId(linked_wallet_id);
window.Telegram.WebApp.ready();
}).catch((error) => {
console.error('Error getting Telegram user wallet ID:', error);
notifyError('Error loading wallet');
window.Telegram.WebApp.ready();
});
getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id)
.then((linked_wallet_id) => {
setWalletId(linked_wallet_id);
window.Telegram.WebApp.ready();
})
.catch((error) => {
console.error('Error getting Telegram user wallet ID:', error);
notifyError('Error loading wallet');
window.Telegram.WebApp.ready();
});
}
}, [window.Telegram?.WebApp?.initDataUnsafe]);

Expand All @@ -76,14 +78,11 @@ function App() {
/>,
document.body
)}
<Header
onConnectWallet={handleConnectWallet}
onLogout={handleLogoutModal}
/>
<Header onConnectWallet={handleConnectWallet} onLogout={handleLogoutModal} />
<main>
<Routes>
<Route index element={<SpotnetApp onConnectWallet={handleConnectWallet} onLogout={handleLogout} />} />
<Route
<Route
path="/login"
element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
/>
Expand All @@ -92,7 +91,7 @@ function App() {
<Route path="/overview" element={<OverviewPage />} />
<Route path="/form" element={<Form />} />
<Route path="/documentation" element={<Documentation />} />

<Route path="/position-history" element={<PositionHistory />} />
<Route path="/stake" element={<Stake />} />
</Routes>
</main>
Expand Down
23 changes: 23 additions & 0 deletions frontend/src/hooks/usePosition.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useQuery } from '@tanstack/react-query';
import { axiosInstance } from 'utils/axios';

const fetchPositionHistoryTable = async (walletId) => {
if (!walletId) {
throw new Error('Wallet ID is undefined');
}
const response = await axiosInstance.get(`/api/user-positions/${walletId}`);
return response.data;
};

const usePositionHistoryTable = (walletId) => {
return useQuery({
queryKey: ['positionHistory', walletId],
queryFn: () => fetchPositionHistoryTable(walletId),
enabled: !!walletId,
onError: (error) => {
console.error('Error during fetching position history:', error);
},
});
};

export { fetchPositionHistoryTable, usePositionHistoryTable };
99 changes: 99 additions & 0 deletions frontend/src/pages/spotnet/position_history/PositionHistory.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { useEffect } from 'react';
import './position_history.css';
import newIcon from '../../../assets/icons/borrow-balance-icon.png';
import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
import { usePositionHistoryTable } from 'hooks/usePosition';
import Spinner from 'components/spinner/Spinner';
import { formatDate } from 'utils/formatDate';
import { useWalletStore } from 'stores/useWalletStore';

function PositionHistory() {
const { walletId } = useWalletStore();

const { data, isLoading } = usePositionHistoryTable(walletId);

useEffect(() => {
console.log('Fetching data for walletId:', walletId);
}, [walletId]);

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">
<div className="position-card">
<div className="position-card-header">
<HealthIcon className="icon" />
<span className="label">Health Factor</span>
</div>
<div className="position-card-value">
<span className="top-card-value">1.47570678</span>
</div>
</div>
<div className="position-card">
<div className="position-card-header">
<img src={newIcon} alt="Borrow Balance Icon" className="icon" />{' '}
<span className="label">Borrow Balance</span>
</div>
<div className="position-card-value">
<span className="currency-symbol">$</span>
<span className="top-card-value">-55.832665</span>
</div>
</div>
</div>
</div>

<div className="position-content-table">
<div className="position-table-title">
<p>Position History</p>
</div>

<div className="position-table">
{isLoading ? (
<div className="spinner-container">
<Spinner loading={isLoading} />
</div>
) : (
<table className="text-white">
<thead>
<tr>
<th></th>
<th>Token</th>
<th>Amount</th>
<th>Created At</th>
<th>Status</th>
<th>Start Price</th>
<th>Multiplier</th>
<th>Liquidated</th>
<th>Closed At</th>
</tr>
</thead>

<tbody>
{data?.map((data, index) => (
<tr key={index}>
<td className="index">{index + 1}.</td>
<td>{data.token_symbol.toUpperCase()}</td>
<td>{Number(data.amount).toFixed(2)}</td>
<td>{formatDate(data.created_at)}</td>
<td>{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>
{data.datetime_liquidation ? new Date(data.datetime_liquidation).toLocaleDateString() : 'N/A'}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
</div>
</div>
);
}

export default PositionHistory;
Loading

0 comments on commit d15c8b4

Please sign in to comment.