From 63909e2bb7d07f8ec398f64011a61173dbec6f9c Mon Sep 17 00:00:00 2001 From: tjs Date: Fri, 20 Jan 2023 11:13:03 -0500 Subject: [PATCH] improve use query config options --- components/stats/PerpMarketsTable.tsx | 2 +- components/swap/SwapTokenChart.tsx | 1 + components/swap/useQuoteRoutes.ts | 3 ++ components/token/CoingeckoStats.tsx | 6 ++- components/token/TokenPage.tsx | 63 ++++++++++++----------- components/trade/AdvancedMarketHeader.tsx | 2 +- components/trade/PerpFundingRate.tsx | 4 +- hooks/useCoingecko.ts | 19 +++---- hooks/useIpAddress.ts | 41 +++++++++------ hooks/useJupiterMints.ts | 3 +- 10 files changed, 81 insertions(+), 63 deletions(-) diff --git a/components/stats/PerpMarketsTable.tsx b/components/stats/PerpMarketsTable.tsx index 9312d3eb..5fd339db 100644 --- a/components/stats/PerpMarketsTable.tsx +++ b/components/stats/PerpMarketsTable.tsx @@ -54,7 +54,7 @@ const PerpMarketsTable = ({ const coingeckoData = coingeckoPrices.find((asset) => symbol === 'soETH' ? asset.symbol === 'ETH' - : asset.symbol === symbol + : asset.symbol.toUpperCase() === symbol.toUpperCase() ) const change = coingeckoData diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx index 56459d2c..5c4a45ce 100644 --- a/components/swap/SwapTokenChart.tsx +++ b/components/swap/SwapTokenChart.tsx @@ -107,6 +107,7 @@ const SwapTokenChart = () => { cacheTime: 1000 * 60 * 15, staleTime: 1000 * 60 * 1, enabled: !!baseTokenId && !!quoteTokenId, + refetchOnWindowFocus: false, } ) diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts index f96f3d24..bdf1f896 100644 --- a/components/swap/useQuoteRoutes.ts +++ b/components/swap/useQuoteRoutes.ts @@ -185,7 +185,10 @@ const useQuoteRoutes = ({ wallet ), { + cacheTime: 1000 * 60, + staleTime: 1000 * 30, enabled: amount ? true : false, + retry: 3, } ) diff --git a/components/token/CoingeckoStats.tsx b/components/token/CoingeckoStats.tsx index d3ca1f95..aeed29a8 100644 --- a/components/token/CoingeckoStats.tsx +++ b/components/token/CoingeckoStats.tsx @@ -94,8 +94,10 @@ const CoingeckoStats = ({ const coingeckoTokenPrices = useMemo(() => { if (daysToShow === '1' && coingeckoPrices.length && bank) { - const tokenPriceData = coingeckoPrices.find( - (asset) => asset.symbol === bank.name + const tokenPriceData = coingeckoPrices.find((asset) => + bank.name === 'soETH' + ? asset.symbol === 'ETH' + : asset.symbol.toUpperCase() === bank.name.toUpperCase() ) if (tokenPriceData) { diff --git a/components/token/TokenPage.tsx b/components/token/TokenPage.tsx index 1d0ac80a..a4606465 100644 --- a/components/token/TokenPage.tsx +++ b/components/token/TokenPage.tsx @@ -3,7 +3,7 @@ import DailyRange from '@components/shared/DailyRange' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { useRouter } from 'next/router' -import { useEffect, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import FlipNumbers from 'react-flip-numbers' import { formatDecimal, formatFixedDecimals } from 'utils/numbers' import Link from 'next/link' @@ -17,6 +17,7 @@ import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettin import ActionPanel from './ActionPanel' import ChartTabs from './ChartTabs' import CoingeckoStats from './CoingeckoStats' +import { useQuery } from '@tanstack/react-query' const DEFAULT_COINGECKO_VALUES = { ath: 0, @@ -36,9 +37,18 @@ const DEFAULT_COINGECKO_VALUES = { total_volume: 0, } +const fetchTokenInfo = async (tokenId: string | undefined) => { + if (!tokenId) return + const response = await fetch( + `https://api.coingecko.com/api/v3/coins/${tokenId}?localization=false&tickers=false&developer_data=false&sparkline=false + ` + ) + const data = await response.json() + return data +} + const TokenPage = () => { const { t } = useTranslation(['common', 'token']) - const [coingeckoData, setCoingeckoData] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() const { token } = router.query @@ -74,30 +84,21 @@ const TokenPage = () => { } }, [bank, mangoTokens]) - const fetchTokenInfo = async (tokenId: string) => { - const response = await fetch( - `https://api.coingecko.com/api/v3/coins/${tokenId}?localization=false&tickers=false&developer_data=false&sparkline=false - ` - ) - const data = await response.json() - return data - } + const coingeckoTokenInfo = useQuery< + { market_data: any; name: string }, + Error + >(['ip-address', coingeckoId], () => fetchTokenInfo(coingeckoId), { + cacheTime: 1000 * 60 * 15, + staleTime: 1000 * 60 * 5, + retry: 3, + refetchOnWindowFocus: false, + enabled: !!coingeckoId, + }) - useEffect(() => { - const getCoingeckoData = async (id: string) => { - const response = await fetchTokenInfo(id) - setCoingeckoData(response) - setLoading(false) - } - - if (coingeckoId) { - getCoingeckoData(coingeckoId) - } - }, [coingeckoId]) - - const { high_24h, low_24h, price_change_percentage_24h } = coingeckoData - ? coingeckoData.market_data - : DEFAULT_COINGECKO_VALUES + const { high_24h, low_24h, price_change_percentage_24h } = + coingeckoTokenInfo.data + ? coingeckoTokenInfo.data.market_data + : DEFAULT_COINGECKO_VALUES return ( <> @@ -107,9 +108,9 @@ const TokenPage = () => {
- {coingeckoData ? ( + {coingeckoTokenInfo.data ? (

- {coingeckoData.name}{' '} + {coingeckoTokenInfo.data.name}{' '} ({bank.name})

) : ( @@ -131,13 +132,13 @@ const TokenPage = () => { {formatFixedDecimals(bank.uiPrice, true)} )}
- {coingeckoData ? ( + {coingeckoTokenInfo.data ? (
) : null}
- {coingeckoData ? ( + {coingeckoTokenInfo.data ? ( { % - {coingeckoData && coingeckoId ? ( + {coingeckoTokenInfo.data && coingeckoId ? ( ) : ( diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx index 825c7c74..2fd1ab37 100644 --- a/components/trade/AdvancedMarketHeader.tsx +++ b/components/trade/AdvancedMarketHeader.tsx @@ -25,7 +25,7 @@ const AdvancedMarketHeader = ({ return tokenPrices.find((asset) => baseSymbol === 'soETH' ? asset.symbol === 'ETH' - : asset.symbol === baseSymbol + : asset.symbol.toUpperCase() === baseSymbol?.toUpperCase() ) }, [baseSymbol, tokenPrices]) diff --git a/components/trade/PerpFundingRate.tsx b/components/trade/PerpFundingRate.tsx index 4cf18363..212dd138 100644 --- a/components/trade/PerpFundingRate.tsx +++ b/components/trade/PerpFundingRate.tsx @@ -21,9 +21,9 @@ export const usePerpFundingRate = () => { ['funding-rate'], () => fetchFundingRate(group?.publicKey?.toString()), { - cacheTime: 1000 * 60, + cacheTime: 1000 * 60 * 10, staleTime: 1000 * 60, - retry: true, + retry: 3, enabled: !!group, } ) diff --git a/hooks/useCoingecko.ts b/hooks/useCoingecko.ts index 6179d6cb..75fb2f74 100644 --- a/hooks/useCoingecko.ts +++ b/hooks/useCoingecko.ts @@ -9,21 +9,21 @@ const fetchCoingecko = async ( id: token.extensions?.coingeckoId, symbol: token.symbol, })) + const promises: any = [] for (const token of coingeckoIds) { if (token.id) { promises.push( fetch( `https://api.coingecko.com/api/v3/coins/${token.id}/market_chart?vs_currency=usd&days=1` - ).then((res) => res.json()) + ).then((res) => + res.json().then((r) => ({ ...r, symbol: token.symbol })) + ) ) } } const data = await Promise.all(promises) - for (let i = 0; i < data.length; i++) { - data[i].symbol = coingeckoIds[i].symbol - } return data || [] } @@ -33,12 +33,13 @@ export const useCoingecko = () => { const res = useQuery( ['coingecko-tokens'], - () => fetchCoingecko(mangoTokens!), + () => fetchCoingecko(mangoTokens), { - cacheTime: 1000 * 60 * 2, - staleTime: 1000 * 60 * 2, - retry: true, - enabled: !!mangoTokens, + cacheTime: 1000 * 60 * 15, + staleTime: 1000 * 60 * 10, + retry: 3, + enabled: !!mangoTokens?.length, + refetchOnWindowFocus: false, } ) diff --git a/hooks/useIpAddress.ts b/hooks/useIpAddress.ts index 85fb757b..887ecb42 100644 --- a/hooks/useIpAddress.ts +++ b/hooks/useIpAddress.ts @@ -1,5 +1,6 @@ import { CLUSTER } from '@store/mangoStore' -import { useCallback, useEffect, useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import { useEffect, useState } from 'react' const SANCTIONED_COUNTRIES = [ ['AG', 'Antigua and Barbuda'], @@ -36,29 +37,37 @@ const SANCTIONED_COUNTRY_CODES = SANCTIONED_COUNTRIES.map( const SPOT_ALLOWED = ['GB'] +const fetchIpGeolocation = async () => { + const response = await fetch(`https://country-code.mangomarkets.workers.dev`) + const parsedResponse = await response.json() + const ipCountryCode = parsedResponse ? parsedResponse?.country : '' + + return ipCountryCode +} + export default function useIpAddress() { const [ipAllowed, setIpAllowed] = useState(false) const [spotAllowed, setSpotAllowed] = useState(false) const [ipCountry, setIpCountry] = useState('') - const checkIpLocation = useCallback(async () => { - const response = await fetch( - `https://country-code.mangomarkets.workers.dev` - ) - const parsedResponse = await response.json() - const ipCountryCode = parsedResponse ? parsedResponse?.country : '' - - setIpCountry(ipCountryCode) - - if (ipCountryCode) { - setIpAllowed(!SANCTIONED_COUNTRY_CODES.includes(ipCountryCode)) - setSpotAllowed(SPOT_ALLOWED.includes(ipCountryCode)) + const ipCountryCode = useQuery( + ['ip-address'], + () => fetchIpGeolocation(), + { + cacheTime: 1000 * 60 * 2, + staleTime: 1000 * 60 * 2, + retry: 3, + refetchOnWindowFocus: true, } - }, []) + ) useEffect(() => { - checkIpLocation() - }, [checkIpLocation]) + if (ipCountryCode.data) { + setIpCountry(ipCountryCode.data) + setIpAllowed(!SANCTIONED_COUNTRY_CODES.includes(ipCountryCode.data)) + setSpotAllowed(SPOT_ALLOWED.includes(ipCountryCode.data)) + } + }, [ipCountryCode]) if (CLUSTER === 'mainnet-beta') { return { ipAllowed, spotAllowed, ipCountry } diff --git a/hooks/useJupiterMints.ts b/hooks/useJupiterMints.ts index 8bde5f31..1b46bd9d 100644 --- a/hooks/useJupiterMints.ts +++ b/hooks/useJupiterMints.ts @@ -37,8 +37,9 @@ const useJupiterMints = (): { { cacheTime: 1000 * 60 * 10, staleTime: 1000 * 60 * 10, - retry: true, + retry: 3, enabled: !!group, + refetchOnWindowFocus: false, } )