sort markets in drop down by notional volume
This commit is contained in:
parent
72457a419b
commit
239b0f99b6
|
@ -53,13 +53,14 @@ const MARKET_LINK_CLASSES =
|
|||
const MARKET_LINK_DISABLED_CLASSES =
|
||||
'flex w-full items-center justify-between py-2 px-4 md:hover:cursor-not-allowed'
|
||||
|
||||
export const DEFAULT_SORT_KEY: AllowedKeys = 'notionalQuoteVolume'
|
||||
|
||||
const MarketSelectDropdown = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
const [spotOrPerp, setSpotOrPerp] = useState(
|
||||
selectedMarket instanceof PerpMarket ? 'perp' : 'spot',
|
||||
)
|
||||
const defaultSortByKey: AllowedKeys = 'quote_volume_24h'
|
||||
const [search, setSearch] = useState('')
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const { group } = useMangoGroup()
|
||||
|
@ -81,7 +82,7 @@ const MarketSelectDropdown = () => {
|
|||
|
||||
const unsortedPerpMarketsToShow = useMemo(() => {
|
||||
if (!perpMarketsWithData.length) return []
|
||||
return sortPerpMarkets(perpMarketsWithData, defaultSortByKey)
|
||||
return sortPerpMarkets(perpMarketsWithData, DEFAULT_SORT_KEY)
|
||||
}, [perpMarketsWithData])
|
||||
|
||||
const spotQuoteTokens: string[] = useMemo(() => {
|
||||
|
@ -109,11 +110,11 @@ const MarketSelectDropdown = () => {
|
|||
})
|
||||
return search
|
||||
? startSearch(filteredMarkets, search)
|
||||
: sortSpotMarkets(filteredMarkets, defaultSortByKey)
|
||||
: sortSpotMarkets(filteredMarkets, DEFAULT_SORT_KEY)
|
||||
} else {
|
||||
return search
|
||||
? startSearch(serumMarketsWithData, search)
|
||||
: sortSpotMarkets(serumMarketsWithData, defaultSortByKey)
|
||||
: sortSpotMarkets(serumMarketsWithData, DEFAULT_SORT_KEY)
|
||||
}
|
||||
}, [group, search, serumMarketsWithData, spotBaseFilter])
|
||||
|
||||
|
@ -369,9 +370,9 @@ const MarketSelectDropdown = () => {
|
|||
</p>
|
||||
<p className="col-span-1 hidden sm:flex sm:justify-end">
|
||||
<SortableColumnHeader
|
||||
sortKey="marketData.quote_volume_24h"
|
||||
sortKey="marketData.notionalQuoteVolume"
|
||||
sort={() =>
|
||||
requestSerumSort('marketData.quote_volume_24h')
|
||||
requestSerumSort('marketData.notionalQuoteVolume')
|
||||
}
|
||||
sortConfig={serumSortConfig}
|
||||
title={t('daily-volume')}
|
||||
|
|
|
@ -67,6 +67,7 @@ export default function useListedMarketsWithMarketData() {
|
|||
|
||||
const serumMarketsWithData = useMemo(() => {
|
||||
if (!serumMarkets || !serumMarkets.length) return []
|
||||
const group = mangoStore.getState().group
|
||||
const allSpotMarkets: SerumMarketWithMarketData[] =
|
||||
serumMarkets as SerumMarketWithMarketData[]
|
||||
if (spotData && birdeyeSpotDailyPrices?.length) {
|
||||
|
@ -74,6 +75,15 @@ export default function useListedMarketsWithMarketData() {
|
|||
const spotEntries = Object.entries(spotData).find(
|
||||
(e) => e[0].toLowerCase() === market.name.toLowerCase(),
|
||||
)
|
||||
const marketData = spotEntries
|
||||
? spotEntries[1][0]
|
||||
: ({} as MarketsDataItem)
|
||||
const quoteBankPrice = group?.getFirstBankByTokenIndex(
|
||||
market.quoteTokenIndex,
|
||||
)?.uiPrice
|
||||
marketData.notionalQuoteVolume = marketData?.quote_volume_24h
|
||||
? marketData?.quote_volume_24h * (quoteBankPrice || 1)
|
||||
: 0
|
||||
const birdeyePrices = birdeyeSpotDailyPrices.find(
|
||||
(prices) => prices.marketIndex === market.marketIndex,
|
||||
)
|
||||
|
@ -98,10 +108,9 @@ export default function useListedMarketsWithMarketData() {
|
|||
const change = currentPrice
|
||||
? ((currentPrice - pastPrice) / pastPrice) * 100
|
||||
: 0
|
||||
|
||||
market.rollingChange = change
|
||||
market.priceHistory = priceHistory
|
||||
market.marketData = spotEntries ? spotEntries[1][0] : undefined
|
||||
market.marketData = marketData
|
||||
}
|
||||
}
|
||||
return [...allSpotMarkets].sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
@ -132,7 +141,7 @@ export default function useListedMarketsWithMarketData() {
|
|||
.sort((a, b) =>
|
||||
a.oracleLastUpdatedSlot == 0 ? -1 : a.name.localeCompare(b.name),
|
||||
)
|
||||
}, [perpData, perpMarkets])
|
||||
}, [currentPrices, perpData, perpMarkets])
|
||||
|
||||
const isLoading = loadingMarketsData || loadingBirdeyeSpotDailyPrices
|
||||
|
||||
|
|
|
@ -535,6 +535,7 @@ export type MarketsDataItem = {
|
|||
price_history: { price: number; time: string }[] | undefined
|
||||
quote_volume_1h: number
|
||||
quote_volume_24h: number
|
||||
notionalQuoteVolume: number | undefined
|
||||
}
|
||||
|
||||
export type cumOrderbookSide = {
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
} from 'hooks/useListedMarketsWithMarketData'
|
||||
|
||||
export type AllowedKeys =
|
||||
| 'notionalQuoteVolume'
|
||||
| 'quote_volume_24h'
|
||||
| 'quote_volume_1h'
|
||||
| 'change_24h'
|
||||
|
|
Loading…
Reference in New Issue