diff --git a/app/images/curve-high.svg b/app/images/curve-high.svg index bd6d8d0ce..f8d0f0c00 100644 --- a/app/images/curve-high.svg +++ b/app/images/curve-high.svg @@ -1,25 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/app/images/curve-low.svg b/app/images/curve-low.svg index 9f98826ea..385f89f86 100644 --- a/app/images/curve-low.svg +++ b/app/images/curve-low.svg @@ -1,20 +1 @@ - - - - - - - - - - - - - - - - - - - - + diff --git a/app/images/curve-medium.svg b/app/images/curve-medium.svg index 9a454bc99..e8a8f6a3f 100644 --- a/app/images/curve-medium.svg +++ b/app/images/curve-medium.svg @@ -1,16 +1 @@ - - - - - - - - - - - - - - - - + diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js index 771fc0ee7..217ad82eb 100644 --- a/app/scripts/controllers/transactions/index.js +++ b/app/scripts/controllers/transactions/index.js @@ -434,7 +434,6 @@ export default class TransactionController extends EventEmitter { gasLimit: defaultGasLimit, simulationFails, } = await this._getDefaultGasLimit(txMeta, getCodeResponse); - const advancedGasFeeDefaultValues = this.getAdvancedGasFee(); // eslint-disable-next-line no-param-reassign txMeta = this.txStateManager.getTransaction(txMeta.id); @@ -444,6 +443,7 @@ export default class TransactionController extends EventEmitter { if (eip1559Compatibility) { const { eip1559V2Enabled } = this.preferencesStore.getState(); + const advancedGasFeeDefaultValues = this.getAdvancedGasFee(); if (eip1559V2Enabled && Boolean(advancedGasFeeDefaultValues)) { txMeta.userFeeLevel = CUSTOM_GAS_ESTIMATE; txMeta.txParams.maxFeePerGas = decGWEIToHexWEI( 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 index a5b7c04c4..6cd7a20e6 100644 --- 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 @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; +import { EDIT_GAS_MODES } from '../../../../../shared/constants/gas'; import Box from '../../../ui/box'; import Typography from '../../../ui/typography'; import CheckBox from '../../../ui/check-box'; @@ -12,6 +13,7 @@ import { } from '../../../../helpers/constants/design-system'; import { getAdvancedGasFeeValues } from '../../../../selectors'; import { setAdvancedGasFee } from '../../../../store/actions'; +import { useGasFeeContext } from '../../../../contexts/gasFee'; import { useAdvancedGasFeePopoverContext } from '../context'; import { useI18nContext } from '../../../../hooks/useI18nContext'; @@ -25,6 +27,7 @@ const AdvancedGasFeeDefaults = () => { maxPriorityFeePerGas, } = useAdvancedGasFeePopoverContext(); const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); + const { editGasMode } = useGasFeeContext(); const [isDefaultSettingsSelected, setDefaultSettingsSelected] = useState( Boolean(advancedGasFeeValues) && @@ -55,11 +58,15 @@ const AdvancedGasFeeDefaults = () => { } }; + if (editGasMode === EDIT_GAS_MODES.SWAPS) { + return null; + } + return ( 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 index e7e280889..8fb127311 100644 --- 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 @@ -1,7 +1,10 @@ import React from 'react'; import { fireEvent, screen } from '@testing-library/react'; -import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; +import { + EDIT_GAS_MODES, + 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'; @@ -24,7 +27,7 @@ jest.mock('../../../../store/actions', () => ({ setAdvancedGasFee: jest.fn(), })); -const render = (defaultGasParams) => { +const render = (defaultGasParams, contextParams) => { const store = configureStore({ metamask: { ...mockState.metamask, @@ -45,6 +48,7 @@ const render = (defaultGasParams) => { transaction={{ userFeeLevel: 'medium', }} + {...contextParams} > @@ -57,11 +61,7 @@ const render = (defaultGasParams) => { 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(); + expect(screen.queryByText('new values')).toBeInTheDocument(); }); it('should renders correct message when the default values are set', () => { render({ @@ -73,22 +73,6 @@ describe('AdvancedGasFeeDefaults', () => { ), ).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: 100 }, - }); - 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: 50, priorityFee: 2 }, @@ -144,4 +128,11 @@ describe('AdvancedGasFeeDefaults', () => { fireEvent.click(checkbox); expect(mock).toHaveBeenCalledTimes(2); }); + + it('should not render option to set default gas options in a swaps transaction', () => { + render({}, { editGasMode: EDIT_GAS_MODES.SWAPS }); + expect( + document.querySelector('input[type=checkbox]'), + ).not.toBeInTheDocument(); + }); }); 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 index 771e3a1cb..90c37de2b 100644 --- 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 @@ -1,7 +1,10 @@ .advanced-gas-fee-defaults { + border-top: 1px solid var(--ui-grey); + padding-top: 16px; + & &__checkbox { font-size: $font-size-h4; - margin: 0 8px 0 8px; + margin: 0 8px; } &__label { 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 facc3b132..c5e42146b 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 @@ -64,7 +64,7 @@ const AdvancedGasFeeGasLimit = () => { tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7} className="advanced-gas-fee-gas-limit" - margin={[0, 2]} + margin={[4, 2, 0, 2]} > 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 index 562a00db3..27db64b06 100644 --- 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 @@ -2,6 +2,8 @@ display: flex; align-items: center; white-space: nowrap; + border-top: 1px solid var(--ui-grey); + padding-top: 16px; > * { margin-right: 4px; 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 f6f1eaea3..dcbbeff0a 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 @@ -8,7 +8,6 @@ const AdvancedGasFeeInputs = () => { return ( -
); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss index 60dda01ed..875d199d1 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss @@ -6,9 +6,4 @@ .form-field__heading-title > h6 { font-size: $font-size-h7; } - - &__separator { - border-top: 1px solid var(--ui-grey); - margin: 16px 0; - } } diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/index.scss new file mode 100644 index 000000000..5d212fd90 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/index.scss @@ -0,0 +1,4 @@ +.priority-fee-input { + border-top: 1px solid var(--ui-grey); + padding-top: 16px; +} 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 5fc92121b..b4f277070 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 @@ -98,7 +98,7 @@ const PriorityFeeInput = () => { ]); return ( - + { > -
-
diff --git a/ui/components/app/advanced-gas-fee-popover/index.scss b/ui/components/app/advanced-gas-fee-popover/index.scss index a512495e4..4aab51f56 100644 --- a/ui/components/app/advanced-gas-fee-popover/index.scss +++ b/ui/components/app/advanced-gas-fee-popover/index.scss @@ -1,9 +1,4 @@ .advanced-gas-fee-popover { - &__separator { - border-top: 1px solid var(--ui-grey); - margin: 16px 0; - } - .form-field__heading-title > h6 { font-size: $font-size-h7; } diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index fdeaf9b54..4cfede5e5 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -72,6 +72,7 @@ @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-inputs/priority-fee-input/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index'; @import 'currency-input/index'; diff --git a/ui/components/app/app-loading-spinner/index.scss b/ui/components/app/app-loading-spinner/index.scss index 7f12ef827..271b40c9d 100644 --- a/ui/components/app/app-loading-spinner/index.scss +++ b/ui/components/app/app-loading-spinner/index.scss @@ -6,6 +6,7 @@ position: absolute; height: 100%; width: 100%; + z-index: 1; &__inner { width: 50px; diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js index fdd18a420..f9f57d8fc 100644 --- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js +++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js @@ -142,7 +142,7 @@ const CancelSpeedupPopover = () => { marginTop={4} > - + {!appIsLoading && } diff --git a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js index 468624408..ef59c761a 100644 --- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js +++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js @@ -54,7 +54,7 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { > {icon && ( - {`${PRIORITY_LEVEL_ICON_MAP[icon]} `} + {PRIORITY_LEVEL_ICON_MAP[icon]} )} {t(title)} diff --git a/ui/components/app/edit-gas-fee-button/index.scss b/ui/components/app/edit-gas-fee-button/index.scss index e2787a829..ada2348fc 100644 --- a/ui/components/app/edit-gas-fee-button/index.scss +++ b/ui/components/app/edit-gas-fee-button/index.scss @@ -22,6 +22,7 @@ &__icon { font-size: 16px; + margin-right: 4px; } &__label { diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js index 0a80a8c63..0447513a2 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js @@ -9,6 +9,7 @@ import { FONT_WEIGHT, TYPOGRAPHY, } from '../../../../helpers/constants/design-system'; +import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas'; import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util'; import Typography from '../../../ui/typography'; @@ -88,15 +89,20 @@ const EditGasToolTip = ({ imgAltText = t('curveHighGasEstimate'); } + // Gas estimate curve is visible for low/medium/high gas estimates + // the curve is not visible for high estimates for swaps + // also it is not visible in case of cancel/speedup if the medium/high option is disabled + const showGasEstimateCurve = + isMetamaskSuggestedGasEstimate(priorityLevel) && + !( + priorityLevel === PRIORITY_LEVELS.HIGH && + editGasMode === EDIT_GAS_MODES.SWAPS + ) && + !estimateGreaterThanGasUse; + return (
- {priorityLevel !== PRIORITY_LEVELS.CUSTOM && - priorityLevel !== PRIORITY_LEVELS.DAPP_SUGGESTED && - !( - priorityLevel === PRIORITY_LEVELS.HIGH && - editGasMode === EDIT_GAS_MODES.SWAPS - ) && - !estimateGreaterThanGasUse ? ( + {showGasEstimateCurve ? ( {imgAltText} ) : null} {toolTipMessage && ( diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss index f8d55c4ec..05b8d4963 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss @@ -1,8 +1,4 @@ .edit-gas-tooltip { - display: inline-block; - text-align: right; - width: 10%; - &__container { display: flex; justify-content: center; @@ -10,6 +6,7 @@ flex-direction: column; width: 100%; height: 100%; + min-width: 160px; img { margin-bottom: 8px; @@ -28,6 +25,7 @@ } &__label { + white-space: nowrap; width: 50%; } diff --git a/ui/components/ui/loading-heartbeat/index.js b/ui/components/ui/loading-heartbeat/index.js index 2aed84dd2..ab69a465a 100644 --- a/ui/components/ui/loading-heartbeat/index.js +++ b/ui/components/ui/loading-heartbeat/index.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import { isVolatileGasEstimate } from '../../../helpers/utils/gas'; +import { isMetamaskSuggestedGasEstimate } from '../../../helpers/utils/gas'; import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app'; import { useShouldAnimateGasEstimations } from '../../../hooks/useShouldAnimateGasEstimations'; @@ -19,7 +19,7 @@ export default function LoadingHeartBeat({ if ( process.env.IN_TEST || - (estimateUsed && !isVolatileGasEstimate(estimateUsed)) + (estimateUsed && !isMetamaskSuggestedGasEstimate(estimateUsed)) ) { return null; } diff --git a/ui/helpers/utils/gas.js b/ui/helpers/utils/gas.js index fa4d34a4c..9b2c06e89 100644 --- a/ui/helpers/utils/gas.js +++ b/ui/helpers/utils/gas.js @@ -55,7 +55,7 @@ export function addTenPercentAndRound(hexStringValue) { return addTenPercent(hexStringValue, { numberOfDecimals: 0 }); } -export function isVolatileGasEstimate(estimate) { +export function isMetamaskSuggestedGasEstimate(estimate) { return [ GAS_RECOMMENDATIONS.HIGH, GAS_RECOMMENDATIONS.MEDIUM,