From 8c77e37d2a3970d6607cb9d69f42b99816fc79c2 Mon Sep 17 00:00:00 2001 From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com> Date: Tue, 21 Dec 2021 14:45:28 -0500 Subject: [PATCH] EIP-1559 V2: Adding default settings to advanced gas modal (#12911) --- app/_locales/en/messages.json | 9 ++ .../advanced-gas-fee-defaults.js | 80 +++++++++++ .../advanced-gas-fee-defaults.test.js | 132 ++++++++++++++++++ .../advanced-gas-fee-defaults/index.js | 1 + .../advanced-gas-fee-defaults/index.scss | 6 + .../advanced-gas-fee-gas-limit.js | 1 + .../advanced-gas-fee-inputs.js | 2 +- .../base-fee-input/base-fee-input.js | 8 +- .../advanced-gas-fee-inputs/index.scss | 2 +- .../priority-fee-input/priority-fee-input.js | 5 +- .../advanced-gas-fee-popover.js | 5 +- .../context/advancedGasFeePopover.js | 3 + .../app/advanced-gas-fee-popover/index.scss | 17 ++- ui/components/app/app-components.scss | 3 +- 14 files changed, 261 insertions(+), 13 deletions(-) create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9739fcf7c..767d0d9f4 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -170,6 +170,12 @@ "advancedBaseGasFeeToolTip": { "message": "When your transaction gets included in the block, any difference between your max base fee and the actual base fee will be refunded. Total amount is calculated as max base fee (in GWEI) * gas limit." }, + "advancedGasFeeDefaultOptIn": { + "message": "Save these $1 as my default for \"Advanced\"" + }, + "advancedGasFeeDefaultOptOut": { + "message": "Always use these values and advanced setting as default." + }, "advancedGasFeeModalTitle": { "message": "Advanced gas fee" }, @@ -1851,6 +1857,9 @@ "newTransactionFee": { "message": "New Transaction Fee" }, + "newValues": { + "message": "new values" + }, "next": { "message": "Next" }, diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js new file mode 100644 index 000000000..affe7a79a --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { useSelector, useDispatch } from 'react-redux'; + +import Box from '../../../ui/box'; +import Typography from '../../../ui/typography'; +import CheckBox from '../../../ui/check-box'; +import I18nValue from '../../../ui/i18n-value'; +import { + COLORS, + DISPLAY, + FLEX_DIRECTION, + TYPOGRAPHY, +} from '../../../../helpers/constants/design-system'; +import { getAdvancedGasFeeValues } from '../../../../selectors'; +import { setAdvancedGasFee } from '../../../../store/actions'; + +import { useAdvancedGasFeePopoverContext } from '../context'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; + +const AdvancedGasFeeDefaults = () => { + const t = useI18nContext(); + const dispatch = useDispatch(); + + const { + hasErrors, + baseFeeMultiplier, + maxPriorityFeePerGas, + } = useAdvancedGasFeePopoverContext(); + const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); + + const updateDefaultSettings = (value) => { + if (value) { + dispatch( + setAdvancedGasFee({ + maxBaseFee: baseFeeMultiplier, + priorityFee: maxPriorityFeePerGas, + }), + ); + } else { + dispatch(setAdvancedGasFee(null)); + } + }; + const isDefaultSettingsSelected = + Boolean(advancedGasFeeValues) && + advancedGasFeeValues.maxBaseFee === baseFeeMultiplier && + advancedGasFeeValues.priorityFee === maxPriorityFeePerGas; + + const handleUpdateDefaultSettings = () => + updateDefaultSettings(!isDefaultSettingsSelected); + + return ( + + + + {!isDefaultSettingsSelected && Boolean(advancedGasFeeValues) ? ( + {t('newValues')}, + ]} + /> + ) : ( + + )} + + + ); +}; + +export default AdvancedGasFeeDefaults; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js new file mode 100644 index 000000000..008565945 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js @@ -0,0 +1,132 @@ +import React from 'react'; +import { fireEvent, screen } from '@testing-library/react'; + +import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import mockEstimates from '../../../../../test/data/mock-estimates.json'; +import mockState from '../../../../../test/data/mock-state.json'; + +import { AdvancedGasFeePopoverContextProvider } from '../context'; +import { GasFeeContextProvider } from '../../../../contexts/gasFee'; +import configureStore from '../../../../store/store'; + +import AdvancedGasFeeInputs from '../advanced-gas-fee-inputs'; +import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults'; + +jest.mock('../../../../store/actions', () => ({ + disconnectGasFeeEstimatePoller: jest.fn(), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + removePollingTokenFromAppState: jest.fn(), +})); + +const render = (defaultGasParams) => { + const store = configureStore({ + metamask: { + ...mockState.metamask, + ...defaultGasParams, + accounts: { + [mockState.metamask.selectedAddress]: { + address: mockState.metamask.selectedAddress, + balance: '0x1F4', + }, + }, + featureFlags: { advancedInlineGas: true }, + gasFeeEstimates: + mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates, + }, + }); + return renderWithProvider( + + + + + + , + store, + ); +}; +describe('AdvancedGasFeeDefaults', () => { + it('should renders correct message when the default is not set', () => { + render({ advancedGasFee: null }); + expect( + screen.queryByText( + 'Always use these values and advanced setting as default.', + ), + ).toBeInTheDocument(); + }); + it('should renders correct message when the default values are set', () => { + render({ + advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, + }); + expect( + screen.queryByText( + 'Always use these values and advanced setting as default.', + ), + ).toBeInTheDocument(); + }); + it('should renders correct message when checkbox is selected and default values are saved', () => { + render({ + advancedGasFee: null, + }); + expect( + screen.queryByText( + 'Always use these values and advanced setting as default.', + ), + ).toBeInTheDocument(); + fireEvent.change(document.getElementsByTagName('input')[0], { + target: { value: 3 }, + }); + fireEvent.change(document.getElementsByTagName('input')[1], { + target: { value: 4 }, + }); + }); + it('should renders correct message when the default values are set and the maxBaseFee values are updated', () => { + render({ + advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, + }); + expect(document.getElementsByTagName('input')[2]).toBeChecked(); + expect( + screen.queryByText( + 'Always use these values and advanced setting as default.', + ), + ).toBeInTheDocument(); + fireEvent.change(document.getElementsByTagName('input')[0], { + target: { value: 4 }, + }); + expect(document.getElementsByTagName('input')[0]).toHaveValue(4); + expect(screen.queryByText('new values')).toBeInTheDocument(); + expect( + screen.queryByText('Save these as my default for "Advanced"'), + ).toBeInTheDocument(); + }); + it('should renders correct message when the default values are set and the priorityFee values are updated', () => { + render({ + advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, + }); + expect(document.getElementsByTagName('input')[2]).toBeChecked(); + expect( + screen.queryByText( + 'Always use these values and advanced setting as default.', + ), + ).toBeInTheDocument(); + fireEvent.change(document.getElementsByTagName('input')[1], { + target: { value: 4 }, + }); + expect(document.getElementsByTagName('input')[1]).toHaveValue(4); + expect(screen.queryByText('new values')).toBeInTheDocument(); + expect( + screen.queryByText('Save these as my default for "Advanced"'), + ).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.js new file mode 100644 index 000000000..6b63ee447 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.js @@ -0,0 +1 @@ +export { default } from './advanced-gas-fee-defaults'; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss new file mode 100644 index 000000000..814dd4722 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss @@ -0,0 +1,6 @@ +.advanced-gas-fee-defaults { + & &__checkbox { + font-size: $font-size-h4; + margin: 0 8px 0 8px; + } +} diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js index e1efdfc00..db5a2a6f8 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js @@ -63,6 +63,7 @@ const AdvancedGasFeeGasLimit = () => { tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7} className="advanced-gas-fee-gas-limit" + margin={[0, 2]} > diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/advanced-gas-fee-inputs.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/advanced-gas-fee-inputs.js index 070e2f7b0..f6f1eaea3 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/advanced-gas-fee-inputs.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/advanced-gas-fee-inputs.js @@ -6,7 +6,7 @@ import PriorityFeeInput from './priority-fee-input'; const AdvancedGasFeeInputs = () => { return ( - +
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 5d2ebd8e6..f47ee7573 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,7 +10,6 @@ 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'; @@ -77,11 +76,13 @@ const validateBaseFee = ( const BaseFeeInput = () => { const t = useI18nContext(); + const { gasFeeEstimates, estimateUsed, maxFeePerGas } = useGasFeeContext(); const { maxPriorityFeePerGas, setErrorValue, setMaxFeePerGas, + setBaseFeeMultiplier, } = useAdvancedGasFeePopoverContext(); const { @@ -177,6 +178,7 @@ const BaseFeeInput = () => { if (baseFeeTrend !== 'level' && baseFeeTrend !== feeTrend) { setFeeTrend(baseFeeTrend); } + setBaseFeeMultiplier(maxBaseFeeMultiplier); }, [ feeTrend, editingInGwei, @@ -184,14 +186,16 @@ const BaseFeeInput = () => { gasFeeEstimates, maxBaseFeeGWEI, maxPriorityFeePerGas, + maxBaseFeeMultiplier, setBaseFeeError, setErrorValue, setMaxFeePerGas, setFeeTrend, + setBaseFeeMultiplier, ]); return ( - + { ]); return ( - <> + { historical={renderFeeRange(historicalPriorityFeeRange)} feeTrend={feeTrend} /> - + ); }; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js index e631fa2b1..65eae89a3 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js @@ -9,6 +9,7 @@ import { AdvancedGasFeePopoverContextProvider } from './context'; import AdvancedGasFeeInputs from './advanced-gas-fee-inputs'; import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit'; import AdvancedGasFeeSaveButton from './advanced-gas-fee-save'; +import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults'; const AdvancedGasFeePopover = () => { const t = useI18nContext(); @@ -29,9 +30,11 @@ const AdvancedGasFeePopover = () => { onClose={closeAllModals} footer={} > - +
+ +
diff --git a/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js b/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js index 5297f3902..74ff01272 100644 --- a/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js +++ b/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js @@ -20,6 +20,7 @@ export const AdvancedGasFeePopoverContextProvider = ({ children }) => { }, [errors, setErrors], ); + const [baseFeeMultiplier, setBaseFeeMultiplier] = useState(); return ( { maxFeePerGas, maxPriorityFeePerGas, setErrorValue, + baseFeeMultiplier, setGasLimit, setMaxPriorityFeePerGas, setMaxFeePerGas, + setBaseFeeMultiplier, }} > {children} diff --git a/ui/components/app/advanced-gas-fee-popover/index.scss b/ui/components/app/advanced-gas-fee-popover/index.scss index a9ac727ed..2cc8d679d 100644 --- a/ui/components/app/advanced-gas-fee-popover/index.scss +++ b/ui/components/app/advanced-gas-fee-popover/index.scss @@ -1,14 +1,21 @@ .advanced-gas-fee-popover { - &__wrapper { - border-top: 1px solid $ui-grey; - } - &__separator { border-top: 1px solid $ui-grey; - margin: 24px 0 16px 0; + margin: 16px 0; } .form-field__heading-title > h6 { font-size: $font-size-h7; } + + .popover-header { + border-radius: 0; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom: 1px solid $ui-grey; + } + + .popover-footer { + border-top: none; + } } diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 756d1bc18..079337c45 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -62,9 +62,10 @@ @import 'whats-new-popup/index'; @import 'loading-network-screen/index'; @import 'flask/experimental-area/index'; +@import 'transaction-decoding/index'; @import 'advanced-gas-fee-popover/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index'; -@import 'transaction-decoding/index'; +@import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index';