m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding gas limit section on advance gas fee modal (#12865)

Browse Source
This commit is contained in:
Jyoti Puri 2021-12-03 21:29:48 +05:30 committed by GitHub
parent 6542d16349
commit cd4ddffd9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 283 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json
View File

@ -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"
},

67
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js Normal file
View File

@ -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 (
<FormField
onChange={updateGasLimit}
titleText={t('gasLimitV2')}
value={gasLimit}
numeric
/>
);
}
return (
<Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
<Box
display="flex"
alignItems="center"
className="advanced-gas-fee-gas-limit"
>
<strong>
<I18nValue messageKey="gasLimitV2" />
</strong>
<span>{gasLimit}</span>
<Button
className="advanced-gas-fee-gas-limit__edit-link"
onClick={() => setEditing(true)}
type="link"
>
<I18nValue messageKey="edit" />
</Button>
</Box>
</Typography>
);
};
export default AdvancedGasFeeGasLimit;

68
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js Normal file
View File

@ -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(
<GasFeeContextProvider
transaction={{
userFeeLevel: 'custom',
txParams: { gas: '0x5208' },
...txProps,
}}
>
<AdvanceGasFeePopoverContextProvider>
<AdvancedGasFeeGasLimit />
</AdvanceGasFeePopoverContextProvider>
</GasFeeContextProvider>,
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);
});
});

1
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './advanced-gas-fee-gas-limit';

14
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss Normal file
View File

@ -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;
}
}

5
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js
View File

@ -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={<AdvancedGasFeeSaveButton />}
>
<Box className="advanced-gas-fee-popover__wrapper">
<Box className="advanced-gas-fee-popover__wrapper" margin={4}>
<AdvancedGasFeeInputs />
<div className="advanced-gas-fee-popover__separator" />
<AdvancedGasFeeGasLimit />
</Box>
</Popover>
</AdvanceGasFeePopoverContextProvider>

12
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js
View File

@ -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');
};

3
ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js
View File

@ -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 (
<AdvanceGasFeePopoverContext.Provider
value={{
gasLimit,
isDirty,
maxFeePerGas,
maxPriorityFeePerGas,
setDirty,
setGasLimit,
setMaxPriorityFeePerGas,
setMaxFeePerGas,
}}

4
ui/components/app/advanced-gas-fee-popover/index.scss
View File

@ -7,4 +7,8 @@
border-top: 1px solid $ui-grey;
margin: 24px 0 16px 0;
}
.form-field__heading-title > h6 {
font-size: $font-size-h7;
}
}

1
ui/components/app/app-components.scss
View File

@ -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';

5
ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
View File

@ -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}
>
<I18nValue
messageKey="learmMoreAboutGas"

2
ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
View File

@ -100,7 +100,7 @@ const EditGasItem = ({ priorityLevel }) => {
return (
<button
className={classNames('edit-gas-item', {
'edit-gas-item-selected': priorityLevel === estimateUsed,
'edit-gas-item--selected': priorityLevel === estimateUsed,
'edit-gas-item-disabled':
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
!dappSuggestedGasFees,

2
ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
View File

@ -111,7 +111,7 @@ describe('EditGasItem', () => {
it('should highlight option is priorityLevel is currently selected', () => {
renderComponent({ priorityLevel: 'high' }, { userFeeLevel: 'high' });
expect(
document.getElementsByClassName('edit-gas-item-selected'),
document.getElementsByClassName('edit-gas-item--selected'),
).toHaveLength(1);
});

2
ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
View File

@ -11,7 +11,7 @@
height: 32px;
width: 100%;
&-selected {
&--selected {
background-color: $ui-1;
}

9
ui/components/app/edit-gas-fee-popover/network-status/network-status.js
View File

@ -1,6 +1,9 @@
import React from 'react';
import { COLORS } from '../../../../helpers/constants/design-system';
import {
COLORS,
TYPOGRAPHY,
} from '../../../../helpers/constants/design-system';
import { useGasFeeContext } from '../../../../contexts/gasFee';
import I18nValue from '../../../ui/i18n-value';
import Typography from '../../../ui/typography/typography';
@ -14,10 +17,10 @@ const NetworkStatus = () => {
<div className="network-status">
<Typography
color={COLORS.UI4}
fontSize="10px"
fontWeight="bold"
margin={[3, 0]}
variant="h6"
tag={TYPOGRAPHY.H6}
variant={TYPOGRAPHY.H8}
>
<I18nValue messageKey="networkStatus" />
</Typography>

4
ui/components/app/gas-timing/gas-timing.component.js
View File

@ -172,9 +172,7 @@ export default function GasTiming({
toHumanReadableTime(Number(customEstimatedTime?.upperTimeBound), t),
]);
}
}
// code below needs to cleaned-up once EIP_1559_V2 flag is removed
else if (supportsEIP1559V2) {
} else if (supportsEIP1559V2) {
text = t('gasTimingNegative', [
toHumanReadableTime(low.maxWaitTimeEstimate, t),
]);

14
ui/components/app/transaction-detail/index.scss
View File

@ -31,6 +31,7 @@
background: transparent;
border: 0;
padding-inline-end: 0;
position: relative;
white-space: pre;
}
@ -40,7 +41,18 @@
}
&__icon {
font-size: 1rem;
@include Paragraph;
line-height: 1;
position: absolute;
left: -16px;
top: 0;
&-custom {
font-size: 1.35rem;
left: -12px;
top: -2px;
}
}
&__label {

33
ui/components/app/transaction-detail/transaction-detail.component.js
View File

@ -7,7 +7,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import Typography from '../../ui/typography/typography';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import { COLORS } from '../../../helpers/constants/design-system';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -36,7 +36,9 @@ export default function TransactionDetail({
<div className="transaction-detail">
<div className="transaction-detail-edit-V2">
<button onClick={() => openModal('editGasFee')}>
<span className="transaction-detail-edit-V2__icon">
<span
className={`transaction-detail-edit-V2__icon transaction-detail-edit-V2__icon-${estimateUsed}`}
>
{`${PRIORITY_LEVEL_ICON_MAP[estimateUsed]} `}
</span>
<span className="transaction-detail-edit-V2__label">
@ -53,19 +55,32 @@ export default function TransactionDetail({
<InfoTooltip
contentText={
<div className="transaction-detail-edit-V2__tooltip">
<Typography fontSize="12px" color={COLORS.GREY}>
<Typography
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
color={COLORS.GREY}
>
{t('dappSuggestedTooltip', [transaction.origin])}
</Typography>
<Typography fontSize="12px">
<b>{t('maxBaseFee')}</b>
<Typography
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<strong>{t('maxBaseFee')}</strong>
{maxFeePerGas}
</Typography>
<Typography fontSize="12px">
<b>{t('maxPriorityFee')}</b>
<Typography
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<strong>{t('maxPriorityFee')}</strong>
{maxPriorityFeePerGas}
</Typography>
<Typography fontSize="12px">
<b>{t('gasLimit')}</b>
<Typography
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<strong>{t('gasLimit')}</strong>
{gasLimit}
</Typography>
</div>

3
ui/components/ui/typography/typography.js
View File

@ -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',

6
ui/components/ui/typography/typography.scss
View File

@ -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;

1
ui/css/design-system/attributes.scss
View File

@ -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;

27
ui/hooks/gasFeeInput/useGasFeeInputs.js
View File

@ -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) {
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,
};

6
ui/hooks/gasFeeInput/useMaxFeePerGasInput.js
View File

@ -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),

6
ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js
View File

@ -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 =

27
ui/hooks/gasFeeInput/useTransactionFunctions.js
View File

@ -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],

17
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -429,9 +429,7 @@ export default class ConfirmTransactionBase extends Component {
) : null;
const renderGasDetailsItem = () => {
return EIP_1559_V2_ENABLED &&
supportsEIP1559 &&
!isLegacyTransaction(txData) ? (
return this.supportsEIP1559V2 ? (
<GasDetailsItem
key="gas_details"
hexMaximumTransactionFee={hexMaximumTransactionFee}
@ -968,6 +966,11 @@ export default class ConfirmTransactionBase extends Component {
this._removeBeforeUnload();
}
supportsEIP1559V2 =
EIP_1559_V2_ENABLED &&
this.props.supportsEIP1559 &&
!isLegacyTransaction(this.props.txData);
render() {
const { t } = this.context;
const {
@ -995,7 +998,6 @@ export default class ConfirmTransactionBase extends Component {
gasFeeIsCustom,
nativeCurrency,
hardwareWalletRequiresConnection,
supportsEIP1559,
} = this.props;
const {
submitting,
@ -1035,6 +1037,7 @@ export default class ConfirmTransactionBase extends Component {
functionType = t('contractInteraction');
}
}
return (
<TransactionModalContextProvider
actionKey={actionKey}
@ -1094,11 +1097,7 @@ export default class ConfirmTransactionBase extends Component {
editingGas={editingGas}
handleCloseEditGas={() => this.handleCloseEditGas()}
currentTransaction={txData}
supportsEIP1559V2={
EIP_1559_V2_ENABLED &&
supportsEIP1559 &&
!isLegacyTransaction(txData)
}
supportsEIP1559V2={this.supportsEIP1559V2}
/>
</TransactionModalContextProvider>
);

8
ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js
View File

@ -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 = ({
<InfoTooltip
contentText={
<>
<Typography fontSize="12px">
<Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
{t('transactionDetailGasTooltipIntro', [
isMainnet ? t('networkNameEthereum') : '',
])}
</Typography>
<Typography fontSize="12px">
<Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
{t('transactionDetailGasTooltipExplanation')}
</Typography>
<Typography fontSize="12px">
<Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
<a
href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
target="_blank"

13
ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
View File

@ -11,6 +11,7 @@ import ActionableMessage from '../../../components/ui/actionable-message/actiona
import ErrorMessage from '../../../components/ui/error-message';
import I18nValue from '../../../components/ui/i18n-value';
import Typography from '../../../components/ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
const TransactionAlerts = ({
userAcknowledgedGasMissing,
@ -49,10 +50,11 @@ const TransactionAlerts = ({
<ActionableMessage
message={
<Typography
className="transaction-alerts__pending-transactions"
align="left"
fontSize="12px"
className="transaction-alerts__pending-transactions"
margin={[0, 0]}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<strong>
<I18nValue
@ -89,7 +91,12 @@ const TransactionAlerts = ({
{estimateUsed === PRIORITY_LEVELS.LOW && (
<ActionableMessage
message={
<Typography align="left" fontSize="12px" margin={[0, 0]}>
<Typography
align="left"
margin={[0, 0]}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<I18nValue messageKey="lowPriorityMessage" />
</Typography>
}