sort markets in drop down by notional volume

components/trade/MarketSelectDropdown.tsx

@@ -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')}

hooks/useListedMarketsWithMarketData.ts

@@ -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
 

types/index.ts

@@ -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 = {

utils/markets.ts

@@ -4,6 +4,7 @@ import {
 } from 'hooks/useListedMarketsWithMarketData'
 
 export type AllowedKeys =
+  | 'notionalQuoteVolume'
   | 'quote_volume_24h'
   | 'quote_volume_1h'
   | 'change_24h'