diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 991b1bd4e..3addb45ba 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -820,15 +820,18 @@ "editGasLow": { "message": "Low" }, + "editGasMaxBaseFeeGWEIImbalance": { + "message": "Max base fee cannot be lower than priority fee" + }, "editGasMaxBaseFeeHigh": { "message": "Max base fee is higher than necessary" }, - "editGasMaxBaseFeeImbalance": { - "message": "Max base fee cannot be lower than priority fee" - }, "editGasMaxBaseFeeLow": { "message": "Max base fee is low for current network conditions" }, + "editGasMaxBaseFeeMultiplierImbalance": { + "message": "Multiplier is low relative to Priority fee" + }, "editGasMaxFeeHigh": { "message": "Max fee is higher than necessary" }, diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js index 40c003237..de7291b07 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import Box from '../../../ui/box'; import I18nValue from '../../../ui/i18n-value'; +import LoadingHeartBeat from '../../../ui/loading-heartbeat'; const AdvancedGasFeeInputSubtext = ({ latest, historical }) => { return ( @@ -11,14 +12,20 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => { - {latest} + + + {latest} + - {historical} + + + {historical} + ); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js index f466a08f0..c2a9c51a3 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js @@ -1,8 +1,48 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; +import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; +import mockEstimates from '../../../../../test/data/mock-estimates.json'; +import mockState from '../../../../../test/data/mock-state.json'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import configureStore from '../../../../store/store'; import AdvancedGasFeeInputSubtext from './advanced-gas-fee-input-subtext'; +jest.mock('../../../../store/actions', () => ({ + disconnectGasFeeEstimatePoller: jest.fn(), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + removePollingTokenFromAppState: jest.fn(), +})); + +const render = () => { + 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('AdvancedGasFeeInputSubtext', () => { it('should renders latest and historical values passed', () => { render( diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss index 45763668c..7a1d71717 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss @@ -10,6 +10,10 @@ margin-right: 4px; } + &__value { + position: relative; + } + img { height: 16px; margin-right: 8px; 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 85e17883e..5a90c1739 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 @@ -41,9 +41,16 @@ const multiplyCurrencyValues = (baseFee, value, numberOfDecimals) => multiplierBase: 10, }).toNumber(); -const validateBaseFee = (value, gasFeeEstimates, maxPriorityFeePerGas) => { +const validateBaseFee = ( + editingInGwei, + value, + gasFeeEstimates, + maxPriorityFeePerGas, +) => { if (bnGreaterThan(maxPriorityFeePerGas, value)) { - return 'editGasMaxBaseFeeImbalance'; + return editingInGwei + ? 'editGasMaxBaseFeeGWEIImbalance' + : 'editGasMaxBaseFeeMultiplierImbalance'; } if ( gasFeeEstimates?.low && @@ -145,14 +152,20 @@ const BaseFeeInput = () => { useEffect(() => { setMaxFeePerGas(maxBaseFeeGWEI); const error = validateBaseFee( + editingInGwei, maxBaseFeeGWEI, gasFeeEstimates, maxPriorityFeePerGas, ); setBaseFeeError(error); - setErrorValue('maxFeePerGas', error === 'editGasMaxBaseFeeImbalance'); + setErrorValue( + 'maxFeePerGas', + error === 'editGasMaxBaseFeeGWEIImbalance' || + error === 'editGasMaxBaseFeeMultiplierImbalance', + ); }, [ + editingInGwei, gasFeeEstimates, maxBaseFeeGWEI, maxPriorityFeePerGas, diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss index 2783e08d4..7a0777f98 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss @@ -91,7 +91,9 @@ margin-top: auto; } - &__currency-container { + &__currency-container, + &__total-amount, + &__total-value { position: relative; } } 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 2f2219e9e..1934bb1d1 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 @@ -5,7 +5,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTransactionModalContext } from '../../../contexts/transaction-modal'; import ErrorMessage from '../../ui/error-message'; import I18nValue from '../../ui/i18n-value'; -import LoadingHeartBeat from '../../ui/loading-heartbeat'; import Popover from '../../ui/popover'; import Typography from '../../ui/typography/typography'; @@ -29,7 +28,6 @@ const EditGasFeePopover = () => { className="edit-gas-fee-popover" > <> - {process.env.IN_TEST ? null : }
{balanceError && ( diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js index ce5b1b87a..5ec52c3eb 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js @@ -12,6 +12,7 @@ import { decimalToHex, hexWEIToDecGWEI, } from '../../../../helpers/utils/conversions.util'; +import LoadingHeartBeat from '../../../ui/loading-heartbeat'; import { getAdvancedGasFeeValues } from '../../../../selectors'; import { toHumanReadableTime } from '../../../../helpers/utils/util'; import { useGasFeeContext } from '../../../../contexts/gasFee'; @@ -138,11 +139,14 @@ const EditGasItem = ({ priorityLevel }) => { className={`edit-gas-item__fee-estimate edit-gas-item__fee-estimate-${priorityLevel}`} > {hexMaximumTransactionFee ? ( - +
+ + +
) : ( '--' )} diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss index 039949c8c..942c77732 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss @@ -39,6 +39,10 @@ } } + &__maxfee { + position: relative; + } + &__time-estimate { display: inline-block; text-align: left; diff --git a/ui/components/ui/loading-heartbeat/index.js b/ui/components/ui/loading-heartbeat/index.js index 2c8e491e8..189d0cc2b 100644 --- a/ui/components/ui/loading-heartbeat/index.js +++ b/ui/components/ui/loading-heartbeat/index.js @@ -11,6 +11,8 @@ export default function LoadingHeartBeat() { useShouldAnimateGasEstimations(); const active = useSelector(getGasLoadingAnimationIsShowing); + if (process.env.IN_TEST) return null; + return (
+
+ + +
); } return useNativeCurrencyAsPrimaryCurrency @@ -384,12 +387,15 @@ export default class ConfirmTransactionBase extends Component { secondaryTotalTextOverride === undefined ) { return ( - +
+ + +
); } return useNativeCurrencyAsPrimaryCurrency @@ -612,12 +618,13 @@ export default class ConfirmTransactionBase extends Component { detailTotal={renderTotalDetailTotal()} subTitle={t('transactionDetailGasTotalSubtitle')} subText={ - <> +
+ {t('editGasSubTextAmountLabel')} {renderTotalMaxAmount()} - +
} /> ), 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 5dc8ec487..b1da75049 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 @@ -17,8 +17,6 @@ import TransactionDetailItem from '../../../components/app/transaction-detail-it import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'; import { useGasFeeContext } from '../../../contexts/gasFee'; -const HeartBeat = () => (process.env.IN_TEST ? null : ); - const GasDetailsItem = ({ hexMaximumTransactionFee, hexMinimumTransactionFee, @@ -73,7 +71,7 @@ const GasDetailsItem = ({ detailTitleColor={COLORS.BLACK} detailText={
- + - + + {estimateUsed === 'high' && '⚠ '} @@ -110,7 +109,7 @@ const GasDetailsItem = ({ key="editGasSubTextFeeValue" className="gas-details-item__currency-container" > - +