From 9dd5af35238cb32f779eeabd1b25c4a08c8cb666 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 6 Dec 2021 21:10:20 +0530
Subject: [PATCH] Implementing design feedbacks in EIP-1559 V2 flow (#12943)

---
 app/_locales/en/messages.json                 |  2 +-
 .../base-fee-input/base-fee-input.js          |  6 +-----
 .../edit-gas-fee-popover.test.js              |  2 +-
 .../edit-gas-item/edit-gas-item.js            | 14 +++++++-------
 .../edit-gas-item/edit-gas-item.test.js       |  7 -------
 .../edit-gas-item/index.scss                  | 19 +++++++++++--------
 .../app/edit-gas-fee-popover/index.scss       |  4 ++--
 .../app/transaction-detail/index.scss         |  4 ++++
 .../transaction-detail.component.js           |  7 +++++--
 9 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f00a10f6a..a6e5d5ac2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -167,7 +167,7 @@
     "message": "Advanced"
   },
   "advancedBaseGasFeeToolTip": {
-    "message": "Any difference between your max base fee and the current base fee will be refunded after completion."
+    "message": "When your transaction gets included in the block, any difference between your max base fee and the actual base fee will be refunded. Total amount is calculated as max base fee (in GWEI) * gas limit."
   },
   "advancedGasFeeModalTitle": {
     "message": "Advanced gas fee"
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js
index 1e7739bf3..194db3026 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js
@@ -137,11 +137,7 @@ const BaseFeeInput = () => {
           </Button>
         }
         value={editingInGwei ? maxBaseFeeGWEI : maxBaseFeeMultiplier}
-        detailText={
-          editingInGwei
-            ? `${maxBaseFeeMultiplier}x ${`≈ ${baseFeeInFiat}`}`
-            : `${maxBaseFeeGWEI} GWEI ${`≈ ${baseFeeInFiat}`}`
-        }
+        detailText={`≈ ${baseFeeInFiat}`}
         numeric
       />
       <AdvancedGasFeeInputSubtext
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
index df06ae62c..701a07caf 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
@@ -75,7 +75,7 @@ const render = (txProps) => {
 
 describe('EditGasFeePopover', () => {
   it('should renders low / medium / high options', () => {
-    render();
+    render({ dappSuggestedGasFees: {} });
 
     expect(screen.queryByText('🐢')).toBeInTheDocument();
     expect(screen.queryByText('🦊')).toBeInTheDocument();
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
index 0aac305ca..0b1a2a814 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
@@ -97,18 +97,18 @@ const EditGasItem = ({ priorityLevel }) => {
     }
   };
 
+  if (
+    priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
+    !dappSuggestedGasFees
+  ) {
+    return null;
+  }
+
   return (
     <button
       className={classNames('edit-gas-item', {
         'edit-gas-item--selected': priorityLevel === estimateUsed,
-        'edit-gas-item-disabled':
-          priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
-          !dappSuggestedGasFees,
       })}
-      disabled={
-        priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
-        !dappSuggestedGasFees
-      }
       onClick={onOptionSelect}
       aria-label={priorityLevel}
       autoFocus={priorityLevel === estimateUsed}
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
index 2b71dfa50..f1fa5427a 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
@@ -128,13 +128,6 @@ describe('EditGasItem', () => {
     expect(screen.queryByTitle('0.0000315 ETH')).toBeInTheDocument();
   });
 
-  it('should disable site gas estimate option for is transaction does not have dappSuggestedGasFees', async () => {
-    renderComponent({ priorityLevel: 'dappSuggested' });
-    expect(
-      document.getElementsByClassName('edit-gas-item-disabled'),
-    ).toHaveLength(1);
-  });
-
   it('should renders advance gas estimate option for priorityLevel custom', () => {
     renderComponent({ priorityLevel: 'custom' }, { userFeeLevel: 'high' });
     expect(
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
index 1d7ed379c..8d9e8ee4c 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
@@ -11,12 +11,12 @@
   height: 32px;
   width: 100%;
 
-  &--selected {
-    background-color: $ui-1;
+  &:hover {
+    background-color: $primary-2;
   }
 
-  &-disabled {
-    cursor: default;
+  &-selected {
+    background-color: $ui-1;
   }
 
   &__name {
@@ -25,21 +25,24 @@
     color: $ui-black;
     font-size: 12px;
     font-weight: bold;
-    width: 40%;
+    width: 36%;
   }
 
   &__icon {
+    font-size: 20px;
+    line-height: 1;
     margin-right: 4px;
 
     &-custom {
-      font-size: 20px;
-      line-height: 0;
+      font-size: 32px;
+      line-height: 1;
     }
   }
 
   &__time-estimate {
     display: inline-block;
-    width: 20%;
+    text-align: left;
+    width: 24%;
   }
 
   &__fee-estimate {
diff --git a/ui/components/app/edit-gas-fee-popover/index.scss b/ui/components/app/edit-gas-fee-popover/index.scss
index 581cb5f6b..0b403b78b 100644
--- a/ui/components/app/edit-gas-fee-popover/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/index.scss
@@ -21,12 +21,12 @@
 
       &-option {
         display: inline-block;
-        width: 40%;
+        width: 36%;
       }
 
       &-time {
         display: inline-block;
-        width: 20%;
+        width: 24%;
       }
 
       &-max-fee {
diff --git a/ui/components/app/transaction-detail/index.scss b/ui/components/app/transaction-detail/index.scss
index 1e39d6078..88f1d0930 100644
--- a/ui/components/app/transaction-detail/index.scss
+++ b/ui/components/app/transaction-detail/index.scss
@@ -35,6 +35,10 @@
       white-space: pre;
     }
 
+    &__edit-button {
+      margin-left: 8px;
+    }
+
     i {
       color: $primary-1;
       margin-right: 2px;
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
index 4cc13f442..bb9c4a97f 100644
--- a/ui/components/app/transaction-detail/transaction-detail.component.js
+++ b/ui/components/app/transaction-detail/transaction-detail.component.js
@@ -46,8 +46,11 @@ export default function TransactionDetail({
             </span>
             <i className="fas fa-chevron-right asset-list-item__chevron-right" />
           </button>
-          {estimateUsed === 'custom' && onEdit && (
-            <button onClick={() => openModal('advancedGasFee')}>
+          {estimateUsed === 'custom' && (
+            <button
+              onClick={() => openModal('advancedGasFee')}
+              className="transaction-detail__edit-button"
+            >
               {t('edit')}
             </button>
           )}