import { MinusSmallIcon } from '@heroicons/react/20/solid'
import { DownTriangle, UpTriangle } from './DirectionTriangles'
import FormatNumericValue from './FormatNumericValue'
import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
import { useMemo } from 'react'
import SheenLoader from './SheenLoader'
import useListedMarketsWithMarketData from 'hooks/useListedMarketsWithMarketData'
const MarketChange = ({
market,
size,
}: {
market: PerpMarket | Serum3Market | undefined
size?: 'small'
}) => {
const { perpMarketsWithData, serumMarketsWithData, isLoading } =
useListedMarketsWithMarketData()
const change = useMemo(() => {
if (!market || !perpMarketsWithData || !serumMarketsWithData) return 0
const isPerp = market instanceof PerpMarket
if (isPerp) {
const perpMarket = perpMarketsWithData.find(
(m) => m.name.toLowerCase() === market.name.toLowerCase(),
)
return perpMarket?.rollingChange ? perpMarket.rollingChange : 0
} else {
const spotMarket = serumMarketsWithData.find(
(m) => m.name.toLowerCase() === market.name.toLowerCase(),
)
return spotMarket?.rollingChange ? spotMarket.rollingChange : 0
}
}, [perpMarketsWithData, serumMarketsWithData])
return isLoading ? (
0
? 'text-th-up'
: change < 0
? 'text-th-down'
: 'text-th-fgd-4'
}`}
>
0%