From a43352f4437220cbf6c045c90bd83680aa67c32c Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Thu, 4 Apr 2024 13:21:27 +0545 Subject: [PATCH 1/3] add tooltip for abbreviated amount --- src/components/BarDiagram/BarDiagram.tsx | 13 ++----------- src/components/Price/Price.component.tsx | 15 +++++++++++---- src/components/layout/Layout.component.tsx | 2 +- src/constants/tableColumns.tsx | 3 +++ src/containers/market.tsx | 4 ++-- src/utils/bigint.ts | 18 ++++++++++++++++-- 6 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/components/BarDiagram/BarDiagram.tsx b/src/components/BarDiagram/BarDiagram.tsx index 7a17f525..73987ac4 100644 --- a/src/components/BarDiagram/BarDiagram.tsx +++ b/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 { formatAmount, toFixedCutZero } from '@/utils' import Skeleton from 'react-loading-skeleton' export interface IChartData { @@ -68,16 +68,7 @@ export const BarDiagram: FC = (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 formatAmount(String(value), 1) }} domain={[0, (dataMax: number) => Math.max((dataMax * 1.15), 10)]} allowDataOverflow={true} diff --git a/src/components/Price/Price.component.tsx b/src/components/Price/Price.component.tsx index 5e2e9efb..0f2cf3c0 100644 --- a/src/components/Price/Price.component.tsx +++ b/src/components/Price/Price.component.tsx @@ -1,4 +1,4 @@ -import { convertBigIntValueToNormal, toFixedCutZero, toFixedNumber, weiMultiply } from '@/utils/bigint' +import { convertBigIntValueToNormal, formatAmount, 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,23 @@ export interface IValueWithPriceProps { displayUnit?: boolean variant?: 'primary' | 'secondary' unit?: string + abbreviateNumber?: boolean } -export const ValueWithPrice: FC = ({ pool, value, displayUnit = false, unit, variant = 'primary' }) => { +export const ValueWithPrice: FC = (props) => { + const { pool, value, displayUnit = false, unit, variant = 'primary', abbreviateNumber = false } = props const { oraclePrices } = useAppSelector(state => state.pool) const poolPrice = useMemo(() => { return oraclePrices[pool] ?? 0n }, [oraclePrices, pool]) + const tokenValue = useMemo(() => { + if (+value > 1000 && abbreviateNumber) { + return formatAmount(value, 2) + } else return toFixedNumber(value, 4, true) + }, [value]) + const dollarEquivalent = useMemo(() => { if (value) { const _value = value.replace(/,/g, '') @@ -56,9 +64,8 @@ export const ValueWithPrice: FC = ({ pool, value, displayU return (
- {/* TODO should the precision be 4 for tokens? */}
- {toFixedNumber(value, 4, true)}{' '} + {tokenValue} {displayUnit ? unit ?? getTokenSymbol(pool) : ''}
${toFixedCutZero(dollarEquivalent, 2, true)}
diff --git a/src/components/layout/Layout.component.tsx b/src/components/layout/Layout.component.tsx index a9d16cf9..f08edf57 100644 --- a/src/components/layout/Layout.component.tsx +++ b/src/components/layout/Layout.component.tsx @@ -50,7 +50,7 @@ export const Layout: FC = ({
)} - + > = [ ) }, @@ -246,6 +247,7 @@ export const supplyListColumns: Array> = [ ) }, @@ -569,6 +571,7 @@ export const HistoryColumnDefinition: Array> variant="secondary" displayUnit={true} unit={cedroClient.Config.getPoolWrappedTokens(collateralPool).ceToken} + abbreviateNumber={true} /> ) }, diff --git a/src/containers/market.tsx b/src/containers/market.tsx index 204c41a3..f0b322a1 100644 --- a/src/containers/market.tsx +++ b/src/containers/market.tsx @@ -147,7 +147,7 @@ export const MarketColumnDefinition: Array> = [ header: 'Total Supply', cell: (props) => { const pool = (props.row.original).pool - return }, meta: { @@ -187,7 +187,7 @@ export const MarketColumnDefinition: Array> = [ header: 'Total Borrow', cell: (props) => { const pool = (props.row.original).pool - return }, meta: { diff --git a/src/utils/bigint.ts b/src/utils/bigint.ts index a4641c5e..e1257c91 100644 --- a/src/utils/bigint.ts +++ b/src/utils/bigint.ts @@ -58,13 +58,27 @@ export const toFormatNumber = ( export const formatAmount = (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) From 79da1bfd50bf5944ea9a426756a8de088cde78cc Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Tue, 23 Apr 2024 17:15:25 +0545 Subject: [PATCH 2/3] update function name to abbreviateAmount --- src/components/BarDiagram/BarDiagram.tsx | 4 ++-- src/components/Price/Price.component.tsx | 4 ++-- src/utils/bigint.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/BarDiagram/BarDiagram.tsx b/src/components/BarDiagram/BarDiagram.tsx index 73987ac4..a5cc45e3 100644 --- a/src/components/BarDiagram/BarDiagram.tsx +++ b/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 { formatAmount, toFixedCutZero } from '@/utils' +import { abbreviateAmount, toFixedCutZero } from '@/utils' import Skeleton from 'react-loading-skeleton' export interface IChartData { @@ -68,7 +68,7 @@ export const BarDiagram: FC = (props) => { interval={'preserveStartEnd'} minTickGap={2} tickFormatter={(value: number) => { - return formatAmount(String(value), 1) + return abbreviateAmount(String(value), 1) }} domain={[0, (dataMax: number) => Math.max((dataMax * 1.15), 10)]} allowDataOverflow={true} diff --git a/src/components/Price/Price.component.tsx b/src/components/Price/Price.component.tsx index 0f2cf3c0..24d5228f 100644 --- a/src/components/Price/Price.component.tsx +++ b/src/components/Price/Price.component.tsx @@ -1,4 +1,4 @@ -import { convertBigIntValueToNormal, formatAmount, 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' @@ -49,7 +49,7 @@ export const ValueWithPrice: FC = (props) => { const tokenValue = useMemo(() => { if (+value > 1000 && abbreviateNumber) { - return formatAmount(value, 2) + return abbreviateAmount(value, 2) } else return toFixedNumber(value, 4, true) }, [value]) diff --git a/src/utils/bigint.ts b/src/utils/bigint.ts index e1257c91..8f0c5be7 100644 --- a/src/utils/bigint.ts +++ b/src/utils/bigint.ts @@ -55,7 +55,7 @@ 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 roundDown(num / 1000000000, fix) + ' B' From fc6262ac4e732aee7bf5ba5a9bf0ce03533b0269 Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Tue, 23 Apr 2024 17:35:05 +0545 Subject: [PATCH 3/3] add commas to tooltip amount --- src/components/Price/Price.component.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Price/Price.component.tsx b/src/components/Price/Price.component.tsx index 24d5228f..879978e1 100644 --- a/src/components/Price/Price.component.tsx +++ b/src/components/Price/Price.component.tsx @@ -42,6 +42,7 @@ export interface IValueWithPriceProps { export const ValueWithPrice: FC = (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 @@ -50,7 +51,7 @@ export const ValueWithPrice: FC = (props) => { const tokenValue = useMemo(() => { if (+value > 1000 && abbreviateNumber) { return abbreviateAmount(value, 2) - } else return toFixedNumber(value, 4, true) + } else return formattedValue }, [value]) const dollarEquivalent = useMemo(() => { @@ -65,7 +66,7 @@ export const ValueWithPrice: FC = (props) => {
- {tokenValue} + {tokenValue} {displayUnit ? unit ?? getTokenSymbol(pool) : ''}
${toFixedCutZero(dollarEquivalent, 2, true)}