Truncate M values in Trading History

components/Currency/CurrencyPrice/CurrencyPrice.tsx

@@ -16,7 +16,6 @@ type CurrencyPriceProps = {
 	change?: number;
 	conversionRate?: WeiSource;
 	formatOptions?: FormatCurrencyOptions;
-	truncate?: boolean;
 	colorType?: 'secondary' | 'positive' | 'negative' | 'preview';
 	colored?: boolean;
 };
@@ -31,7 +30,6 @@ export const CurrencyPrice: FC<CurrencyPriceProps> = memo(
 		currencyKey = 'sUSD',
 		conversionRate = 1,
 		showCurrencyKey = false,
-		truncate = false,
 		colored = false,
 		...rest
 	}) => {
@@ -48,7 +46,6 @@ export const CurrencyPrice: FC<CurrencyPriceProps> = memo(
 					{formatCurrency(currencyKey, cleanPrice.div(conversionRate), {
 						sign: currencyKey === 'sUSD' ? '$' : sign,
 						currencyKey: showCurrencyKey ? currencyKey : undefined,
-						truncate,
 						...formatOptions,
 					})}
 				</NumericValue>

sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx

@@ -216,13 +216,13 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 										<OpenInterestContainer>
 											<Currency.Price
 												price={cellProps.row.original.longInterest}
-												truncate
 												colorType="positive"
+												formatOptions={{ truncateOver: 1e3 }}
 											/>
 											<Currency.Price
 												price={cellProps.row.original.shortInterest}
-												truncate
 												colorType="negative"
+												formatOptions={{ truncateOver: 1e3 }}
 											/>
 										</OpenInterestContainer>
 									);
@@ -248,7 +248,12 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 								),
 								accessor: 'dailyVolume',
 								Cell: (cellProps: CellProps<typeof data[number]>) => {
-									return <Currency.Price price={cellProps.row.original.volume} truncate />;
+									return (
+										<Currency.Price
+											price={cellProps.row.original.volume}
+											formatOptions={{ truncateOver: 1e3 }}
+										/>
+									);
 								},
 								width: 125,
 								sortable: true,
@@ -320,7 +325,10 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 							Cell: (cellProps: CellProps<typeof data[number]>) => {
 								return (
 									<div>
-										<Currency.Price price={cellProps.row.original.openInterest} truncate />
+										<Currency.Price
+											price={cellProps.row.original.openInterest}
+											formatOptions={{ truncateOver: 1e3 }}
+										/>
 										<div>
 											<ChangePercent
 												showArrow={false}
@@ -357,7 +365,10 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 											/>
 										</div>
 										<div>
-											<Currency.Price price={cellProps.row.original.volume ?? 0} truncate />
+											<Currency.Price
+												price={cellProps.row.original.volume ?? 0}
+												formatOptions={{ truncateOver: 1e3 }}
+											/>
 										</div>
 									</div>
 								);

sections/dashboard/FuturesPositionsTable/FuturesPositionsTable.tsx

@@ -148,14 +148,10 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
 								),
 								accessor: 'notionalValue',
 								Cell: (cellProps: CellProps<any>) => {
-									const formatOptions = cellProps.row.original.position.notionalValue.gte(1e6)
-										? { truncate: true }
-										: {};
-
 									return (
 										<Currency.Price
 											price={cellProps.row.original.position.notionalValue}
-											formatOptions={formatOptions}
+											formatOptions={{ truncateOver: 1e6 }}
 										/>
 									);
 								},

sections/futures/MarketDetails/MarketDetails.tsx

@@ -201,11 +201,11 @@ const MarketSkew: React.FC<MarketDetailsProps> = memo(({ mobile }) => {
 const OpenInterestDetail: React.FC<OpenInterestDetailProps> = memo(({ mobile, isLong }) => {
 	const marketInfo = useAppSelector(selectMarketInfo);
 	const oiCap = marketInfo?.marketLimitUsd
-		? formatDollars(marketInfo?.marketLimitUsd, { truncate: true })
+		? formatDollars(marketInfo?.marketLimitUsd, { truncateOver: 1e3 })
 		: null;
 	const openInterestType = isLong ? 'longUSD' : 'shortUSD';
 	const formattedUSD = marketInfo?.openInterest[openInterestType]
-		? formatDollars(marketInfo?.openInterest[openInterestType], { truncate: true })
+		? formatDollars(marketInfo?.openInterest[openInterestType], { truncateOver: 1e3 })
 		: NO_VALUE;
 
 	const mobileValue = (

sections/futures/MobileTrade/UserTabs/PositionsTab.tsx

@@ -153,7 +153,7 @@ const PositionsTab = () => {
 								<Spacer width={5} />
 								<Currency.Price
 									price={row.position.notionalValue}
-									formatOptions={row.position.notionalValue.gte(1e6) ? { truncate: true } : {}}
+									formatOptions={{ truncateOver: 1e6 }}
 									colorType="secondary"
 								/>
 								{accountType === 'cross_margin' && (

sections/futures/TradingHistory/TradesHistoryTable.tsx

@@ -126,6 +126,7 @@ const TradesHistoryTable: FC<TradesHistoryTableProps> = ({ mobile }) => {
 										{cellProps.row.original.amount !== NO_VALUE
 											? `${formatNumber(numValue, {
 													minDecimals: numDecimals,
+													truncateOver: 1e6,
 											  })} ${normal ? '💀' : ''}`
 											: NO_VALUE}
 									</DirectionalValue>

sections/futures/UserInfo/PositionsTable.tsx

@@ -166,10 +166,6 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 							),
 							accessor: 'notionalValue',
 							Cell: (cellProps: CellProps<typeof data[number]>) => {
-								const formatOptions = cellProps.row.original.position.notionalValue.gte(1e6)
-									? { truncate: true }
-									: {};
-
 								return (
 									<ColWithButton>
 										<div>
@@ -181,8 +177,8 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 											</div>
 											<Currency.Price
 												price={cellProps.row.original.position.notionalValue}
-												formatOptions={formatOptions}
 												colorType="secondary"
+												formatOptions={{ truncateOver: 1e6 }}
 											/>
 										</div>
 										<Spacer width={10} />

sections/stats/charts/OpenInterest.tsx

@@ -107,7 +107,7 @@ export const OpenInterest: FC<OpenInterestProps> = ({ mobile }) => {
 					},
 				},
 				axisLabel: {
-					formatter: (value: WeiSource) => formatDollars(value, { truncate: true }),
+					formatter: (value: WeiSource) => formatDollars(value, { truncateOver: 1e3 }),
 				},
 				position: 'right',
 			},

sections/stats/charts/Volume.tsx

@@ -57,7 +57,7 @@ export const Volume = () => {
 					position: 'right',
 					axisLabel: {
 						formatter: (value: WeiSource) =>
-							formatDollars(value, { truncate: true, maxDecimals: 0 }),
+							formatDollars(value, { truncateOver: 1e3, maxDecimals: 0 }),
 					},
 				},
 			],

utils/__tests__/number.test.ts

@@ -19,11 +19,11 @@ describe('number utils', () => {
 		expect(weiVal.toNumber()).toEqual(0.1);
 	});
 	test('should truncate millions correctly', () => {
-		const formatted = formatDollars('3251764', { truncate: true });
+		const formatted = formatDollars('3251764', { truncateOver: 1e3 });
 		expect(formatted).toEqual('$3.25M');
 	});
 	test('should truncate thousands correctly', () => {
-		const formatted = formatDollars('325764.27345', { truncate: true });
+		const formatted = formatDollars('325764.27345', { truncateOver: 1e3 });
 		expect(formatted).toEqual('$326K');
 	});
 	test('should strip traling zeros correctly', () => {

utils/formatters/number.ts

@@ -11,10 +11,12 @@ import {
 import { isFiatCurrency } from 'utils/currencies';
 import logError from 'utils/logError';
 
+export type TruncateUnits = 1e3 | 1e6 | 1e9 | 1e12;
+
 type WeiSource = Wei | number | string | ethers.BigNumber;
 
 type TruncatedOptions = {
-	truncate?: boolean;
+	truncateOver?: TruncateUnits;
 	truncation?: {
 		// Maybe remove manual truncation params
 		unit: string;
@@ -23,6 +25,13 @@ type TruncatedOptions = {
 	};
 };
 
+const thresholds = [
+	{ value: 1e12, divisor: 1e12, unit: 'T', decimals: 2 },
+	{ value: 1e9, divisor: 1e9, unit: 'B', decimals: 2 },
+	{ value: 1e6, divisor: 1e6, unit: 'M', decimals: 2 },
+	{ value: 1e3, divisor: 1e3, unit: 'K', decimals: 0 },
+];
+
 export type FormatNumberOptions = {
 	minDecimals?: number;
 	maxDecimals?: number;
@@ -85,7 +94,7 @@ export const commifyAndPadDecimals = (value: string, decimals: number) => {
 export const formatNumber = (value: WeiSource, options?: FormatNumberOptions) => {
 	const prefix = options?.prefix;
 	const suffix = options?.suffix;
-	const shouldTruncate = options?.truncate;
+	const truncateThreshold = options?.truncateOver ?? 0;
 	const suggestDecimals = options?.suggestDecimals;
 	let truncation = options?.truncation;
 
@@ -106,11 +115,12 @@ export const formatNumber = (value: WeiSource, options?: FormatNumberOptions) =>
 	}
 
 	// specified truncation params overrides universal truncate
-	if (shouldTruncate && !truncation) {
-		if (weiValue.gt(1e6)) {
-			truncation = { divisor: 1e6, unit: 'M', decimals: 2 };
-		} else if (weiValue.gt(1e3)) {
-			truncation = { divisor: 1e3, unit: 'K', decimals: 0 };
+	if (truncateThreshold && !truncation) {
+		for (const threshold of thresholds) {
+			if (weiValue.gt(threshold.value) && weiValue.gte(truncateThreshold)) {
+				truncation = threshold;
+				break;
+			}
 		}
 	}