2021-08-04 23:34:42 +02:00
|
|
|
import React, { useContext, useState } from 'react';
|
2021-07-29 20:13:14 +02:00
|
|
|
import { useSelector } from 'react-redux';
|
2021-06-28 16:45:08 +02:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
2021-07-14 18:45:37 +02:00
|
|
|
import {
|
|
|
|
GAS_RECOMMENDATIONS,
|
|
|
|
EDIT_GAS_MODES,
|
2021-08-02 23:49:07 +02:00
|
|
|
GAS_ESTIMATE_TYPES,
|
2021-07-14 18:45:37 +02:00
|
|
|
} from '../../../../shared/constants/gas';
|
2021-07-12 18:16:03 +02:00
|
|
|
|
2021-07-01 16:36:48 +02:00
|
|
|
import Button from '../../ui/button';
|
2021-06-28 16:45:08 +02:00
|
|
|
import Typography from '../../ui/typography/typography';
|
2021-08-03 00:52:18 +02:00
|
|
|
import {
|
|
|
|
getIsMainnet,
|
|
|
|
checkNetworkAndAccountSupports1559,
|
2021-08-04 23:34:42 +02:00
|
|
|
getAdvancedInlineGasShown,
|
2021-08-03 00:52:18 +02:00
|
|
|
} from '../../../selectors';
|
2021-07-31 02:45:18 +02:00
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
import {
|
|
|
|
COLORS,
|
|
|
|
TYPOGRAPHY,
|
|
|
|
FONT_WEIGHT,
|
|
|
|
} from '../../../helpers/constants/design-system';
|
2021-07-28 00:31:53 +02:00
|
|
|
import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util';
|
2021-06-28 16:45:08 +02:00
|
|
|
|
|
|
|
import InfoTooltip from '../../ui/info-tooltip';
|
2021-07-31 00:46:31 +02:00
|
|
|
import ErrorMessage from '../../ui/error-message';
|
2021-06-28 16:45:08 +02:00
|
|
|
import TransactionTotalBanner from '../transaction-total-banner/transaction-total-banner.component';
|
|
|
|
import RadioGroup from '../../ui/radio-group/radio-group.component';
|
|
|
|
import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
|
2021-07-12 18:16:03 +02:00
|
|
|
import ActionableMessage from '../../ui/actionable-message/actionable-message';
|
2021-06-28 16:45:08 +02:00
|
|
|
|
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
2021-07-26 17:35:51 +02:00
|
|
|
import GasTiming from '../gas-timing';
|
2021-06-28 16:45:08 +02:00
|
|
|
|
|
|
|
export default function EditGasDisplay({
|
2021-07-14 18:45:37 +02:00
|
|
|
mode = EDIT_GAS_MODES.MODIFY_IN_PLACE,
|
|
|
|
showEducationButton = false,
|
2021-06-28 16:45:08 +02:00
|
|
|
onEducationClick,
|
2021-07-16 17:00:03 +02:00
|
|
|
transaction,
|
2021-07-14 18:45:37 +02:00
|
|
|
defaultEstimateToUse,
|
|
|
|
maxPriorityFeePerGas,
|
|
|
|
setMaxPriorityFeePerGas,
|
|
|
|
maxPriorityFeePerGasFiat,
|
|
|
|
maxFeePerGas,
|
|
|
|
setMaxFeePerGas,
|
|
|
|
maxFeePerGasFiat,
|
|
|
|
estimatedMaximumNative,
|
2021-08-03 19:51:02 +02:00
|
|
|
estimatedMinimumNative,
|
2021-07-14 18:45:37 +02:00
|
|
|
isGasEstimatesLoading,
|
|
|
|
gasEstimateType,
|
|
|
|
gasPrice,
|
|
|
|
setGasPrice,
|
|
|
|
gasLimit,
|
|
|
|
setGasLimit,
|
|
|
|
estimateToUse,
|
|
|
|
setEstimateToUse,
|
|
|
|
estimatedMinimumFiat,
|
|
|
|
estimatedMaximumFiat,
|
|
|
|
dappSuggestedGasFeeAcknowledged,
|
|
|
|
setDappSuggestedGasFeeAcknowledged,
|
|
|
|
warning,
|
2021-07-20 21:34:32 +02:00
|
|
|
gasErrors,
|
2021-08-06 23:37:18 +02:00
|
|
|
gasWarnings,
|
2021-07-22 18:32:59 +02:00
|
|
|
onManualChange,
|
2021-07-30 13:35:30 +02:00
|
|
|
minimumGasLimit,
|
2021-07-31 00:46:31 +02:00
|
|
|
balanceError,
|
2021-08-02 23:49:07 +02:00
|
|
|
estimatesUnavailableWarning,
|
2021-08-04 23:34:42 +02:00
|
|
|
hasGasErrors,
|
2021-06-28 16:45:08 +02:00
|
|
|
}) {
|
|
|
|
const t = useContext(I18nContext);
|
2021-08-01 15:09:24 +02:00
|
|
|
const isMainnet = useSelector(getIsMainnet);
|
2021-08-03 00:52:18 +02:00
|
|
|
const networkAndAccountSupport1559 = useSelector(
|
|
|
|
checkNetworkAndAccountSupports1559,
|
|
|
|
);
|
2021-08-04 23:34:42 +02:00
|
|
|
const showAdvancedInlineGasIfPossible = useSelector(
|
|
|
|
getAdvancedInlineGasShown,
|
|
|
|
);
|
|
|
|
|
|
|
|
const [showAdvancedForm, setShowAdvancedForm] = useState(
|
2021-08-06 21:31:30 +02:00
|
|
|
!estimateToUse ||
|
|
|
|
estimateToUse === 'custom' ||
|
|
|
|
!networkAndAccountSupport1559,
|
2021-08-04 23:34:42 +02:00
|
|
|
);
|
|
|
|
const [hideRadioButtons, setHideRadioButtons] = useState(
|
|
|
|
showAdvancedInlineGasIfPossible,
|
|
|
|
);
|
2021-06-28 16:45:08 +02:00
|
|
|
|
2021-07-28 00:31:53 +02:00
|
|
|
const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame(
|
|
|
|
transaction,
|
|
|
|
);
|
|
|
|
|
2021-07-12 18:16:03 +02:00
|
|
|
const requireDappAcknowledgement = Boolean(
|
2021-07-28 00:31:53 +02:00
|
|
|
transaction?.dappSuggestedGasFees &&
|
|
|
|
!dappSuggestedGasFeeAcknowledged &&
|
|
|
|
dappSuggestedAndTxParamGasFeesAreTheSame,
|
2021-07-12 18:16:03 +02:00
|
|
|
);
|
|
|
|
|
2021-08-02 23:49:07 +02:00
|
|
|
const showTopError = balanceError || estimatesUnavailableWarning;
|
2021-08-04 23:34:42 +02:00
|
|
|
const radioButtonsEnabled =
|
2021-08-03 00:52:18 +02:00
|
|
|
networkAndAccountSupport1559 &&
|
2021-08-02 23:49:07 +02:00
|
|
|
gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET &&
|
2021-08-13 18:36:45 +02:00
|
|
|
!requireDappAcknowledgement;
|
2021-08-01 15:09:53 +02:00
|
|
|
|
2021-07-31 00:46:31 +02:00
|
|
|
let errorKey;
|
|
|
|
if (balanceError) {
|
|
|
|
errorKey = 'insufficientFunds';
|
2021-08-02 23:49:07 +02:00
|
|
|
} else if (estimatesUnavailableWarning) {
|
|
|
|
errorKey = 'gasEstimatesUnavailableWarning';
|
2021-07-31 00:46:31 +02:00
|
|
|
}
|
2021-07-29 20:13:14 +02:00
|
|
|
|
2021-06-28 16:45:08 +02:00
|
|
|
return (
|
|
|
|
<div className="edit-gas-display">
|
|
|
|
<div className="edit-gas-display__content">
|
2021-08-06 21:31:30 +02:00
|
|
|
{warning && !isGasEstimatesLoading && (
|
2021-06-28 16:45:08 +02:00
|
|
|
<div className="edit-gas-display__warning">
|
|
|
|
<ActionableMessage
|
|
|
|
className="actionable-message--warning"
|
2021-07-12 18:16:03 +02:00
|
|
|
message={warning}
|
2021-06-28 16:45:08 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-08-06 21:31:30 +02:00
|
|
|
{showTopError && !isGasEstimatesLoading && (
|
2021-07-31 00:46:31 +02:00
|
|
|
<div className="edit-gas-display__warning">
|
|
|
|
<ErrorMessage errorKey={errorKey} />
|
|
|
|
</div>
|
|
|
|
)}
|
2021-08-06 21:31:30 +02:00
|
|
|
{requireDappAcknowledgement && !isGasEstimatesLoading && (
|
2021-07-01 16:36:48 +02:00
|
|
|
<div className="edit-gas-display__dapp-acknowledgement-warning">
|
|
|
|
<ActionableMessage
|
|
|
|
className="actionable-message--warning"
|
2021-07-27 01:43:05 +02:00
|
|
|
message={t('gasDisplayDappWarning', [transaction.origin])}
|
2021-07-16 17:00:03 +02:00
|
|
|
iconFillColor="#f8c000"
|
2021-07-01 16:36:48 +02:00
|
|
|
useIcon
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-07-14 18:45:37 +02:00
|
|
|
{mode === EDIT_GAS_MODES.SPEED_UP && (
|
2021-06-28 16:45:08 +02:00
|
|
|
<div className="edit-gas-display__top-tooltip">
|
|
|
|
<Typography
|
|
|
|
color={COLORS.BLACK}
|
|
|
|
variant={TYPOGRAPHY.H8}
|
|
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
|
|
>
|
|
|
|
{t('speedUpTooltipText')}{' '}
|
|
|
|
<InfoTooltip
|
|
|
|
position="top"
|
|
|
|
contentText={t('speedUpExplanation')}
|
|
|
|
/>
|
|
|
|
</Typography>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-07-12 18:16:03 +02:00
|
|
|
<TransactionTotalBanner
|
2021-07-30 01:29:36 +02:00
|
|
|
total={
|
2021-08-03 19:51:02 +02:00
|
|
|
(networkAndAccountSupport1559 || isMainnet) && estimatedMinimumFiat
|
2021-07-30 01:29:36 +02:00
|
|
|
? `~ ${estimatedMinimumFiat}`
|
2021-08-03 19:51:02 +02:00
|
|
|
: estimatedMinimumNative
|
2021-07-30 01:29:36 +02:00
|
|
|
}
|
2021-07-12 18:16:03 +02:00
|
|
|
detail={
|
2021-08-03 00:52:18 +02:00
|
|
|
networkAndAccountSupport1559 &&
|
2021-07-30 01:29:36 +02:00
|
|
|
estimatedMaximumFiat !== undefined &&
|
2021-07-12 18:16:03 +02:00
|
|
|
t('editGasTotalBannerSubtitle', [
|
|
|
|
<Typography
|
|
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
|
|
tag="span"
|
|
|
|
key="secondary"
|
|
|
|
>
|
|
|
|
{estimatedMaximumFiat}
|
|
|
|
</Typography>,
|
|
|
|
<Typography tag="span" key="primary">
|
|
|
|
{estimatedMaximumNative}
|
|
|
|
</Typography>,
|
|
|
|
])
|
|
|
|
}
|
2021-07-30 15:00:02 +02:00
|
|
|
timing={
|
2021-08-06 23:37:18 +02:00
|
|
|
hasGasErrors === false && (
|
|
|
|
<GasTiming
|
|
|
|
maxFeePerGas={maxFeePerGas}
|
|
|
|
maxPriorityFeePerGas={maxPriorityFeePerGas}
|
|
|
|
gasWarnings={gasWarnings}
|
|
|
|
/>
|
|
|
|
)
|
2021-07-30 15:00:02 +02:00
|
|
|
}
|
2021-07-12 18:16:03 +02:00
|
|
|
/>
|
2021-07-01 16:36:48 +02:00
|
|
|
{requireDappAcknowledgement && (
|
|
|
|
<Button
|
|
|
|
className="edit-gas-display__dapp-acknowledgement-button"
|
|
|
|
onClick={() => setDappSuggestedGasFeeAcknowledged(true)}
|
|
|
|
>
|
|
|
|
{t('gasDisplayAcknowledgeDappButtonText')}
|
|
|
|
</Button>
|
|
|
|
)}
|
2021-08-04 23:34:42 +02:00
|
|
|
{!requireDappAcknowledgement &&
|
|
|
|
radioButtonsEnabled &&
|
|
|
|
showAdvancedInlineGasIfPossible && (
|
|
|
|
<button
|
|
|
|
className="edit-gas-display__advanced-button"
|
|
|
|
onClick={() => setHideRadioButtons(!hideRadioButtons)}
|
|
|
|
>
|
|
|
|
{t('showRecommendations')}{' '}
|
|
|
|
{hideRadioButtons ? (
|
|
|
|
<i className="fa fa-caret-down"></i>
|
|
|
|
) : (
|
|
|
|
<i className="fa fa-caret-up"></i>
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
{radioButtonsEnabled && !hideRadioButtons && (
|
2021-08-01 15:09:53 +02:00
|
|
|
<RadioGroup
|
|
|
|
name="gas-recommendation"
|
|
|
|
options={[
|
|
|
|
{
|
|
|
|
value: GAS_RECOMMENDATIONS.LOW,
|
|
|
|
label: t('editGasLow'),
|
|
|
|
recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.LOW,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: GAS_RECOMMENDATIONS.MEDIUM,
|
|
|
|
label: t('editGasMedium'),
|
|
|
|
recommended:
|
|
|
|
defaultEstimateToUse === GAS_RECOMMENDATIONS.MEDIUM,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: GAS_RECOMMENDATIONS.HIGH,
|
|
|
|
label: t('editGasHigh'),
|
|
|
|
recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.HIGH,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
selectedValue={estimateToUse}
|
|
|
|
onChange={setEstimateToUse}
|
|
|
|
/>
|
|
|
|
)}
|
2021-08-04 23:34:42 +02:00
|
|
|
{!requireDappAcknowledgement &&
|
|
|
|
radioButtonsEnabled &&
|
|
|
|
!showAdvancedInlineGasIfPossible && (
|
|
|
|
<button
|
|
|
|
className="edit-gas-display__advanced-button"
|
|
|
|
onClick={() => setShowAdvancedForm(!showAdvancedForm)}
|
|
|
|
>
|
|
|
|
{t('advancedOptions')}{' '}
|
|
|
|
{showAdvancedForm ? (
|
|
|
|
<i className="fa fa-caret-up"></i>
|
|
|
|
) : (
|
|
|
|
<i className="fa fa-caret-down"></i>
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
{!requireDappAcknowledgement &&
|
2021-08-06 03:25:23 +02:00
|
|
|
(showAdvancedForm ||
|
|
|
|
hasGasErrors ||
|
|
|
|
showAdvancedInlineGasIfPossible) && (
|
2021-08-04 23:34:42 +02:00
|
|
|
<AdvancedGasControls
|
|
|
|
gasEstimateType={gasEstimateType}
|
|
|
|
isGasEstimatesLoading={isGasEstimatesLoading}
|
|
|
|
gasLimit={gasLimit}
|
|
|
|
setGasLimit={setGasLimit}
|
|
|
|
maxPriorityFee={maxPriorityFeePerGas}
|
|
|
|
setMaxPriorityFee={setMaxPriorityFeePerGas}
|
|
|
|
maxFee={maxFeePerGas}
|
|
|
|
setMaxFee={setMaxFeePerGas}
|
|
|
|
gasPrice={gasPrice}
|
|
|
|
setGasPrice={setGasPrice}
|
|
|
|
maxPriorityFeeFiat={maxPriorityFeePerGasFiat}
|
|
|
|
maxFeeFiat={maxFeePerGasFiat}
|
|
|
|
gasErrors={gasErrors}
|
|
|
|
onManualChange={onManualChange}
|
|
|
|
minimumGasLimit={minimumGasLimit}
|
2021-08-17 00:45:55 +02:00
|
|
|
estimateToUse={estimateToUse}
|
2021-08-04 23:34:42 +02:00
|
|
|
/>
|
|
|
|
)}
|
2021-06-28 16:45:08 +02:00
|
|
|
</div>
|
2021-08-03 00:52:18 +02:00
|
|
|
{networkAndAccountSupport1559 &&
|
2021-07-29 20:13:14 +02:00
|
|
|
!requireDappAcknowledgement &&
|
|
|
|
showEducationButton && (
|
|
|
|
<div className="edit-gas-display__education">
|
|
|
|
<button onClick={onEducationClick}>
|
|
|
|
{t('editGasEducationButtonText')}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-06-28 16:45:08 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
EditGasDisplay.propTypes = {
|
2021-07-14 18:45:37 +02:00
|
|
|
mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
|
2021-06-28 16:45:08 +02:00
|
|
|
showEducationButton: PropTypes.bool,
|
|
|
|
onEducationClick: PropTypes.func,
|
2021-07-12 18:16:03 +02:00
|
|
|
defaultEstimateToUse: PropTypes.oneOf(Object.values(GAS_RECOMMENDATIONS)),
|
2021-07-14 18:45:37 +02:00
|
|
|
maxPriorityFeePerGas: PropTypes.string,
|
|
|
|
setMaxPriorityFeePerGas: PropTypes.func,
|
|
|
|
maxPriorityFeePerGasFiat: PropTypes.string,
|
|
|
|
maxFeePerGas: PropTypes.string,
|
|
|
|
setMaxFeePerGas: PropTypes.func,
|
|
|
|
maxFeePerGasFiat: PropTypes.string,
|
|
|
|
estimatedMaximumNative: PropTypes.string,
|
2021-08-03 19:51:02 +02:00
|
|
|
estimatedMinimumNative: PropTypes.string,
|
2021-08-04 15:24:07 +02:00
|
|
|
isGasEstimatesLoading: PropTypes.bool,
|
2021-07-14 18:45:37 +02:00
|
|
|
gasEstimateType: PropTypes.string,
|
|
|
|
gasPrice: PropTypes.string,
|
|
|
|
setGasPrice: PropTypes.func,
|
|
|
|
gasLimit: PropTypes.number,
|
|
|
|
setGasLimit: PropTypes.func,
|
|
|
|
estimateToUse: PropTypes.string,
|
|
|
|
setEstimateToUse: PropTypes.func,
|
|
|
|
estimatedMinimumFiat: PropTypes.string,
|
|
|
|
estimatedMaximumFiat: PropTypes.string,
|
2021-08-04 15:24:07 +02:00
|
|
|
dappSuggestedGasFeeAcknowledged: PropTypes.bool,
|
2021-07-14 18:45:37 +02:00
|
|
|
setDappSuggestedGasFeeAcknowledged: PropTypes.func,
|
|
|
|
warning: PropTypes.string,
|
2021-07-16 17:00:03 +02:00
|
|
|
transaction: PropTypes.object,
|
2021-07-20 21:34:32 +02:00
|
|
|
gasErrors: PropTypes.object,
|
2021-08-06 23:37:18 +02:00
|
|
|
gasWarnings: PropTypes.object,
|
2021-07-22 18:32:59 +02:00
|
|
|
onManualChange: PropTypes.func,
|
2021-07-30 13:35:30 +02:00
|
|
|
minimumGasLimit: PropTypes.number,
|
2021-07-31 00:46:31 +02:00
|
|
|
balanceError: PropTypes.bool,
|
2021-08-02 23:49:07 +02:00
|
|
|
estimatesUnavailableWarning: PropTypes.bool,
|
2021-08-04 23:34:42 +02:00
|
|
|
hasGasErrors: PropTypes.bool,
|
2021-06-28 16:45:08 +02:00
|
|
|
};
|