Skip to content

Commit 3de0647

Browse files
pedronfigueiredopedronfigueiredo
committed
Address comments
1 parent 2e98805 commit 3de0647

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';
@@ -27,13 +28,16 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
2728
useMemo(() => {
2829
if (!value) {
2930
return {
30-
decodedTransferValue: 0,
31+
decodedTransferValue: '0',
3132
isDecodedTransferValuePending: false,
3233
};
3334
}
3435

3536
if (!decimals) {
36-
return { decodedTransferValue: 0, isDecodedTransferValuePending: true };
37+
return {
38+
decodedTransferValue: '0',
39+
isDecodedTransferValuePending: true,
40+
};
3741
}
3842

3943
const paramIndex = value.data[0].params.findIndex(
@@ -45,19 +49,19 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
4549
);
4650
if (paramIndex === -1) {
4751
return {
48-
decodedTransferValue: 0,
52+
decodedTransferValue: '0',
4953
isDecodedTransferValuePending: false,
5054
};
5155
}
5256

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

6367
const [exchangeRate, setExchangeRate] = useState<Numeric | undefined>();
@@ -83,18 +87,9 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
8387
);
8488

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

‎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,
@@ -22,29 +23,25 @@ import {
2223
TextColor,
2324
TextVariant,
2425
} from '../../../../../../../helpers/constants/design-system';
25-
import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
2626
import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter';
2727
import {
2828
getPreferences,
2929
selectConversionRateByChainId,
3030
} from '../../../../../../../selectors';
3131
import { getMultichainNetwork } from '../../../../../../../selectors/multichain';
3232
import { useConfirmContext } from '../../../../../context/confirm';
33-
import {
34-
formatAmount,
35-
formatAmountMaxPrecision,
36-
} from '../../../../simulation-details/formatAmount';
37-
import { toNonScientificString } from '../../hooks/use-token-values';
33+
import { formatAmount } from '../../../../simulation-details/formatAmount';
3834

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

4339
const { chainId } = transactionMeta;
4440

45-
const nativeAssetTransferValue = new BigNumber(
41+
const nativeAssetTransferValue = calcTokenAmount(
4642
transactionMeta.txParams.value as string,
47-
).dividedBy(new BigNumber(10).pow(18));
43+
18,
44+
);
4845

4946
const conversionRate = useSelector((state) =>
5047
selectConversionRateByChainId(state, chainId),
@@ -66,9 +63,7 @@ const NativeSendHeading = () => {
6663
const locale = useSelector(getIntlLocale);
6764
const roundedTransferValue = formatAmount(locale, nativeAssetTransferValue);
6865

69-
const transferValue = toNonScientificString(
70-
nativeAssetTransferValue.toNumber(),
71-
);
66+
const transferValue = nativeAssetTransferValue.toFixed();
7267

7368
type TestNetChainId = (typeof TEST_CHAINS)[number];
7469
const isTestnet = TEST_CHAINS.includes(
@@ -90,8 +85,15 @@ const NativeSendHeading = () => {
9085
);
9186

9287
const NativeAssetAmount =
93-
roundedTransferValue ===
94-
`<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? (
88+
roundedTransferValue === transferValue ? (
89+
<Text
90+
variant={TextVariant.headingLg}
91+
color={TextColor.inherit}
92+
marginTop={3}
93+
>
94+
{`${roundedTransferValue} ${ticker}`}
95+
</Text>
96+
) : (
9597
<Tooltip title={transferValue} position="right">
9698
<Text
9799
variant={TextVariant.headingLg}
@@ -101,14 +103,6 @@ const NativeSendHeading = () => {
101103
{`${roundedTransferValue} ${ticker}`}
102104
</Text>
103105
</Tooltip>
104-
) : (
105-
<Text
106-
variant={TextVariant.headingLg}
107-
color={TextColor.inherit}
108-
marginTop={3}
109-
>
110-
{`${roundedTransferValue} ${ticker}`}
111-
</Text>
112106
);
113107

114108
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)