import { PerpMarket } from '@blockworks-foundation/mango-v4' import { IconButton, LinkButton } from '@components/shared/Button' import { ChartBarIcon, InformationCircleIcon } from '@heroicons/react/20/solid' import mangoStore from '@store/mangoStore' import useSelectedMarket from 'hooks/useSelectedMarket' import { useTranslation } from 'next-i18next' import { useMemo, useState } from 'react' import { numberCompacter } from 'utils/numbers' import MarketSelectDropdown from './MarketSelectDropdown' import PerpFundingRate from './PerpFundingRate' import SheenLoader from '@components/shared/SheenLoader' import PerpMarketDetailsModal from '@components/modals/PerpMarketDetailsModal' import OraclePrice from './OraclePrice' import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal' import { MarketData } from 'types' import ManualRefresh from '@components/shared/ManualRefresh' import { useViewport } from 'hooks/useViewport' import { breakpoints } from 'utils/theme' import MarketChange from '@components/shared/MarketChange' import useMarketsData from 'hooks/useMarketsData' const AdvancedMarketHeader = ({ showChart, setShowChart, }: { showChart?: boolean setShowChart?: (x: boolean) => void }) => { const { t } = useTranslation(['common', 'trade']) const { serumOrPerpMarket, selectedMarket } = useSelectedMarket() const selectedMarketName = mangoStore((s) => s.selectedMarket.name) const [showMarketDetails, setShowMarketDetails] = useState(false) const { width } = useViewport() const isMobile = width ? width < breakpoints.md : false const { data: marketsData, isLoading, isFetching } = useMarketsData() const volume = useMemo(() => { if (!selectedMarketName || !serumOrPerpMarket || !marketsData) return 0 if (serumOrPerpMarket instanceof PerpMarket) { const perpData: MarketData = marketsData?.perpData const perpEntries = Object.entries(perpData).find( (e) => e[0].toLowerCase() === selectedMarketName.toLowerCase(), ) return perpEntries ? perpEntries[1][0]?.quote_volume_24h : 0 } else { const spotData: MarketData = marketsData?.spotData const spotEntries = Object.entries(spotData).find( (e) => e[0].toLowerCase() === selectedMarketName.toLowerCase(), ) return spotEntries ? spotEntries[1][0]?.quote_volume_24h : 0 } }, [marketsData, selectedMarketName, serumOrPerpMarket]) const loadingVolume = isLoading || isFetching return ( <>