mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Show advanced options, and hide radio buttons, for advanced gas settings users (#11751)
* Show advanced options, and hide radio buttons, for users with advanced gas settings turned on * Improve naming and copy * lint fix * Lint fix
This commit is contained in:
parent
aa3d1f2341
commit
a950111a19
@ -1935,6 +1935,9 @@
|
||||
"showPrivateKeys": {
|
||||
"message": "Show Private Keys"
|
||||
},
|
||||
"showRecommendations": {
|
||||
"message": "Show Recommendations"
|
||||
},
|
||||
"showSeedPhrase": {
|
||||
"message": "Show Secret Recovery Phrase"
|
||||
},
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useContext } from 'react';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
@ -13,6 +13,7 @@ import Typography from '../../ui/typography/typography';
|
||||
import {
|
||||
getIsMainnet,
|
||||
checkNetworkAndAccountSupports1559,
|
||||
getAdvancedInlineGasShown,
|
||||
} from '../../../selectors';
|
||||
|
||||
import {
|
||||
@ -58,20 +59,29 @@ export default function EditGasDisplay({
|
||||
estimatedMaximumFiat,
|
||||
dappSuggestedGasFeeAcknowledged,
|
||||
setDappSuggestedGasFeeAcknowledged,
|
||||
showAdvancedForm,
|
||||
setShowAdvancedForm,
|
||||
warning,
|
||||
gasErrors,
|
||||
onManualChange,
|
||||
minimumGasLimit,
|
||||
balanceError,
|
||||
estimatesUnavailableWarning,
|
||||
hasGasErrors,
|
||||
}) {
|
||||
const t = useContext(I18nContext);
|
||||
const isMainnet = useSelector(getIsMainnet);
|
||||
const networkAndAccountSupport1559 = useSelector(
|
||||
checkNetworkAndAccountSupports1559,
|
||||
);
|
||||
const showAdvancedInlineGasIfPossible = useSelector(
|
||||
getAdvancedInlineGasShown,
|
||||
);
|
||||
|
||||
const [showAdvancedForm, setShowAdvancedForm] = useState(
|
||||
!estimateToUse || hasGasErrors || !networkAndAccountSupport1559,
|
||||
);
|
||||
const [hideRadioButtons, setHideRadioButtons] = useState(
|
||||
showAdvancedInlineGasIfPossible,
|
||||
);
|
||||
|
||||
const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame(
|
||||
transaction,
|
||||
@ -84,7 +94,7 @@ export default function EditGasDisplay({
|
||||
);
|
||||
|
||||
const showTopError = balanceError || estimatesUnavailableWarning;
|
||||
const showRadioButtons =
|
||||
const radioButtonsEnabled =
|
||||
networkAndAccountSupport1559 &&
|
||||
gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET &&
|
||||
!requireDappAcknowledgement &&
|
||||
@ -175,7 +185,22 @@ export default function EditGasDisplay({
|
||||
{t('gasDisplayAcknowledgeDappButtonText')}
|
||||
</Button>
|
||||
)}
|
||||
{showRadioButtons && (
|
||||
{!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 && (
|
||||
<RadioGroup
|
||||
name="gas-recommendation"
|
||||
options={[
|
||||
@ -200,38 +225,41 @@ export default function EditGasDisplay({
|
||||
onChange={setEstimateToUse}
|
||||
/>
|
||||
)}
|
||||
{!requireDappAcknowledgement && showRadioButtons && (
|
||||
<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 && showAdvancedForm && (
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
{!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 &&
|
||||
(showAdvancedForm || showAdvancedInlineGasIfPossible) && (
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{networkAndAccountSupport1559 &&
|
||||
!requireDappAcknowledgement &&
|
||||
@ -271,8 +299,6 @@ EditGasDisplay.propTypes = {
|
||||
estimatedMaximumFiat: PropTypes.string,
|
||||
dappSuggestedGasFeeAcknowledged: PropTypes.bool,
|
||||
setDappSuggestedGasFeeAcknowledged: PropTypes.func,
|
||||
showAdvancedForm: PropTypes.bool,
|
||||
setShowAdvancedForm: PropTypes.func,
|
||||
warning: PropTypes.string,
|
||||
transaction: PropTypes.object,
|
||||
gasErrors: PropTypes.object,
|
||||
@ -280,4 +306,5 @@ EditGasDisplay.propTypes = {
|
||||
minimumGasLimit: PropTypes.number,
|
||||
balanceError: PropTypes.bool,
|
||||
estimatesUnavailableWarning: PropTypes.bool,
|
||||
hasGasErrors: PropTypes.bool,
|
||||
};
|
||||
|
@ -87,10 +87,6 @@ export default function EditGasPopover({
|
||||
estimatesUnavailableWarning,
|
||||
} = useGasFeeInputs(defaultEstimateToUse, transaction, minimumGasLimit, mode);
|
||||
|
||||
const [showAdvancedForm, setShowAdvancedForm] = useState(
|
||||
!estimateToUse || hasGasErrors || !networkAndAccountSupport1559,
|
||||
);
|
||||
|
||||
/**
|
||||
* Temporary placeholder, this should be managed by the parent component but
|
||||
* we will be extracting this component from the hard to maintain modal/
|
||||
@ -213,8 +209,6 @@ export default function EditGasPopover({
|
||||
<EditGasDisplay
|
||||
showEducationButton={showEducationButton}
|
||||
warning={warning}
|
||||
showAdvancedForm={showAdvancedForm}
|
||||
setShowAdvancedForm={setShowAdvancedForm}
|
||||
dappSuggestedGasFeeAcknowledged={dappSuggestedGasFeeAcknowledged}
|
||||
setDappSuggestedGasFeeAcknowledged={
|
||||
setDappSuggestedGasFeeAcknowledged
|
||||
@ -245,6 +239,7 @@ export default function EditGasPopover({
|
||||
minimumGasLimit={minimumGasLimitDec}
|
||||
balanceError={balanceError}
|
||||
estimatesUnavailableWarning={estimatesUnavailableWarning}
|
||||
hasGasErrors={hasGasErrors}
|
||||
{...editGasDisplayProps}
|
||||
/>
|
||||
</>
|
||||
|
@ -21,6 +21,7 @@ import {
|
||||
checkNetworkAndAccountSupports1559,
|
||||
getShouldShowFiat,
|
||||
getSelectedAccount,
|
||||
getAdvancedInlineGasShown,
|
||||
} from '../selectors';
|
||||
|
||||
import {
|
||||
@ -249,8 +250,18 @@ export function useGasFeeInputs(
|
||||
Number(hexToDecimal(transaction?.txParams?.gas ?? minimumGasLimit)),
|
||||
);
|
||||
|
||||
const userPrefersAdvancedGas = useSelector(getAdvancedInlineGasShown);
|
||||
const dontDefaultToAnEstimateLevel =
|
||||
userPrefersAdvancedGas &&
|
||||
transaction?.txParams?.maxPriorityFeePerGas &&
|
||||
transaction?.txParams?.gasPrice;
|
||||
|
||||
const initialEstimateToUse = transaction
|
||||
? initialMatchingEstimateLevel
|
||||
: defaultEstimateToUse;
|
||||
|
||||
const [estimateToUse, setInternalEstimateToUse] = useState(
|
||||
transaction ? initialMatchingEstimateLevel : defaultEstimateToUse,
|
||||
dontDefaultToAnEstimateLevel ? null : initialEstimateToUse,
|
||||
);
|
||||
|
||||
// We specify whether to use the estimate value by checking if the state
|
||||
|
Loading…
Reference in New Issue
Block a user