import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
import Change from '@components/shared/Change'
import TabUnderline from '@components/shared/TabUnderline'
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, useState } from 'react'
import { DEFAULT_MARKET_NAME } from 'utils/constants'
import { formatFixedDecimals } from 'utils/numbers'
import MarketLogos from './MarketLogos'
const MarketSelectDropdown = () => {
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
const serumMarkets = mangoStore((s) => s.serumMarkets)
const perpMarkets = mangoStore((s) => s.perpMarkets)
const set = mangoStore((s) => s.set)
const [activeTab, setActiveTab] = useState('perp')
const handleSelectMarket = useCallback(
(market: Serum3Market | PerpMarket, close: any) => {
set((s) => {
s.selectedMarket.current = market
})
close()
},
[set]
)
return (
{({ close, open }) => (
<>
{selectedMarket ? : null}
>
{selectedMarket?.name || DEFAULT_MARKET_NAME}
setActiveTab(v)}
small
values={['perp', 'spot']}
/>
{activeTab === 'spot'
? serumMarkets?.length
? serumMarkets.map((m) => {
return (
handleSelectMarket(m, close)}
>
{m.name}
)
})
: null
: null}
{activeTab === 'perp'
? perpMarkets?.length
? perpMarkets.map((m) => {
return (
handleSelectMarket(m, close)}
>
{m.name}
)
})
: null
: null}
)}
)
}
const OraclePrice = () => {
const group = mangoStore((s) => s.group)
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
if (!group || !selectedMarket) return null
let price
if (selectedMarket instanceof Serum3Market) {
price = group.getFirstBankByTokenIndex(
selectedMarket?.baseTokenIndex
).uiPrice
} else {
price = selectedMarket.uiPrice
}
return (
${price ? formatFixedDecimals(price) : null}
)
}
const AdvancedMarketHeader = () => {
const { t } = useTranslation(['common', 'trade'])
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('trade:oracle-price')}
{t('rolling-change')}
{/*
{isNaN(change) ? '0.00' : change.toFixed(2)}%
*/}
)
}
export default AdvancedMarketHeader