From 0e421ece8ee9a1c59aff2f50120d3f13cf6c9bdd Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Mon, 7 Mar 2022 23:22:14 +0530 Subject: [PATCH] Fix gas values display in users primary currency inside inputs (#13830) --- .../base-fee-input/base-fee-input.js | 11 ++++++----- .../base-fee-input/base-fee-input.test.js | 16 ++++++++++++++++ .../priority-fee-input/priority-fee-input.js | 11 ++++++----- .../priority-fee-input.test.js | 17 +++++++++++++++++ 4 files changed, 45 insertions(+), 10 deletions(-) diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js index 00b7cc30b..1f2216c49 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js @@ -6,7 +6,7 @@ import { EDIT_GAS_MODES, PRIORITY_LEVELS, } from '../../../../../../shared/constants/gas'; -import { SECONDARY } from '../../../../../helpers/constants/common'; +import { PRIMARY } from '../../../../../helpers/constants/common'; import { bnGreaterThan, bnLessThan, @@ -57,6 +57,7 @@ const BaseFeeInput = () => { editGasMode, } = useGasFeeContext(); const { + gasLimit, maxPriorityFeePerGas, setErrorValue, setMaxFeePerGas, @@ -69,7 +70,7 @@ const BaseFeeInput = () => { baseFeeTrend, } = gasFeeEstimates; const [baseFeeError, setBaseFeeError] = useState(); - const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY); + const { currency, numberOfDecimals } = useUserPreferencedCurrency(PRIMARY); const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); @@ -85,8 +86,8 @@ const BaseFeeInput = () => { return maxFeePerGas; }); - const [, { value: baseFeeInFiat }] = useCurrencyDisplay( - decGWEIToHexWEI(baseFee), + const [baseFeeInPrimaryCurrency] = useCurrencyDisplay( + decGWEIToHexWEI(baseFee * gasLimit), { currency, numberOfDecimals }, ); @@ -128,7 +129,7 @@ const BaseFeeInput = () => { titleUnit={`(${t('gwei')})`} tooltipText={t('advancedBaseGasFeeToolTip')} value={baseFee} - detailText={`≈ ${baseFeeInFiat}`} + detailText={`≈ ${baseFeeInPrimaryCurrency}`} numeric /> ({ @@ -50,6 +51,7 @@ const render = (txProps, contextProps) => { > + , store, @@ -88,14 +90,27 @@ describe('BaseFeeInput', () => { }); expect(document.getElementsByTagName('input')[0]).toHaveValue(200); }); + + it('should show current value of estimatedBaseFee in users primary currency in right side of input box', () => { + render({ + txParams: { + gas: '0x5208', + maxFeePerGas: '0x2E90EDD000', + }, + }); + expect(screen.queryByText('≈ 0.0042 ETH')).toBeInTheDocument(); + }); + it('should show current value of estimatedBaseFee in subtext', () => { render(); expect(screen.queryByText('50 GWEI')).toBeInTheDocument(); }); + it('should show 12hr range value in subtext', () => { render(); expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument(); }); + it('should show error if base fee is less than suggested low value', () => { render({ txParams: { @@ -112,6 +127,7 @@ describe('BaseFeeInput', () => { target: { value: 50 }, }); }); + it('should show error if base if is more than suggested high value', () => { render({ txParams: { diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js index de223da10..58d2758a7 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js @@ -6,7 +6,7 @@ import { EDIT_GAS_MODES, PRIORITY_LEVELS, } from '../../../../../../shared/constants/gas'; -import { SECONDARY } from '../../../../../helpers/constants/common'; +import { PRIMARY } from '../../../../../helpers/constants/common'; import { decGWEIToHexWEI } from '../../../../../helpers/utils/conversions.util'; import { getAdvancedGasFeeValues } from '../../../../../selectors'; import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay'; @@ -48,6 +48,7 @@ const PriorityFeeInput = () => { const t = useI18nContext(); const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); const { + gasLimit, setErrorValue, setMaxPriorityFeePerGas, } = useAdvancedGasFeePopoverContext(); @@ -75,10 +76,10 @@ const PriorityFeeInput = () => { return maxPriorityFeePerGas; }); - const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY); + const { currency, numberOfDecimals } = useUserPreferencedCurrency(PRIMARY); - const [, { value: priorityFeeInFiat }] = useCurrencyDisplay( - decGWEIToHexWEI(priorityFee), + const [priorityFeeInPrimaryCurrency] = useCurrencyDisplay( + decGWEIToHexWEI(priorityFee * gasLimit), { currency, numberOfDecimals }, ); @@ -112,7 +113,7 @@ const PriorityFeeInput = () => { titleUnit={`(${t('gwei')})`} tooltipText={t('advancedPriorityFeeToolTip')} value={priorityFee} - detailText={`≈ ${priorityFeeInFiat}`} + detailText={`≈ ${priorityFeeInPrimaryCurrency}`} numeric /> ({ @@ -50,6 +51,7 @@ const render = (txProps, contextProps) => { > + , store, @@ -63,6 +65,7 @@ describe('PriorityfeeInput', () => { }); expect(document.getElementsByTagName('input')[0]).toHaveValue(100); }); + it('should not use advancedGasFee.priorityfee value for swaps', () => { render( { @@ -78,6 +81,7 @@ describe('PriorityfeeInput', () => { ), ); }); + it('should renders priorityfee value from transaction if current estimate used is custom', () => { render({ txParams: { @@ -86,14 +90,27 @@ describe('PriorityfeeInput', () => { }); expect(document.getElementsByTagName('input')[0]).toHaveValue(2); }); + it('should show current priority fee range in subtext', () => { render(); expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument(); }); + + it('should show current value of priority fee in users primary currency in right side of input box', () => { + render({ + txParams: { + gas: '0x5208', + maxPriorityFeePerGas: '0x77359400', + }, + }); + expect(screen.queryByText('≈ 0.000042 ETH')).toBeInTheDocument(); + }); + it('should show 12hr range value in subtext', () => { render(); expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument(); }); + it('should show error if value entered is 0', () => { render({ txParams: {