import { useCallback, useEffect, useState } from 'react' import { getDecimalCount } from '../utils' import { ChartTradeType } from '../@types/types' import FloatingElement from './FloatingElement' import useInterval from '../hooks/useInterval' import ChartApi from '../utils/chartDataConnector' import { ElementTitle } from './styles' import { isEqual } from '../utils/index' import useMangoStore from '../stores/useMangoStore' export default function RecentMarketTrades() { const mangoConfig = useMangoStore((s) => s.selectedMangoGroup.config) const marketConfig = useMangoStore((s) => s.selectedMarket.config) const market = useMangoStore((s) => s.selectedMarket.current) const [trades, setTrades] = useState([]) const fetchTradesForChart = useCallback(async () => { if (!marketConfig) return const newTrades = await ChartApi.getRecentTrades( marketConfig.publicKey.toString() ) if (!newTrades) return null if (newTrades.length && trades.length === 0) { setTrades(newTrades) } else if ( newTrades?.length && !isEqual(newTrades[0], trades[0], Object.keys(newTrades[0])) ) { setTrades(newTrades) } }, [marketConfig, trades]) useEffect(() => { fetchTradesForChart() }, [fetchTradesForChart]) useInterval(async () => { fetchTradesForChart() }, 5000) return ( Recent Trades
Price ({mangoConfig.quoteSymbol})
Size ({marketConfig.baseSymbol})
Time
{!!trades.length && (
{trades.map((trade: ChartTradeType, i: number) => (
{/*
{market?.tickSize && !isNaN(trade.price) ? Number(trade.price).toFixed( getDecimalCount(market.tickSize) ) : trade.price}
{market?.minOrderSize && !isNaN(trade.size) ? Number(trade.size).toFixed( getDecimalCount(market.minOrderSize) ) : trade.size}
*/}
{trade.time && new Date(trade.time).toLocaleTimeString()}
))}
)}
) }