remove saving chart settings and fix latest price chart flicker

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<ChartDataItem[]> => {
@@ -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 []
     }

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<FormErrors>({})
-  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(

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)

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 = () => {
                   <IconButton
                     className="px-2 text-th-fgd-3"
                     onClick={() =>
-                      handleFlipPrices(
-                        !flipPrices,
-                        inputBankName,
-                        outputBankName,
-                        swapChartSettings,
-                        setSwapChartSettings,
-                      )
+                      set((state) => {
+                        state.swap.flipPrices = !flipPrices
+                      })
                     }
                     hideBg
                   >

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<MangoStore>()(
         swapMode: 'ExactIn',
         amountIn: '',
         amountOut: '',
-        limitPrice: '',
+        flipPrices: false,
       },
       themeData: nftThemeMeta.default,
       tokenStats: {

types/index.ts

@@ -486,9 +486,3 @@ export interface ContributionDetails {
   perpMarketContributions: PerpMarketContribution[]
   spotUi: number
 }
-
-export type SwapChartSettings = {
-  pair: string
-  base: string
-  quote: string
-}

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'