diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0be730249..f00a10f6a 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1132,6 +1132,9 @@ "message": "Gas limit must be at least $1", "description": "$1 is the custom gas limit, in decimal." }, + "gasLimitV2": { + "message": "Gas limit" + }, "gasOption": { "message": "Gas option" }, 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 new file mode 100644 index 000000000..4c60cc8fe --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js @@ -0,0 +1,67 @@ +import React, { useEffect, useState } from 'react'; + +import { useGasFeeContext } from '../../../../contexts/gasFee'; +import { TYPOGRAPHY } from '../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import Box from '../../../ui/box'; +import Button from '../../../ui/button'; +import FormField from '../../../ui/form-field'; +import I18nValue from '../../../ui/i18n-value'; +import Typography from '../../../ui/typography'; + +import { useAdvanceGasFeePopoverContext } from '../context'; + +const AdvancedGasFeeGasLimit = () => { + const t = useI18nContext(); + const { + setDirty, + setGasLimit: setGasLimitInContext, + } = useAdvanceGasFeePopoverContext(); + const { gasLimit: gasLimitInTransaction } = useGasFeeContext(); + const [isEditing, setEditing] = useState(false); + const [gasLimit, setGasLimit] = useState(gasLimitInTransaction); + + const updateGasLimit = (value) => { + setGasLimit(value); + setDirty(true); + }; + + useEffect(() => { + setGasLimitInContext(gasLimit); + }, [gasLimit, setGasLimitInContext]); + + if (isEditing) { + return ( + + ); + } + + return ( + + + + + + {gasLimit} + + + + ); +}; + +export default AdvancedGasFeeGasLimit; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js new file mode 100644 index 000000000..2b355f632 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js @@ -0,0 +1,68 @@ +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 { GasFeeContextProvider } from '../../../../contexts/gasFee'; +import configureStore from '../../../../store/store'; + +import { AdvanceGasFeePopoverContextProvider } from '../context'; +import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit'; + +jest.mock('../../../../store/actions', () => ({ + disconnectGasFeeEstimatePoller: jest.fn(), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + removePollingTokenFromAppState: jest.fn(), +})); + +const render = (txProps) => { + const store = configureStore({ + metamask: { + ...mockState.metamask, + accounts: { + [mockState.metamask.selectedAddress]: { + address: mockState.metamask.selectedAddress, + balance: '0x1F4', + }, + }, + advancedGasFee: { priorityFee: 100 }, + featureFlags: { advancedInlineGas: true }, + gasFeeEstimates: + mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates, + }, + }); + + return renderWithProvider( + + + + + , + store, + ); +}; + +describe('AdvancedGasFeeGasLimit', () => { + it('should show GasLimit from transaction', () => { + render(); + expect(screen.getByText('21000')).toBeInTheDocument(); + }); + + it('should show input when edit link is clicked', () => { + render(); + expect(document.getElementsByTagName('input')).toHaveLength(0); + fireEvent.click(screen.queryByText('Edit')); + expect(document.getElementsByTagName('input')[0]).toHaveValue(21000); + }); +}); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js new file mode 100644 index 000000000..8ab2a4041 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js @@ -0,0 +1 @@ +export { default } from './advanced-gas-fee-gas-limit'; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss new file mode 100644 index 000000000..bf88a1dc1 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss @@ -0,0 +1,14 @@ +.advanced-gas-fee-gas-limit { + white-space: nowrap; + + > * { + margin-right: 4px; + } + + a.advanced-gas-fee-gas-limit__edit-link { + @include H7; + + padding: 0; + width: auto; + } +} 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 cda544c81..077d42270 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 @@ -7,6 +7,7 @@ import Popover from '../../ui/popover'; import { AdvanceGasFeePopoverContextProvider } from './context'; import AdvancedGasFeeInputs from './advanced-gas-fee-inputs'; +import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit'; import AdvancedGasFeeSaveButton from './advanced-gas-fee-save'; const AdvancedGasFeePopover = () => { @@ -28,8 +29,10 @@ const AdvancedGasFeePopover = () => { onClose={closeAllModals} footer={} > - + +
+ diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js index d8efd7c7c..d70f64391 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js @@ -14,16 +14,18 @@ const AdvancedGasFeeSaveButton = () => { const { updateTransaction } = useGasFeeContext(); const { isDirty, + gasLimit, maxFeePerGas, maxPriorityFeePerGas, } = useAdvanceGasFeePopoverContext(); const onSave = () => { - updateTransaction( - PRIORITY_LEVELS.CUSTOM, - decGWEIToHexWEI(maxFeePerGas), - decGWEIToHexWEI(maxPriorityFeePerGas), - ); + updateTransaction({ + estimateUsed: PRIORITY_LEVELS.CUSTOM, + maxFeePerGas: decGWEIToHexWEI(maxFeePerGas), + maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas), + gasLimit, + }); closeModal('advancedGasFee'); }; diff --git a/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js b/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js index a6bca0a33..8a63fe697 100644 --- a/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js +++ b/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; export const AdvanceGasFeePopoverContext = createContext({}); export const AdvanceGasFeePopoverContextProvider = ({ children }) => { + const [gasLimit, setGasLimit] = useState(); const [maxFeePerGas, setMaxFeePerGas] = useState(); const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(); const [isDirty, setDirty] = useState(); @@ -11,10 +12,12 @@ export const AdvanceGasFeePopoverContextProvider = ({ children }) => { return ( h6 { + font-size: $font-size-h7; + } } diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index dae43943a..f452ebd3b 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -57,6 +57,7 @@ @import 'loading-network-screen/index'; @import 'flask/experimental-area/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'; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js index fe4480f10..ef7cda900 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -9,7 +9,7 @@ import LoadingHeartBeat from '../../ui/loading-heartbeat'; import Popover from '../../ui/popover'; import Typography from '../../ui/typography/typography'; -import { COLORS } from '../../../helpers/constants/design-system'; +import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; import { useGasFeeContext } from '../../../contexts/gasFee'; import EditGasItem from './edit-gas-item'; @@ -57,7 +57,8 @@ const EditGasFeePopover = () => { className="edit-gas-fee-popover__know-more" align="center" color={COLORS.UI4} - fontSize="12px" + tag={TYPOGRAPHY.Paragraph} + variant={TYPOGRAPHY.H7} > { return (
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js index 2d11ca3cc..0f42519fe 100644 --- a/ui/components/ui/typography/typography.js +++ b/ui/components/ui/typography/typography.js @@ -20,7 +20,6 @@ export default function Typography({ children, fontWeight = 'normal', fontStyle = 'normal', - fontSize, align, boxProps = {}, margin = [1, 0], @@ -34,7 +33,6 @@ export default function Typography({ { [`typography--align-${align}`]: Boolean(align), [`typography--color-${color}`]: Boolean(color), - [`typography--size-${fontSize}`]: Boolean(fontSize), }, ); @@ -69,7 +67,6 @@ Typography.propTypes = { margin: MultipleSizes, fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - fontSize: PropTypes.string, tag: PropTypes.oneOf([ 'p', 'h1', diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss index ea1cbaff3..42f1294d0 100644 --- a/ui/components/ui/typography/typography.scss +++ b/ui/components/ui/typography/typography.scss @@ -33,12 +33,6 @@ } } - @each $size in design-system.$font-size { - &--size-#{$size} { - font-size: $size; - } - } - @each $alignment in design-system.$text-align { &--align-#{$alignment} { text-align: $alignment; diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss index 4a187a949..e9f03e053 100644 --- a/ui/css/design-system/attributes.scss +++ b/ui/css/design-system/attributes.scss @@ -82,4 +82,3 @@ $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item; $text-align: left, right, center, justify, end; $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900; $font-style: normal, italic, oblique; -$font-size: 10px, 12px; diff --git a/ui/hooks/gasFeeInput/useGasFeeInputs.js b/ui/hooks/gasFeeInput/useGasFeeInputs.js index 49864193b..a2c0b89b4 100644 --- a/ui/hooks/gasFeeInput/useGasFeeInputs.js +++ b/ui/hooks/gasFeeInput/useGasFeeInputs.js @@ -23,9 +23,6 @@ import { useMaxPriorityFeePerGasInput } from './useMaxPriorityFeePerGasInput'; import { useGasEstimates } from './useGasEstimates'; import { useTransactionFunctions } from './useTransactionFunctions'; -// eslint-disable-next-line prefer-destructuring -const EIP_1559_V2 = process.env.EIP_1559_V2; - /** * @typedef {Object} GasFeeInputReturnType * @property {DecGweiString} [maxFeePerGas] - the maxFeePerGas input value. @@ -85,6 +82,8 @@ export function useGasFeeInputs( useSelector(checkNetworkAndAccountSupports1559) && !isLegacyTransaction(transaction?.txParams); + const supportsEIP1559V2 = supportsEIP1559 && EIP_1559_V2_ENABLED; + // We need the gas estimates from the GasFeeController in the background. // Calling this hooks initiates polling for new gas estimates and returns the // current estimate. @@ -115,27 +114,31 @@ export function useGasFeeInputs( return PRIORITY_LEVELS.CUSTOM; }); + const [gasLimit, setGasLimit] = useState(() => + Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')), + ); + /** * In EIP-1559 V2 designs change to gas estimate is always updated to transaction * Thus callback setEstimateToUse can be deprecate in favour of this useEffect * so that transaction is source of truth whenever possible. */ useEffect(() => { - if (EIP_1559_V2 && transaction?.userFeeLevel) { - setEstimateUsed(transaction?.userFeeLevel); - setInternalEstimateToUse(transaction?.userFeeLevel); + if (supportsEIP1559V2) { + if (transaction?.userFeeLevel) { + setEstimateUsed(transaction?.userFeeLevel); + setInternalEstimateToUse(transaction?.userFeeLevel); + } + setGasLimit(Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0'))); } }, [ setEstimateUsed, + setGasLimit, setInternalEstimateToUse, + supportsEIP1559V2, transaction, - userPrefersAdvancedGas, ]); - const [gasLimit, setGasLimit] = useState(() => - Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')), - ); - const { gasPrice, setGasPrice, @@ -152,7 +155,7 @@ export function useGasFeeInputs( maxFeePerGasFiat, setMaxFeePerGas, } = useMaxFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -166,7 +169,7 @@ export function useGasFeeInputs( maxPriorityFeePerGasFiat, setMaxPriorityFeePerGas, } = useMaxPriorityFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -316,7 +319,7 @@ export function useGasFeeInputs( hasGasErrors, hasSimulationError, supportsEIP1559, - supportsEIP1559V2: supportsEIP1559 && EIP_1559_V2_ENABLED, + supportsEIP1559V2, updateTransaction, updateTransactionUsingGasFeeEstimates, }; diff --git a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js index 452c0611e..7afc19cfc 100644 --- a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js @@ -34,7 +34,7 @@ const getMaxFeePerGasFromTransaction = (transaction) => { * method to update the setMaxFeePerGas. */ export function useMaxFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -67,10 +67,10 @@ export function useMaxFeePerGasInput({ }); useEffect(() => { - if (EIP_1559_V2) { + if (supportsEIP1559V2) { setMaxFeePerGas(maxFeePerGasFromTransaction); } - }, [EIP_1559_V2, maxFeePerGasFromTransaction, setMaxFeePerGas]); + }, [maxFeePerGasFromTransaction, setMaxFeePerGas, supportsEIP1559V2]); let gasSettings = { gasLimit: decimalToHex(gasLimit), diff --git a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js index 54aeb1093..38e45a3bc 100644 --- a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js @@ -34,7 +34,7 @@ const getMaxPriorityFeePerGasFromTransaction = (transaction) => { * method to update the maxPriorityFeePerGas. */ export function useMaxPriorityFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -63,13 +63,13 @@ export function useMaxPriorityFeePerGasInput({ }); useEffect(() => { - if (EIP_1559_V2) { + if (supportsEIP1559V2) { setMaxPriorityFeePerGas(maxPriorityFeePerGasFromTransaction); } }, [ - EIP_1559_V2, maxPriorityFeePerGasFromTransaction, setMaxPriorityFeePerGas, + supportsEIP1559V2, ]); const maxPriorityFeePerGasToUse = diff --git a/ui/hooks/gasFeeInput/useTransactionFunctions.js b/ui/hooks/gasFeeInput/useTransactionFunctions.js index ab3830266..9975555d6 100644 --- a/ui/hooks/gasFeeInput/useTransactionFunctions.js +++ b/ui/hooks/gasFeeInput/useTransactionFunctions.js @@ -11,13 +11,18 @@ import { updateTransaction as updateTransactionFn } from '../../store/actions'; export const useTransactionFunctions = ({ defaultEstimateToUse, gasFeeEstimates, - gasLimit, + gasLimit: gasLimitInTransaction, transaction, }) => { const dispatch = useDispatch(); const updateTransaction = useCallback( - (estimateUsed, maxFeePerGas, maxPriorityFeePerGas) => { + ({ + estimateUsed, + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit = gasLimitInTransaction, + }) => { const newGasSettings = { gas: decimalToHex(gasLimit), gasLimit: decimalToHex(gasLimit), @@ -42,7 +47,7 @@ export const useTransactionFunctions = ({ dispatch(updateTransactionFn(updatedTxMeta)); }, - [defaultEstimateToUse, dispatch, gasLimit, transaction], + [defaultEstimateToUse, dispatch, gasLimitInTransaction, transaction], ); const updateTransactionUsingGasFeeEstimates = useCallback( @@ -52,21 +57,21 @@ export const useTransactionFunctions = ({ maxFeePerGas, maxPriorityFeePerGas, } = transaction?.dappSuggestedGasFees; - updateTransaction( - PRIORITY_LEVELS.DAPP_SUGGESTED, + updateTransaction({ + estimateUsed: PRIORITY_LEVELS.DAPP_SUGGESTED, maxFeePerGas, maxPriorityFeePerGas, - ); + }); } else { const { suggestedMaxFeePerGas, suggestedMaxPriorityFeePerGas, } = gasFeeEstimates[gasFeeEstimateToUse]; - updateTransaction( - gasFeeEstimateToUse, - decGWEIToHexWEI(suggestedMaxFeePerGas), - decGWEIToHexWEI(suggestedMaxPriorityFeePerGas), - ); + updateTransaction({ + estimateUsed: gasFeeEstimateToUse, + maxFeePerGas: decGWEIToHexWEI(suggestedMaxFeePerGas), + maxPriorityFeePerGas: decGWEIToHexWEI(suggestedMaxPriorityFeePerGas), + }); } }, [gasFeeEstimates, transaction?.dappSuggestedGasFees, updateTransaction], diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index 976bbeb3e..981debb24 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -429,9 +429,7 @@ export default class ConfirmTransactionBase extends Component { ) : null; const renderGasDetailsItem = () => { - return EIP_1559_V2_ENABLED && - supportsEIP1559 && - !isLegacyTransaction(txData) ? ( + return this.supportsEIP1559V2 ? ( this.handleCloseEditGas()} currentTransaction={txData} - supportsEIP1559V2={ - EIP_1559_V2_ENABLED && - supportsEIP1559 && - !isLegacyTransaction(txData) - } + supportsEIP1559V2={this.supportsEIP1559V2} /> ); diff --git a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js index 2cdf2c5ea..5dc8ec487 100644 --- a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js +++ b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { COLORS } from '../../../helpers/constants/design-system'; +import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'; import { useI18nContext } from '../../../hooks/useI18nContext'; @@ -47,15 +47,15 @@ const GasDetailsItem = ({ - + {t('transactionDetailGasTooltipIntro', [ isMainnet ? t('networkNameEthereum') : '', ])} - + {t('transactionDetailGasTooltipExplanation')} - + + }