Merge branch 'frontend-format-btcamounts'

thisconnect · thisconnect · commit 4acac4739327 · 2025-06-30T08:32:04.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Format BTC/sat spaces consitently in account summary and total balance
 
 ## v4.48.0
 - Removed the BTC/sat switch from the general settings in favor of a rotating unit in the account balance.
diff --git a/frontends/web/src/components/amount/amount-with-unit.tsx b/frontends/web/src/components/amount/amount-with-unit.tsx
@@ -14,29 +14,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { useContext } from 'react';
-import { CoinUnit, ConversionUnit, TAmountWithConversions } from '@/api/account';
+import type { CoinUnit, ConversionUnit, TAmountWithConversions } from '@/api/account';
 import { RatesContext } from '@/contexts/RatesContext';
 import { Amount } from '@/components/amount/amount';
 import { isBitcoinCoin } from '@/routes/account/utils';
 import style from './amount-with-unit.module.css';
 
 type TAmountWithUnitProps = {
-    amount: TAmountWithConversions;
-    tableRow?: boolean;
-    enableRotateUnit?: boolean;
-    sign?: string;
-    removeBtcTrailingZeroes?: boolean;
-    alwaysShowAmounts?: boolean;
-    convertToFiat?: boolean;
+  amount: TAmountWithConversions;
+  tableRow?: boolean;
+  enableRotateUnit?: boolean;
+  sign?: string;
+  alwaysShowAmounts?: boolean;
+  convertToFiat?: boolean;
 }
 
 export const AmountWithUnit = ({
   amount,
   tableRow,
   enableRotateUnit: rotateUnit,
   sign,
-  removeBtcTrailingZeroes,
   convertToFiat,
   alwaysShowAmounts = false
 }: TAmountWithUnitProps) => {
@@ -66,7 +65,6 @@ export const AmountWithUnit = ({
         alwaysShowAmounts={alwaysShowAmounts}
         amount={displayedAmount}
         unit={displayedUnit}
-        removeBtcTrailingZeroes={!!removeBtcTrailingZeroes}
         onMobileClick={enableClick ? onClick : undefined}
       />
     ) : '---';
diff --git a/frontends/web/src/components/amount/amount.test.tsx b/frontends/web/src/components/amount/amount.test.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright 2023-2024 Shift Crypto AG
+ * Copyright 2023-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
 import { useContext } from 'react';
 import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
+import type { CoinUnit, ConversionUnit } from '@/api/account';
 import { Amount } from './amount';
-import { CoinUnit, ConversionUnit } from '@/api/account';
 
 vi.mock('react', async () => ({
   ...(await vi.importActual('react')),
@@ -90,8 +90,8 @@ describe('Amount formatting', () => {
   describe('sat amounts', () => {
     let coins: CoinUnit[] = ['sat', 'tsat'];
     coins.forEach((coin) => {
-      it('12345678901234 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="12345678901234" unit={coin} removeBtcTrailingZeroes/>);
+      it('12345678901234 ' + coin + ' gets spaced', () => {
+        const { getByTestId } = render(<Amount amount="12345678901234" unit={coin} />);
         const blocks = getByTestId('amountBlocks');
 
         const values = [
@@ -105,8 +105,8 @@ describe('Amount formatting', () => {
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
 
-      it('1234567 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="1234567" unit={coin} removeBtcTrailingZeroes/>);
+      it('1234567 ' + coin + ' gets spaced', () => {
+        const { getByTestId } = render(<Amount amount="1234567" unit={coin} />);
         const blocks = getByTestId('amountBlocks');
         const values = [
           '1',
@@ -117,9 +117,8 @@ describe('Amount formatting', () => {
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
 
-
-      it('12345 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="12345" unit={coin} removeBtcTrailingZeroes/>);
+      it('12345 ' + coin + ' gets spaced', () => {
+        const { getByTestId } = render(<Amount amount="12345" unit={coin} />);
         const blocks = getByTestId('amountBlocks');
         const values = [
           '12',
@@ -129,56 +128,8 @@ describe('Amount formatting', () => {
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
 
-      it('21 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="21" unit={coin} removeBtcTrailingZeroes/>);
-        const blocks = getByTestId('amountBlocks');
-        const values = [
-          '21',
-        ];
-        const allSpacedElements = [...blocks.children];
-        expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
-      });
-
-      it('12345678901234 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="12345678901234" unit={coin}/>);
-        const blocks = getByTestId('amountBlocks');
-        const values = [
-          '12',
-          '345',
-          '678',
-          '901',
-          '234',
-        ];
-        const allSpacedElements = [...blocks.children];
-        expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
-      });
-
-
-      it('1234567 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="1234567" unit={coin}/>);
-        const blocks = getByTestId('amountBlocks');
-        const values = [
-          '1',
-          '234',
-          '567',
-        ];
-        const allSpacedElements = [...blocks.children];
-        expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
-      });
-
-      it('12345 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="12345" unit={coin}/>);
-        const blocks = getByTestId('amountBlocks');
-        const values = [
-          '12',
-          '345',
-        ];
-        const allSpacedElements = [...blocks.children];
-        expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
-      });
-
-      it('21 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
-        const { getByTestId } = render(<Amount amount="21" unit={coin}/>);
+      it('21 ' + coin + ' gets spaced', () => {
+        const { getByTestId } = render(<Amount amount="21" unit={coin} />);
         const blocks = getByTestId('amountBlocks');
         const values = [
           '21',
@@ -193,23 +144,8 @@ describe('Amount formatting', () => {
   describe('BTC/LTC coins amounts', () => {
     let coins: CoinUnit[] = ['BTC', 'TBTC', 'LTC', 'TLTC'];
     coins.forEach(coin => {
-      it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes enabled becomes 10', () => {
-        const { container } = render(<Amount amount="10.00000000" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('10');
-      });
-      it('12345.12300000 ' + coin + ' with removeBtcTrailingZeroes enabled becomes 12345.123', () => {
-        const { container } = render(<Amount amount="12345.12300000" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('12345.123');
-      });
-      it('42 ' + coin + ' with removeBtcTrailingZeroes enabled stays 42', () => {
-        const { container } = render(<Amount amount="42" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('42');
-      });
-      it('0.12345678 ' + coin + ' with removeBtcTrailingZeroes enabled stays 0.12345678', () => {
-        const { container } = render(<Amount amount="0.12345678" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('0.12345678');
-      });
-      it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
+
+      it('10.00000000 ' + coin + ' gets spaced', () => {
         const { getByTestId } = render(<Amount amount="10.00000000" unit={coin}/>);
         const blocks = getByTestId('amountBlocks');
         const values = [
@@ -220,7 +156,8 @@ describe('Amount formatting', () => {
         const allSpacedElements = [...blocks.children];
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
-      it('12345.12300000 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
+
+      it('12345.12300000 ' + coin + ' gets spaced', () => {
         const { getByTestId } = render(<Amount amount="12345.12300000" unit={coin}/>);
         const blocks = getByTestId('amountBlocks');
         const values = [
@@ -231,11 +168,13 @@ describe('Amount formatting', () => {
         const allSpacedElements = [...blocks.children];
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
-      it('42 ' + coin + ' with removeBtcTrailingZeroes disabled stays 42', () => {
+
+      it('42 ' + coin + ' stays 42', () => {
         const { container } = render(<Amount amount="42" unit={coin}/>);
         expect(container).toHaveTextContent('42');
       });
-      it('0.12345678 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
+
+      it('0.12345678 ' + coin + ' gets spaced', () => {
         const { getByTestId } = render(<Amount amount="0.12345678" unit={coin}/>);
         const blocks = getByTestId('amountBlocks');
         const values = [
@@ -246,33 +185,22 @@ describe('Amount formatting', () => {
         const allSpacedElements = [...blocks.children];
         expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
       });
+
     });
   });
 
   describe('non BTC coins amounts', () => {
     let coins: CoinUnit[] = ['ETH', 'SEPETH'];
     coins.forEach(coin => {
-      it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes enabled stays 10.00000000', () => {
-        const { container } = render(<Amount amount="10.00000000" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('10.00000000');
-      });
-      it('10.12300000 ' + coin + ' with removeBtcTrailingZeroes enabled stays 10.12300000', () => {
-        const { container } = render(<Amount amount="10.12300000" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('10.12300000');
-      });
-      it('42 ' + coin + ' with removeBtcTrailingZeroes enabled stays 42', () => {
-        const { container } = render(<Amount amount="42" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('42');
-      });
-      it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes disabled stays 10.00000000', () => {
+      it('10.00000000 ' + coin + ' stays 10.00000000', () => {
         const { container } = render(<Amount amount="10.00000000" unit={coin}/>);
         expect(container).toHaveTextContent('10.00000000');
       });
-      it('10.12300000 ' + coin + ' with removeBtcTrailingZeroes disabled stays 10.12300000', () => {
+      it('10.12300000 ' + coin + ' stays 10.12300000', () => {
         const { container } = render(<Amount amount="10.12300000" unit={coin}/>);
         expect(container).toHaveTextContent('10.12300000');
       });
-      it('42 ' + coin + ' with removeBtcTrailingZeroes disabled stays 42', () => {
+      it('42 ' + coin + ' stays 42', () => {
         const { container } = render(<Amount amount="42" unit={coin}/>);
         expect(container).toHaveTextContent('42');
       });
@@ -282,19 +210,11 @@ describe('Amount formatting', () => {
   describe('fiat amounts', () => {
     let fiatCoins: ConversionUnit[] = ['USD', 'EUR', 'CHF'];
     fiatCoins.forEach(coin => {
-      it('1\'340.25 ' + coin + ' with removeBtcTrailingZeroes enabled stays 1\'340.25', () => {
-        const { container } = render(<Amount amount="1'340.25" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('1’340.25');
-      });
-      it('218.00 ' + coin + ' with removeBtcTrailingZeroes enabled stays 218.00', () => {
-        const { container } = render(<Amount amount="218.00" unit={coin} removeBtcTrailingZeroes/>);
-        expect(container).toHaveTextContent('218.00');
-      });
-      it('1\'340.25 ' + coin + ' with removeBtcTrailingZeroes disabled stays 1\'340.25', () => {
+      it('1\'340.25 ' + coin + ' stays 1\'340.25', () => {
         const { container } = render(<Amount amount="1'340.25" unit={coin}/>);
         expect(container).toHaveTextContent('1’340.25');
       });
-      it('218.00 ' + coin + ' with removeBtcTrailingZeroes disabled stays 218.00', () => {
+      it('218.00 ' + coin + ' stays 218.00', () => {
         const { container } = render(<Amount amount="218.00" unit={coin}/>);
         expect(container).toHaveTextContent('218.00');
       });
diff --git a/frontends/web/src/components/amount/amount.tsx b/frontends/web/src/components/amount/amount.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright 2023-2024 Shift Crypto AG
+ * Copyright 2023-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,10 +15,10 @@
  */
 
 import { useContext } from 'react';
+import type { CoinUnit, ConversionUnit } from '@/api/account';
 import { AppContext } from '@/contexts/AppContext';
 import { LocalizationContext } from '@/contexts/localization-context';
 import { useMediaQuery } from '@/hooks/mediaquery';
-import { CoinUnit, ConversionUnit } from '@/api/account';
 import style from './amount.module.css';
 
 const formatSats = (amount: string): JSX.Element => {
@@ -86,15 +86,13 @@ const formatBtc = (
 type TProps = {
   amount: string;
   unit: CoinUnit | ConversionUnit;
-  removeBtcTrailingZeroes?: boolean;
   alwaysShowAmounts?: boolean;
   onMobileClick?: () => Promise<void>;
 };
 
 export const Amount = ({
   amount,
   unit,
-  removeBtcTrailingZeroes,
   alwaysShowAmounts = false,
   onMobileClick,
 }: TProps) => {
@@ -111,7 +109,6 @@ export const Amount = ({
       <FormattedAmount
         amount={amount}
         unit={unit}
-        removeBtcTrailingZeroes={removeBtcTrailingZeroes}
         alwaysShowAmounts={alwaysShowAmounts}
       />
     </span>
@@ -121,7 +118,6 @@ export const Amount = ({
 export const FormattedAmount = ({
   amount,
   unit,
-  removeBtcTrailingZeroes,
   alwaysShowAmounts = false,
 }: Omit<TProps, 'allowRotateCurrencyOnMobile'>) => {
   const { hideAmounts } = useContext(AppContext);
@@ -140,15 +136,7 @@ export const FormattedAmount = ({
   case 'TBTC':
   case 'LTC':
   case 'TLTC':
-    if (removeBtcTrailingZeroes && amount.includes('.')) {
-      return (
-        formatLocalizedAmount(
-          amount.replace(/\.?0+$/, ''), group, decimal
-        )
-      );
-    } else {
-      return formatBtc(amount, group, decimal);
-    }
+    return formatBtc(amount, group, decimal);
   case 'sat':
   case 'tsat':
     return formatSats(amount);
diff --git a/frontends/web/src/components/balance/balance.tsx b/frontends/web/src/components/balance/balance.tsx
@@ -46,13 +46,11 @@ export const Balance = ({
             amount={balance.available}
             tableRow
             enableRotateUnit={!noRotateFiat}
-            removeBtcTrailingZeroes
           />
           <AmountWithUnit
             amount={balance.available}
             tableRow
             enableRotateUnit={!noRotateFiat}
-            removeBtcTrailingZeroes
             convertToFiat
           />
         </tbody>
@@ -66,11 +64,14 @@ export const Balance = ({
               +<Amount
                 amount={balance.incoming.amount}
                 unit={balance.incoming.unit}
-                removeBtcTrailingZeroes/>
+              />
               {' '}{balance.incoming.unit} /
               <span className={style.incomingConversion}>
                 {' '}
-                <AmountWithUnit amount={balance.incoming} removeBtcTrailingZeroes convertToFiat/>
+                <AmountWithUnit
+                  amount={balance.incoming}
+                  convertToFiat
+                />
               </span>
             </span>
           </p>
diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
@@ -581,7 +581,6 @@ export const Chart = ({
               <Amount
                 amount={!showMobileTotalValue ? formattedChartTotal : toolTipValue}
                 unit={chartFiat}
-                removeBtcTrailingZeroes
                 onMobileClick={rotateDefaultCurrency}
               />
             ) : (
diff --git a/frontends/web/src/routes/bitsurance/dashboard.tsx b/frontends/web/src/routes/bitsurance/dashboard.tsx
@@ -168,7 +168,6 @@ export const BitsuranceDashboard = ({ accounts }: TProps) => {
                                     <Amount
                                       amount={balances[account.code].available.amount}
                                       unit={balances[account.code].available.unit}
-                                      removeBtcTrailingZeroes
                                     />
                                     {` ${balances[account.code].available.unit}`}
                                   </>
