Skip to content

Commit ed38bb7

Browse files
thisconnectthisconnect
committed
frontend: cleanup and remove removeBtcTrailingZeroes
With the last commit removeBtcTrailingZeroes prop is not used in the app as all btc amounts have now sat spacing.
1 parent 4455e5a commit ed38bb7

File tree

3 files changed

+35
-129
lines changed

3 files changed

+35
-129
lines changed

‎frontends/web/src/components/amount/amount-with-unit.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,28 @@
1414
* See the License for the specific language governing permissions and
1515
* limitations under the License.
1616
*/
17+
1718
import { useContext } from 'react';
18-
import { CoinUnit, ConversionUnit, TAmountWithConversions } from '@/api/account';
19+
import type { CoinUnit, ConversionUnit, TAmountWithConversions } from '@/api/account';
1920
import { RatesContext } from '@/contexts/RatesContext';
2021
import { Amount } from '@/components/amount/amount';
2122
import { isBitcoinCoin } from '@/routes/account/utils';
2223
import style from './amount-with-unit.module.css';
2324

2425
type TAmountWithUnitProps = {
25-
amount: TAmountWithConversions;
26-
tableRow?: boolean;
27-
enableRotateUnit?: boolean;
28-
sign?: string;
29-
removeBtcTrailingZeroes?: boolean;
30-
alwaysShowAmounts?: boolean;
31-
convertToFiat?: boolean;
26+
amount: TAmountWithConversions;
27+
tableRow?: boolean;
28+
enableRotateUnit?: boolean;
29+
sign?: string;
30+
alwaysShowAmounts?: boolean;
31+
convertToFiat?: boolean;
3232
}
3333

3434
export const AmountWithUnit = ({
3535
amount,
3636
tableRow,
3737
enableRotateUnit: rotateUnit,
3838
sign,
39-
removeBtcTrailingZeroes,
4039
convertToFiat,
4140
alwaysShowAmounts = false
4241
}: TAmountWithUnitProps) => {
@@ -66,7 +65,6 @@ export const AmountWithUnit = ({
6665
alwaysShowAmounts={alwaysShowAmounts}
6766
amount={displayedAmount}
6867
unit={displayedUnit}
69-
removeBtcTrailingZeroes={!!removeBtcTrailingZeroes}
7068
onMobileClick={enableClick ? onClick : undefined}
7169
/>
7270
) : '---';

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

Lines changed: 24 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright 2023-2024 Shift Crypto AG
2+
* Copyright 2023-2025 Shift Crypto AG
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
1717
import { useContext } from 'react';
1818
import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
1919
import { render } from '@testing-library/react';
20+
import type { CoinUnit, ConversionUnit } from '@/api/account';
2021
import { Amount } from './amount';
21-
import { CoinUnit, ConversionUnit } from '@/api/account';
2222

2323
vi.mock('react', async () => ({
2424
...(await vi.importActual('react')),
@@ -90,8 +90,8 @@ describe('Amount formatting', () => {
9090
describe('sat amounts', () => {
9191
let coins: CoinUnit[] = ['sat', 'tsat'];
9292
coins.forEach((coin) => {
93-
it('12345678901234 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
94-
const { getByTestId } = render(<Amount amount="12345678901234" unit={coin} removeBtcTrailingZeroes/>);
93+
it('12345678901234 ' + coin + ' gets spaced', () => {
94+
const { getByTestId } = render(<Amount amount="12345678901234" unit={coin} />);
9595
const blocks = getByTestId('amountBlocks');
9696

9797
const values = [
@@ -105,8 +105,8 @@ describe('Amount formatting', () => {
105105
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
106106
});
107107

108-
it('1234567 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
109-
const { getByTestId } = render(<Amount amount="1234567" unit={coin} removeBtcTrailingZeroes/>);
108+
it('1234567 ' + coin + ' gets spaced', () => {
109+
const { getByTestId } = render(<Amount amount="1234567" unit={coin} />);
110110
const blocks = getByTestId('amountBlocks');
111111
const values = [
112112
'1',
@@ -117,9 +117,8 @@ describe('Amount formatting', () => {
117117
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
118118
});
119119

120-
121-
it('12345 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
122-
const { getByTestId } = render(<Amount amount="12345" unit={coin} removeBtcTrailingZeroes/>);
120+
it('12345 ' + coin + ' gets spaced', () => {
121+
const { getByTestId } = render(<Amount amount="12345" unit={coin} />);
123122
const blocks = getByTestId('amountBlocks');
124123
const values = [
125124
'12',
@@ -129,56 +128,8 @@ describe('Amount formatting', () => {
129128
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
130129
});
131130

132-
it('21 ' + coin + ' with removeBtcTrailingZeroes enabled gets spaced', () => {
133-
const { getByTestId } = render(<Amount amount="21" unit={coin} removeBtcTrailingZeroes/>);
134-
const blocks = getByTestId('amountBlocks');
135-
const values = [
136-
'21',
137-
];
138-
const allSpacedElements = [...blocks.children];
139-
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
140-
});
141-
142-
it('12345678901234 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
143-
const { getByTestId } = render(<Amount amount="12345678901234" unit={coin}/>);
144-
const blocks = getByTestId('amountBlocks');
145-
const values = [
146-
'12',
147-
'345',
148-
'678',
149-
'901',
150-
'234',
151-
];
152-
const allSpacedElements = [...blocks.children];
153-
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
154-
});
155-
156-
157-
it('1234567 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
158-
const { getByTestId } = render(<Amount amount="1234567" unit={coin}/>);
159-
const blocks = getByTestId('amountBlocks');
160-
const values = [
161-
'1',
162-
'234',
163-
'567',
164-
];
165-
const allSpacedElements = [...blocks.children];
166-
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
167-
});
168-
169-
it('12345 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
170-
const { getByTestId } = render(<Amount amount="12345" unit={coin}/>);
171-
const blocks = getByTestId('amountBlocks');
172-
const values = [
173-
'12',
174-
'345',
175-
];
176-
const allSpacedElements = [...blocks.children];
177-
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
178-
});
179-
180-
it('21 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
181-
const { getByTestId } = render(<Amount amount="21" unit={coin}/>);
131+
it('21 ' + coin + ' gets spaced', () => {
132+
const { getByTestId } = render(<Amount amount="21" unit={coin} />);
182133
const blocks = getByTestId('amountBlocks');
183134
const values = [
184135
'21',
@@ -193,23 +144,8 @@ describe('Amount formatting', () => {
193144
describe('BTC/LTC coins amounts', () => {
194145
let coins: CoinUnit[] = ['BTC', 'TBTC', 'LTC', 'TLTC'];
195146
coins.forEach(coin => {
196-
it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes enabled becomes 10', () => {
197-
const { container } = render(<Amount amount="10.00000000" unit={coin} removeBtcTrailingZeroes/>);
198-
expect(container).toHaveTextContent('10');
199-
});
200-
it('12345.12300000 ' + coin + ' with removeBtcTrailingZeroes enabled becomes 12345.123', () => {
201-
const { container } = render(<Amount amount="12345.12300000" unit={coin} removeBtcTrailingZeroes/>);
202-
expect(container).toHaveTextContent('12345.123');
203-
});
204-
it('42 ' + coin + ' with removeBtcTrailingZeroes enabled stays 42', () => {
205-
const { container } = render(<Amount amount="42" unit={coin} removeBtcTrailingZeroes/>);
206-
expect(container).toHaveTextContent('42');
207-
});
208-
it('0.12345678 ' + coin + ' with removeBtcTrailingZeroes enabled stays 0.12345678', () => {
209-
const { container } = render(<Amount amount="0.12345678" unit={coin} removeBtcTrailingZeroes/>);
210-
expect(container).toHaveTextContent('0.12345678');
211-
});
212-
it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
147+
148+
it('10.00000000 ' + coin + ' gets spaced', () => {
213149
const { getByTestId } = render(<Amount amount="10.00000000" unit={coin}/>);
214150
const blocks = getByTestId('amountBlocks');
215151
const values = [
@@ -220,7 +156,8 @@ describe('Amount formatting', () => {
220156
const allSpacedElements = [...blocks.children];
221157
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
222158
});
223-
it('12345.12300000 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
159+
160+
it('12345.12300000 ' + coin + ' gets spaced', () => {
224161
const { getByTestId } = render(<Amount amount="12345.12300000" unit={coin}/>);
225162
const blocks = getByTestId('amountBlocks');
226163
const values = [
@@ -231,11 +168,13 @@ describe('Amount formatting', () => {
231168
const allSpacedElements = [...blocks.children];
232169
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
233170
});
234-
it('42 ' + coin + ' with removeBtcTrailingZeroes disabled stays 42', () => {
171+
172+
it('42 ' + coin + ' stays 42', () => {
235173
const { container } = render(<Amount amount="42" unit={coin}/>);
236174
expect(container).toHaveTextContent('42');
237175
});
238-
it('0.12345678 ' + coin + ' with removeBtcTrailingZeroes disabled gets spaced', () => {
176+
177+
it('0.12345678 ' + coin + ' gets spaced', () => {
239178
const { getByTestId } = render(<Amount amount="0.12345678" unit={coin}/>);
240179
const blocks = getByTestId('amountBlocks');
241180
const values = [
@@ -246,33 +185,22 @@ describe('Amount formatting', () => {
246185
const allSpacedElements = [...blocks.children];
247186
expect(validateSpacing(values, allSpacedElements)).toBeTruthy();
248187
});
188+
249189
});
250190
});
251191

252192
describe('non BTC coins amounts', () => {
253193
let coins: CoinUnit[] = ['ETH', 'SEPETH'];
254194
coins.forEach(coin => {
255-
it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes enabled stays 10.00000000', () => {
256-
const { container } = render(<Amount amount="10.00000000" unit={coin} removeBtcTrailingZeroes/>);
257-
expect(container).toHaveTextContent('10.00000000');
258-
});
259-
it('10.12300000 ' + coin + ' with removeBtcTrailingZeroes enabled stays 10.12300000', () => {
260-
const { container } = render(<Amount amount="10.12300000" unit={coin} removeBtcTrailingZeroes/>);
261-
expect(container).toHaveTextContent('10.12300000');
262-
});
263-
it('42 ' + coin + ' with removeBtcTrailingZeroes enabled stays 42', () => {
264-
const { container } = render(<Amount amount="42" unit={coin} removeBtcTrailingZeroes/>);
265-
expect(container).toHaveTextContent('42');
266-
});
267-
it('10.00000000 ' + coin + ' with removeBtcTrailingZeroes disabled stays 10.00000000', () => {
195+
it('10.00000000 ' + coin + ' stays 10.00000000', () => {
268196
const { container } = render(<Amount amount="10.00000000" unit={coin}/>);
269197
expect(container).toHaveTextContent('10.00000000');
270198
});
271-
it('10.12300000 ' + coin + ' with removeBtcTrailingZeroes disabled stays 10.12300000', () => {
199+
it('10.12300000 ' + coin + ' stays 10.12300000', () => {
272200
const { container } = render(<Amount amount="10.12300000" unit={coin}/>);
273201
expect(container).toHaveTextContent('10.12300000');
274202
});
275-
it('42 ' + coin + ' with removeBtcTrailingZeroes disabled stays 42', () => {
203+
it('42 ' + coin + ' stays 42', () => {
276204
const { container } = render(<Amount amount="42" unit={coin}/>);
277205
expect(container).toHaveTextContent('42');
278206
});
@@ -282,19 +210,11 @@ describe('Amount formatting', () => {
282210
describe('fiat amounts', () => {
283211
let fiatCoins: ConversionUnit[] = ['USD', 'EUR', 'CHF'];
284212
fiatCoins.forEach(coin => {
285-
it('1\'340.25 ' + coin + ' with removeBtcTrailingZeroes enabled stays 1\'340.25', () => {
286-
const { container } = render(<Amount amount="1'340.25" unit={coin} removeBtcTrailingZeroes/>);
287-
expect(container).toHaveTextContent('1’340.25');
288-
});
289-
it('218.00 ' + coin + ' with removeBtcTrailingZeroes enabled stays 218.00', () => {
290-
const { container } = render(<Amount amount="218.00" unit={coin} removeBtcTrailingZeroes/>);
291-
expect(container).toHaveTextContent('218.00');
292-
});
293-
it('1\'340.25 ' + coin + ' with removeBtcTrailingZeroes disabled stays 1\'340.25', () => {
213+
it('1\'340.25 ' + coin + ' stays 1\'340.25', () => {
294214
const { container } = render(<Amount amount="1'340.25" unit={coin}/>);
295215
expect(container).toHaveTextContent('1’340.25');
296216
});
297-
it('218.00 ' + coin + ' with removeBtcTrailingZeroes disabled stays 218.00', () => {
217+
it('218.00 ' + coin + ' stays 218.00', () => {
298218
const { container } = render(<Amount amount="218.00" unit={coin}/>);
299219
expect(container).toHaveTextContent('218.00');
300220
});

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright 2023-2024 Shift Crypto AG
2+
* Copyright 2023-2025 Shift Crypto AG
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -15,10 +15,10 @@
1515
*/
1616

1717
import { useContext } from 'react';
18+
import type { CoinUnit, ConversionUnit } from '@/api/account';
1819
import { AppContext } from '@/contexts/AppContext';
1920
import { LocalizationContext } from '@/contexts/localization-context';
2021
import { useMediaQuery } from '@/hooks/mediaquery';
21-
import { CoinUnit, ConversionUnit } from '@/api/account';
2222
import style from './amount.module.css';
2323

2424
const formatSats = (amount: string): JSX.Element => {
@@ -86,15 +86,13 @@ const formatBtc = (
8686
type TProps = {
8787
amount: string;
8888
unit: CoinUnit | ConversionUnit;
89-
removeBtcTrailingZeroes?: boolean;
9089
alwaysShowAmounts?: boolean;
9190
onMobileClick?: () => Promise<void>;
9291
};
9392

9493
export const Amount = ({
9594
amount,
9695
unit,
97-
removeBtcTrailingZeroes,
9896
alwaysShowAmounts = false,
9997
onMobileClick,
10098
}: TProps) => {
@@ -111,7 +109,6 @@ export const Amount = ({
111109
<FormattedAmount
112110
amount={amount}
113111
unit={unit}
114-
removeBtcTrailingZeroes={removeBtcTrailingZeroes}
115112
alwaysShowAmounts={alwaysShowAmounts}
116113
/>
117114
</span>
@@ -121,7 +118,6 @@ export const Amount = ({
121118
export const FormattedAmount = ({
122119
amount,
123120
unit,
124-
removeBtcTrailingZeroes,
125121
alwaysShowAmounts = false,
126122
}: Omit<TProps, 'allowRotateCurrencyOnMobile'>) => {
127123
const { hideAmounts } = useContext(AppContext);
@@ -140,15 +136,7 @@ export const FormattedAmount = ({
140136
case 'TBTC':
141137
case 'LTC':
142138
case 'TLTC':
143-
if (removeBtcTrailingZeroes && amount.includes('.')) {
144-
return (
145-
formatLocalizedAmount(
146-
amount.replace(/\.?0+$/, ''), group, decimal
147-
)
148-
);
149-
} else {
150-
return formatBtc(amount, group, decimal);
151-
}
139+
return formatBtc(amount, group, decimal);
152140
case 'sat':
153141
case 'tsat':
154142
return formatSats(amount);

0 commit comments

Comments
 (0)