Update swaps network fee tooltip (#9614)

* Update network fee tooltip in fee-card to match latest designs

* Clean up css classes and div

app/_locales/en/messages.json

@@ -1643,6 +1643,10 @@
   "swapEstimatedNetworkFee": {
     "message": "Estimated network fee"
   },
+  "swapEstimatedNetworkFeeSummary": {
+    "message": "The “$1” is what we expect the actual fee to be. The exact amount depends on network conditions.",
+    "description": "$1 will be the translation of swapEstimatedNetworkFee, with the font bolded"
+  },
   "swapEstimatedNetworkFees": {
     "message": "Estimated network fees"
   },
@@ -1677,6 +1681,9 @@
   "swapFinalizing": {
     "message": "Finalizing..."
   },
+  "swapGasFeeSummary": {
+    "message": "The gas fee covers the cost of processing your swap and storing it on the Ethereum network. MetaMask does not profit from this fee."
+  },
   "swapGetQuotes": {
     "message": "Get quotes"
   },
@@ -1705,7 +1712,8 @@
     "message": "Transaction may fail, max slippage too low."
   },
   "swapMaxNetworkFeeInfo": {
-    "message": "The Max network fee is the most you’ll pay to complete your transaction. The max fee helps ensure your Swap has the best chance of succeeding. MetaMask does not profit from network fees."
+    "message": "“$1” is the most you’ll spend. When the network is volatile this can be a large amount.",
+    "description": "$1 will be the translation of swapMaxNetworkFees, with the font bolded"
   },
   "swapMaxNetworkFees": {
     "message": "Max network fee"

ui/app/components/ui/info-tooltip/index.scss

@@ -5,24 +5,29 @@
   }
 }
 
-.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-top-color: $white;
 }
 
-.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-right-color: $white;
 }
 
-.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-left-color: $white;
 }
 
-.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-bottom-color: $white;
 }
 
 .tippy-tooltip {
-  &#{&}-info-theme {
+  &#{&}-info-theme,
+  &#{&}-wideInfo-theme {
     background: white;
     color: black;
     box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
@@ -38,4 +43,8 @@
       color: $Grey-500;
     }
   }
+
+  &#{&}-wideInfo-theme {
+    max-width: 260px;
+  }
 }

ui/app/components/ui/info-tooltip/info-tooltip.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Tooltip from '../tooltip'
 
 const positionArrowClassMap = {
@@ -12,17 +13,21 @@ const positionArrowClassMap = {
 export default function InfoTooltip ({
   contentText = '',
   position = '',
+  containerClassName,
+  wrapperClassName,
+  wide,
 }) {
   return (
     <div className="info-tooltip">
       <Tooltip
         interactive
         position={position}
-        containerClassName="info-tooltip__tooltip-container"
+        containerClassName={classnames('info-tooltip__tooltip-container', containerClassName)}
+        wrapperClassName={wrapperClassName}
         tooltipInnerClassName="info-tooltip__tooltip-content"
         tooltipArrowClassName={positionArrowClassMap[position]}
         html={contentText}
-        theme="tippy-tooltip-info"
+        theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
       >
         <img src="images/mm-info-icon.svg" />
       </Tooltip>
@@ -33,4 +38,7 @@ export default function InfoTooltip ({
 InfoTooltip.propTypes = {
   contentText: PropTypes.string,
   position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+  wide: PropTypes.bool,
+  containerClassName: PropTypes.string,
+  wrapperClassName: PropTypes.string,
 }

ui/app/pages/swaps/fee-card/fee-card.js

@@ -22,6 +22,30 @@ export default function FeeCard ({
             <div className="fee-card__row-header-text--bold">
               {t('swapEstimatedNetworkFee')}
             </div>
+            <InfoTooltip
+              position="top"
+              contentText={(
+                <>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapGasFeeSummary') }</p>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapEstimatedNetworkFeeSummary', [
+                    <span className="fee-card__bold" key="fee-card-bold-1">
+                      { t('swapEstimatedNetworkFee') }
+                    </span>,
+                  ]) }
+                  </p>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapMaxNetworkFeeInfo', [
+                    <span className="fee-card__bold" key="fee-card-bold-2">
+                      { t('swapMaxNetworkFees') }
+                    </span>,
+                  ]) }
+                  </p>
+                </>
+              )
+              }
+              containerClassName="fee-card__info-tooltip-content-container"
+              wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
+              wide
+            />
           </div>
           <div>
             <div className="fee-card__row-header-secondary--bold">
@@ -42,12 +66,6 @@ export default function FeeCard ({
             <div className="fee-card__link">
               {t('edit')}
             </div>
-            <div className="fee-card__row-label">
-              <InfoTooltip
-                position="top"
-                contentText={t('swapMaxNetworkFeeInfo')}
-              />
-            </div>
           </div>
           <div>
             <div className="fee-card__row-header-secondary">

ui/app/pages/swaps/fee-card/index.scss

@@ -27,7 +27,7 @@
 
   &__row-header-text,
   &__row-header-text--bold {
-    margin-right: 6px;
+    margin-right: 4px;
     cursor: pointer;
   }
 
@@ -56,6 +56,21 @@
     }
   }
 
+  &__info-tooltip-container {
+    height: 10px;
+    width: 10px;
+    justify-content: center;
+    margin-top: 2px;
+  }
+
+  &__info-tooltip-paragraph {
+    margin-bottom: 8px;
+  }
+
+  &__info-tooltip-paragraph:last-of-type {
+    margin-bottom: 0;
+  }
+
   &__row-fee {
     margin-right: 4px;
   }
@@ -109,6 +124,10 @@
   &__row-header-primary--bold {
     font-weight: bold;
   }
+
+  &__bold {
+    font-weight: bold;
+  }
 }
 
 .info-tooltip {