import { useEffect, useMemo } from 'react' import Link from 'next/link' import { formatUsdValue, perpContractPrecision, usdFormatter } from '../utils' import { Table, Td, Th, TrBody, TrHead } from './TableElements' import { useViewport } from '../hooks/useViewport' import { breakpoints } from './TradePageGrid' import { useTranslation } from 'next-i18next' import useMangoStore from '../stores/useMangoStore' import { FavoriteMarketButton } from './TradeNavMenu' import { useSortableData } from '../hooks/useSortableData' import { LinkButton } from './Button' import { ArrowSmDownIcon } from '@heroicons/react/solid' import { useRouter } from 'next/router' import { AreaChart, Area, XAxis, YAxis } from 'recharts' import { useTheme } from 'next-themes' const MarketsTable = ({ isPerpMarket, markets, }: { isPerpMarket?: boolean markets: any[] }) => { const { t } = useTranslation('common') const { width } = useViewport() const isMobile = width ? width < breakpoints.md : false const actions = useMangoStore((s) => s.actions) const coingeckoPrices = useMangoStore((s) => s.coingeckoPrices.data) const loadingCoingeckoPrices = useMangoStore((s) => s.coingeckoPrices.loading) const router = useRouter() useEffect(() => { if (coingeckoPrices.length === 0) { actions.fetchCoingeckoPrices() } }, [coingeckoPrices]) const { items, requestSort, sortConfig } = useSortableData(markets) return !isMobile ? (
{isPerpMarket ? ( <> ) : null} {items.map((market) => { const { baseSymbol, change24h, funding1h, last, name, openInterest, openInterestUsd, volumeUsd24h, } = market const fundingApr = funding1h ? (funding1h * 24 * 365).toFixed(2) : '-' const coingeckoData = coingeckoPrices.find( (asset) => asset.symbol === baseSymbol ) const chartData = coingeckoData ? coingeckoData.prices : undefined return ( {isPerpMarket ? ( <> ) : null} ) })}
requestSort('name')} > {t('market')} requestSort('last')} > {t('price')} requestSort('change24h')} > {t('rolling-change')} requestSort('volumeUsd24h')} > {t('daily-volume')} requestSort('funding1h')} > {t('average-funding')} requestSort('openInterestUsd')} > {t('open-interest')} {t('favorite')}
{name}
{last ? ( formatUsdValue(last) ) : ( {t('unavailable')} )}
{!loadingCoingeckoPrices ? ( chartData !== undefined ? ( ) : ( t('unavailable') ) ) : (
)}
= 0 ? 'text-th-green' : 'text-th-red' } > {change24h || change24h === 0 ? ( `${(change24h * 100).toFixed(2)}%` ) : ( {t('unavailable')} )} {volumeUsd24h ? ( usdFormatter(volumeUsd24h, 0) ) : ( {t('unavailable')} )} {funding1h ? ( <> {`${funding1h.toFixed(4)}%`}{' '} {`(${fundingApr}% APR)`} ) : ( {t('unavailable')} )} {openInterestUsd ? ( <> {usdFormatter(openInterestUsd, 0)}{' '} {openInterest ? (
{openInterest.toLocaleString(undefined, { maximumFractionDigits: perpContractPrecision[baseSymbol], })}{' '} {baseSymbol}
) : null} ) : ( {t('unavailable')} )}
) : ( <> {items.map((market) => { const { baseSymbol, change24h, funding1h, last, name } = market const fundingApr = funding1h ? (funding1h * 24 * 365).toFixed(2) : '-' const coingeckoData = coingeckoPrices.find( (asset) => asset.symbol === baseSymbol ) const chartData = coingeckoData ? coingeckoData.prices : undefined return ( router.push(`/?name=${name}`, undefined, { shallow: true, }) } >
{name}
= 0 ? 'text-th-green' : 'text-th-red' }`} > {change24h || change24h === 0 ? ( `${(change24h * 100).toFixed(2)}%` ) : ( {t('unavailable')} )}
{!loadingCoingeckoPrices ? ( chartData !== undefined ? ( ) : ( t('unavailable') ) ) : (
)}

{last ? ( formatUsdValue(last) ) : ( {t('unavailable')} )}

{isPerpMarket ? ( funding1h ? (
{t('average-funding')}
{`${fundingApr}% APR`}
) : ( {t('unavailable')} ) ) : null}
) })} ) } const COLORS = { GREEN: { Mango: '#AFD803', Dark: '#5EBF4d', Light: '#5EBF4d' }, RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' }, } const PriceChart = ({ data, width, height, change24h, name }) => { const { theme } = useTheme() const color = change24h >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme] return ( ) } export const SpotMarketsTable = () => { const marketsInfo = useMangoStore((s) => s.marketsInfo) const spotMarketsInfo = useMemo( () => marketsInfo .filter((mkt) => mkt?.name.includes('USDC')) .sort((a, b) => b.volumeUsd24h - a.volumeUsd24h), [marketsInfo] ) return } export const PerpMarketsTable = () => { const marketsInfo = useMangoStore((s) => s.marketsInfo) const perpMarketsInfo = useMemo( () => marketsInfo .filter((mkt) => mkt?.name.includes('PERP')) .sort((a, b) => b.volumeUsd24h - a.volumeUsd24h), [marketsInfo] ) return }