Adding warnings for excessive custom gas input

Fixes #9811
MetaMask · Mar 4, 2021 · 28591ea · 28591ea
1 parent a8b1653
commit 28591ea
Show file tree

Hide file tree

Showing 20 changed files with 198 additions and 6 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -763,6 +763,12 @@
   "gasPrice": {
     "message": "Gas Price (GWEI)"
   },
+  "gasPriceExcessive": {
+    "message": "Your gas fee is set unnecessarily high. Consider lowering the amount."
+  },
+  "gasPriceExcessiveInput": {
+    "message": "Gas Price Is Excessive"
+  },
   "gasPriceExtremelyLow": {
     "message": "Gas Price Extremely Low"
   },

diff --git a/test/unit/ui/app/reducers/metamask.spec.js b/test/unit/ui/app/reducers/metamask.spec.js
@@ -424,4 +424,16 @@ describe('MetaMask Reducers', function () {
     assert.deepEqual(state.send.ensResolutionError, 'ens name not found');
     assert.deepEqual(state.send.ensResolution, null);
   });
+
+  it('update customGasIsExcessive', function () {
+    const state = reduceMetamask(
+      {},
+      {
+        type: actionConstants.SET_CUSTOM_GAS_IS_EXCESSIVE,
+        value: true,
+      },
+    );
+
+    assert.deepEqual(state.customGasIsExcessive, true);
+  });
 });
diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
@@ -20,6 +20,8 @@ export default class AdvancedGasInputs extends Component {
     isSpeedUp: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
     minimumGasLimit: PropTypes.number,
+    customPriceIsExcessive: PropTypes.bool,
+    setCustomGasIsExcessive: PropTypes.func,
   };
 
   static defaultProps = {
@@ -52,6 +54,11 @@ export default class AdvancedGasInputs extends Component {
     }
   }
 
+  componentWillUnmount() {
+    const { customPriceIsExcessive, setCustomGasIsExcessive } = this.props;
+    setCustomGasIsExcessive(customPriceIsExcessive);
+  }
+
   onChangeGasLimit = (e) => {
     this.setState({ gasLimit: e.target.value });
     this.changeGasLimit({ target: { value: e.target.value } });
@@ -75,6 +82,7 @@ export default class AdvancedGasInputs extends Component {
     customPriceIsSafe,
     isSpeedUp,
     gasPrice,
+    customPriceIsExcessive,
   }) {
     const { t } = this.context;
 
@@ -93,6 +101,11 @@ export default class AdvancedGasInputs extends Component {
         errorText: t('gasPriceExtremelyLow'),
         errorType: 'warning',
       };
+    } else if (customPriceIsExcessive) {
+      return {
+        errorText: t('gasPriceExcessiveInput'),
+        errorType: 'error',
+      };
     }
 
     return {};
@@ -185,6 +198,7 @@ export default class AdvancedGasInputs extends Component {
       isSpeedUp,
       customGasLimitMessage,
       minimumGasLimit,
+      customPriceIsExcessive,
     } = this.props;
     const { gasPrice, gasLimit } = this.state;
 
@@ -196,6 +210,7 @@ export default class AdvancedGasInputs extends Component {
       customPriceIsSafe,
       isSpeedUp,
       gasPrice,
+      customPriceIsExcessive,
     });
     const gasPriceErrorComponent = gasPriceErrorType ? (
       <div

diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
@@ -4,6 +4,7 @@ import {
   decimalToHex,
   hexWEIToDecGWEI,
 } from '../../../../helpers/utils/conversions.util';
+import { setCustomGasIsExcessive } from '../../../../store/actions';
 import AdvancedGasInputs from './advanced-gas-inputs.component';
 
 function convertGasPriceForInputs(gasPriceInHexWEI) {
@@ -14,6 +15,14 @@ function convertGasLimitForInputs(gasLimitInHexWEI) {
   return parseInt(gasLimitInHexWEI, 16) || 0;
 }
 
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setCustomGasIsExcessive: (isExcessive) => {
+      return dispatch(setCustomGasIsExcessive(isExcessive));
+    },
+  };
+};
+
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const {
     customGasPrice,
@@ -33,4 +42,4 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   };
 };
 
-export default connect(null, null, mergeProps)(AdvancedGasInputs);
+export default connect(null, mapDispatchToProps, mergeProps)(AdvancedGasInputs);
diff --git a/...ents/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js b/...ents/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js
@@ -108,4 +108,15 @@ describe('Advanced Gas Inputs', function () {
 
     assert.strictEqual(renderWarning.text(), 'gasPriceExtremelyLow');
   });
+
+  it('errors when custom gas price is too excessive', function () {
+    wrapper.setProps({ customPriceIsExcessive: true });
+
+    const renderError = wrapper.find(
+      '.advanced-gas-inputs__gas-edit-row__error-text',
+    );
+
+    assert.strictEqual(renderError.length, 2);
+    assert.strictEqual(renderError.at(0).text(), 'gasPriceExcessiveInput');
+  });
 });
diff --git a/...omization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/...omization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -18,6 +18,7 @@ export default class AdvancedTabContent extends Component {
     isSpeedUp: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
     minimumGasLimit: PropTypes.number,
+    customPriceIsExcessive: PropTypes.bool,
   };
 
   renderDataSummary(transactionFee) {
@@ -47,6 +48,7 @@ export default class AdvancedTabContent extends Component {
       transactionFee,
       customGasLimitMessage,
       minimumGasLimit,
+      customPriceIsExcessive,
     } = this.props;
 
     return (
@@ -64,6 +66,7 @@ export default class AdvancedTabContent extends Component {
               isSpeedUp={isSpeedUp}
               customGasLimitMessage={customGasLimitMessage}
               minimumGasLimit={minimumGasLimit}
+              customPriceIsExcessive={customPriceIsExcessive}
             />
           </div>
         </div>

diff --git a/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -35,6 +35,7 @@ export default class GasModalPageContainer extends Component {
     isSpeedUp: PropTypes.bool,
     isRetry: PropTypes.bool,
     disableSave: PropTypes.bool,
+    customPriceIsExcessive: PropTypes.bool,
   };
 
   componentDidMount() {
@@ -57,6 +58,7 @@ export default class GasModalPageContainer extends Component {
       customPriceIsSafe,
       isSpeedUp,
       isRetry,
+      customPriceIsExcessive,
       infoRowProps: { transactionFee },
     } = this.props;
 
@@ -71,6 +73,7 @@ export default class GasModalPageContainer extends Component {
         customPriceIsSafe={customPriceIsSafe}
         isSpeedUp={isSpeedUp}
         isRetry={isRetry}
+        customPriceIsExcessive={customPriceIsExcessive}
       />
     );
   }

diff --git a/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -37,6 +37,7 @@ import {
   getTokenBalance,
   getSendMaxModeState,
   getAveragePriceEstimateInHexWEI,
+  isCustomPriceExcessive,
 } from '../../../../selectors';
 
 import {
@@ -141,6 +142,7 @@ const mapStateToProps = (state, ownProps) => {
     customGasTotal,
     newTotalFiat,
     customPriceIsSafe: isCustomPriceSafe(state),
+    customPriceIsExcessive: isCustomPriceExcessive(state),
     maxModeOn,
     gasPriceButtonGroupProps: {
       buttonDataLoading,

diff --git a/...s-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/...s-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -126,6 +126,7 @@ describe('gas-modal-page-container container', function () {
         conversionRate: 50,
         customModalGasLimitInHex: 'aaaaaaaa',
         customModalGasPriceInHex: 'ffffffff',
+        customPriceIsExcessive: false,
         customGasTotal: 'aaaaaaa955555556',
         customPriceIsSafe: true,
         gasPriceButtonGroupProps: {

diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
@@ -47,6 +47,7 @@ export default function reduceMetamask(state = {}, action) {
     participateInMetaMetrics: null,
     metaMetricsSendCount: 0,
     nextNonce: null,
+    customGasIsExcessive: false,
     ...state,
   };
 
@@ -367,6 +368,13 @@ export default function reduceMetamask(state = {}, action) {
       };
     }
 
+    case actionConstants.SET_CUSTOM_GAS_IS_EXCESSIVE: {
+      return {
+        ...metamaskState,
+        customGasIsExcessive: action.value,
+      };
+    }
+
     default:
       return metamaskState;
   }

diff --git a/ui/app/pages/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js
@@ -20,15 +20,17 @@ export default class SendContent extends Component {
     isOwnedAccount: PropTypes.bool,
     warning: PropTypes.string,
     error: PropTypes.string,
+    gasIsExcessive: PropTypes.bool,
   };
 
   updateGas = (updateData) => this.props.updateGas(updateData);
 
   render() {
-    const { warning, error } = this.props;
+    const { warning, error, gasIsExcessive } = this.props;
     return (
       <PageContainerContent>
         <div className="send-v2__form">
+          {gasIsExcessive && this.renderError(true)}
           {error && this.renderError()}
           {warning && this.renderWarning()}
           {this.maybeRenderAddContact()}
@@ -77,13 +79,13 @@ export default class SendContent extends Component {
     );
   }
 
-  renderError() {
+  renderError(gasError = false) {
     const { t } = this.context;
     const { error } = this.props;
 
     return (
       <Dialog type="error" className="send__error-dialog">
-        {t(error)}
+        {t(gasError ? 'gasPriceExcessive' : error)}
       </Dialog>
     );
   }

diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -26,6 +26,7 @@ export default class SendGasRow extends Component {
     gasLimit: PropTypes.string,
     insufficientBalance: PropTypes.bool,
     isMainnet: PropTypes.bool,
+    resetGasWarning: PropTypes.func,
   };
 
   static contextTypes = {
@@ -92,6 +93,7 @@ export default class SendGasRow extends Component {
       gasLimit,
       insufficientBalance,
       isMainnet,
+      resetGasWarning,
     } = this.props;
     const { metricsEvent } = this.context;
 
@@ -123,6 +125,7 @@ export default class SendGasRow extends Component {
         gasTotal={gasTotal}
         onReset={() => {
           resetGasButtons();
+          resetGasWarning();
           if (maxModeOn) {
             this.setMaxAmount();
           }

diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js
@@ -36,6 +36,7 @@ import {
   setGasLimit,
   setGasTotal,
   updateSendAmount,
+  setCustomGasIsExcessive,
 } from '../../../../store/actions';
 import SendGasRow from './send-gas-row.component';
 
@@ -112,6 +113,9 @@ function mapDispatchToProps(dispatch) {
     },
     showGasButtonGroup: () => dispatch(showGasButtonGroup()),
     resetCustomData: () => dispatch(resetCustomData()),
+    resetGasWarning: () => {
+      dispatch(setCustomGasIsExcessive(false));
+    },
   };
 }
 

diff --git a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -11,6 +11,7 @@ import GasPriceButtonGroup from '../../../../../components/app/gas-customization
 const propsMethodSpies = {
   showCustomizeGasModal: sinon.spy(),
   resetGasButtons: sinon.spy(),
+  resetGasWarning: sinon.spy(),
 };
 
 describe('SendGasRow Component', function () {
@@ -28,6 +29,7 @@ describe('SendGasRow Component', function () {
           gasButtonGroupShown={false}
           showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
           resetGasButtons={propsMethodSpies.resetGasButtons}
+          resetGasWarning={propsMethodSpies.resetGasWarning}
           gasPriceButtonGroupProps={{
             someGasPriceButtonGroupProp: 'foo',
             anotherGasPriceButtonGroupProp: 'bar',
@@ -71,8 +73,10 @@ describe('SendGasRow Component', function () {
       assert.strictEqual(gasLoadingError, false);
       assert.strictEqual(gasTotal, 'mockGasTotal');
       assert.strictEqual(propsMethodSpies.resetGasButtons.callCount, 0);
+      assert.strictEqual(propsMethodSpies.resetGasWarning.callCount, 0);
       onReset();
       assert.strictEqual(propsMethodSpies.resetGasButtons.callCount, 1);
+      assert.strictEqual(propsMethodSpies.resetGasWarning.callCount, 1);
     });
 
     it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', function () {

diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
@@ -58,6 +58,7 @@ export default class SendTransactionScreen extends Component {
     qrCodeDetected: PropTypes.func.isRequired,
     qrCodeData: PropTypes.object,
     sendTokenAddress: PropTypes.string,
+    gasIsExcessive: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -382,7 +383,7 @@ export default class SendTransactionScreen extends Component {
   }
 
   renderSendContent() {
-    const { history, showHexData } = this.props;
+    const { history, showHexData, gasIsExcessive } = this.props;
     const { toWarning, toError } = this.state;
 
     return [
@@ -394,6 +395,7 @@ export default class SendTransactionScreen extends Component {
         showHexData={showHexData}
         warning={toWarning}
         error={toError}
+        gasIsExcessive={gasIsExcessive}
       />,
       <SendFooter key="send-footer" history={history} />,
     ];

diff --git a/ui/app/pages/send/send.container.js b/ui/app/pages/send/send.container.js
@@ -23,6 +23,7 @@ import {
   getSelectedAddress,
   getAddressBook,
   getSendTokenAddress,
+  getCachedIsCustomPriceExcessive,
 } from '../../selectors';
 
 import {
@@ -67,6 +68,7 @@ function mapStateToProps(state) {
     tokenBalance: getTokenBalance(state),
     tokenContract: getSendTokenContract(state),
     sendTokenAddress: getSendTokenAddress(state),
+    gasIsExcessive: getCachedIsCustomPriceExcessive(state),
   };
 }