From 7cd11a975c66b725de184b7c4fdcb81284231404 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Fri, 17 Dec 2021 13:26:20 -0500
Subject: [PATCH] EIP-1559 V2: Advanced gas fee modal - getting 12 hour ranges
of base fee and priority fee (#12996)
---
test/data/mock-estimates.json | 8 ++++++-
.../base-fee-input/base-fee-input.js | 14 ++++++++---
.../base-fee-input/basefee-input.test.js | 11 +++++++--
.../priority-fee-input/priority-fee-input.js | 10 +++++++-
.../priority-fee-input.test.js | 17 ++++++++++++-
.../advanced-gas-fee-inputs/utils.js | 24 +++++++++++++++++++
6 files changed, 76 insertions(+), 8 deletions(-)
create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js
diff --git a/test/data/mock-estimates.json b/test/data/mock-estimates.json
index 8f7587f92..01bf6adff 100644
--- a/test/data/mock-estimates.json
+++ b/test/data/mock-estimates.json
@@ -20,7 +20,13 @@
"suggestedMaxPriorityFeePerGas": "10",
"suggestedMaxFeePerGas": "100"
},
- "estimatedBaseFee": "50"
+ "estimatedBaseFee": "50",
+ "networkCongestion": 0.5184,
+ "latestPriorityFeeRange": ["1", "20"],
+ "historicalPriorityFeeRange": ["2", "125"],
+ "historicalBaseFeeRange": ["50", "100"],
+ "priorityFeeTrend": "up",
+ "baseFeeTrend": "down"
},
"estimatedGasFeeTimeBounds": {}
}
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 5a90c1739..09accff56 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
@@ -10,6 +10,7 @@ import {
import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
import { bnGreaterThan, bnLessThan } from '../../../../../helpers/utils/util';
import { decGWEIToHexWEI } from '../../../../../helpers/utils/conversions.util';
+
import { getAdvancedGasFeeValues } from '../../../../../selectors';
import { useGasFeeContext } from '../../../../../contexts/gasFee';
import { useI18nContext } from '../../../../../hooks/useI18nContext';
@@ -22,6 +23,10 @@ import I18nValue from '../../../../ui/i18n-value';
import { useAdvancedGasFeePopoverContext } from '../../context';
import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
+import {
+ roundToDecimalPlacesRemovingExtraZeroes,
+ renderFeeRange,
+} from '../utils';
const divideCurrencyValues = (value, baseFee) => {
if (baseFee === 0) {
@@ -79,7 +84,7 @@ const BaseFeeInput = () => {
setMaxFeePerGas,
} = useAdvancedGasFeePopoverContext();
- const { estimatedBaseFee } = gasFeeEstimates;
+ const { estimatedBaseFee, historicalBaseFeeRange } = gasFeeEstimates;
const [baseFeeError, setBaseFeeError] = useState();
const {
numberOfDecimals: numberOfDecimalsPrimary,
@@ -198,8 +203,11 @@ const BaseFeeInput = () => {
numeric
/>
);
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js
index 7540fdf65..f34d8e2c5 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js
@@ -113,9 +113,16 @@ describe('BaseFeeInput', () => {
maxFeePerGas: '0x174876E800',
},
});
- expect(screen.queryByText('50')).toBeInTheDocument();
+ expect(screen.queryByText('50 GWEI')).toBeInTheDocument();
+ });
+ it('should show 12hr range value in subtext', () => {
+ render({
+ txParams: {
+ maxFeePerGas: '0x174876E800',
+ },
+ });
+ expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument();
});
-
it('should show error if base fee is less than suggested low 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 fbf1da2b5..ab1f20056 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
@@ -15,6 +15,7 @@ import { bnGreaterThan, bnLessThan } from '../../../../../helpers/utils/util';
import { useAdvancedGasFeePopoverContext } from '../../context';
import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
+import { renderFeeRange } from '../utils';
const validatePriorityFee = (value, gasFeeEstimates) => {
if (value <= 0) {
@@ -51,6 +52,10 @@ const PriorityFeeInput = () => {
gasFeeEstimates,
maxPriorityFeePerGas,
} = useGasFeeContext();
+ const {
+ latestPriorityFeeRange,
+ historicalPriorityFeeRange,
+ } = gasFeeEstimates;
const [priorityFeeError, setPriorityFeeError] = useState();
const [priorityFee, setPriorityFee] = useState(() => {
@@ -101,7 +106,10 @@ const PriorityFeeInput = () => {
detailText={`≈ ${priorityFeeInFiat}`}
numeric
/>
-
+
);
};
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js
index 7657b7ebc..19413c231 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js
@@ -68,7 +68,22 @@ describe('PriorityfeeInput', () => {
});
expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
});
-
+ it('should show current priority fee range in subtext', () => {
+ render({
+ txParams: {
+ maxFeePerGas: '0x174876E800',
+ },
+ });
+ expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument();
+ });
+ it('should show 12hr range value in subtext', () => {
+ render({
+ txParams: {
+ maxFeePerGas: '0x174876E800',
+ },
+ });
+ expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument();
+ });
it('should show error if value entered is 0', () => {
render({
txParams: {
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js
new file mode 100644
index 000000000..4dfa8852a
--- /dev/null
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js
@@ -0,0 +1,24 @@
+import { uniq } from 'lodash';
+import { toBigNumber } from '../../../../../shared/modules/conversion.utils';
+
+export function roundToDecimalPlacesRemovingExtraZeroes(
+ numberish,
+ numberOfDecimalPlaces,
+) {
+ if (numberish) {
+ return toBigNumber.dec(
+ toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
+ );
+ }
+ return null;
+}
+
+export const renderFeeRange = (feeRange) => {
+ if (feeRange) {
+ const formattedRange = uniq(
+ feeRange.map((fee) => roundToDecimalPlacesRemovingExtraZeroes(fee, 2)),
+ ).join(' - ');
+ return `${formattedRange} GWEI`;
+ }
+ return null;
+};