import { Serum3Market } from '@blockworks-foundation/mango-v4'
import PercentageChange from '@components/shared/PercentageChange'
import { Popover } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import mangoStore from '@store/mangoStore'
import { useTranslation } from 'next-i18next'
import { useCallback, useMemo } from 'react'
import { DEFAULT_MARKET_NAME } from 'utils/constants'
import { formatFixedDecimals } from 'utils/numbers'
const MarketSelectDropdown = () => {
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
const serumMarkets = mangoStore((s) => s.serumMarkets)
const set = mangoStore((s) => s.set)
const handleSelectMarket = useCallback(
(market: Serum3Market, close: any) => {
set((s) => {
s.selectedMarket.current = market
})
close()
},
[set]
)
return (
{({ close, open }) => (
{selectedMarket?.name || DEFAULT_MARKET_NAME}
{serumMarkets?.length
? serumMarkets.map((m) => (
handleSelectMarket(m, close)}
>
{m.name}
))
: null}
)}
)
}
const OraclePrice = () => {
const group = mangoStore((s) => s.group)
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
if (!group || !selectedMarket) return null
const baseTokenBank = group.getFirstBankByTokenIndex(
selectedMarket?.baseTokenIndex
)
return (
$
{baseTokenBank.uiPrice
? formatFixedDecimals(baseTokenBank.uiPrice)
: null}
)
}
const AdvancedMarketHeader = () => {
const { t } = useTranslation('common')
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
const coingeckoPrices = mangoStore((s) => s.coingeckoPrices.data)
const baseSymbol = useMemo(() => {
return selectedMarket?.name.split('/')[0]
}, [selectedMarket])
const coingeckoData = coingeckoPrices.find((asset) =>
baseSymbol === 'soETH'
? asset.symbol === 'ETH'
: asset.symbol === baseSymbol
)
const change = coingeckoData
? ((coingeckoData.prices[coingeckoData.prices.length - 1][1] -
coingeckoData.prices[0][1]) /
coingeckoData.prices[0][1]) *
100
: 0
return (
{t('rolling-change')}
{/*
{isNaN(change) ? '0.00' : change.toFixed(2)}%
*/}
)
}
export default AdvancedMarketHeader