blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix market select quote filter

This commit is contained in:
saml33 2023-10-05 12:06:56 +11:00
parent ae841eb7bc
commit 8eea1382cd
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/trade/MarketSelectDropdown.tsx
View File

@ -90,26 +90,28 @@ const MarketSelectDropdown = () => {
return sortPerpMarkets(perpMarketsWithData, defaultSortByKey)
}, [perpMarketsWithData])
const spotBaseTokens: string[] = useMemo(() => {
if (serumMarketsWithData.length) {
const baseTokens: string[] = ['All']
const spotQuoteTokens: string[] = useMemo(() => {
if (serumMarketsWithData.length && group) {
const quoteTokens: string[] = ['All']
serumMarketsWithData.map((m) => {
const base = m.name.split('/')[1]
if (!baseTokens.includes(base)) {
baseTokens.push(base)
const quoteBank = group.getFirstBankByTokenIndex(m.quoteTokenIndex)
const quote = quoteBank.name
if (!quoteTokens.includes(quote)) {
quoteTokens.push(quote)
}
})
return baseTokens.sort((a, b) => a.localeCompare(b))
return quoteTokens.sort((a, b) => a.localeCompare(b))
}
return ['All']
}, [serumMarketsWithData])
}, [group, serumMarketsWithData])
const unsortedSerumMarketsToShow = useMemo(() => {
if (!serumMarketsWithData.length) return []
if (!serumMarketsWithData.length || !group) return []
if (spotBaseFilter !== 'All') {
const filteredMarkets = serumMarketsWithData.filter((m) => {
const base = m.name.split('/')[1]
return base === spotBaseFilter
const quoteBank = group.getFirstBankByTokenIndex(m.quoteTokenIndex)
const quote = quoteBank.name
return quote === spotBaseFilter
})
return search
? startSearch(filteredMarkets, search)
@ -119,7 +121,7 @@ const MarketSelectDropdown = () => {
? startSearch(serumMarketsWithData, search)
: sortSpotMarkets(serumMarketsWithData, defaultSortByKey)
}
}, [search, serumMarketsWithData, spotBaseFilter])
}, [group, search, serumMarketsWithData, spotBaseFilter])
const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value)
@ -195,7 +197,7 @@ const MarketSelectDropdown = () => {
fillWidth
/>
</div>
<div className="thin-scroll max-h-[calc(100vh-188px)] overflow-auto py-3">
<div className="thin-scroll h-[calc(100vh-188px)] overflow-auto py-3 md:max-h-[calc(100vh-215px)]">
{spotOrPerp === 'perp' && perpMarketsToShow.length ? (
<>
<div className="mb-2 grid grid-cols-3 border-b border-th-bkg-3 pb-1 pl-4 pr-14 text-xxs sm:grid-cols-4">
@ -333,7 +335,7 @@ const MarketSelectDropdown = () => {
<MagnifyingGlassIcon className="absolute left-2 top-2 h-4 w-4" />
</div>
<div>
{spotBaseTokens.map((tab) => (
{spotQuoteTokens.map((tab) => (
<button
className={`rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
spotBaseFilter === tab