Skip to content

Commit f56df68

Browse files
pedronfigueiredopedronfigueiredo
committed
Address comments
1 parent be1df40 commit f56df68

File tree

5 files changed

+48
-82
lines changed

5 files changed

+48
-82
lines changed

‎ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { TransactionMeta } from '@metamask/transaction-controller';
22
import { isHexString } from '@metamask/utils';
3-
import { BigNumber } from 'bignumber.js';
43
import { isBoolean } from 'lodash';
54
import { useMemo } from 'react';
65
import { useSelector } from 'react-redux';
6+
import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
77
import { getIntlLocale } from '../../../../../../../ducks/locale/locale';
88
import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants';
9-
import { toNonScientificString } from '../../hooks/use-token-values';
109
import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
1110
import { useIsNFT } from './use-is-nft';
1211

@@ -27,7 +26,7 @@ export const useApproveTokenSimulation = (
2726

2827
const decodedSpendingCap = useMemo(() => {
2928
if (!value) {
30-
return 0;
29+
return '0';
3130
}
3231

3332
const paramIndex = value.data[0].params.findIndex(
@@ -38,23 +37,24 @@ export const useApproveTokenSimulation = (
3837
!isBoolean(param.value),
3938
);
4039
if (paramIndex === -1) {
41-
return 0;
40+
return '0';
4241
}
4342

44-
return new BigNumber(value.data[0].params[paramIndex].value.toString())
45-
.dividedBy(new BigNumber(10).pow(Number(decimals)))
46-
.toNumber();
43+
return calcTokenAmount(
44+
value.data[0].params[paramIndex].value,
45+
Number(decimals),
46+
).toFixed();
4747
}, [value, decimals]);
4848

4949
const formattedSpendingCap = useMemo(() => {
5050
// formatting coerces small numbers to 0
51-
return isNFT || decodedSpendingCap < 1
52-
? toNonScientificString(decodedSpendingCap)
53-
: new Intl.NumberFormat(locale).format(decodedSpendingCap);
51+
return isNFT || parseInt(decodedSpendingCap, 10) < 1
52+
? decodedSpendingCap
53+
: new Intl.NumberFormat(locale).format(parseInt(decodedSpendingCap, 10));
5454
}, [decodedSpendingCap, isNFT, locale]);
5555

5656
const spendingCap = useMemo(() => {
57-
if (!isNFT && isSpendingCapUnlimited(decodedSpendingCap)) {
57+
if (!isNFT && isSpendingCapUnlimited(parseInt(decodedSpendingCap, 10))) {
5858
return SPENDING_CAP_UNLIMITED_MSG;
5959
}
6060
const tokenPrefix = isNFT ? '#' : '';

‎ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts

+1-19
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import mockState from '../../../../../../../test/data/mock-state.json';
55
import { renderHookWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
66
import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
77
import { useAssetDetails } from '../../../../hooks/useAssetDetails';
8-
import { toNonScientificString, useTokenValues } from './use-token-values';
8+
import { useTokenValues } from './use-token-values';
99
import { useDecodedTransactionData } from './useDecodedTransactionData';
1010

1111
jest.mock('../../../../hooks/useAssetDetails', () => ({
@@ -126,21 +126,3 @@ describe('useTokenValues', () => {
126126
});
127127
});
128128
});
129-
130-
describe('toNonScientificString', () => {
131-
const TEST_CASES = [
132-
{ scientific: 1.23e-5, expanded: '0.0000123' },
133-
{ scientific: 1e-10, expanded: '0.0000000001' },
134-
{ scientific: 1.23e-21, expanded: '1.23e-21' },
135-
];
136-
137-
// @ts-expect-error This is missing from the Mocha type definitions
138-
it.each(TEST_CASES)(
139-
'Expand $scientific to "$expanded"',
140-
({ scientific, expanded }: { scientific: number; expanded: string }) => {
141-
const actual = toNonScientificString(scientific);
142-
143-
expect(actual).toEqual(expanded);
144-
},
145-
);
146-
});

‎ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

+13-18
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { BigNumber } from 'bignumber.js';
44
import { isBoolean } from 'lodash';
55
import { useMemo, useState } from 'react';
66
import { useSelector } from 'react-redux';
7+
import { calcTokenAmount } from '../../../../../../../shared/lib/transactions-controller-utils';
78
import { Numeric } from '../../../../../../../shared/modules/Numeric';
89
import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
910
import { getIntlLocale } from '../../../../../../ducks/locale/locale';
@@ -26,13 +27,16 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
2627
useMemo(() => {
2728
if (!value) {
2829
return {
29-
decodedTransferValue: 0,
30+
decodedTransferValue: '0',
3031
isDecodedTransferValuePending: false,
3132
};
3233
}
3334

3435
if (!decimals) {
35-
return { decodedTransferValue: 0, isDecodedTransferValuePending: true };
36+
return {
37+
decodedTransferValue: '0',
38+
isDecodedTransferValuePending: true,
39+
};
3640
}
3741

3842
const paramIndex = value.data[0].params.findIndex(
@@ -44,19 +48,19 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
4448
);
4549
if (paramIndex === -1) {
4650
return {
47-
decodedTransferValue: 0,
51+
decodedTransferValue: '0',
4852
isDecodedTransferValuePending: false,
4953
};
5054
}
5155

5256
return {
53-
decodedTransferValue: new BigNumber(
54-
value.data[0].params[paramIndex].value.toString(),
55-
)
56-
.dividedBy(new BigNumber(10).pow(Number(decimals)))
57-
.toNumber(),
57+
decodedTransferValue: calcTokenAmount(
58+
value.data[0].params[paramIndex].value,
59+
decimals,
60+
).toFixed(),
5861
isDecodedTransferValuePending: false,
5962
};
63+
// };
6064
}, [value, decimals]);
6165

6266
const [exchangeRate, setExchangeRate] = useState<Numeric | undefined>();
@@ -82,18 +86,9 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
8286
);
8387

8488
return {
85-
decodedTransferValue: toNonScientificString(decodedTransferValue),
89+
decodedTransferValue,
8690
displayTransferValue,
8791
fiatDisplayValue,
8892
pending: pending || isDecodedTransferValuePending,
8993
};
9094
};
91-
92-
export function toNonScientificString(num: number): string {
93-
if (num >= 10e-18) {
94-
return num.toFixed(18).replace(/\.?0+$/u, '');
95-
}
96-
97-
// keep in scientific notation
98-
return num.toString();
99-
}

‎ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx

+15-21
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
77
TEST_CHAINS,
88
} from '../../../../../../../../shared/constants/network';
9+
import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
910
import {
1011
AvatarToken,
1112
AvatarTokenSize,
@@ -23,24 +24,20 @@ import {
2324
TextColor,
2425
TextVariant,
2526
} from '../../../../../../../helpers/constants/design-system';
26-
import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
2727
import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter';
2828
import { getPreferences } from '../../../../../../../selectors';
2929
import { getMultichainNetwork } from '../../../../../../../selectors/multichain';
3030
import { useConfirmContext } from '../../../../../context/confirm';
31-
import {
32-
formatAmount,
33-
formatAmountMaxPrecision,
34-
} from '../../../../simulation-details/formatAmount';
35-
import { toNonScientificString } from '../../hooks/use-token-values';
31+
import { formatAmount } from '../../../../simulation-details/formatAmount';
3632

3733
const NativeSendHeading = () => {
3834
const { currentConfirmation: transactionMeta } =
3935
useConfirmContext<TransactionMeta>();
4036

41-
const nativeAssetTransferValue = new BigNumber(
37+
const nativeAssetTransferValue = calcTokenAmount(
4238
transactionMeta.txParams.value as string,
43-
).dividedBy(new BigNumber(10).pow(18));
39+
18,
40+
);
4441

4542
const conversionRate = useSelector(getConversionRate);
4643
const fiatValue =
@@ -59,9 +56,7 @@ const NativeSendHeading = () => {
5956
const locale = useSelector(getIntlLocale);
6057
const roundedTransferValue = formatAmount(locale, nativeAssetTransferValue);
6158

62-
const transferValue = toNonScientificString(
63-
nativeAssetTransferValue.toNumber(),
64-
);
59+
const transferValue = nativeAssetTransferValue.toFixed();
6560

6661
type TestNetChainId = (typeof TEST_CHAINS)[number];
6762
const isTestnet = TEST_CHAINS.includes(
@@ -83,8 +78,15 @@ const NativeSendHeading = () => {
8378
);
8479

8580
const NativeAssetAmount =
86-
roundedTransferValue ===
87-
`<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? (
81+
roundedTransferValue === transferValue ? (
82+
<Text
83+
variant={TextVariant.headingLg}
84+
color={TextColor.inherit}
85+
marginTop={3}
86+
>
87+
{`${roundedTransferValue} ${ticker}`}
88+
</Text>
89+
) : (
8890
<Tooltip title={transferValue} position="right">
8991
<Text
9092
variant={TextVariant.headingLg}
@@ -94,14 +96,6 @@ const NativeSendHeading = () => {
9496
{`${roundedTransferValue} ${ticker}`}
9597
</Text>
9698
</Tooltip>
97-
) : (
98-
<Text
99-
variant={TextVariant.headingLg}
100-
color={TextColor.inherit}
101-
marginTop={3}
102-
>
103-
{`${roundedTransferValue} ${ticker}`}
104-
</Text>
10599
);
106100

107101
const NativeAssetFiatConversion = Boolean(fiatDisplayValue) &&

‎ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx

+8-13
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
Text,
1010
} from '../../../../../../../components/component-library';
1111
import Tooltip from '../../../../../../../components/ui/tooltip';
12-
import { getIntlLocale } from '../../../../../../../ducks/locale/locale';
1312
import {
1413
AlignItems,
1514
BackgroundColor,
@@ -19,11 +18,9 @@ import {
1918
TextColor,
2019
TextVariant,
2120
} from '../../../../../../../helpers/constants/design-system';
22-
import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
2321
import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
2422
import { getPreferences } from '../../../../../../../selectors';
2523
import { useConfirmContext } from '../../../../../context/confirm';
26-
import { formatAmountMaxPrecision } from '../../../../simulation-details/formatAmount';
2724
import { useTokenValues } from '../../hooks/use-token-values';
2825
import { useTokenDetails } from '../../hooks/useTokenDetails';
2926
import { ConfirmLoader } from '../confirm-loader/confirm-loader';
@@ -32,7 +29,6 @@ const SendHeading = () => {
3229
const t = useI18nContext();
3330
const { currentConfirmation: transactionMeta } =
3431
useConfirmContext<TransactionMeta>();
35-
const locale = useSelector(getIntlLocale);
3632
const { tokenImage, tokenSymbol } = useTokenDetails(transactionMeta);
3733
const {
3834
decodedTransferValue,
@@ -66,21 +62,20 @@ const SendHeading = () => {
6662
);
6763

6864
const TokenValue =
69-
displayTransferValue ===
70-
`<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? (
71-
<Tooltip title={decodedTransferValue.toString()} position="right">
65+
displayTransferValue === decodedTransferValue ? (
66+
<Text
67+
variant={TextVariant.headingLg}
68+
color={TextColor.inherit}
69+
marginTop={3}
70+
>{`${displayTransferValue} ${tokenSymbol}`}</Text>
71+
) : (
72+
<Tooltip title={decodedTransferValue} position="right">
7273
<Text
7374
variant={TextVariant.headingLg}
7475
color={TextColor.inherit}
7576
marginTop={3}
7677
>{`${displayTransferValue} ${tokenSymbol}`}</Text>
7778
</Tooltip>
78-
) : (
79-
<Text
80-
variant={TextVariant.headingLg}
81-
color={TextColor.inherit}
82-
marginTop={3}
83-
>{`${displayTransferValue} ${tokenSymbol}`}</Text>
8479
);
8580

8681
const TokenFiatValue = Boolean(fiatDisplayValue) &&

0 commit comments

Comments
 (0)