# This is a combination of 3 commits.

# This is the 1st commit message:

Adding tooltips in edit gas fee network status section

# This is the commit message #2:

fix build

# This is the commit message #3:

fix build

app/_locales/en/messages.json

@@ -320,6 +320,9 @@
   "balanceOutdated": {
     "message": "Balance may be outdated"
   },
+  "baseFee": {
+    "message": "Base fee"
+  },
   "basic": {
     "message": "Basic"
   },
@@ -1728,6 +1731,17 @@
   "networkStatus": {
     "message": "Network status"
   },
+  "networkStatusBaseFeeTooltip": {
+    "message": "The base fee is set by the network and changes every 8-12 seconds. Our $1 and $2 options account for sudden increases.",
+    "description": "$1 and $2 are bold text for Medium and Aggressive respectively."
+  },
+  "networkStatusPriorityFeeTooltip": {
+    "message": "Range of prority fees (aka “miner tip”). This goes to miners and incentivizes them to prioritize your transaction."
+  },
+  "networkStatusStabilityFeeTooltip": {
+    "message": "Gas fees are $1 relative to the past 24 hours.",
+    "description": "$1 is networks stability value - stable, low, high"
+  },
   "networkURL": {
     "message": "Network URL"
   },
@@ -2091,6 +2105,9 @@
   "priorityFee": {
     "message": "Priority Fee"
   },
+  "priorityFeeProperCase": {
+    "message": "Priority fee"
+  },
   "privacyMsg": {
     "message": "Privacy Policy"
   },

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

@@ -38,4 +38,8 @@
       }
     }
   }
+
+  &__tooltip-label {
+    font-weight: 700;
+  }
 }

ui/components/app/edit-gas-fee-popover/network-status/network-status.js

@@ -8,6 +8,7 @@ import { useGasFeeContext } from '../../../../contexts/gasFee';
 import I18nValue from '../../../ui/i18n-value';
 import Typography from '../../../ui/typography/typography';
 
+import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips';
 import StatusSlider from './status-slider';
 
 const NetworkStatus = () => {
@@ -27,18 +28,22 @@ const NetworkStatus = () => {
       <div className="network-status__info">
         <div className="network-status__info__field">
           <span className="network-status__info__field-data">
-            {gasFeeEstimates?.estimatedBaseFee &&
-              `${gasFeeEstimates?.estimatedBaseFee} GWEI`}
+            <BaseFeeTooltip>
+              {gasFeeEstimates?.estimatedBaseFee &&
+                `${gasFeeEstimates?.estimatedBaseFee} GWEI`}
+            </BaseFeeTooltip>
+          </span>
+          <span className="network-status__info__field-label">
+            <I18nValue messageKey="baseFee" />
           </span>
-          <span className="network-status__info__field-label">Base fee</span>
         </div>
         <div className="network-status__info__separator" />
         <div className="network-status__info__field network-status__info__field--priority-fee">
           <span className="network-status__info__field-data">
-            0.5 - 22 GWEI
+            <PriorityFeeTooltip>0.5 - 22 GWEI</PriorityFeeTooltip>
           </span>
           <span className="network-status__info__field-label">
-            Priority fee
+            <I18nValue messageKey="priorityFeeProperCase" />
           </span>
         </div>
         <div className="network-status__info__separator" />

ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 55%;
+  width: 56px;
 
   &__line {
     background-image: linear-gradient(to right, #037dd6, #d73a49);

ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import I18nValue from '../../../../ui/i18n-value';
+import { NetworkStabilityTooltip } from '../tooltips';
 
 const GRADIENT_COLORS = [
   '#037DD6',
@@ -15,38 +16,60 @@ const GRADIENT_COLORS = [
   '#C54055',
 ];
 
+const StatusInfo = {
+  low: {
+    statusLabel: 'notBusy',
+    tooltipLabel: 'stable',
+    color: GRADIENT_COLORS[0],
+  },
+  stable: {
+    statusLabel: 'stable',
+    tooltipLabel: 'stable',
+    color: GRADIENT_COLORS[4],
+  },
+  high: {
+    statusLabel: 'busy',
+    tooltipLabel: 'stable',
+    color: GRADIENT_COLORS[9],
+  },
+};
+
+const getStatusInfo = (status) => {
+  if (status <= 0.33) {
+    return StatusInfo.low;
+  } else if (status > 0.66) {
+    return StatusInfo.high;
+  }
+  return StatusInfo.stable;
+};
+
 const StatusSlider = () => {
-  // todo: value below to be replaced with dynamic values from api once it is available
-  // corresponding test cases also to be added
   const statusValue = 0.5;
   const sliderValueNumeric = Math.round(statusValue * 10);
 
-  let statusLabel = 'stable';
-  if (statusValue <= 0.33) {
-    statusLabel = 'notBusy';
-  } else if (statusValue > 0.66) {
-    statusLabel = 'busy';
-  }
+  const statusInfo = getStatusInfo(statusValue);
 
   return (
-    <div className="status-slider">
-      <div className="status-slider__arrow-border">
+    <NetworkStabilityTooltip statusInfo={statusInfo}>
+      <div className="status-slider">
+        <div className="status-slider__arrow-border">
+          <div
+            className="status-slider__arrow"
+            style={{
+              borderTopColor: GRADIENT_COLORS[sliderValueNumeric],
+              marginLeft: `${sliderValueNumeric * 10}%`,
+            }}
+          />
+        </div>
+        <div className="status-slider__line" />
         <div
-          className="status-slider__arrow"
-          style={{
-            borderTopColor: GRADIENT_COLORS[sliderValueNumeric],
-            marginLeft: `${sliderValueNumeric * 10}%`,
-          }}
-        />
-      </div>
-      <div className="status-slider__line" />
-      <div
-        className="status-slider__label"
-        style={{ color: GRADIENT_COLORS[sliderValueNumeric] }}
-      >
-        <I18nValue messageKey={statusLabel} />
+          className="status-slider__label"
+          style={{ color: GRADIENT_COLORS[sliderValueNumeric] }}
+        >
+          <I18nValue messageKey={statusInfo?.statusLabel} />
+        </div>
       </div>
-    </div>
+    </NetworkStabilityTooltip>
   );
 };
 

ui/components/app/edit-gas-fee-popover/network-status/tooltips.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import Tooltip from '../../../ui/tooltip';
+
+const NetworkStatusTooltip = ({ children, html, title }) => (
+  <Tooltip position="top" html={html} title={title} theme="tippy-tooltip-info">
+    {children}
+  </Tooltip>
+);
+
+NetworkStatusTooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  html: PropTypes.node,
+  title: PropTypes.string,
+};
+
+export const BaseFeeTooltip = ({ children }) => {
+  const t = useI18nContext();
+  return (
+    <NetworkStatusTooltip
+      html={t('networkStatusBaseFeeTooltip', [
+        <strong
+          key="base_fee_medium_estimate"
+          className="network-status__tooltip-label"
+        >
+          {t('medium')}
+        </strong>,
+        <strong
+          key="base_fee_high_estimate"
+          className="network-status__tooltip-label"
+        >
+          {t('high')}
+        </strong>,
+      ])}
+    >
+      {children}
+    </NetworkStatusTooltip>
+  );
+};
+
+BaseFeeTooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const PriorityFeeTooltip = ({ children }) => {
+  const t = useI18nContext();
+  return (
+    <NetworkStatusTooltip title={t('networkStatusPriorityFeeTooltip')}>
+      {children}
+    </NetworkStatusTooltip>
+  );
+};
+
+PriorityFeeTooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const NetworkStabilityTooltip = ({ children, statusInfo }) => {
+  const t = useI18nContext();
+
+  return (
+    <NetworkStatusTooltip
+      html={t('networkStatusStabilityFeeTooltip', [
+        <strong
+          key="network-status__tooltip"
+          className="network-status__tooltip-label"
+          style={{ color: statusInfo?.color }}
+        >
+          {t(statusInfo?.tooltipLabel)}
+        </strong>,
+      ])}
+    >
+      {children}
+    </NetworkStatusTooltip>
+  );
+};
+
+NetworkStabilityTooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  statusInfo: PropTypes.object,
+};