[Strategy Card] Truncate number to 6 decimal if range < 1

e2e/pages/strategy.spec.ts

@@ -564,9 +564,9 @@ const testCases: CreateStrategyTestCase[] = [
       create: {
         totalFiat: '$25.11',
         buy: {
-          min: '0.30 USDC',
-          max: '0.545455 USDC',
-          marginal: '0.400854 USDC',
+          min: '0.299999 USDC',
+          max: '0.545454 USDC',
+          marginal: '0.400853 USDC',
           budget: '12.50 USDC',
           fiat: '$12.50',
         },
@@ -581,9 +581,9 @@ const testCases: CreateStrategyTestCase[] = [
       editPrices: {
         totalFiat: '$39.17',
         buy: {
-          min: '0.20 USDC',
-          max: '0.608696 USDC',
-          marginal: '0.392043 USDC',
+          min: '0.199999 USDC',
+          max: '0.608695 USDC',
+          marginal: '0.392042 USDC',
           budget: '22.50 USDC',
           fiat: '$22.50',
         },

src/components/strategies/overview/strategyBlock/StrategyGraph.tsx

@@ -7,14 +7,30 @@ import {
   FloatTooltipTrigger,
 } from 'components/common/tooltip/FloatTooltip';
 import { ReactComponent as IconLink } from 'assets/icons/link.svg';
-import style from './StrategyGraph.module.css';
 import { Token } from 'libs/tokens';
 import { useMarketPrice } from 'hooks/useMarketPrice';
+import { SafeDecimal } from 'libs/safedecimal';
+import { isZero } from 'components/strategies/common/utils';
+import style from './StrategyGraph.module.css';
 
 interface Props {
   strategy: Strategy;
 }
 
+const isSmallRange = ({ order0, order1 }: Strategy) => {
+  const allPrices = new Set([
+    order0.startRate,
+    order0.endRate,
+    order1.startRate,
+    order1.endRate,
+  ]);
+  const prices = Array.from(allPrices).filter((v) => !isZero(v));
+  if (prices.length < 2) return false;
+  const min = SafeDecimal.min(...prices);
+  const max = SafeDecimal.max(...prices);
+  return max.sub(min).lt(1);
+};
+
 // SVG ratio
 const height = 130;
 const width = 400;
@@ -69,6 +85,12 @@ export const StrategyGraph: FC<Props> = ({ strategy }) => {
     to - (3 / 4) * (to - center),
     to - (1 / 4) * (to - center),
   ];
+  const smallRange = isSmallRange(strategy);
+  const priceIntlOption = {
+    abbreviate: true,
+    round: !smallRange,
+    decimals: smallRange ? 6 : undefined,
+  };
 
   // X position
   const ratio = width / (to - from);
@@ -383,7 +405,7 @@ export const StrategyGraph: FC<Props> = ({ strategy }) => {
               fontSize={fontSize}
               opacity="60%"
             >
-              {prettifyNumber(point, { abbreviate: true, round: true })}
+              {prettifyNumber(point, priceIntlOption)}
             </text>
           </g>
         ))}
@@ -553,15 +575,17 @@ interface OrderTooltipProps {
 
 const OrderTooltip: FC<OrderTooltipProps> = ({ strategy, buy }) => {
   const order = buy ? strategy.order0 : strategy.order1;
-  const limit = order.startRate === order.endRate;
+  const { startRate, endRate, marginalRate } = order;
+  const limit = startRate === endRate;
+  const smallRange = isSmallRange(strategy);
   const priceOption = {
     abbreviate: true,
-    round: true,
-    useSubscript: false,
+    round: !smallRange,
+    decimals: smallRange ? 6 : undefined,
   };
-  const startPrice = prettifyNumber(order.startRate, priceOption);
-  const endPrice = prettifyNumber(order.endRate, priceOption);
-  const marginalPrice = prettifyNumber(order.marginalRate, priceOption);
+  const startPrice = prettifyNumber(startRate, priceOption);
+  const endPrice = prettifyNumber(endRate, priceOption);
+  const marginalPrice = prettifyNumber(marginalRate, priceOption);
   const { quote, base } = strategy;
   const color = buy ? 'text-buy' : 'text-sell';
   return (

src/utils/helpers/number.ts

@@ -87,14 +87,14 @@ const subscriptCharacters = (amount: number | string) => {
     .join('');
 };
 
-const subscript = (num: SafeDecimal, formatter: Intl.NumberFormat) => {
+const subscript = (num: number, formatter: Intl.NumberFormat) => {
   const transform = (part: Intl.NumberFormatPart) => {
     if (part.type !== 'fraction') return part.value;
     return part.value.replace(/0+/, (match) => {
       return `0${subscriptCharacters(match.length)}`;
     });
   };
-  return formatter.formatToParts(num.toNumber()).map(transform).join('');
+  return formatter.formatToParts(num).map(transform).join('');
 };
 
 interface PrettifyNumberOptions {
@@ -107,19 +107,7 @@ interface PrettifyNumberOptions {
   noSubscript?: boolean;
 }
 
-export function prettifyNumber(num: NumberLike): string;
-
-export function prettifyNumber(
-  num: NumberLike,
-  options?: PrettifyNumberOptions
-): string;
-
-export function prettifyNumber(
-  value: NumberLike,
-  options: PrettifyNumberOptions = {}
-): string {
-  const num = new SafeDecimal(value);
-  const { locale = 'en-US' } = options;
+const getIntlOptions = (value: SafeDecimal, options: PrettifyNumberOptions) => {
   const intlOptions: Intl.NumberFormatOptions = {
     // @ts-ignore: TS52072 roundingMode is not yet supported in TypeScript 5.2
     roundingMode: 'trunc',
@@ -139,9 +127,19 @@ export function prettifyNumber(
     intlOptions.useGrouping = true;
   }
 
-  if (options.abbreviate && num.gte(1_000_000)) {
+  if (options.abbreviate && value.gte(1_000_000)) {
     intlOptions.notation = 'compact';
   }
+  return intlOptions;
+};
+
+export function prettifyNumber(
+  value: NumberLike,
+  options: PrettifyNumberOptions = {}
+): string {
+  const num = new SafeDecimal(value);
+  const { locale = 'en-US' } = options;
+  const intlOptions = getIntlOptions(num, options);
 
   // Force value to be positive
   if (num.lte(0)) {
@@ -161,15 +159,14 @@ export function prettifyNumber(
   } else {
     intlOptions.maximumSignificantDigits = 5;
   }
-
   const formatter = new Intl.NumberFormat(locale, intlOptions);
 
   if (options.highPrecision) {
     return highPrecision(num, formatter, options.decimals);
   }
 
   if (!options.noSubscript && num.lt(0.001)) {
-    return subscript(num, formatter);
+    return subscript(num.toNumber(), formatter);
   }
 
   return formatter.format(num.toNumber());