feat: add countups back

TalismanSociety · Dec 16, 2024 · d78f4e5 · d78f4e5
1 parent f79ee7c
commit d78f4e5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 28 deletions.
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetBalanceCellValue.tsx b/apps/extension/src/ui/domains/Portfolio/AssetBalanceCellValue.tsx
@@ -19,6 +19,7 @@ type Props = {
   className?: string
   tooltip?: ReactNode
   balancesStatus?: BalancesStatus
+  noCountUp?: boolean
 }
 
 export const AssetBalanceCellValue = ({
@@ -30,6 +31,7 @@ export const AssetBalanceCellValue = ({
   className,
   tooltip,
   balancesStatus,
+  noCountUp,
 }: Props) => {
   if (!render) return null
   return (
@@ -47,7 +49,7 @@ export const AssetBalanceCellValue = ({
           )}
         >
           <div>
-            <Tokens amount={tokens} symbol={symbol} isBalance noCountUp />
+            <Tokens amount={tokens} symbol={symbol} isBalance noCountUp={noCountUp} />
           </div>
           {locked ? (
             <div className="pb-1">
@@ -60,7 +62,7 @@ export const AssetBalanceCellValue = ({
             </div>
           ) : null}
         </div>
-        <div>{fiat === null ? "-" : <Fiat amount={fiat} isBalance noCountUp />}</div>
+        <div>{fiat === null ? "-" : <Fiat amount={fiat} isBalance noCountUp={noCountUp} />}</div>
       </div>
     </WithTooltip>
   )

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx
@@ -1,6 +1,6 @@
 import { ZapFastIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
-import { useCallback } from "react"
+import { FC, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 
 import { Balances } from "@extension/core"
@@ -18,11 +18,10 @@ import { useTokenBalancesSummary } from "../useTokenBalancesSummary"
 import { NetworksLogoStack } from "./NetworksLogoStack"
 import { usePortfolioNetworkIds } from "./usePortfolioNetworkIds"
 
-type AssetRowProps = {
-  balances: Balances
-}
-
-export const AssetRow = ({ balances }: AssetRowProps) => {
+export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
+  balances,
+  noCountUp,
+}) => {
   const { t } = useTranslation()
   const networkIds = usePortfolioNetworkIds(balances)
   const { genericEvent } = useAnalytics()
@@ -75,11 +74,11 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
             </div>
             {isUniswapV2LpToken && typeof tvl === "number" && (
               <div className="text-body-secondary whitespace-nowrap">
-                <Fiat amount={tvl} noCountUp /> <span className="text-tiny">TVL</span>
+                <Fiat amount={tvl} noCountUp={noCountUp} /> <span className="text-tiny">TVL</span>
               </div>
             )}
             {!isUniswapV2LpToken && typeof rate === "number" && (
-              <Fiat amount={rate} noCountUp className="text-body-secondary" />
+              <Fiat amount={rate} noCountUp={noCountUp} className="text-body-secondary" />
             )}
           </div>
         </div>
@@ -95,6 +94,7 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
               "noPadRight",
               status.status === "fetching" && "animate-pulse transition-opacity",
             )}
+            noCountUp={noCountUp}
           />
         </div>
         <div className="flex h-[6.6rem] flex-col items-end justify-center gap-2 text-right">
@@ -122,6 +122,7 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
               canBondNomPool && "group-hover:hidden",
               status.status === "fetching" && "animate-pulse transition-opacity",
             )}
+            noCountUp={noCountUp}
           />
         </div>
       </button>

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@talismn/util"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { Balances } from "extension-core"
-import { FC, useMemo, useRef } from "react"
+import { FC, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useLocation } from "react-router-dom"
 
@@ -112,14 +112,25 @@ export const DashboardAssetsTable = () => {
 }
 
 const VirtualizedRows: FC<{ symbolBalances: [string, Balances][] }> = ({ symbolBalances }) => {
+  const [noCountUp, setNoCountUp] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      // we only want count up on the first rendering of the table
+      // ex: sorting or filtering rows using search box should not trigger count up
+      setNoCountUp(true)
+    }, 500)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
   const virtualizer = useVirtualizer({
     count: symbolBalances.length,
-    estimateSize: () => 66,
     overscan: 5,
-    getScrollElement: () => document.getElementById("main"),
     gap: 8,
+    estimateSize: () => 66,
+    getScrollElement: () => document.getElementById("main"),
   })
 
   return (
@@ -139,7 +150,9 @@ const VirtualizedRows: FC<{ symbolBalances: [string, Balances][] }> = ({ symbolB
               transform: `translateY(${item.start}px)`,
             }}
           >
-            {!!symbolBalances[item.index] && <AssetRow balances={symbolBalances[item.index][1]} />}
+            {!!symbolBalances[item.index] && (
+              <AssetRow balances={symbolBalances[item.index][1]} noCountUp={noCountUp} />
+            )}
           </div>
         ))}
       </div>

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
@@ -1,7 +1,7 @@
 import { LockIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { useVirtualizer } from "@tanstack/react-virtual"
-import { FC, ReactNode, useCallback, useMemo, useRef } from "react"
+import { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { Balances } from "@extension/core"
@@ -28,11 +28,6 @@ import { NetworksLogoStack } from "./NetworksLogoStack"
 import { usePortfolioNetworkIds } from "./usePortfolioNetworkIds"
 import { usePortfolioSymbolBalancesByFilter } from "./usePortfolioSymbolBalances"
 
-type AssetRowProps = {
-  balances: Balances
-  locked?: boolean
-}
-
 const AssetRowSkeleton = ({ className }: { className?: string }) => {
   return (
     <div
@@ -56,7 +51,11 @@ const AssetRowSkeleton = ({ className }: { className?: string }) => {
   )
 }
 
-const AssetRow = ({ balances, locked }: AssetRowProps) => {
+const AssetRow: FC<{
+  balances: Balances
+  noCountUp: boolean
+  locked?: boolean
+}> = ({ balances, locked, noCountUp }) => {
   const networkIds = usePortfolioNetworkIds(balances)
   const { genericEvent } = useAnalytics()
 
@@ -124,11 +123,11 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
 
           {isUniswapV2LpToken && typeof tvl === "number" && (
             <div className="text-body-secondary whitespace-nowrap text-xs">
-              <Fiat amount={tvl} noCountUp /> <span className="text-[0.8rem]">TVL</span>
+              <Fiat amount={tvl} noCountUp={noCountUp} /> <span className="text-[0.8rem]">TVL</span>
             </div>
           )}
           {!isUniswapV2LpToken && typeof rate === "number" && (
-            <Fiat amount={rate} noCountUp className="text-body-secondary text-xs" />
+            <Fiat amount={rate} noCountUp={noCountUp} className="text-body-secondary text-xs" />
           )}
         </div>
         <div
@@ -148,7 +147,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
               <Tokens
                 amount={tokens}
                 symbol={isUniswapV2LpToken ? "" : token?.symbol}
-                noCountUp
+                noCountUp={noCountUp}
                 isBalance
               />
               {locked ? <LockIcon className="lock ml-2 inline align-baseline text-xs" /> : null}
@@ -163,7 +162,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
                 showStakingButton && "group-hover:hidden",
               )}
             >
-              {fiat === null ? "-" : <Fiat amount={fiat} isBalance noCountUp />}
+              {fiat === null ? "-" : <Fiat amount={fiat} isBalance noCountUp={noCountUp} />}
             </div>
             {showStakingButton && (
               <BondPillButton
@@ -298,15 +297,26 @@ const VirtualizedRows: FC<{ rows: [string, Balances][]; locked?: boolean; oversc
   locked,
   overscan,
 }) => {
+  const [noCountUp, setNoCountUp] = useState(false)
   const refContainer = useScrollContainer()
   const ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      // we only want count up on the first rendering of the table
+      // ex: sorting or filtering rows using search box should not trigger count up
+      setNoCountUp(true)
+    }, 500)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
   const virtualizer = useVirtualizer({
     count: rows.length,
-    estimateSize: () => 56,
     overscan: overscan ?? 5,
-    getScrollElement: () => refContainer.current,
     gap: 8,
+    estimateSize: () => 56,
+    getScrollElement: () => refContainer.current,
   })
 
   return (
@@ -325,7 +335,9 @@ const VirtualizedRows: FC<{ rows: [string, Balances][]; locked?: boolean; oversc
               transform: `translateY(${item.start}px)`,
             }}
           >
-            {!!rows[item.index] && <AssetRow balances={rows[item.index][1]} locked={locked} />}
+            {!!rows[item.index] && (
+              <AssetRow balances={rows[item.index][1]} locked={locked} noCountUp={noCountUp} />
+            )}
           </div>
         ))}
       </div>