Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Update decimal precision for account list item and token list #30594

Merged
merged 8 commits into from
Feb 27, 2025
Merged

fix: Update decimal precision for account list item and token list #30594

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
de76371
fix: Update decimal precision for account list item and token list
gambinish Feb 26, 2025
a028c65
fix: Unit tests
gambinish Feb 27, 2025
678a0ef
fix: Remove unused imports
gambinish Feb 27, 2025
f3e3d10
fix: e2e for evm balances
gambinish Feb 27, 2025
5bf785c
Merge branch 'main' into fix/flask-decimal-places
gambinish Feb 27, 2025
adde985
Merge branch 'main' into fix/flask-decimal-places
gambinish Feb 27, 2025
a3ec132
Merge branch 'main' into fix/flask-decimal-places
gambinish Feb 27, 2025
814e122
Merge branch 'main' into fix/flask-decimal-places
gambinish Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions ui/components/app/assets/hooks/useTokenDisplayInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useSelector } from 'react-redux';
import { BigNumber } from 'bignumber.js';
import { isEqualCaseInsensitive } from '@metamask/controller-utils';
import {
getIsTestnet,
Expand All @@ -17,7 +16,6 @@ import {
} from '../../../../selectors/multichain';
import { formatWithThreshold } from '../util/formatWithThreshold';
import { getIntlLocale } from '../../../../ducks/locale/locale';
import { formatAmount } from '../../../../pages/confirmations/components/simulation-details/formatAmount';
import { getCurrentCurrency } from '../../../../ducks/metamask/metamask';
import { useMultichainSelector } from '../../../../hooks/useMultichainSelector';

Expand Down Expand Up @@ -64,9 +62,14 @@ export const useTokenDisplayInfo = ({
)
: undefined;

const primary = formatAmount(
const formattedPrimary = formatWithThreshold(
Number(isEvm ? token.string : token.primary),
0.00001,
locale,
new BigNumber(Number(token.string) || '0', 10),
{
minimumFractionDigits: 0,
maximumFractionDigits: 5,
},
);

const isEvmMainnet =
Expand Down Expand Up @@ -101,7 +104,7 @@ export const useTokenDisplayInfo = ({
return {
title,
tokenImage,
primary,
primary: formattedPrimary,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
secondary,
Expand All @@ -113,7 +116,7 @@ export const useTokenDisplayInfo = ({
return {
title: token.title,
tokenImage: token.image,
primary: token.primary,
primary: formattedPrimary,
secondary: token.secondary,
isStakeable: false,
tokenChainImage: token.image as string,
Expand Down
2 changes: 2 additions & 0 deletions ui/components/app/assets/token-cell/token-cell.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ describe('Token Cell', () => {
symbol: 'TEST',
string: '5.000',
currentCurrency: 'usd',
primary: '5.00',
image: '',
chainId: '0x1' as Hex,
tokenFiatAmount: 5,
Expand All @@ -116,6 +117,7 @@ describe('Token Cell', () => {
image: '',
chainId: '0x1' as Hex,
tokenFiatAmount: 5000000,
primary: '5000000',
aggregators: [],
decimals: 18,
isNative: false,
Expand Down
18 changes: 16 additions & 2 deletions ui/components/multichain/account-list-item/account-list-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import { BigNumber } from 'bignumber.js';
import { useSelector } from 'react-redux';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getSnapName, shortenAddress } from '../../../helpers/utils/util';
Expand Down Expand Up @@ -55,6 +55,7 @@ import {
getChainIdsToPoll,
getSnapsMetadata,
} from '../../../selectors';
import { getIntlLocale } from '../../../ducks/locale/locale';
import {
getMultichainIsTestnet,
getMultichainNativeCurrency,
Expand All @@ -71,6 +72,7 @@ import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
import { useGetFormattedTokensPerChain } from '../../../hooks/useGetFormattedTokensPerChain';
import { useAccountTotalCrossChainFiatBalance } from '../../../hooks/useAccountTotalCrossChainFiatBalance';
import { getAccountLabel } from '../../../helpers/utils/accounts';
import { formatWithThreshold } from '../../app/assets/util/formatWithThreshold';
import { AccountListItemMenuTypes } from './account-list-item.types';

const MAXIMUM_CURRENCY_DECIMALS = 3;
Expand All @@ -94,6 +96,7 @@ const AccountListItem = ({
privacyMode = false,
}) => {
const t = useI18nContext();
const locale = useSelector(getIntlLocale);
const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
const [accountListItemMenuElement, setAccountListItemMenuElement] =
useState();
Expand Down Expand Up @@ -154,7 +157,18 @@ const AccountListItem = ({
? account.balance
: totalFiatBalance;
} else {
balanceToTranslate = accountTotalFiatBalances.totalBalance;
const balanceOrFallback = accountTotalFiatBalances?.totalBalance ?? 0;
const bnBalance = new BigNumber(balanceOrFallback);
const formattedBalanceToTranslate = formatWithThreshold(
bnBalance.toNumber(),
0.00001,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this represent?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the lower threshold. Meaning, that if the balance is less than 0.00001 we append a < to the threshold and display it.

So if the balance is 0.00000001 we will display <0.00001

This is partially relevant to the ADR we discussed in Slack.

locale,
{
minimumFractionDigits: 0,
maximumFractionDigits: 5,
},
);
balanceToTranslate = formattedBalanceToTranslate;
}

// If this is the selected item in the Account menu,
Expand Down
3 changes: 3 additions & 0 deletions ui/components/multichain/pages/send/send.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,9 @@ const baseStore = {
ticker: 'ETH',
snaps: {},
},
localeMessages: {
currentLocale: 'en',
},
activeTab: {
origin: 'https://uniswap.org/',
},
Expand Down
3 changes: 3 additions & 0 deletions ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ describe('remove-snap-account confirmation', () => {
appState: {
...mockBaseStore.appState,
},
localeMessages: {
currentLocale: 'en',
},
activeTab: {
origin: 'https://uniswap.org/',
},
Expand Down
Loading