add tooltip for abbreviated amount

src/components/BarDiagram/BarDiagram.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react'
 import { BarChart, XAxis, YAxis, Tooltip, Bar, ResponsiveContainer, type TooltipProps } from 'recharts'
 import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent'
 import { format } from 'date-fns'
-import { toFixedCutZero } from '@/utils'
+import { abbreviateAmount, toFixedCutZero } from '@/utils'
 import Skeleton from 'react-loading-skeleton'
 
 export interface IChartData {
@@ -68,16 +68,7 @@ export const BarDiagram: FC<BarChartProps> = (props) => {
             interval={'preserveStartEnd'}
             minTickGap={2}
             tickFormatter={(value: number) => {
-              if (value >= 1000000000) {
-                return `${(value / 1000000000).toFixed(1)}B`// Billions
-              }
-              if (value >= 1000000) {
-                return `${(value / 1000000).toFixed(1)}M` // Millions
-              }
-              if (value >= 1000) {
-                return `${(value / 1000).toFixed(1)}k` // Thousands
-              }
-              return String((value).toFixed(1))
+              return abbreviateAmount(String(value), 1)
             }}
             domain={[0, (dataMax: number) => Math.max((dataMax * 1.15), 10)]}
             allowDataOverflow={true}

src/components/Price/Price.component.tsx

@@ -1,4 +1,4 @@
-import { convertBigIntValueToNormal, toFixedCutZero, toFixedNumber, weiMultiply } from '@/utils/bigint'
+import { convertBigIntValueToNormal, abbreviateAmount, toFixedCutZero, toFixedNumber, weiMultiply } from '@/utils/bigint'
 import { type tPoolIds } from '@cedro-finance/sdk'
 import { type FC, useMemo } from 'react'
 import { parseUnits } from 'viem'
@@ -36,15 +36,24 @@ export interface IValueWithPriceProps {
   displayUnit?: boolean
   variant?: 'primary' | 'secondary'
   unit?: string
+  abbreviateNumber?: boolean
 }
 
-export const ValueWithPrice: FC<IValueWithPriceProps> = ({ pool, value, displayUnit = false, unit, variant = 'primary' }) => {
+export const ValueWithPrice: FC<IValueWithPriceProps> = (props) => {
+  const { pool, value, displayUnit = false, unit, variant = 'primary', abbreviateNumber = false } = props
   const { oraclePrices } = useAppSelector(state => state.pool)
+  const formattedValue = toFixedNumber(value, 4, true)
 
   const poolPrice = useMemo(() => {
     return oraclePrices[pool] ?? 0n
   }, [oraclePrices, pool])
 
+  const tokenValue = useMemo(() => {
+    if (+value > 1000 && abbreviateNumber) {
+      return abbreviateAmount(value, 2)
+    } else return formattedValue
+  }, [value])
+
   const dollarEquivalent = useMemo(() => {
     if (value) {
       const _value = value.replace(/,/g, '')
@@ -56,9 +65,8 @@ export const ValueWithPrice: FC<IValueWithPriceProps> = ({ pool, value, displayU
   return (
     <div className={`price ${variant}`}>
       <div>
-        {/* TODO should the precision be 4 for tokens?  */}
         <div className="price-label" style={{ fontWeight: 600 }}>
-          <span className="number">{toFixedNumber(value, 4, true)}</span>{' '}
+          <span className="number app-tooltip" data-tooltip-content={formattedValue}>{tokenValue}</span>
           <span className="unit">{displayUnit ? unit ?? getTokenSymbol(pool) : ''}</span>
         </div>
         <div className="price-value">${toFixedCutZero(dollarEquivalent, 2, true)}</div>

src/components/layout/Layout.component.tsx

@@ -50,7 +50,7 @@ export const Layout: FC<LayoutProps> = ({
             </div>
           </main>
             )}
-        <Tooltip id="tooltip" className="tooltip" place="top" />
+        <Tooltip className="tooltip" anchorSelect='.app-tooltip' place="top" />
         <Tooltip
         className="iconstack-tooltip"
         id="iconstack-tooltip"

src/constants/tableColumns.tsx

@@ -130,6 +130,7 @@ export const borrowListColumns: Array<ColumnDef<IDashboardData>> = [
         <ValueWithPrice
           pool={(props.row.original).pool}
           value={props.getValue() as string}
+          abbreviateNumber={true}
         />
       )
     },
@@ -246,6 +247,7 @@ export const supplyListColumns: Array<ColumnDef<IDashboardData>> = [
         <ValueWithPrice
           pool={(props.row.original).pool}
           value={props.getValue() as string}
+          abbreviateNumber={true}
         />
       )
     },
@@ -569,6 +571,7 @@ export const HistoryColumnDefinition: Array<ColumnDef<ILiquidationHistoryData>>
                 variant="secondary"
                 displayUnit={true}
                 unit={cedroClient.Config.getPoolWrappedTokens(collateralPool).ceToken}
+                abbreviateNumber={true}
               />
       )
     },

src/containers/market.tsx

@@ -147,7 +147,7 @@ export const MarketColumnDefinition: Array<ColumnDef<IDashboardData>> = [
     header: 'Total Supply',
     cell: (props) => {
       const pool = (props.row.original).pool
-      return <ValueWithPrice pool={pool} value={props.getValue() as string} variant='secondary'
+      return <ValueWithPrice pool={pool} value={props.getValue() as string} variant='secondary' abbreviateNumber={true}
       />
     },
     meta: {
@@ -187,7 +187,7 @@ export const MarketColumnDefinition: Array<ColumnDef<IDashboardData>> = [
     header: 'Total Borrow',
     cell: (props) => {
       const pool = (props.row.original).pool
-      return <ValueWithPrice pool={pool} value={props.getValue() as string} variant='secondary'
+      return <ValueWithPrice pool={pool} value={props.getValue() as string} variant='secondary' abbreviateNumber={true}
       />
     },
     meta: {

src/utils/bigint.ts

@@ -55,16 +55,30 @@ export const toFormatNumber = (
   return num
 }
 
-export const formatAmount = (str: string, fix = 0): string => {
+export const abbreviateAmount = (str: string, fix = 0): string => {
   const num = +str
   if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(fix) + ' B'
+    return roundDown(num / 1000000000, fix) + ' B'
   } else if (num >= 1000000) {
-    return (num / 1000000).toFixed(fix) + ' M'
+    return roundDown(num / 1000000, fix) + ' M'
+  } else if (num >= 1000) {
+    return roundDown(num / 1000, fix) + ' k'
   } else {
     return num.toFixed(fix)
   }
 }
+
+export const roundDown = (num: string | number, fix = 2): string => {
+  if (typeof num === 'number') {
+    num = String(num)
+  }
+  const [integer, decimal] = num.split('.')
+  if (decimal && decimal.length > fix) {
+    return integer + '.' + decimal.slice(0, fix)
+  }
+  return num
+}
+
 export const toCutFrontZero = (num: string): string => {
   while (num.length > 1 && num.startsWith('0') && num[1] !== '.') {
     num = num.slice(1)