Skip to content

Commit 30de018

Browse files
CryptoGnomeCryptoGnome
authored
Merge pull request CryptoGnome#12 from RedBoardDev/fix-linter-errors
refactor(linter): fix errors on build
2 parents 831fd15 + 964ad15 commit 30de018

File tree

3 files changed

+58
-49
lines changed

3 files changed

+58
-49
lines changed

‎src/components/LiquidationFeed.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import React, { useEffect, useState } from 'react';
3+
import React, { useEffect, useState, useRef } from 'react';
44
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
55
import { Badge } from '@/components/ui/badge';
66
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
@@ -41,17 +41,21 @@ export default function LiquidationFeed({ volumeThresholds = {}, maxEvents = 50
4141
});
4242
const { formatQuantity, formatPriceWithCommas } = useSymbolPrecision();
4343

44+
// Capture initial values to avoid re-running effect when props change
45+
const initialMaxEvents = useRef(maxEvents);
46+
const initialVolumeThresholds = useRef(volumeThresholds);
47+
4448
// Load historical liquidations on mount
4549
useEffect(() => {
4650
const loadHistoricalLiquidations = async () => {
4751
try {
48-
const response = await fetch(`/api/liquidations?limit=${maxEvents}`);
52+
const response = await fetch(`/api/liquidations?limit=${initialMaxEvents.current}`);
4953
if (response.ok) {
5054
const result = await response.json();
5155
if (result.success && result.data) {
5256
const historicalEvents = result.data.map((liq: any) => {
5357
const volume = liq.volume_usdt || (liq.quantity * liq.price);
54-
const threshold = volumeThresholds[liq.symbol] || 10000;
58+
const threshold = initialVolumeThresholds.current[liq.symbol] || 10000;
5559
return {
5660
symbol: liq.symbol,
5761
side: liq.side,
@@ -92,7 +96,7 @@ export default function LiquidationFeed({ volumeThresholds = {}, maxEvents = 50
9296
};
9397

9498
loadHistoricalLiquidations();
95-
}, []); // Only run once on mount
99+
}, []); // Only run once on mount - using refs for current values
96100

97101
// Handle WebSocket messages
98102
useEffect(() => {

‎src/components/LiquidationSidebar.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,21 @@ export default function LiquidationSidebar({ volumeThresholds = {}, maxEvents =
3636
const _containerRef = useRef<HTMLDivElement>(null);
3737
const prevEventsRef = useRef<LiquidationEvent[]>([]);
3838

39+
// Capture initial values to avoid re-running effect when props change
40+
const initialMaxEvents = useRef(maxEvents);
41+
const initialVolumeThresholds = useRef(volumeThresholds);
42+
3943
// Load historical liquidations on mount
4044
useEffect(() => {
4145
const loadHistoricalLiquidations = async () => {
4246
try {
43-
const response = await fetch(`/api/liquidations?limit=${maxEvents}`);
47+
const response = await fetch(`/api/liquidations?limit=${initialMaxEvents.current}`);
4448
if (response.ok) {
4549
const result = await response.json();
4650
if (result.success && result.data) {
4751
const historicalEvents = result.data.map((liq: any) => {
4852
const volume = liq.volume_usdt || (liq.quantity * liq.price);
49-
const threshold = volumeThresholds[liq.symbol] || 10000;
53+
const threshold = initialVolumeThresholds.current[liq.symbol] || 10000;
5054
return {
5155
symbol: liq.symbol,
5256
side: liq.side,
@@ -73,7 +77,7 @@ export default function LiquidationSidebar({ volumeThresholds = {}, maxEvents =
7377
};
7478

7579
loadHistoricalLiquidations();
76-
}, []); // Only run once on mount
80+
}, []); // Only run once on mount - using refs for current values
7781

7882
// Handle WebSocket messages for real-time updates
7983
useEffect(() => {

‎src/components/PositionTable.tsx‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,48 @@ export default function PositionTable({
5151
const { config } = useConfig();
5252
const { formatPrice, formatQuantity, formatPriceWithCommas } = useSymbolPrecision();
5353

54+
// Initial load of VWAP data (fallback for when WebSocket is not yet connected)
55+
const loadVWAPData = useCallback(async () => {
56+
try {
57+
// Only fetch for symbols with VWAP protection enabled
58+
const symbolsWithVWAP = Object.entries(config?.symbols || {})
59+
.filter(([_, cfg]) => cfg.vwapProtection)
60+
.map(([symbol]) => symbol);
61+
62+
if (symbolsWithVWAP.length === 0) {
63+
console.log('No symbols with VWAP protection enabled');
64+
return;
65+
}
66+
67+
console.log('Initial VWAP load for symbols:', symbolsWithVWAP);
68+
69+
const vwapPromises = symbolsWithVWAP.map(async (symbol) => {
70+
try {
71+
const response = await fetch(`/api/vwap/${symbol}`);
72+
if (response.ok) {
73+
const data = await response.json();
74+
return { symbol, data };
75+
}
76+
} catch (error) {
77+
console.error(`Failed to load initial VWAP for ${symbol}:`, error);
78+
}
79+
return null;
80+
});
81+
82+
const results = await Promise.all(vwapPromises);
83+
const vwapMap: Record<string, VWAPData> = {};
84+
results.forEach(result => {
85+
if (result) {
86+
vwapMap[result.symbol] = result.data;
87+
}
88+
});
89+
console.log('Final VWAP map:', vwapMap);
90+
setVwapData(vwapMap);
91+
} catch (error) {
92+
console.error('Failed to load VWAP data:', error);
93+
}
94+
}, [config?.symbols]);
95+
5496
// Load initial positions and set up WebSocket updates
5597
useEffect(() => {
5698
// Use data store if no positions passed as props
@@ -170,49 +212,8 @@ export default function PositionTable({
170212
cleanupVwap();
171213
};
172214
}
173-
}, [positions.length]); // Only re-run when positions prop changes
215+
}, [positions.length, loadVWAPData]); // Include loadVWAPData dependency
174216

175-
// Initial load of VWAP data (fallback for when WebSocket is not yet connected)
176-
const loadVWAPData = useCallback(async () => {
177-
try {
178-
// Only fetch for symbols with VWAP protection enabled
179-
const symbolsWithVWAP = Object.entries(config?.symbols || {})
180-
.filter(([_, cfg]) => cfg.vwapProtection)
181-
.map(([symbol]) => symbol);
182-
183-
if (symbolsWithVWAP.length === 0) {
184-
console.log('No symbols with VWAP protection enabled');
185-
return;
186-
}
187-
188-
console.log('Initial VWAP load for symbols:', symbolsWithVWAP);
189-
190-
const vwapPromises = symbolsWithVWAP.map(async (symbol) => {
191-
try {
192-
const response = await fetch(`/api/vwap/${symbol}`);
193-
if (response.ok) {
194-
const data = await response.json();
195-
return { symbol, data };
196-
}
197-
} catch (error) {
198-
console.error(`Failed to load initial VWAP for ${symbol}:`, error);
199-
}
200-
return null;
201-
});
202-
203-
const results = await Promise.all(vwapPromises);
204-
const vwapMap: Record<string, VWAPData> = {};
205-
results.forEach(result => {
206-
if (result) {
207-
vwapMap[result.symbol] = result.data;
208-
}
209-
});
210-
console.log('Final VWAP map:', vwapMap);
211-
setVwapData(vwapMap);
212-
} catch (error) {
213-
console.error('Failed to load VWAP data:', error);
214-
}
215-
}, [config?.symbols]);
216217

217218
// Use passed positions if available, otherwise use fetched positions
218219
// Apply live mark prices to calculate real-time PnL

0 commit comments

Comments
 (0)