add flip numbers to chart

components/TokenList.tsx

@@ -137,7 +137,10 @@ const TokenList = () => {
           {banks.map((bank) => {
             const oraclePrice = bank.value.price
             return (
-              <div className="rounded-md border border-th-bkg-4 p-4">
+              <div
+                key={bank.key}
+                className="rounded-md border border-th-bkg-4 p-4"
+              >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
                     <div className="mr-2.5 flex flex-shrink-0 items-center">

components/swap/SwapTokenChart.tsx

@@ -9,6 +9,8 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from 'recharts'
+import FlipNumbers from 'react-flip-numbers'
+
 import LineChartIcon from '../icons/LineChartIcon'
 import ContentBox from '../shared/ContentBox'
 import { GREEN, RED } from '../../styles/colors'
@@ -138,20 +140,20 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
 
   const calculateChartChange = () => {
     if (chartData.length) {
-      if (mouseData) {
-        const index = chartData.findIndex((d: any) => d.time === mouseData.time)
-        return (
-          ((chartData[chartData.length - 1]['price'] -
-            chartData[index]['price']) /
-            chartData[0]['price']) *
-          100
-        )
-      } else
-        return (
-          ((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
-            chartData[0]['price']) *
-          100
-        )
+      // if (mouseData) {
+      //   const index = chartData.findIndex((d: any) => d.time === mouseData.time)
+      //   return (
+      //     ((chartData[chartData.length - 1]['price'] -
+      //       chartData[index]['price']) /
+      //       chartData[0]['price']) *
+      //     100
+      //   )
+      // } else
+      return (
+        ((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
+          chartData[0]['price']) *
+        100
+      )
     }
     return 0
   }
@@ -172,7 +174,14 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
               {mouseData ? (
                 <>
                   <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
-                    {numberFormatter.format(mouseData['price'])}
+                    <FlipNumbers
+                      height={36}
+                      width={24}
+                      play
+                      delay={0.025}
+                      duration={1}
+                      numbers={numberFormatter.format(mouseData['price'])}
+                    />
                     <span
                       className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
                         calculateChartChange() >= 0
@@ -197,9 +206,14 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
               ) : (
                 <>
                   <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
-                    {numberFormatter.format(
-                      chartData[chartData.length - 1]['price']
-                    )}
+                    <FlipNumbers
+                      height={36}
+                      width={24}
+                      play
+                      numbers={numberFormatter.format(
+                        chartData[chartData.length - 1]['price']
+                      )}
+                    />
                     <span
                       className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
                         calculateChartChange() >= 0
@@ -312,9 +326,11 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
           </div>
         </div>
       ) : (
-        <div className="mt-4 rounded-md bg-th-bkg-3 p-4 text-center text-th-fgd-3 md:mt-0">
-          <LineChartIcon className="mx-auto h-6 w-6 text-th-primary" />
-          Chart not available
+        <div className="mt-4 flex h-96 items-center justify-center rounded-lg bg-th-bkg-2 p-4 text-th-fgd-3 md:mt-0">
+          <div className="">
+            <LineChartIcon className="mx-auto h-12 w-12 text-th-primary" />
+            <span className="text-lg">Chart not available</span>
+          </div>
         </div>
       )}
     </ContentBox>

package.json

@@ -30,6 +30,7 @@
     "process": "^0.11.10",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-flip-numbers": "^3.0.5",
     "react-window": "^1.8.7",
     "recharts": "^2.1.12",
     "zustand": "^3.7.2"

types/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-flip-numbers'

yarn.lock

@@ -3867,6 +3867,13 @@ react-dom@18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+react-flip-numbers@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-flip-numbers/-/react-flip-numbers-3.0.5.tgz#37fc3f9416575bfb9e9b7af44a7d64aaf922c712"
+  integrity sha512-iOzLaRZbqU7G7A+uE/ySBVzEHr+vZTPMJNP20o1dFUUZ3kkrpTFxpay3+kEVSSzeOXJWQWYDUQOFbv7g/PSf1g==
+  dependencies:
+    react-simple-animate "3.0.2"
+
 react-i18next@^11.18.0:
   version "11.18.1"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.1.tgz#ba86ed09069e129b8623a28f2b9a03d7f105ea6f"
@@ -3899,6 +3906,11 @@ react-resize-detector@^7.1.2:
   dependencies:
     lodash "^4.17.21"
 
+react-simple-animate@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.2.tgz#67f29b0c64155d2dfd540c1c74f634ef521536a8"
+  integrity sha512-GDpznDMpIHHdH6L6AZo9nNry6Xsq7forKmd6rwigMSuxe4FS9ihK0HSC1odB4WWKbA87S8VL7EVR9JeTRVkbQA==
+
 react-smooth@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.1.tgz#74c7309916d6ccca182c4b30c8992f179e6c5a05"