Merge pull request #1495 from curvefi/fix/rounding-boogaloo-2

feat: enhance balance input precision

Author: 0xtutti

packages/curve-ui-kit/src/shared/ui/Balance.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react'
+import { notFalsy } from '@curvefi/prices-api/objects.util'
 import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
 import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { t } from '@ui-kit/lib/i18n'
+import { Tooltip } from '@ui-kit/shared/ui/Tooltip'
 import { WithSkeleton } from '@ui-kit/shared/ui/WithSkeleton'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { type Amount, formatNumber, type SxProps } from '@ui-kit/utils'
@@ -58,20 +60,22 @@ type BalanceTextProps<T> = {
 
 const BalanceText = <T extends Amount>({ symbol, balance, loading = false }: BalanceTextProps<T>) => (
   <WithSkeleton loading={loading}>
-    <Stack direction="row" gap={Spacing.xs} alignItems="center">
-      <Typography
-        className="balance"
-        variant="highlightS"
-        color={balance != null ? 'textPrimary' : 'textTertiary'}
-        data-testid="balance-value"
-      >
-        {balance == null ? '-' : formatNumber(balance, { abbreviate: true })}
-      </Typography>
+    <Tooltip title={t`Wallet balance`} body={notFalsy(balance?.toString(), symbol).join(' ')} clickable>
+      <Stack direction="row" gap={Spacing.xs} alignItems="center">
+        <Typography
+          className="balance"
+          variant="highlightS"
+          color={balance != null ? 'textPrimary' : 'textTertiary'}
+          data-testid="balance-value"
+        >
+          {balance == null ? '-' : formatNumber(balance, { abbreviate: true, highPrecision: true })}
+        </Typography>
 
-      <Typography variant="highlightS" color="textPrimary">
-        {symbol}
-      </Typography>
-    </Stack>
+        <Typography variant="highlightS" color="textPrimary">
+          {symbol}
+        </Typography>
+      </Stack>
+    </Tooltip>
   </WithSkeleton>
 )
 

packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx

@@ -189,6 +189,9 @@ type Props<T> = DataType<T> & {
  * Calculate the new balance based on max balance and percentage, rounding to specified decimals
  */
 function calculateNewBalance<T extends Amount>(max: T, newPercentage: Decimal, balanceDecimals: number | undefined): T {
+  // Avoid loss of precision when clicking 'Max'
+  if (Number(newPercentage) === 100) return max
+
   let newBalance = new BigNumber(max).times(newPercentage).div(100)
   if (balanceDecimals != null) {
     // toFixed can make the newBalance>max due to rounding, so ensure it doesn't exceed maxBalance

packages/curve-ui-kit/src/themes/components/mui-input-base.ts

@@ -42,6 +42,7 @@ export const defineMuiInputBase = (
     input: {
       height: ButtonSize.md,
       boxSizing: 'border-box',
+      textOverflow: 'ellipsis',
     },
   },
 })

packages/curve-ui-kit/src/utils/number.ts

@@ -101,7 +101,12 @@ const formatterReset = { style: undefined, currency: undefined, notation: undefi
  */
 export const defaultNumberFormatter = (
   value: Amount,
-  { decimals = 2, trailingZeroDisplay = 'stripIfInteger', ...options }: Partial<NumberFormatOptions> = {},
+  {
+    decimals = 2,
+    trailingZeroDisplay = 'stripIfInteger',
+    highPrecision = false,
+    ...options
+  }: Partial<NumberFormatOptions> = {},
 ): string => {
   if (typeof value !== 'number') value = Number(value)
   if (isNaN(value)) return 'NaN'
@@ -114,7 +119,7 @@ export const defaultNumberFormatter = (
 
   const formatted = value.toLocaleString(LOCALE, {
     minimumFractionDigits: Math.min(decimals, options.maximumFractionDigits ?? Infinity),
-    maximumFractionDigits: decimals,
+    maximumFractionDigits: highPrecision ? Math.max(4, decimals) : decimals,
     trailingZeroDisplay,
     ...options,
     ...formatterReset,
@@ -163,6 +168,8 @@ export type NumberFormatOptions = {
   decimals?: number
   /** If the value should be abbreviated to 1.23k or 3.45m */
   abbreviate: boolean
+  /** Some use cases require high precision, like user input. When enabled, ensures at least a certain amount decimals are shown. */
+  highPrecision?: boolean
   /** Optional formatter for value */
   formatter?: (value: Amount) => string
 } & Omit<Intl.NumberFormatOptions, 'unit' | 'style' | 'compact' | 'notation' | 'currency'>