From 306e1f0fdf31af0261e8c7a4ba9d00d458b16fde Mon Sep 17 00:00:00 2001 From: saml33 Date: Fri, 4 Aug 2023 21:32:42 +1000 Subject: [PATCH] save chart and price direction on flip price --- apis/coingecko.ts | 7 ++- components/swap/LimitSwapForm.tsx | 14 +++--- components/swap/SwapTokenChart.tsx | 78 ++++++++++++++++-------------- types/index.ts | 3 +- 4 files changed, 57 insertions(+), 45 deletions(-) diff --git a/apis/coingecko.ts b/apis/coingecko.ts index d9000a29..a6f87dda 100644 --- a/apis/coingecko.ts +++ b/apis/coingecko.ts @@ -17,15 +17,18 @@ export const fetchChartData = async ( baseTokenId: string | undefined, quoteTokenId: string | undefined, daysToShow: string, + flipPrices: boolean, ): Promise => { if (!baseTokenId || !quoteTokenId) return [] + const baseId = !flipPrices ? baseTokenId : quoteTokenId + const quoteId = !flipPrices ? quoteTokenId : baseTokenId try { const [inputResponse, outputResponse] = await Promise.all([ fetch( - `https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`, + `https://api.coingecko.com/api/v3/coins/${baseId}/ohlc?vs_currency=usd&days=${daysToShow}`, ), fetch( - `https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`, + `https://api.coingecko.com/api/v3/coins/${quoteId}/ohlc?vs_currency=usd&days=${daysToShow}`, ), ]) diff --git a/components/swap/LimitSwapForm.tsx b/components/swap/LimitSwapForm.tsx index 798979bd..dbc4e30e 100644 --- a/components/swap/LimitSwapForm.tsx +++ b/components/swap/LimitSwapForm.tsx @@ -28,12 +28,12 @@ import SellTokenInput from './SellTokenInput' import BuyTokenInput from './BuyTokenInput' import { notify } from 'utils/notifications' import * as sentry from '@sentry/nextjs' -import { SwapChartSettings, isMangoError } from 'types' +import { isMangoError } from 'types' import Button, { IconButton } from '@components/shared/Button' import Loading from '@components/shared/Loading' import TokenLogo from '@components/shared/TokenLogo' import InlineNotification from '@components/shared/InlineNotification' -import { handleFlipPrices } from './SwapTokenChart' +import { getPairChartSettings, handleFlipPrices } from './SwapTokenChart' import Select from '@components/forms/Select' import useIpAddress from 'hooks/useIpAddress' import { Bank } from '@blockworks-foundation/mango-v4' @@ -119,13 +119,13 @@ const LimitSwapForm = ({ const flipPrices = useMemo(() => { if (!swapChartSettings.length || !inputBank || !outputBank) return false - const pairSettings = swapChartSettings.find( - (chart: SwapChartSettings) => - chart.pair.includes(inputBank.name) && - chart.pair.includes(outputBank.name), + const pairSettings = getPairChartSettings( + swapChartSettings, + inputBank.name, + outputBank.name, ) if (pairSettings) { - return pairSettings.flipPrices + return pairSettings.quote === inputBank.name } else return false }, [swapChartSettings, inputBank, outputBank]) diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx index 138940f0..01eef758 100644 --- a/components/swap/SwapTokenChart.tsx +++ b/components/swap/SwapTokenChart.tsx @@ -54,27 +54,49 @@ import useThemeWrapper from 'hooks/useThemeWrapper' dayjs.extend(relativeTime) +export const getPairChartSettings = ( + swapChartSettings: SwapChartSettings[], + inputToken: string, + outputToken: string, +) => { + const pairSettings = swapChartSettings.find( + (chart: SwapChartSettings) => + chart.pair.includes(inputToken) && chart.pair.includes(outputToken), + ) + return pairSettings +} + export const handleFlipPrices = ( flip: boolean, - // flipPrices: boolean, inputToken: string | undefined, outputToken: string | undefined, swapChartSettings: SwapChartSettings[], setSwapChartSettings: (settings: SwapChartSettings[]) => void, ) => { if (!inputToken || !outputToken) return - if (flip) { + + const pairSettings = getPairChartSettings( + swapChartSettings, + inputToken, + outputToken, + ) + + const base = flip ? outputToken : inputToken + const quote = flip ? inputToken : outputToken + + if (pairSettings) { + pairSettings.base = base + pairSettings.quote = quote + setSwapChartSettings([...swapChartSettings]) + } else { setSwapChartSettings([ ...swapChartSettings, - { pair: `${inputToken}/${outputToken}`, flipPrices: true }, + { + pair: `${outputToken}/${inputToken}`, + base: base, + quote: quote, + }, ]) - } else { - setSwapChartSettings( - swapChartSettings.filter( - (chart: SwapChartSettings) => - !chart.pair.includes(inputToken) && !chart.pair.includes(outputToken), - ), - ) } } @@ -229,13 +251,13 @@ const SwapTokenChart = () => { const flipPrices = useMemo(() => { if (!swapChartSettings.length || !inputBank || !outputBank) return false - const pairSettings = swapChartSettings.find( - (chart: SwapChartSettings) => - chart.pair.includes(inputBank.name) && - chart.pair.includes(outputBank.name), + const pairSettings = getPairChartSettings( + swapChartSettings, + inputBank.name, + outputBank.name, ) if (pairSettings) { - return pairSettings.flipPrices + return pairSettings.quote === inputBank.name } else return false }, [swapChartSettings, inputBank, outputBank]) @@ -246,7 +268,7 @@ const SwapTokenChart = () => { return !flipPrices ? `${outputSymbol}/${inputSymbol}` : `${inputSymbol}/${outputSymbol}` - }, [flipPrices, inputBank, inputCoingeckoId, outputBank]) + }, [flipPrices, inputBank, outputBank]) const handleSwapMouseEnter = useCallback( ( @@ -363,12 +385,12 @@ const SwapTokenChart = () => { ) const { - data: coingeckoDataQuery, + data: coingeckoData, isLoading, isFetching, } = useQuery( - ['swap-chart-data', baseTokenId, quoteTokenId, daysToShow], - () => fetchChartData(baseTokenId, quoteTokenId, daysToShow), + ['swap-chart-data', baseTokenId, quoteTokenId, daysToShow, flipPrices], + () => fetchChartData(baseTokenId, quoteTokenId, daysToShow, flipPrices), { cacheTime: 1000 * 60 * 15, staleTime: 1000 * 60 * 1, @@ -377,21 +399,6 @@ const SwapTokenChart = () => { }, ) - const coingeckoData = useMemo(() => { - if (!coingeckoDataQuery || !coingeckoDataQuery.length) return [] - if (!flipPrices) { - return coingeckoDataQuery - } else { - return coingeckoDataQuery.map((d: ChartDataItem) => { - const price = - d.inputTokenPrice / d.outputTokenPrice === d.price - ? d.outputTokenPrice / d.inputTokenPrice - : d.inputTokenPrice / d.outputTokenPrice - return { ...d, price: price } - }) - } - }, [flipPrices, coingeckoDataQuery]) - const chartSwapTimes = useMemo(() => { if ( loadSwapHistory || @@ -415,7 +422,8 @@ const SwapTokenChart = () => { }, [swapHistory, loadSwapHistory, inputBank, outputBank]) const swapHistoryPoints = useMemo(() => { - if (!coingeckoData.length || !chartSwapTimes.length) return [] + if (!coingeckoData || !coingeckoData.length || !chartSwapTimes.length) + return [] return chartSwapTimes.map((x) => { const makeChartDataItem = { inputTokenPrice: 1, outputTokenPrice: 1 } const index = coingeckoData.findIndex((d) => d.time > x) // find index of data point with x value greater than highlight x diff --git a/types/index.ts b/types/index.ts index ae6ed324..222c595a 100644 --- a/types/index.ts +++ b/types/index.ts @@ -468,6 +468,7 @@ export interface ContributionDetails { } export type SwapChartSettings = { - flipPrices: boolean pair: string + base: string + quote: string }