animate account value numbers

components/swap/SwapTokenChart.tsx

@@ -1,10 +1,4 @@
-import {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import {

pages/index.tsx

@@ -1,19 +1,15 @@
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
-import { useWallet } from '@solana/wallet-adapter-react'
 import type { NextPage } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useState } from 'react'
 import AccountActions from '../components/account/AccountActions'
 import DepositModal from '../components/modals/DepositModal'
-// import UserSetupModal, {
-//   SKIP_ACCOUNT_SETUP_KEY,
-// } from '../components/modals/UserSetupModal'
 import WithdrawModal from '../components/modals/WithdrawModal'
 import TokenList from '../components/TokenList'
 import mangoStore from '../store/state'
 import { formatDecimal } from '../utils/numbers'
-// import useLocalStorageState from '../hooks/useLocalStorageState'
+import FlipNumbers from 'react-flip-numbers'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -25,25 +21,34 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Index: NextPage = () => {
   const { t } = useTranslation('common')
-  // const { connected } = useWallet()
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
-  // const [showFirstAccountModal, setShowFirstAccountModal] = useState(false)
-  // const [skipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
-
-  // useEffect(() => {
-  //   if (connected && !mangoAccount && !skipAccountSetup) {
-  //     setShowFirstAccountModal(true)
-  //   }
-  // }, [connected, mangoAccount])
 
   return (
     <>
       <div className="mb-8 flex items-end justify-between border-b border-th-bkg-3 pb-8">
         <div>
           <p className="mb-1">{t('account-value')}</p>
-          <div className="text-5xl font-bold text-th-fgd-1">
+          <div className="flex items-center text-5xl font-bold text-th-fgd-1">
+            $
+            <FlipNumbers
+              height={48}
+              width={32}
+              play
+              delay={0.05}
+              duration={1}
+              numbers={
+                mangoAccount
+                  ? formatDecimal(
+                      toUiDecimals(mangoAccount.getEquity().toNumber()),
+                      2
+                    )
+                  : (0).toFixed(2)
+              }
+            />
+          </div>
+          {/* <div className="text-5xl font-bold text-th-fgd-1">
             $
             {mangoAccount
               ? formatDecimal(
@@ -51,7 +56,7 @@ const Index: NextPage = () => {
                   2
                 )
               : (0).toFixed(2)}
-          </div>
+          </div> */}
         </div>
         <AccountActions />
       </div>