Implementing design feedbacks in EIP-1559 V2 flow (#12943)

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"

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={
+        detailText={`≈ ${baseFeeInFiat}`}
-          editingInGwei
-            ? `${maxBaseFeeMultiplier}x ${`≈ ${baseFeeInFiat}`}`
-            : `${maxBaseFeeGWEI} GWEI ${`≈ ${baseFeeInFiat}`}`
-        }
         numeric
       />
       <AdvancedGasFeeInputSubtext

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();

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}

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(

ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss

@@ -11,12 +11,12 @@
   height: 32px;
   width: 100%;
 
-  &--selected {
+  &:hover {
-    background-color: $ui-1;
+    background-color: $primary-2;
   }
 
-  &-disabled {
+  &-selected {
-    cursor: default;
+    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;
+      font-size: 32px;
-      line-height: 0;
+      line-height: 1;
     }
   }
 
   &__time-estimate {
     display: inline-block;
-    width: 20%;
+    text-align: left;
+    width: 24%;
   }
 
   &__fee-estimate {

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 {

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;

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 && (
+          {estimateUsed === 'custom' && (
-            <button onClick={() => openModal('advancedGasFee')}>
+            <button
+              onClick={() => openModal('advancedGasFee')}
+              className="transaction-detail__edit-button"
+            >
               {t('edit')}
             </button>
           )}