Implement Dapp Acknowledgement screen for editing gas (#11424)

app/_locales/en/messages.json

@@ -837,6 +837,13 @@
   "functionType": {
     "message": "Function Type"
   },
+  "gasDisplayAcknowledgeDappButtonText": {
+    "message": "Edit app suggestion"
+  },
+  "gasDisplayDappWarning": {
+    "message": "This gas fee has been suggested by the app $1. It’s using legacy gas estimation which may be inaccurate. However, editing this gas fee may cause unintended consequences. Please reach out to the app team if you have questions.",
+    "description": "$1 represents the Dapp's origin"
+  },
   "gasFee": {
     "message": "Gas Fee"
   },

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
 import {
   COLORS,
@@ -21,11 +22,20 @@ export default function EditGasDisplay({
   type,
   showEducationButton,
   onEducationClick,
+  dappSuggestedGasFee,
+  dappOrigin,
 }) {
   const t = useContext(I18nContext);
 
   const [warning] = useState(null);
   const [showAdvancedForm, setShowAdvancedForm] = useState(false);
+  const [
+    dappSuggestedGasFeeAcknowledged,
+    setDappSuggestedGasFeeAcknowledged,
+  ] = useState(false);
+
+  const requireDappAcknowledgement =
+    dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged;
 
   return (
     <div className="edit-gas-display">
@@ -38,6 +48,15 @@ export default function EditGasDisplay({
             />
           </div>
         )}
+        {requireDappAcknowledgement && (
+          <div className="edit-gas-display__dapp-acknowledgement-warning">
+            <ActionableMessage
+              className="actionable-message--warning"
+              message={t('gasDisplayDappWarning', [dappOrigin])}
+              useIcon
+            />
+          </div>
+        )}
         {type === 'speed-up' && (
           <div className="edit-gas-display__top-tooltip">
             <Typography
@@ -53,17 +72,34 @@ export default function EditGasDisplay({
             </Typography>
           </div>
         )}
+
         <TransactionTotalBanner total="" detail="" timing="" />
-        <RadioGroup
-          name="gas-recommendation"
-          options={[
-            { value: 'low', label: t('editGasLow'), recommended: false },
-            { value: 'medium', label: t('editGasMedium'), recommended: false },
-            { value: 'high', label: t('editGasHigh'), recommended: true },
-          ]}
-          selectedValue="high"
-        />
-        {!alwaysShowForm && (
+
+        {requireDappAcknowledgement && (
+          <Button
+            className="edit-gas-display__dapp-acknowledgement-button"
+            onClick={() => setDappSuggestedGasFeeAcknowledged(true)}
+          >
+            {t('gasDisplayAcknowledgeDappButtonText')}
+          </Button>
+        )}
+
+        {!requireDappAcknowledgement && (
+          <RadioGroup
+            name="gas-recommendation"
+            options={[
+              { value: 'low', label: t('editGasLow'), recommended: false },
+              {
+                value: 'medium',
+                label: t('editGasMedium'),
+                recommended: false,
+              },
+              { value: 'high', label: t('editGasHigh'), recommended: true },
+            ]}
+            selectedValue="high"
+          />
+        )}
+        {!requireDappAcknowledgement && !alwaysShowForm && (
           <button
             className="edit-gas-display__advanced-button"
             onClick={() => setShowAdvancedForm(!showAdvancedForm)}
@@ -76,9 +112,10 @@ export default function EditGasDisplay({
             )}
           </button>
         )}
-        {(alwaysShowForm || showAdvancedForm) && <AdvancedGasControls />}
+        {((!requireDappAcknowledgement && alwaysShowForm) ||
+          showAdvancedForm) && <AdvancedGasControls />}
       </div>
-      {showEducationButton && (
+      {!requireDappAcknowledgement && showEducationButton && (
         <div className="edit-gas-display__education">
           <button onClick={onEducationClick}>
             {t('editGasEducationButtonText')}
@@ -94,6 +131,8 @@ EditGasDisplay.propTypes = {
   type: PropTypes.oneOf(['customize-gas', 'speed-up']),
   showEducationButton: PropTypes.bool,
   onEducationClick: PropTypes.func,
+  dappSuggestedGasFee: PropTypes.number,
+  dappOrigin: PropTypes.string,
 };
 
 EditGasDisplay.defaultProps = {
@@ -101,4 +140,6 @@ EditGasDisplay.defaultProps = {
   type: 'customize-gas',
   showEducationButton: false,
   onEducationClick: undefined,
+  dappSuggestedGasFee: 0,
+  dappOrigin: '',
 };

ui/components/app/edit-gas-display/edit-gas-display.stories.js

@@ -20,3 +20,14 @@ export const withEducation = () => {
     </div>
   );
 };
+
+export const withDappSuggestedGas = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasDisplay
+        dappSuggestedGasFee="100000"
+        dappOrigin="davidwalsh.name"
+      />
+    </div>
+  );
+};

ui/components/app/edit-gas-display/index.scss

@@ -16,6 +16,20 @@
     }
   }
 
+  &__dapp-acknowledgement-warning {
+    margin-bottom: 20px;
+  }
+
+  button.edit-gas-display__dapp-acknowledgement-button {
+    margin: 0 auto;
+    display: block;
+    color: $secondary-1;
+    border: 1px solid $secondary-1;
+    text-transform: unset;
+    width: auto;
+    background: transparent;
+  }
+
   .radio-group {
     margin: 20px auto;
   }