EIP-1559 - Provide edit button for transaction screens to update gas (#11516)

ui/components/app/transaction-detail-item/index.scss

@@ -3,20 +3,6 @@
 
   &__row {
     display: flex;
-
-    &--action-row {
-      justify-content: flex-end;
-      align-items: flex-start;
-      margin-bottom: 4px;
-    }
-  }
-
-  &__action-button.button {
-    @include H7;
-
-    width: auto;
-    padding: 0;
-    text-transform: uppercase;
   }
 
   &__title {

ui/components/app/transaction-detail-item/transaction-detail-item.component.js

@@ -7,7 +7,6 @@ import {
   FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
-import Button from '../../ui/button';
 
 export default function TransactionDetailItem({
   detailTitle,
@@ -15,22 +14,9 @@ export default function TransactionDetailItem({
   detailTotal,
   subTitle,
   subText,
-  handleActionClick,
-  actionText,
 }) {
   return (
     <div className="transaction-detail-item">
-      {actionText && handleActionClick && (
-        <div className="transaction-detail-item__row transaction-detail-item__row--action-row">
-          <Button
-            className="transaction-detail-item__action-button"
-            onClick={handleActionClick}
-            type="link"
-          >
-            {actionText}
-          </Button>
-        </div>
-      )}
       <div className="transaction-detail-item__row">
         <Typography
           color={COLORS.BLACK}
@@ -77,8 +63,6 @@ export default function TransactionDetailItem({
 }
 
 TransactionDetailItem.propTypes = {
-  handleActionClick: PropTypes.func,
-  actionText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

ui/components/app/transaction-detail/index.scss

@@ -1,5 +1,24 @@
 .transaction-detail {
-  .transaction-detail-item {
+  .transaction-detail-edit {
+    text-align: end;
+    padding-top: 20px;
+
+    button {
+      @include H7;
+
+      color: $primary-1;
+      background: transparent;
+      border: 0;
+      padding-inline-end: 0;
+      text-transform: uppercase;
+    }
+  }
+
+  &-rows &-item:first-child {
+    padding-top: 0;
+  }
+
+  &-item {
     padding: 20px 0;
     border-bottom: 1px solid $ui-3;
 

ui/components/app/transaction-detail/transaction-detail.component.js

@@ -1,15 +1,31 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { I18nContext } from '../../../contexts/i18n';
+
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
 
-export default function TransactionDetail({ rows }) {
-  return <div className="transaction-detail">{rows}</div>;
+export default function TransactionDetail({ rows = [], onEdit }) {
+  const t = useContext(I18nContext);
+
+  return (
+    <div
+      className={classNames('transaction-detail', {
+        'transaction-detail--editable': Boolean(onEdit),
+      })}
+    >
+      {onEdit && (
+        <div className="transaction-detail-edit">
+          <button onClick={onEdit}>{t('edit')}</button>
+        </div>
+      )}
+      <div className="transaction-detail-rows">{rows}</div>
+    </div>
+  );
 }
 
 TransactionDetail.propTypes = {
-  rows: PropTypes.arrayOf(TransactionDetailItem),
-};
-
-TransactionDetail.defaultProps = {
-  rows: [],
+  rows: PropTypes.arrayOf(TransactionDetailItem).isRequired,
+  onEdit: PropTypes.func,
 };

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -49,3 +49,11 @@ export const basic = () => {
     </div>
   );
 };
+
+export const editable = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <TransactionDetail rows={rows} onEdit={() => console.log('Edit!')} />
+    </div>
+  );
+};

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -346,10 +346,19 @@ export default class ConfirmTransactionBase extends Component {
       </div>
     ) : null;
 
+    const showInlineControls = process.env.SHOW_EIP_1559_UI
+      ? advancedInlineGasShown
+      : advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure;
+
+    const showGasEditButton = process.env.SHOW_EIP_1559_UI
+      ? !showInlineControls
+      : !(notMainnetOrTest || gasPriceFetchFailure);
+
     if (process.env.SHOW_EIP_1559_UI) {
       return (
         <div className="confirm-page-container-content__details">
           <TransactionDetail
+            onEdit={() => this.handleEditGas()}
             rows={[
               <TransactionDetailItem
                 key="gas-item"
@@ -400,13 +409,6 @@ export default class ConfirmTransactionBase extends Component {
         </div>
       );
     }
-    const showInlineControls = process.env.SHOW_EIP_1559_UI
-      ? advancedInlineGasShown
-      : advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure;
-
-    const showGasEditButton = process.env.SHOW_EIP_1559_UI
-      ? !showInlineControls
-      : !(notMainnetOrTest || gasPriceFetchFailure);
 
     return (
       <div className="confirm-page-container-content__details">