Merge pull request #63 from blockworks-foundation/flip-swap-chart

allow flip swap chart prices

apis/coingecko.ts

@@ -33,12 +33,14 @@ export const fetchChartData = async (
       const found = a.find((price: any) => price.time === c[0])
       if (found) {
         if (['usd-coin', 'tether'].includes(quoteTokenId)) {
-          found.price = found.inputPrice / c[4]
+          found.price = found.p1 / c[4]
+          found.p2 = c[4]
         } else {
-          found.price = c[4] / found.inputPrice
+          found.price = c[4] / found.p1
+          found.p2 = c[4]
         }
       } else {
-        a.push({ time: c[0], inputPrice: c[4] })
+        a.push({ time: c[0], p1: c[4] })
       }
       return a
     }, [])

components/swap/SwapTokenChart.tsx

@@ -28,10 +28,17 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
 import { useTranslation } from 'next-i18next'
-import { NoSymbolIcon } from '@heroicons/react/20/solid'
+import { ArrowsRightLeftIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 
 dayjs.extend(relativeTime)
 
+interface ChartDataItem {
+  p1: number
+  p2: number
+  price: number
+  time: number
+}
+
 const CustomizedLabel = ({
   chartData,
   x,
@@ -86,6 +93,7 @@ const SwapTokenChart = () => {
   const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId)
   const [mouseData, setMouseData] = useState<any>(null)
   const [daysToShow, setDaysToShow] = useState('1')
+  const [flipPrices, setFlipPrices] = useState(false)
   const { theme } = useTheme()
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
@@ -101,7 +109,18 @@ const SwapTokenChart = () => {
       enabled: !!baseTokenId && !!quoteTokenId,
     }
   )
-  const chartData = chartDataQuery.data
+
+  const chartData = useMemo(() => {
+    if (!chartDataQuery?.data?.length) return []
+    if (!flipPrices) {
+      return chartDataQuery.data
+    } else {
+      return chartDataQuery.data.map((d: ChartDataItem) => {
+        const price = d.p1 / d.p2 === d.price ? d.p2 / d.p1 : d.p1 / d.p2
+        return { ...d, price: price }
+      })
+    }
+  }, [flipPrices, chartDataQuery])
 
   const handleMouseMove = (coords: any) => {
     if (coords.activePayload) {
@@ -150,6 +169,19 @@ const SwapTokenChart = () => {
     return 0
   }
 
+  const swapMarketName = useMemo(() => {
+    if (!inputBank || !outputBank) return ''
+    const inputSymbol = formatTokenSymbol(inputBank.name?.toUpperCase())
+    const outputSymbol = formatTokenSymbol(outputBank.name?.toUpperCase())
+    return ['usd-coin', 'tether'].includes(inputCoingeckoId || '')
+      ? !flipPrices
+        ? `${outputSymbol}/${inputSymbol}`
+        : `${inputSymbol}/${outputSymbol}`
+      : !flipPrices
+      ? `${inputSymbol}/${outputSymbol}`
+      : `${outputSymbol}/${inputSymbol}`
+  }, [flipPrices, inputBank, inputCoingeckoId, outputBank])
+
   return (
     <ContentBox hideBorder hidePadding className="h-full px-6 py-3">
       {chartDataQuery?.isLoading || chartDataQuery.isFetching ? (
@@ -170,23 +202,13 @@ const SwapTokenChart = () => {
             <div>
               {inputBank && outputBank ? (
                 <div className="mb-0.5 flex items-center">
-                  <p className="text-base text-th-fgd-3">
+                  <p className="text-base text-th-fgd-3">{swapMarketName}</p>
-                    {['usd-coin', 'tether'].includes(inputCoingeckoId || '')
+                  <div
-                      ? `${formatTokenSymbol(
-                          outputBank?.name?.toUpperCase()
-                        )}/${inputBank?.name?.toUpperCase()}`
-                      : `${formatTokenSymbol(
-                          inputBank?.name?.toUpperCase()
-                        )}/${formatTokenSymbol(
-                          outputBank?.name?.toUpperCase()
-                        )}`}
-                  </p>
-                  {/* <div
                     className="px-2 hover:cursor-pointer hover:text-th-active"
-                    onClick={handleFlipChart}
+                    onClick={() => setFlipPrices(!flipPrices)}
                   >
-                    <SwitchHorizontalIcon className="h-4 w-4" />
+                    <ArrowsRightLeftIcon className="h-4 w-4" />
-                  </div> */}
+                  </div>
                 </div>
               ) : null}
               {mouseData ? (