1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/edit-gas-popover/edit-gas-popover.component.js

235 lines
6.6 KiB
JavaScript
Raw Normal View History

import React, { useCallback, useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
import {
GAS_ESTIMATE_TYPES,
EDIT_GAS_MODES,
} from '../../../../shared/constants/gas';
import {
decGWEIToHexWEI,
decimalToHex,
} from '../../../helpers/utils/conversions.util';
import Popover from '../../ui/popover';
import Button from '../../ui/button';
import EditGasDisplay from '../edit-gas-display';
import EditGasDisplayEducation from '../edit-gas-display-education';
import { I18nContext } from '../../../contexts/i18n';
import {
createCancelTransaction,
createSpeedUpTransaction,
hideModal,
hideSidebar,
updateTransaction,
} from '../../../store/actions';
export default function EditGasPopover({
popoverTitle = '',
confirmButtonText = '',
editGasDisplayProps = {},
defaultEstimateToUse = 'medium',
transaction,
mode,
2021-07-08 22:23:00 +02:00
onClose,
}) {
const t = useContext(I18nContext);
const dispatch = useDispatch();
const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
const showEducationButton =
mode === EDIT_GAS_MODES.MODIFY_IN_PLACE && process.env.SHOW_EIP_1559_UI;
const [showEducationContent, setShowEducationContent] = useState(false);
const [warning] = useState(null);
const [showAdvancedForm, setShowAdvancedForm] = useState(false);
const [
dappSuggestedGasFeeAcknowledged,
setDappSuggestedGasFeeAcknowledged,
] = useState(false);
const {
maxPriorityFeePerGas,
setMaxPriorityFeePerGas,
maxPriorityFeePerGasFiat,
maxFeePerGas,
setMaxFeePerGas,
maxFeePerGasFiat,
estimatedMaximumNative,
isGasEstimatesLoading,
gasFeeEstimates,
gasEstimateType,
gasPrice,
setGasPrice,
gasLimit,
setGasLimit,
estimateToUse,
setEstimateToUse,
estimatedMinimumFiat,
estimatedMaximumFiat,
isMaxFeeError,
isMaxPriorityFeeError,
isGasTooLow,
} = useGasFeeInputs(defaultEstimateToUse);
/**
* Temporary placeholder, this should be managed by the parent component but
* we will be extracting this component from the hard to maintain modal/
* sidebar component. For now this is just to be able to appropriately close
* the modal in testing
*/
const closePopover = useCallback(() => {
2021-07-08 22:23:00 +02:00
if (onClose) {
onClose();
} else if (showSidebar) {
dispatch(hideSidebar());
} else {
dispatch(hideModal());
}
2021-07-08 22:23:00 +02:00
}, [showSidebar, onClose, dispatch]);
const onSubmit = useCallback(() => {
if (!transaction || !mode) {
closePopover();
}
const newGasSettings =
gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET
? {
gas: decimalToHex(gasLimit),
gasLimit: decimalToHex(gasLimit),
maxFeePerGas: decGWEIToHexWEI(maxFeePerGas),
maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas),
}
: {
gas: decimalToHex(gasLimit),
gasLimit: decimalToHex(gasLimit),
gasPrice: decGWEIToHexWEI(gasPrice),
};
switch (mode) {
case EDIT_GAS_MODES.CANCEL:
dispatch(createCancelTransaction(transaction.id, newGasSettings));
break;
case EDIT_GAS_MODES.SPEED_UP:
dispatch(createSpeedUpTransaction(transaction.id, newGasSettings));
break;
case EDIT_GAS_MODES.MODIFY_IN_PLACE:
dispatch(
updateTransaction({
...transaction,
txParams: {
...transaction.txParams,
...newGasSettings,
},
}),
);
break;
default:
break;
}
closePopover();
}, [
transaction,
mode,
dispatch,
closePopover,
gasLimit,
gasPrice,
maxFeePerGas,
maxPriorityFeePerGas,
gasEstimateType,
]);
let title = t('editGasTitle');
if (popoverTitle) {
title = popoverTitle;
} else if (showEducationContent) {
title = t('editGasEducationModalTitle');
} else if (mode === EDIT_GAS_MODES.SPEED_UP) {
title = t('speedUpPopoverTitle');
} else if (mode === EDIT_GAS_MODES.CANCEL) {
title = t('cancelPopoverTitle');
}
const footerButtonText = confirmButtonText || t('save');
return (
<Popover
title={title}
onClose={closePopover}
onBack={
showEducationContent ? () => setShowEducationContent(false) : undefined
}
footer={
<>
<Button
type="primary"
onClick={onSubmit}
disabled={isMaxFeeError || isMaxPriorityFeeError || isGasTooLow}
>
{footerButtonText}
</Button>
</>
}
>
<div style={{ padding: '0 20px 20px 20px' }}>
{showEducationContent ? (
<EditGasDisplayEducation />
) : (
<EditGasDisplay
showEducationButton={showEducationButton}
warning={warning}
showAdvancedForm={showAdvancedForm}
setShowAdvancedForm={setShowAdvancedForm}
dappSuggestedGasFeeAcknowledged={dappSuggestedGasFeeAcknowledged}
setDappSuggestedGasFeeAcknowledged={
setDappSuggestedGasFeeAcknowledged
}
maxPriorityFeePerGas={maxPriorityFeePerGas}
setMaxPriorityFeePerGas={setMaxPriorityFeePerGas}
maxPriorityFeePerGasFiat={maxPriorityFeePerGasFiat}
maxFeePerGas={maxFeePerGas}
setMaxFeePerGas={setMaxFeePerGas}
maxFeePerGasFiat={maxFeePerGasFiat}
estimatedMaximumNative={estimatedMaximumNative}
isGasEstimatesLoading={isGasEstimatesLoading}
gasFeeEstimates={gasFeeEstimates}
gasEstimateType={gasEstimateType}
gasPrice={gasPrice}
setGasPrice={setGasPrice}
gasLimit={gasLimit}
setGasLimit={setGasLimit}
estimateToUse={estimateToUse}
setEstimateToUse={setEstimateToUse}
estimatedMinimumFiat={estimatedMinimumFiat}
estimatedMaximumFiat={estimatedMaximumFiat}
isMaxFeeError={isMaxFeeError}
isMaxPriorityFeeError={isMaxPriorityFeeError}
isGasTooLow={isGasTooLow}
onEducationClick={() => setShowEducationContent(true)}
mode={mode}
{...editGasDisplayProps}
/>
)}
</div>
</Popover>
);
}
EditGasPopover.propTypes = {
popoverTitle: PropTypes.string,
editGasDisplayProps: PropTypes.object,
confirmButtonText: PropTypes.string,
2021-07-08 22:23:00 +02:00
onClose: PropTypes.func,
transaction: PropTypes.object,
mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
defaultEstimateToUse: PropTypes.string,
};