only fetch required quote data once
This commit is contained in:
parent
ef9f83112c
commit
93df4d9421
|
@ -17,6 +17,7 @@ import Input from '@components/forms/Input'
|
||||||
import EmptyState from '@components/nftMarket/EmptyState'
|
import EmptyState from '@components/nftMarket/EmptyState'
|
||||||
import { Bank } from '@blockworks-foundation/mango-v4'
|
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||||
import useBanks from 'hooks/useBanks'
|
import useBanks from 'hooks/useBanks'
|
||||||
|
import SheenLoader from '@components/shared/SheenLoader'
|
||||||
|
|
||||||
export type BankWithMarketData = {
|
export type BankWithMarketData = {
|
||||||
bank: Bank
|
bank: Bank
|
||||||
|
@ -91,7 +92,8 @@ const Spot = () => {
|
||||||
const { t } = useTranslation(['common', 'explore', 'trade'])
|
const { t } = useTranslation(['common', 'explore', 'trade'])
|
||||||
const { group } = useMangoGroup()
|
const { group } = useMangoGroup()
|
||||||
const { banks } = useBanks()
|
const { banks } = useBanks()
|
||||||
const { serumMarketsWithData } = useListedMarketsWithMarketData()
|
const { serumMarketsWithData, isLoading: loadingMarketsData } =
|
||||||
|
useListedMarketsWithMarketData()
|
||||||
const [sortByKey, setSortByKey] = useState<AllowedKeys>('quote_volume_24h')
|
const [sortByKey, setSortByKey] = useState<AllowedKeys>('quote_volume_24h')
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
const [showTableView, setShowTableView] = useState(true)
|
const [showTableView, setShowTableView] = useState(true)
|
||||||
|
@ -169,7 +171,15 @@ const Spot = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{sortedTokensToShow.length ? (
|
{loadingMarketsData ? (
|
||||||
|
<div className="mx-4 my-6 space-y-1 md:mx-6">
|
||||||
|
{[...Array(4)].map((x, i) => (
|
||||||
|
<SheenLoader className="flex flex-1" key={i}>
|
||||||
|
<div className="h-16 w-full bg-th-bkg-2" />
|
||||||
|
</SheenLoader>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : sortedTokensToShow.length ? (
|
||||||
showTableView ? (
|
showTableView ? (
|
||||||
<div className="mt-6 border-t border-th-bkg-3">
|
<div className="mt-6 border-t border-th-bkg-3">
|
||||||
<SpotTable tokens={sortedTokensToShow} />
|
<SpotTable tokens={sortedTokensToShow} />
|
||||||
|
|
|
@ -15,23 +15,49 @@ const fetchBirdeye24hrPrices = async (
|
||||||
const queryEnd = Math.floor(Date.now() / 1000)
|
const queryEnd = Math.floor(Date.now() / 1000)
|
||||||
const queryStart = queryEnd - DAILY_SECONDS
|
const queryStart = queryEnd - DAILY_SECONDS
|
||||||
|
|
||||||
|
// collect unique quote tokens
|
||||||
|
const uniqueQuoteTokens = Array.from(
|
||||||
|
new Set(
|
||||||
|
spotMarkets.map((market) => {
|
||||||
|
const quoteBank = group.getFirstBankByTokenIndex(
|
||||||
|
market.quoteTokenIndex,
|
||||||
|
)
|
||||||
|
return quoteBank?.mint
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
).filter(Boolean) // remove any undefined values
|
||||||
|
|
||||||
|
// fetch responses for unique quote tokens
|
||||||
|
const quoteResponses = await Promise.all(
|
||||||
|
uniqueQuoteTokens.map(async (quoteToken) => {
|
||||||
|
const quoteQuery = `defi/history_price?address=${quoteToken}&address_type=token&type=1H&time_from=${queryStart}&time_to=${queryEnd}`
|
||||||
|
const quoteResponse = await makeApiRequest(quoteQuery)
|
||||||
|
return {
|
||||||
|
quoteToken,
|
||||||
|
items: quoteResponse?.data?.items?.length
|
||||||
|
? quoteResponse.data.items
|
||||||
|
: [],
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
// create a map for quick access to quote items based on quoteToken
|
||||||
|
const quoteItemsMap = new Map(
|
||||||
|
quoteResponses.map((response) => [response.quoteToken, response.items]),
|
||||||
|
)
|
||||||
|
|
||||||
|
// fetch base responses and match them with quote items
|
||||||
const promises = spotMarkets.map(async (market) => {
|
const promises = spotMarkets.map(async (market) => {
|
||||||
const baseBank = group.getFirstBankByTokenIndex(market.baseTokenIndex)
|
const baseBank = group.getFirstBankByTokenIndex(market.baseTokenIndex)
|
||||||
const quoteBank = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
|
const quoteBank = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
|
||||||
|
|
||||||
const baseQuery = `defi/history_price?address=${baseBank?.mint}&address_type=token&type=1H&time_from=${queryStart}&time_to=${queryEnd}`
|
const baseQuery = `defi/history_price?address=${baseBank?.mint}&address_type=token&type=1H&time_from=${queryStart}&time_to=${queryEnd}`
|
||||||
const quoteQuery = `defi/history_price?address=${quoteBank?.mint}&address_type=token&type=1H&time_from=${queryStart}&time_to=${queryEnd}`
|
|
||||||
|
|
||||||
const [baseResponse, quoteResponse] = await Promise.all([
|
const baseResponse = await makeApiRequest(baseQuery)
|
||||||
makeApiRequest(baseQuery),
|
|
||||||
makeApiRequest(quoteQuery),
|
|
||||||
])
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
base: baseResponse?.data?.items?.length ? baseResponse.data.items : [],
|
base: baseResponse?.data?.items?.length ? baseResponse.data.items : [],
|
||||||
quote: quoteResponse?.data?.items?.length
|
quote: quoteItemsMap.get(quoteBank?.mint) || [],
|
||||||
? quoteResponse.data.items
|
|
||||||
: [],
|
|
||||||
marketIndex: market.marketIndex,
|
marketIndex: market.marketIndex,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue