Skip to content

Commit ca3cd68

Browse files
lukaw3dlukaw3d
authored
Merge pull request #2268 from oasisprotocol/lw/rounding-more
Use rounded numbers everywhere
2 parents 38ca156 + 1878590 commit ca3cd68

File tree

11 files changed

+49
-105
lines changed

11 files changed

+49
-105
lines changed

‎.changelog/2268.bugfix.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Use rounded numbers everywhere

‎playwright/tests/getPreciseNumberFormat.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ async function setup(page: Page, balance: string, decimals: number) {
4848
await page.goto(
4949
'http://localhost:1234/mainnet/sapphire/address/0x0000000000000000000000000000000000000000/tokens/erc-20#tokens',
5050
)
51+
await expect(page.getByText('TokenForTests')).toBeVisible()
52+
53+
// Trigger tooltips to find all precise numbers
54+
await page.evaluate(() => {
55+
document.querySelectorAll('[aria-label]').forEach(el => {
56+
el.dispatchEvent(new MouseEvent('mouseover', { view: window, bubbles: true, cancelable: true }))
57+
})
58+
})
5159
}
5260

5361
test.describe('getPreciseNumberFormat', () => {

‎src/app/components/Account/ConsensusAccountDetailsView.tsx‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import { AccountAvatar } from '../AccountAvatar'
1212
import { AccountSizeBadge } from '../AccountSizeBadge'
1313
import { ConsensusAccountLink } from './ConsensusAccountLink'
1414
import { CopyToClipboard } from '../CopyToClipboard'
15-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
1615
import { Link as RouterLink } from 'react-router-dom'
1716
import Link from '@mui/material/Link'
1817
import { RouteUtils } from '../../utils/route-utils'
1918
import { transactionsContainerId } from '../../utils/tabAnchors'
19+
import { RoundedBalance } from '../RoundedBalance'
2020

2121
export const StyledListTitle = styled('dt')(({ theme }) => ({
2222
marginLeft: theme.spacing(4),
@@ -71,37 +71,21 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
7171
<CopyToClipboard value={account.address} />
7272
</div>
7373
</dd>
74-
<dt>
75-
<strong>{t('account.totalBalance')}</strong>
76-
</dt>
74+
<dt>{t('account.totalBalance')}</dt>
7775
<dd>
78-
<strong>
79-
{t('common.valueInToken', {
80-
...getPreciseNumberFormat(account.total),
81-
ticker: account.ticker,
82-
})}
83-
</strong>
76+
<RoundedBalance value={account.total} ticker={account.ticker} />
8477
</dd>
8578
<StyledListTitle>{t('account.available')}</StyledListTitle>
8679
<dd>
87-
{t('common.valueInToken', {
88-
...getPreciseNumberFormat(account.available),
89-
ticker: account.ticker,
90-
})}
80+
<RoundedBalance value={account.available} ticker={account.ticker} />
9181
</dd>
9282
<StyledListTitle>{t('common.staked')}</StyledListTitle>
9383
<dd>
94-
{t('common.valueInToken', {
95-
...getPreciseNumberFormat(account.delegations_balance!),
96-
ticker: account.ticker,
97-
})}
84+
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
9885
</dd>
9986
<StyledListTitle>{t('account.debonding')}</StyledListTitle>
10087
<dd>
101-
{t('common.valueInToken', {
102-
...getPreciseNumberFormat(account.debonding_delegations_balance!),
103-
ticker: account.ticker,
104-
})}
88+
<RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
10589
</dd>
10690
<dt>{t('common.nonce')}</dt>
10791
<dd>{account.nonce}</dd>

‎src/app/components/AccountList/index.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
43
import { Table, TableCellAlign, TableColProps } from '../../components/Table'
54
import { RoundedBalance } from '../../components/RoundedBalance'
65
import { Account } from '../../../oasis-nexus/api'
@@ -48,28 +47,12 @@ export const AccountList: FC<AccountListProps> = ({ isLoading, limit, pagination
4847
},
4948
{
5049
align: TableCellAlign.Right,
51-
content: (
52-
<>
53-
{account.delegations_balance &&
54-
t('common.valueInToken', {
55-
...getPreciseNumberFormat(account.delegations_balance),
56-
ticker: account.ticker,
57-
})}
58-
</>
59-
),
50+
content: <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />,
6051
key: 'staked',
6152
},
6253
{
6354
align: TableCellAlign.Right,
64-
content: (
65-
<>
66-
{account.debonding_delegations_balance &&
67-
t('common.valueInToken', {
68-
...getPreciseNumberFormat(account.debonding_delegations_balance),
69-
ticker: account.ticker,
70-
})}
71-
</>
72-
),
55+
content: <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />,
7356
key: 'debonding',
7457
},
7558
{

‎src/app/components/Balance/RuntimeBalanceDisplay.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react'
22
import { RuntimeSdkBalance } from '../../../oasis-nexus/api'
33
import { useTranslation } from 'react-i18next'
4-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
4+
import { RoundedBalance } from '../RoundedBalance'
55

66
export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
77
balances = [],
@@ -14,10 +14,7 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
1414
<div>
1515
{balances.map(balance => (
1616
<div key={balance.token_symbol}>
17-
{t('common.valueInToken', {
18-
...getPreciseNumberFormat(balance.balance),
19-
ticker: balance.token_symbol,
20-
})}
17+
<RoundedBalance value={balance.balance} ticker={balance.token_symbol} />
2118
</div>
2219
))}
2320
</div>

‎src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
66
import { Account } from '../../../oasis-nexus/api'
77
import { PieChart } from '../../components/charts/PieChart'
88
import { useScreenSize } from '../../hooks/useScreensize'
9-
import { getPreciseNumberFormat } from 'locales/getPreciseNumberFormat'
109
import { ConsensusAccountCardEmptyState } from './ConsensusAccountCardEmptyState'
1110
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
11+
import { RoundedBalance } from '../../components/RoundedBalance'
1212

1313
type BalanceDistributionProps = {
1414
account: Account | undefined
@@ -38,10 +38,6 @@ type BalanceDistributionContentProps = {
3838
const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ account }) => {
3939
const { t } = useTranslation()
4040
const { isMobile } = useScreenSize()
41-
const totalValue = t('common.valueInToken', {
42-
...getPreciseNumberFormat(account.total),
43-
ticker: account.ticker,
44-
})
4541

4642
if (account.total === '0') {
4743
return <ConsensusAccountCardEmptyState label={t('account.noBalances')} />
@@ -69,9 +65,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
6965
return (
7066
<>
7167
<Typography variant="small" className="md:text-lg font-medium md:font-bold mb-8 text-primary">
72-
{t('account.totalValue', {
73-
value: totalValue,
74-
})}
68+
<RoundedBalance value={account.total} ticker={account.ticker} />
7569
</Typography>
7670
<div className="h-[100px] md:h-[250px]">
7771
<PieChart
@@ -81,7 +75,12 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
8175
formatters={{
8276
data: (value, payload) =>
8377
t('common.valueInToken', {
84-
...getPreciseNumberFormat(String(payload!.preciseValue)),
78+
value: payload!.preciseValue,
79+
formatParams: {
80+
value: {
81+
notation: 'compact',
82+
} satisfies Intl.NumberFormatOptions,
83+
},
8584
ticker: account.ticker,
8685
}),
8786
label: (label: string) => label,

‎src/app/pages/ConsensusTransactionDetailPage/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { ConsensusTransactionMethod } from 'app/components/ConsensusTransactionM
1818
import { useFormattedTimestampStringWithDistance } from 'app/hooks/useFormattedTimestamp'
1919
import { RoundedBalance } from 'app/components/RoundedBalance'
2020
import { ConsensusAccountLink } from 'app/components/Account/ConsensusAccountLink'
21-
import { getPreciseNumberFormat } from 'locales/getPreciseNumberFormat'
2221
import { CurrentFiatValue } from '../../components/CurrentFiatValue'
2322
import { ConsensusTransactionEvents } from '../../components/Transactions/ConsensusTransactionEvents'
2423
import { AllTokenPrices, useAllTokenPrices } from 'coin-gecko/api'
@@ -166,10 +165,7 @@ export const ConsensusTransactionDetailView: FC<{
166165
<>
167166
<dt>{t('common.amount')}</dt>
168167
<dd>
169-
{t('common.valueInToken', {
170-
...getPreciseNumberFormat(transaction.amount),
171-
ticker: transaction.ticker,
172-
})}
168+
<RoundedBalance value={transaction.amount} ticker={transaction.ticker} />
173169
</dd>
174170
</>
175171
)}
@@ -196,10 +192,7 @@ export const ConsensusTransactionDetailView: FC<{
196192
)}
197193
<dt>{t('common.fee')}</dt>
198194
<dd>
199-
{t('common.valueInToken', {
200-
...getPreciseNumberFormat(transaction.fee),
201-
ticker: transaction.ticker,
202-
})}
195+
<RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
203196
</dd>
204197

205198
<dt>{t('common.gasUsed')}</dt>

‎src/app/pages/RuntimeAccountDetailsPage/AccountTokensCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {
1818
} from '../../../types/tokens'
1919
import { SearchScope } from '../../../types/searchScope'
2020
import { RuntimeAccountDetailsContext } from './index'
21-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
2221
import { tokenContainerId } from '../../utils/tabAnchors'
22+
import { RoundedBalance } from '../../components/RoundedBalance'
2323

2424
type AccountTokensCardProps = RuntimeAccountDetailsContext & {
2525
type: EvmTokenType
@@ -84,7 +84,7 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, account,
8484
},
8585
{
8686
align: TableCellAlign.Right,
87-
content: t('common.valueLong', getPreciseNumberFormat(item.balance)),
87+
content: <RoundedBalance value={item.balance} />,
8888
key: 'balance',
8989
},
9090
{

‎src/app/pages/RuntimeTransactionDetailPage/index.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { CurrentFiatValue } from '../../components/CurrentFiatValue'
2323
import { TransactionEncryptionStatus } from '../../components/TransactionEncryptionStatus'
2424
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
2525
import { LongDataDisplay } from '../../components/LongDataDisplay'
26-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
2726
import { base64ToHex } from '../../utils/helpers'
2827
import { DappBanner } from '../../components/DappBanner'
2928
import { getFiatCurrencyForScope, showFiatValues } from '../../../config'
@@ -303,12 +302,11 @@ export const RuntimeTransactionDetailView: FC<{
303302

304303
<dt>{t('common.amount')}</dt>
305304
<dd>
306-
{transaction.amount != null
307-
? t('common.valueInToken', {
308-
...getPreciseNumberFormat(transaction.amount),
309-
ticker: transaction.amount_symbol,
310-
})
311-
: t('common.missing')}
305+
{transaction.amount != null ? (
306+
<RoundedBalance value={transaction.amount} ticker={transaction.amount_symbol} />
307+
) : (
308+
t('common.missing')
309+
)}
312310
</dd>
313311

314312
{transaction?.body?.shares && (
@@ -340,10 +338,7 @@ export const RuntimeTransactionDetailView: FC<{
340338

341339
<dt>{t('common.fee')}</dt>
342340
<dd>
343-
{t('common.valueInToken', {
344-
...getPreciseNumberFormat(transaction.charged_fee),
345-
ticker: transaction.fee_symbol,
346-
})}
341+
<RoundedBalance value={transaction.charged_fee} ticker={transaction.fee_symbol} />
347342
</dd>
348343

349344
{transaction.fee_proxy_module && transaction.fee_proxy_id && (
@@ -380,10 +375,7 @@ export const RuntimeTransactionDetailView: FC<{
380375
<>
381376
<dt>{t('common.gasPrice')}</dt>
382377
<dd>
383-
{t('common.valueInToken', {
384-
...getPreciseNumberFormat(convertToNano(gasPrice)),
385-
ticker: `n${transaction.fee_symbol}`,
386-
})}
378+
<RoundedBalance value={convertToNano(gasPrice)} ticker={`n${transaction.fee_symbol}`} />
387379
</dd>
388380
</>
389381
)}

‎src/app/pages/ValidatorDetailsPage/EscrowDistributionCard.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
33
import { TFunction } from 'i18next'
44
import Typography from '@mui/material/Typography'
55
import { Validator } from '../../../oasis-nexus/api'
6-
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
76
import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
87
import { PieChart } from '../../components/charts/PieChart'
98
import { RoundedBalance } from '../../components/RoundedBalance'
@@ -65,7 +64,12 @@ export const EscrowDistributionCard: FC<BalanceDistributionCardProps> = ({ valid
6564
formatters={{
6665
data: (value, payload) =>
6766
t('common.valueInToken', {
68-
...getPreciseNumberFormat(String(payload!.preciseValue)),
67+
value: payload!.preciseValue,
68+
formatParams: {
69+
value: {
70+
notation: 'compact',
71+
} satisfies Intl.NumberFormatOptions,
72+
},
6973
ticker: validator.ticker,
7074
}),
7175
label: (label: string) => label,

0 commit comments

Comments
 (0)