1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +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:
Dan J Miller 2021-08-04 19:04:42 -02:30 committed by GitHub
parent aa3d1f2341
commit a950111a19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 46 deletions

View File

@ -1935,6 +1935,9 @@
"showPrivateKeys": {
"message": "Show Private Keys"
},
"showRecommendations": {
"message": "Show Recommendations"
},
"showSeedPhrase": {
"message": "Show Secret Recovery Phrase"
},

View File

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

View File

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

View File

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