Merge branch 'frontend-decimals'

Author: thisconnect

frontends/web/src/api/erc20.ts

@@ -21,3 +21,13 @@ export const supportedERC20Tokens: Readonly<TERC20Token[]> = [
   { code: 'eth-erc20-paxg', name: 'Pax Gold', unit: 'PAXG' },
   { code: 'eth-erc20-dai0x6b17', name: 'Dai', unit: 'DAI' },
 ];
+
+const supportedERC20Units = new Set(
+  supportedERC20Tokens.map(({ unit }) => unit)
+);
+
+export const isSupportedERC20Unit = (
+  unit: string,
+): unit is ERC20TokenUnit => (
+  supportedERC20Units.has(unit as ERC20TokenUnit)
+);

frontends/web/src/components/amount/amount.test.tsx

@@ -288,6 +288,110 @@ describe('Amount formatting', () => {
 
   });
 
+  describe('maxDecimals for ETH and ETH tokens', () => {
+
+    it('ETH limits decimals to maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="10.123456789012345678" unit="ETH" maxDecimals={6} />
+      );
+
+      expect(container.textContent).toBe('10.123456');
+    });
+
+    it('SEPETH limits decimals to maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="10.123456789012345678" unit="SEPETH" maxDecimals={4} />
+      );
+
+      expect(container.textContent).toBe('10.1234');
+    });
+
+    it('ETH keeps decimals when they are below maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="10.123" unit="ETH" maxDecimals={6} />
+      );
+
+      expect(container.textContent).toBe('10.123');
+    });
+
+    it('ETH keeps decimals when they are exactly maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="10.123456" unit="ETH" maxDecimals={6} />
+      );
+
+      expect(container.textContent).toBe('10.123456');
+    });
+
+    it('USDC limits decimals to maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="1'234.123456789" unit="USDC" maxDecimals={2} />
+      );
+
+      expect(container.textContent).toBe('1’234.12');
+    });
+
+    it('USDC keeps decimals when they are below maxDecimals', () => {
+      const { container } = render(
+        <Amount amount="1'234.1" unit="USDC" maxDecimals={2} />
+      );
+
+      expect(container.textContent).toBe('1’234.1');
+    });
+
+    it('DAI limits its 18 decimals to maxDecimals', () => {
+      const { container } = render(
+        <Amount
+          amount="1.123456789012345678"
+          unit="DAI"
+          maxDecimals={6}
+        />
+      );
+
+      expect(container.textContent).toBe('1.123456');
+    });
+
+    it('DAI limits long decimal values to maxDecimals', () => {
+      const { container } = render(
+        <Amount
+          amount="123'456.123456789012345678"
+          unit="DAI"
+          maxDecimals={4}
+        />
+      );
+
+      expect(container.textContent).toBe('123’456.1234');
+    });
+
+  });
+
+  describe('maxDecimals does not affect BTC/LTC or fiat amounts', () => {
+
+    it('does not limit BTC decimals', () => {
+      const { container } = render(
+        <Amount amount="0.12345678" unit="BTC" maxDecimals={2} />
+      );
+
+      expect(container.textContent).toBe('0.12345678');
+    });
+
+    it('does not limit LTC decimals', () => {
+      const { container } = render(
+        <Amount amount="0.12345678" unit="LTC" maxDecimals={2} />
+      );
+
+      expect(container.textContent).toBe('0.12345678');
+    });
+
+    it('does not limit fiat decimals', () => {
+      const { container } = render(
+        <Amount amount="1'340.123456" unit="CHF" maxDecimals={2} />
+      );
+
+      expect(container.textContent).toBe('1’340.123456');
+    });
+
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
   });

frontends/web/src/components/amount/amount.tsx

@@ -2,6 +2,7 @@
 
 import { useContext } from 'react';
 import type { CoinUnit, ConversionUnit } from '@/api/account';
+import { isSupportedERC20Unit } from '@/api/erc20';
 import { AppContext } from '@/contexts/AppContext';
 import { LocalizationContext } from '@/contexts/localization-context';
 import { useMediaQuery } from '@/hooks/mediaquery';
@@ -108,7 +109,11 @@ const formatEth = (
   if (dot === -1) {
     return formatLocalizedAmount(amount, group, decimal);
   }
-  const truncated = amount.slice(0, dot + maxDecimals + 1);
+  const truncated = (
+    maxDecimals === 0
+      ? amount.slice(0, dot)
+      : amount.slice(0, dot + maxDecimals + 1)
+  );
   return formatLocalizedAmount(truncated, group, decimal);
 };
 
@@ -121,6 +126,26 @@ type TProps = {
   removeTrailingZeros?: boolean;
 };
 
+/**
+ * Renders a localized cryptocurrency or fiat amount.
+ *
+ * Amounts can be hidden according to the application privacy settings,
+ * and cryptocurrency-specific formatting is applied for BTC/LTC and
+ * ETH/ETH-compatible tokens. ETH and ETH-token amounts can optionally
+ * have their decimal portion truncated with `maxDecimals`.
+ *
+ * @param amount - Amount in its string representation.
+ * @param unit - Currency or cryptocurrency unit of the amount.
+ * @param alwaysShowAmounts - Whether to display the amount even when
+ *   amounts are hidden by the application settings.
+ * @param onMobileClick - Callback invoked when the amount is clicked
+ *   on a mobile viewport.
+ * @param maxDecimals - Maximum number of decimal places to display for
+ *   ETH and ETH-compatible tokens. Excess decimal places are truncated,
+ *   not rounded. Has no effect on BTC/LTC or fiat amounts.
+ * @param removeTrailingZeros - Whether to remove trailing zeroes from
+ *   the amount's decimal portion.
+ */
 export const Amount = ({
   amount,
   unit,
@@ -185,5 +210,9 @@ export const FormattedAmount = ({
     return formatEth(displayedAmount, group, decimal, maxDecimals);
   }
 
+  if (isSupportedERC20Unit(unit)) {
+    return formatEth(displayedAmount, group, decimal, maxDecimals);
+  }
+
   return formatLocalizedAmount(displayedAmount, group, decimal);
 };