diff --git a/apis/coingecko.ts b/apis/coingecko.ts index 6de38c06..d809cec8 100644 --- a/apis/coingecko.ts +++ b/apis/coingecko.ts @@ -1,3 +1,5 @@ +import { Bank } from '@blockworks-foundation/mango-v4' + type CoingeckoOhlcv = [ time: number, open: number, @@ -15,7 +17,9 @@ export type ChartDataItem = { export const fetchChartData = async ( baseTokenId: string | undefined, + inputBank: Bank | undefined, quoteTokenId: string | undefined, + outputBank: Bank | undefined, daysToShow: string, flipPrices: boolean, ): Promise => { @@ -50,7 +54,20 @@ export const fetchChartData = async ( }) } } - return parsedData + if (inputBank && outputBank) { + const latestPrice = flipPrices + ? outputBank.uiPrice / inputBank.uiPrice + : inputBank.uiPrice / outputBank.uiPrice + const item: ChartDataItem[] = [ + { + price: latestPrice, + time: Date.now(), + inputTokenPrice: inputBank.uiPrice, + outputTokenPrice: outputBank.uiPrice, + }, + ] + return parsedData.concat(item) + } else return parsedData } else { return [] } diff --git a/components/swap/LimitSwapForm.tsx b/components/swap/LimitSwapForm.tsx index b7c5d1b4..478ff39b 100644 --- a/components/swap/LimitSwapForm.tsx +++ b/components/swap/LimitSwapForm.tsx @@ -20,10 +20,7 @@ import NumberFormat, { import Decimal from 'decimal.js' import mangoStore from '@store/mangoStore' import { useTranslation } from 'next-i18next' -import { - SIZE_INPUT_UI_KEY, - SWAP_CHART_SETTINGS_KEY, -} from '../../utils/constants' +import { SIZE_INPUT_UI_KEY } from '../../utils/constants' import useLocalStorageState from 'hooks/useLocalStorageState' import SwapSlider from './SwapSlider' import PercentageSelectButtons from './PercentageSelectButtons' @@ -38,7 +35,6 @@ import Button, { LinkButton } from '@components/shared/Button' import Loading from '@components/shared/Loading' import TokenLogo from '@components/shared/TokenLogo' import InlineNotification from '@components/shared/InlineNotification' -import { getChartPairSettings, handleFlipPrices } from './SwapTokenChart' import Select from '@components/forms/Select' import useIpAddress from 'hooks/useIpAddress' import { Bank, toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4' @@ -108,16 +104,13 @@ const LimitSwapForm = ({ const [submitting, setSubmitting] = useState(false) const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider') const [formErrors, setFormErrors] = useState({}) - const [swapChartSettings, setSwapChartSettings] = useLocalStorageState( - SWAP_CHART_SETTINGS_KEY, - [], - ) const { inputBank, outputBank, amountIn: amountInFormValue, amountOut: amountOutFormValue, + flipPrices, } = mangoStore((s) => s.swap) const { connected, connect } = useWallet() @@ -158,19 +151,6 @@ const LimitSwapForm = ({ const showInsufficientBalance = tokenMax.lt(amountInAsDecimal) || tokenMax.eq(0) - const flipPrices = useMemo(() => { - if (!swapChartSettings.length || !inputBankName || !outputBankName) - return false - const pairSettings = getChartPairSettings( - swapChartSettings, - inputBankName, - outputBankName, - ) - if (pairSettings) { - return pairSettings.quote === inputBankName - } else return false - }, [swapChartSettings, inputBankName, outputBankName]) - const setAmountInFormValue = useCallback((amountIn: string) => { set((s) => { s.swap.amountIn = amountIn @@ -708,21 +688,11 @@ const LimitSwapForm = ({ (flip: boolean) => { if (!inputBankName || !outputBankName) return setFormErrors({}) - handleFlipPrices( - flip, - inputBankName, - outputBankName, - swapChartSettings, - setSwapChartSettings, - ) + set((state) => { + state.swap.flipPrices = flip + }) }, - [ - inputBankName, - outputBankName, - setFormErrors, - setSwapChartSettings, - swapChartSettings, - ], + [inputBankName, outputBankName, setFormErrors], ) const handleOrderTypeChange = useCallback( diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx index 671c2367..0c4c1131 100644 --- a/components/swap/SwapForm.tsx +++ b/components/swap/SwapForm.tsx @@ -49,7 +49,6 @@ const SwapForm = () => { const bank = group.getFirstBankByMint(new PublicKey(mintAddress)) set((s) => { s.swap.inputBank = bank - s.swap.limitPrice = '' }) } setShowTokenSelect(undefined) @@ -61,7 +60,6 @@ const SwapForm = () => { const bank = group.getFirstBankByMint(new PublicKey(mintAddress)) set((s) => { s.swap.outputBank = bank - s.swap.limitPrice = '' }) } setShowTokenSelect(undefined) diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx index 9728b35c..dad7da8a 100644 --- a/components/swap/SwapTokenChart.tsx +++ b/components/swap/SwapTokenChart.tsx @@ -32,10 +32,7 @@ import { ChartDataItem, fetchChartData } from 'apis/coingecko' import mangoStore from '@store/mangoStore' import useJupiterSwapData from './useJupiterSwapData' import useLocalStorageState from 'hooks/useLocalStorageState' -import { - ANIMATION_SETTINGS_KEY, - SWAP_CHART_SETTINGS_KEY, -} from 'utils/constants' +import { ANIMATION_SETTINGS_KEY } from 'utils/constants' import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings' import { useTranslation } from 'next-i18next' import { @@ -49,57 +46,13 @@ import { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalCh import { interpolateNumber } from 'd3-interpolate' import { IconButton } from '@components/shared/Button' import Tooltip from '@components/shared/Tooltip' -import { SwapChartSettings, SwapHistoryItem } from 'types' +import { SwapHistoryItem } from 'types' import useThemeWrapper from 'hooks/useThemeWrapper' import FavoriteSwapButton from './FavoriteSwapButton' dayjs.extend(relativeTime) -export const getChartPairSettings = ( - 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, - inputToken: string | undefined, - outputToken: string | undefined, - swapChartSettings: SwapChartSettings[], - setSwapChartSettings: (settings: SwapChartSettings[]) => void, -) => { - if (!inputToken || !outputToken) return - - const pairSettings = getChartPairSettings( - 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: `${outputToken}/${inputToken}`, - base: base, - quote: quote, - }, - ]) - } -} +const set = mangoStore.getState().set const CustomizedLabel = ({ chartData, @@ -225,8 +178,7 @@ const SwapHistoryArrows = (props: ExtendedReferenceDotProps) => { const SwapTokenChart = () => { const { t } = useTranslation('common') - const inputBank = mangoStore((s) => s.swap.inputBank) - const outputBank = mangoStore((s) => s.swap.outputBank) + const { inputBank, outputBank, flipPrices } = mangoStore((s) => s.swap) const { inputCoingeckoId, outputCoingeckoId } = useJupiterSwapData() const [baseTokenId, setBaseTokenId] = useState(inputCoingeckoId) const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId) @@ -237,10 +189,6 @@ const SwapTokenChart = () => { ANIMATION_SETTINGS_KEY, INITIAL_ANIMATION_SETTINGS, ) - const [swapChartSettings, setSwapChartSettings] = useLocalStorageState( - SWAP_CHART_SETTINGS_KEY, - [], - ) const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data) const loadSwapHistory = mangoStore((s) => s.mangoAccount.swapHistory.loading) const [showSwaps, setShowSwaps] = useState(true) @@ -255,19 +203,6 @@ const SwapTokenChart = () => { return [inputBank.name, outputBank.name] }, [inputBank, outputBank]) - const flipPrices = useMemo(() => { - if (!swapChartSettings.length || !inputBankName || !outputBankName) - return false - const pairSettings = getChartPairSettings( - swapChartSettings, - inputBankName, - outputBankName, - ) - if (pairSettings) { - return pairSettings.quote === inputBankName - } else return false - }, [swapChartSettings, inputBankName, outputBankName]) - const swapMarketName = useMemo(() => { if (!inputBankName || !outputBankName) return '' const inputSymbol = formatTokenSymbol(inputBankName) @@ -397,11 +332,19 @@ const SwapTokenChart = () => { isFetching, } = useQuery( ['swap-chart-data', baseTokenId, quoteTokenId, daysToShow, flipPrices], - () => fetchChartData(baseTokenId, quoteTokenId, daysToShow, flipPrices), + () => + fetchChartData( + baseTokenId, + inputBank, + quoteTokenId, + outputBank, + daysToShow, + flipPrices, + ), { cacheTime: 1000 * 60 * 15, staleTime: 1000 * 60 * 1, - enabled: !!baseTokenId && !!quoteTokenId, + enabled: !!(baseTokenId && quoteTokenId), refetchOnWindowFocus: false, }, ) @@ -454,22 +397,6 @@ const SwapTokenChart = () => { }) }, [coingeckoData, chartSwapTimes]) - const latestChartDataItem = useMemo(() => { - if (!inputBank || !outputBank) return [] - const price = flipPrices - ? outputBank.uiPrice / inputBank.uiPrice - : inputBank.uiPrice / outputBank.uiPrice - const item: ChartDataItem[] = [ - { - price, - time: Date.now(), - inputTokenPrice: inputBank.uiPrice, - outputTokenPrice: outputBank.uiPrice, - }, - ] - return item - }, [flipPrices, inputBank, outputBank]) - const chartData = useMemo(() => { if (!coingeckoData || !coingeckoData.length || coingeckoData.length < 2) return [] @@ -479,11 +406,8 @@ const SwapTokenChart = () => { const swapPoints = swapHistoryPoints.filter( (point) => point.time >= minTime && point.time <= maxTime, ) - return coingeckoData - .concat(swapPoints) - .sort((a, b) => a.time - b.time) - .concat(latestChartDataItem) - } else return coingeckoData.concat(latestChartDataItem) + return coingeckoData.concat(swapPoints).sort((a, b) => a.time - b.time) + } else return coingeckoData }, [coingeckoData, swapHistoryPoints, showSwaps]) const handleMouseMove: CategoricalChartFunc = useCallback( @@ -553,13 +477,9 @@ const SwapTokenChart = () => { - handleFlipPrices( - !flipPrices, - inputBankName, - outputBankName, - swapChartSettings, - setSwapChartSettings, - ) + set((state) => { + state.swap.flipPrices = !flipPrices + }) } hideBg > diff --git a/store/mangoStore.ts b/store/mangoStore.ts index 83abcb1a..f32f5ef9 100644 --- a/store/mangoStore.ts +++ b/store/mangoStore.ts @@ -219,7 +219,7 @@ export type MangoStore = { swapMode: 'ExactIn' | 'ExactOut' amountIn: string amountOut: string - limitPrice?: string + flipPrices: boolean } set: (x: (x: MangoStore) => void) => void themeData: ThemeData @@ -386,7 +386,7 @@ const mangoStore = create()( swapMode: 'ExactIn', amountIn: '', amountOut: '', - limitPrice: '', + flipPrices: false, }, themeData: nftThemeMeta.default, tokenStats: { diff --git a/types/index.ts b/types/index.ts index e6e021a7..2a865366 100644 --- a/types/index.ts +++ b/types/index.ts @@ -486,9 +486,3 @@ export interface ContributionDetails { perpMarketContributions: PerpMarketContribution[] spotUi: number } - -export type SwapChartSettings = { - pair: string - base: string - quote: string -} diff --git a/utils/constants.ts b/utils/constants.ts index c7c5f5d6..4ed66439 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -59,8 +59,6 @@ export const SWAP_MARGIN_KEY = 'swapMargin-0.1' export const SHOW_SWAP_INTRO_MODAL = 'showSwapModal-0.1' -export const SWAP_CHART_SETTINGS_KEY = 'swapChartSettings-0.1' - export const ACCEPT_TERMS_KEY = 'termsOfUseAccepted-0.1' export const TRADE_LAYOUT_KEY = 'tradeLayoutKey-0.1'