2021-06-28 16:45:08 +02:00
|
|
|
import React, { useCallback, useContext, useState } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
2021-07-14 18:45:37 +02:00
|
|
|
import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
|
|
|
|
|
|
|
|
import {
|
|
|
|
GAS_ESTIMATE_TYPES,
|
|
|
|
EDIT_GAS_MODES,
|
|
|
|
} from '../../../../shared/constants/gas';
|
|
|
|
|
|
|
|
import {
|
|
|
|
decGWEIToHexWEI,
|
|
|
|
decimalToHex,
|
|
|
|
} from '../../../helpers/utils/conversions.util';
|
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
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';
|
2021-07-12 21:35:54 +02:00
|
|
|
import {
|
|
|
|
createCancelTransaction,
|
|
|
|
createSpeedUpTransaction,
|
|
|
|
hideModal,
|
|
|
|
hideSidebar,
|
|
|
|
updateTransaction,
|
|
|
|
} from '../../../store/actions';
|
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
export default function EditGasPopover({
|
2021-07-14 18:45:37 +02:00
|
|
|
popoverTitle = '',
|
|
|
|
confirmButtonText = '',
|
|
|
|
editGasDisplayProps = {},
|
|
|
|
defaultEstimateToUse = 'medium',
|
2021-07-12 21:35:54 +02:00
|
|
|
transaction,
|
|
|
|
mode,
|
2021-07-08 22:23:00 +02:00
|
|
|
onClose,
|
2021-06-28 16:45:08 +02:00
|
|
|
}) {
|
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
|
2021-07-14 18:45:37 +02:00
|
|
|
|
2021-07-15 19:22:55 +02:00
|
|
|
const showEducationButton =
|
|
|
|
mode === EDIT_GAS_MODES.MODIFY_IN_PLACE && process.env.SHOW_EIP_1559_UI;
|
2021-06-28 16:45:08 +02:00
|
|
|
const [showEducationContent, setShowEducationContent] = useState(false);
|
|
|
|
|
2021-07-14 18:45:37 +02:00
|
|
|
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);
|
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
/**
|
|
|
|
* 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) {
|
2021-06-28 16:45:08 +02:00
|
|
|
dispatch(hideSidebar());
|
|
|
|
} else {
|
|
|
|
dispatch(hideModal());
|
|
|
|
}
|
2021-07-08 22:23:00 +02:00
|
|
|
}, [showSidebar, onClose, dispatch]);
|
2021-06-28 16:45:08 +02:00
|
|
|
|
2021-07-12 21:35:54 +02:00
|
|
|
const onSubmit = useCallback(() => {
|
|
|
|
if (!transaction || !mode) {
|
|
|
|
closePopover();
|
|
|
|
}
|
2021-07-14 18:45:37 +02:00
|
|
|
|
|
|
|
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),
|
|
|
|
};
|
|
|
|
|
2021-07-12 21:35:54 +02:00
|
|
|
switch (mode) {
|
2021-07-14 18:45:37 +02:00
|
|
|
case EDIT_GAS_MODES.CANCEL:
|
|
|
|
dispatch(createCancelTransaction(transaction.id, newGasSettings));
|
2021-07-12 21:35:54 +02:00
|
|
|
break;
|
2021-07-14 18:45:37 +02:00
|
|
|
case EDIT_GAS_MODES.SPEED_UP:
|
|
|
|
dispatch(createSpeedUpTransaction(transaction.id, newGasSettings));
|
2021-07-12 21:35:54 +02:00
|
|
|
break;
|
2021-07-14 18:45:37 +02:00
|
|
|
case EDIT_GAS_MODES.MODIFY_IN_PLACE:
|
2021-07-12 21:35:54 +02:00
|
|
|
dispatch(
|
|
|
|
updateTransaction({
|
|
|
|
...transaction,
|
2021-07-14 18:45:37 +02:00
|
|
|
txParams: {
|
|
|
|
...transaction.txParams,
|
|
|
|
...newGasSettings,
|
|
|
|
},
|
2021-07-12 21:35:54 +02:00
|
|
|
}),
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
closePopover();
|
2021-07-14 18:45:37 +02:00
|
|
|
}, [
|
|
|
|
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');
|
|
|
|
}
|
2021-07-12 21:35:54 +02:00
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
const footerButtonText = confirmButtonText || t('save');
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Popover
|
|
|
|
title={title}
|
|
|
|
onClose={closePopover}
|
|
|
|
onBack={
|
|
|
|
showEducationContent ? () => setShowEducationContent(false) : undefined
|
|
|
|
}
|
|
|
|
footer={
|
|
|
|
<>
|
2021-07-14 18:45:37 +02:00
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
onClick={onSubmit}
|
|
|
|
disabled={isMaxFeeError || isMaxPriorityFeeError || isGasTooLow}
|
|
|
|
>
|
2021-06-28 16:45:08 +02:00
|
|
|
{footerButtonText}
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<div style={{ padding: '0 20px 20px 20px' }}>
|
|
|
|
{showEducationContent ? (
|
|
|
|
<EditGasDisplayEducation />
|
|
|
|
) : (
|
|
|
|
<EditGasDisplay
|
2021-07-14 18:45:37 +02:00
|
|
|
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}
|
2021-06-28 16:45:08 +02:00
|
|
|
onEducationClick={() => setShowEducationContent(true)}
|
2021-07-14 18:45:37 +02:00
|
|
|
mode={mode}
|
|
|
|
{...editGasDisplayProps}
|
2021-06-28 16:45:08 +02:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</Popover>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
EditGasPopover.propTypes = {
|
|
|
|
popoverTitle: PropTypes.string,
|
|
|
|
editGasDisplayProps: PropTypes.object,
|
|
|
|
confirmButtonText: PropTypes.string,
|
2021-07-08 22:23:00 +02:00
|
|
|
onClose: PropTypes.func,
|
2021-07-12 21:35:54 +02:00
|
|
|
transaction: PropTypes.object,
|
2021-07-14 18:45:37 +02:00
|
|
|
mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
|
|
|
|
defaultEstimateToUse: PropTypes.string,
|
2021-06-28 16:45:08 +02:00
|
|
|
};
|