UI fixes in EIP-1559 V2 screens (#13367)

2024-12-23 09:52:26 +01:00 · 2022-01-22 05:53:02 +05:30 · 2022-01-22 05:53:02 +05:30 · 119e5497ff
commit 119e5497ff
parent d25f0e5817
29 changed files with 161 additions and 176 deletions
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Επιθετική"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Υψηλή πιθανότητα, ακόμη και σε ευμετάβλητες αγορές"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Χρησιμοποιήστε $1 για να καλύψετε απότομες αυξήσεις της κίνησης του δικτύου λόγω των δημοφιλών ξεκινημάτων NFT.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -663,7 +663,7 @@
    "message": "Customize Gas"
  },
  "customGasSettingToolTipMessage": {
-    "message": "Use $1 to customise the gas price. This can be confusing if you aren’t familiar. Interact at your own risk.",
+    "message": "Use $1 to customize the gas price. This can be confusing if you aren’t familiar. Interact at your own risk.",
    "description": "$1 is key 'advanced' (text: 'Advanced') separated here so that it can be passed in with bold fontweight"
  },
  "customGasSubTitle": {
@ -1360,11 +1360,8 @@
  "high": {
    "message": "Aggressive"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "High probability, even in volatile markets"
-  },
  "highGasSettingToolTipMessage": {
-    "message": "Use $1 to cover surges in network traffic due to things like popular NFT drops.",
+    "message": "High probability, even in volatile markets. Use $1 to cover surges in network traffic due to things like popular NFT drops.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
  },
  "highLowercase": {
@ -1654,7 +1651,7 @@
    "message": "low"
  },
  "lowPriorityMessage": {
-    "message": "Future transactions will queue after this one. This price was last seen was some time ago."
+    "message": "Future transactions will queue after this one."
  },
  "mainnet": {
    "message": "Ethereum Mainnet"
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Agressif"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Probabilité élevée, même sur des marchés volatils"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Utilisez $1 pour couvrir les envolées du trafic réseau dues à des événements tels que les chutes de NFT populaires.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "आक्रामक"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "उच्च संभावना, अस्थिर बाजारों में भी"
-  },
  "highGasSettingToolTipMessage": {
    "message": "लोकप्रिय NFT ड्रॉप जैसी चीज़ों की वजह से नेटवर्क ट्रैफिक में वृद्धि को कवर करने के लिए $1 का उपयोग करें।",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Agresif"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Probabilitas tinggi, bahkan di pasar yang tidak stabil"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Gunakan $1 untuk menutupi lonjakan lalu lintas jaringan karena hal-hal seperti penurunan NFT populer.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "積極的"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "変動の激しい市場においても高い確率"
-  },
  "highGasSettingToolTipMessage": {
    "message": "人気のNFTドロップなどによるネットワークトラフィックの急増に備えるため、$1を使用してください。",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "공격적"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "변동성이 큰 시장에서도 높은 확률"
-  },
  "highGasSettingToolTipMessage": {
    "message": "인기 있는 NFT의 하락 등으로 인한 네트워크 트래픽 급증을 커버하려면 $1을 사용하세요.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Агрессивный"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Высокая вероятность даже на волатильных рынках"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Используйте $1, чтобы компенсировать скачки сетевого трафика из-за таких событий, как дропы популярных NFT.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Agresibo"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Mataas na probabilidad, kahit sa mga pabagu-bagong market"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Gamitin ang $1 upang pagtakpan ang mga surge sa network traffic dahil sa mga bagay tulad ng popular na pagbagsak ng NFT.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Agresif"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Dalgalı piyasalarda dahi yüksek olasılık"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Popüler NFT düşüşleri gibi şeyler nedeniyle ağ trafiğindeki dalgalanmaları kapsayacak şekilde $1 kullanın.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "Linh hoạt"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "Có khả năng cao, ngay cả trong thị trường biến động"
-  },
  "highGasSettingToolTipMessage": {
    "message": "Sử dụng $1 để bù đắp khi lưu lượng mạng lưới tăng vọt trong những trường hợp như phát hành NFT nổi tiếng.",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -1293,9 +1293,6 @@
  "high": {
    "message": "进取"
  },
-  "highGasSettingToolTipDialog": {
-    "message": "高概率，即使在不稳定的市场中也是如此。"
-  },
  "highGasSettingToolTipMessage": {
    "message": "使用$1来覆盖网络流量因像流行的 NFT 丢弃而出现的剧增。",
    "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
--- 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
@ -4,7 +4,11 @@ import { useSelector } from 'react-redux';
 import { HIGH_FEE_WARNING_MULTIPLIER } from '../../../../../pages/send/send.constants';
 import { PRIORITY_LEVELS } from '../../../../../../shared/constants/gas';
 import { SECONDARY } from '../../../../../helpers/constants/common';
-import { bnGreaterThan, bnLessThan } from '../../../../../helpers/utils/util';
+import {
+  bnGreaterThan,
+  bnLessThan,
+  roundToDecimalPlacesRemovingExtraZeroes,
+} from '../../../../../helpers/utils/util';
 import { decGWEIToHexWEI } from '../../../../../helpers/utils/conversions.util';
 import { getAdvancedGasFeeValues } from '../../../../../selectors';
 import { useGasFeeContext } from '../../../../../contexts/gasFee';
@ -16,10 +20,7 @@ import FormField from '../../../../ui/form-field';

 import { useAdvancedGasFeePopoverContext } from '../../context';
 import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
-import {
-  roundToDecimalPlacesRemovingExtraZeroes,
-  renderFeeRange,
-} from '../utils';
+import { renderFeeRange } from '../utils';

 const validateBaseFee = (value, gasFeeEstimates, maxPriorityFeePerGas) => {
  if (bnGreaterThan(maxPriorityFeePerGas, value)) {
@ -60,10 +61,7 @@ const BaseFeeInput = () => {
    baseFeeTrend,
  } = gasFeeEstimates;
  const [baseFeeError, setBaseFeeError] = useState();
-  const {
-    currency,
-    numberOfDecimals: numberOfDecimalsFiat,
-  } = useUserPreferencedCurrency(SECONDARY);
+  const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY);

  const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);

@ -80,7 +78,7 @@ const BaseFeeInput = () => {

  const [, { value: baseFeeInFiat }] = useCurrencyDisplay(
    decGWEIToHexWEI(baseFee),
-    { currency, numberOfDecimalsFiat },
+    { currency, numberOfDecimals },
  );

  const updateBaseFee = useCallback(
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js
@ -1,17 +1,6 @@
 import { uniq } from 'lodash';
-import { toBigNumber } from '../../../../../shared/modules/conversion.utils';

-export function roundToDecimalPlacesRemovingExtraZeroes(
-  numberish,
-  numberOfDecimalPlaces,
-) {
-  if (numberish) {
-    return toBigNumber.dec(
-      toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
-    );
-  }
-  return null;
-}
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';

 export const renderFeeRange = (feeRange) => {
  if (feeRange) {
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js
@ -13,11 +13,7 @@ import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults';

 const AdvancedGasFeePopover = () => {
  const t = useI18nContext();
-  const {
-    closeAllModals,
-    closeModal,
-    currentModal,
-  } = useTransactionModalContext();
+  const { closeAllModals, currentModal } = useTransactionModalContext();

  if (currentModal !== 'advancedGasFee') {
    return null;
@ -28,7 +24,6 @@ const AdvancedGasFeePopover = () => {
      <Popover
        className="advanced-gas-fee-popover"
        title={t('advancedGasFeeModalTitle')}
-        onBack={() => closeModal('advancedGasFee')}
        onClose={closeAllModals}
        footer={<AdvancedGasFeeSaveButton />}
      >
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
@ -6,6 +6,7 @@ import {
 } from '../../../../shared/constants/gas';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
+import Box from '../../ui/box';
 import ErrorMessage from '../../ui/error-message';
 import I18nValue from '../../ui/i18n-value';
 import Popover from '../../ui/popover';
@ -51,60 +52,64 @@ const EditGasFeePopover = () => {
        <AppLoadingSpinner />
        <div className="edit-gas-fee-popover__wrapper">
          <div className="edit-gas-fee-popover__content">
-            {balanceError && (
-              <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
-            )}
-            <div className="edit-gas-fee-popover__content__header">
-              <span className="edit-gas-fee-popover__content__header-option">
-                <I18nValue messageKey="gasOption" />
-              </span>
-              <span className="edit-gas-fee-popover__content__header-time">
-                {editGasMode !== EDIT_GAS_MODES.SWAPS && (
-                  <I18nValue messageKey="time" />
-                )}
-              </span>
-              <span className="edit-gas-fee-popover__content__header-max-fee">
-                <I18nValue messageKey="maxFee" />
-              </span>
-            </div>
-            {(editGasMode === EDIT_GAS_MODES.CANCEL ||
-              editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
-              <EditGasItem
-                priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
-              />
-            )}
-            {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
-              <EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
-            )}
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.MEDIUM} />
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.HIGH} />
-            <div className="edit-gas-fee-popover__content__separator" />
-            {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
-              <EditGasItem priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} />
-            )}
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.CUSTOM} />
-            <NetworkStatistics />
-            <Typography
-              className="edit-gas-fee-popover__know-more"
-              align="center"
-              color={COLORS.UI4}
-              tag={TYPOGRAPHY.Paragraph}
-              variant={TYPOGRAPHY.H7}
-            >
-              <I18nValue
-                messageKey="learmMoreAboutGas"
-                options={[
-                  <a
-                    key="learnMoreLink"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
-                  >
-                    <I18nValue messageKey="learnMore" />
-                  </a>,
-                ]}
-              />
-            </Typography>
+            <Box>
+              {balanceError && (
+                <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
+              )}
+              <div className="edit-gas-fee-popover__content__header">
+                <span className="edit-gas-fee-popover__content__header-option">
+                  <I18nValue messageKey="gasOption" />
+                </span>
+                <span className="edit-gas-fee-popover__content__header-time">
+                  {editGasMode !== EDIT_GAS_MODES.SWAPS && (
+                    <I18nValue messageKey="time" />
+                  )}
+                </span>
+                <span className="edit-gas-fee-popover__content__header-max-fee">
+                  <I18nValue messageKey="maxFee" />
+                </span>
+              </div>
+              {(editGasMode === EDIT_GAS_MODES.CANCEL ||
+                editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
+                <EditGasItem
+                  priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
+                />
+              )}
+              {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
+                <EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
+              )}
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.MEDIUM} />
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.HIGH} />
+              <div className="edit-gas-fee-popover__content__separator" />
+              {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
+                <EditGasItem priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} />
+              )}
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.CUSTOM} />
+            </Box>
+            <Box>
+              <NetworkStatistics />
+              <Typography
+                className="edit-gas-fee-popover__know-more"
+                align="center"
+                color={COLORS.UI4}
+                tag={TYPOGRAPHY.Paragraph}
+                variant={TYPOGRAPHY.H7}
+              >
+                <I18nValue
+                  messageKey="learmMoreAboutGas"
+                  options={[
+                    <a
+                      key="learnMoreLink"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
+                    >
+                      <I18nValue messageKey="learnMore" />
+                    </a>,
+                  ]}
+                />
+              </Typography>
+            </Box>
          </div>
        </div>
      </>
--- 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
@ -121,7 +121,11 @@ const EditGasItem = ({ priorityLevel }) => {
      >
        {hexMaximumTransactionFee ? (
          <div className="edit-gas-item__maxfee">
-            <LoadingHeartBeat />
+            <LoadingHeartBeat
+              backgroundColor={
+                priorityLevel === estimateUsed ? '#f2f3f4' : '#fff'
+              }
+            />
            <UserPreferencedCurrencyDisplay
              key="editGasSubTextFeeAmount"
              type={PRIMARY}
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
@ -9,6 +9,7 @@ import {
  FONT_WEIGHT,
  TYPOGRAPHY,
 } from '../../../../helpers/constants/design-system';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
 import Typography from '../../../ui/typography';

 const EditGasToolTip = ({
@ -89,15 +90,6 @@ const EditGasToolTip = ({
      !estimateGreaterThanGasUse ? (
        <img alt="" src={`./images/curve-${priorityLevel}.svg`} />
      ) : null}
-      {priorityLevel === PRIORITY_LEVELS.HIGH &&
-      editGasMode !== EDIT_GAS_MODES.SWAPS &&
-      !estimateGreaterThanGasUse ? (
-        <div className="edit-gas-tooltip__container__dialog">
-          <Typography variant={TYPOGRAPHY.H7} color={COLORS.WHITE}>
-            {t('highGasSettingToolTipDialog')}
-          </Typography>
-        </div>
-      ) : null}
      {toolTipMessage && (
        <div className="edit-gas-tooltip__container__message">
          <Typography variant={TYPOGRAPHY.H7}>{toolTipMessage}</Typography>
@ -120,7 +112,7 @@ const EditGasToolTip = ({
                color={COLORS.NEUTRAL_GREY}
                className="edit-gas-tooltip__container__value"
              >
-                {maxFeePerGas}
+                {roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
              </Typography>
            )}
          </div>
@ -138,7 +130,10 @@ const EditGasToolTip = ({
                color={COLORS.NEUTRAL_GREY}
                className="edit-gas-tooltip__container__value"
              >
-                {maxPriorityFeePerGas}
+                {roundToDecimalPlacesRemovingExtraZeroes(
+                  maxPriorityFeePerGas,
+                  4,
+                )}
              </Typography>
            )}
          </div>
@ -156,7 +151,7 @@ const EditGasToolTip = ({
                color={COLORS.NEUTRAL_GREY}
                className="edit-gas-tooltip__container__value"
              >
-                {gasLimit}
+                {roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}
              </Typography>
            )}
          </div>
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js
@ -63,8 +63,8 @@ describe('EditGasToolTip', () => {
      ...LOW_GAS_OPTION,
    });

-    expect(queryByText('2.010203381')).toBeInTheDocument();
-    expect(queryByText('1.20004164')).toBeInTheDocument();
+    expect(queryByText('2.0102')).toBeInTheDocument();
+    expect(queryByText('1.2')).toBeInTheDocument();
    expect(queryByText('21000')).toBeInTheDocument();
  });

@ -73,7 +73,7 @@ describe('EditGasToolTip', () => {
      priorityLevel: 'medium',
      ...MEDIUM_GAS_OPTION,
    });
-    expect(queryByText('2.383812808')).toBeInTheDocument();
+    expect(queryByText('2.3838')).toBeInTheDocument();
    expect(queryByText('1.5')).toBeInTheDocument();
    expect(queryByText('21000')).toBeInTheDocument();
  });
@ -83,7 +83,7 @@ describe('EditGasToolTip', () => {
      priorityLevel: 'high',
      ...HIGH_GAS_OPTION,
    });
-    expect(queryByText('2.920638342')).toBeInTheDocument();
+    expect(queryByText('2.9206')).toBeInTheDocument();
    expect(queryByText('2')).toBeInTheDocument();
    expect(queryByText('21000')).toBeInTheDocument();
  });
--- a/ui/components/app/edit-gas-fee-popover/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/index.scss
@ -3,9 +3,14 @@

  &__wrapper {
    border-top: 1px solid var(--ui-grey);
+    height: 100%;
  }

  &__content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
    padding: 16px 12px;

    & .error-message {
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
@ -1,5 +1,5 @@
 .network-statistics {
-  margin: 24px 0 12px;
+  margin: 24px 12px 12px;

  &__info {
    border-top: 1px solid var(--ui-2);
@ -21,10 +21,6 @@
      justify-content: center;
      width: 30%;

-      &--priority-fee {
-        width: 40%;
-      }
-
      &-data {
        color: var(--ui-4);
        font-size: 12px;
@ -38,6 +34,10 @@
        margin-top: 4px;
      }
    }
+
+    .latest-priority-fee-field {
+      width: 40%;
+    }
  }

  &__tooltip-label {
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js
@ -22,14 +22,14 @@ export default function LatestPriorityFeeField() {

  return (
    <div className="network-statistics__info__field latest-priority-fee-field">
-      <span className="network-statistics__info__field-data">
-        {priorityFeeRange && (
-          <PriorityFeeTooltip>{priorityFeeRange}</PriorityFeeTooltip>
-        )}
-      </span>
-      <span className="network-statistics__info__field-label">
-        <I18nValue messageKey="priorityFee" />
-      </span>
+      <PriorityFeeTooltip>
+        <span className="network-statistics__info__field-data">
+          {priorityFeeRange}
+        </span>
+        <span className="network-statistics__info__field-label">
+          <I18nValue messageKey="priorityFee" />
+        </span>
+      </PriorityFeeTooltip>
    </div>
  );
 }
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
@ -29,17 +29,18 @@ const NetworkStatistics = () => {
      </Typography>
      <div className="network-statistics__info">
        <div className="network-statistics__info__field">
-          <span className="network-statistics__info__field-data">
-            {gasFeeEstimates?.estimatedBaseFee && (
-              <BaseFeeTooltip>{`${roundToDecimalPlacesRemovingExtraZeroes(
-                gasFeeEstimates?.estimatedBaseFee,
-                0,
-              )} GWEI`}</BaseFeeTooltip>
-            )}
-          </span>
-          <span className="network-statistics__info__field-label">
-            <I18nValue messageKey="baseFee" />
-          </span>
+          <BaseFeeTooltip>
+            <span className="network-statistics__info__field-data">
+              {gasFeeEstimates?.estimatedBaseFee &&
+                `${roundToDecimalPlacesRemovingExtraZeroes(
+                  gasFeeEstimates?.estimatedBaseFee,
+                  0,
+                )} GWEI`}
+            </span>
+            <span className="network-statistics__info__field-label">
+              <I18nValue messageKey="baseFee" />
+            </span>
+          </BaseFeeTooltip>
        </div>
        <div className="network-statistics__info__separator" />
        <LatestPriorityFeeField />
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js
@ -2,11 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import Box from '../../../ui/box';
 import Tooltip from '../../../ui/tooltip';

+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+} from '../../../../helpers/constants/design-system';
+
 const NetworkStatusTooltip = ({ children, html, title }) => (
  <Tooltip position="top" html={html} title={title} theme="tippy-tooltip-info">
-    {children}
+    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
+      {children}
+    </Box>
  </Tooltip>
 );

--- a/ui/components/app/gas-timing/index.scss
+++ b/ui/components/app/gas-timing/index.scss
@ -5,6 +5,11 @@
    color: var(--success-3);
  }

+  &--positive-V2 {
+    color: var(--success-3);
+    font-weight: bold;
+  }
+
  &--warning {
    color: var(--alert-3);
  }
--- a/ui/components/ui/loading-heartbeat/index.js
+++ b/ui/components/ui/loading-heartbeat/index.js
@ -1,13 +1,15 @@
-import classNames from 'classnames';
-import React from 'react';
 import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
 import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
 import { useShouldAnimateGasEstimations } from '../../../hooks/useShouldAnimateGasEstimations';

 const BASE_CLASS = 'loading-heartbeat';
 const LOADING_CLASS = `${BASE_CLASS}--active`;

-export default function LoadingHeartBeat() {
+export default function LoadingHeartBeat({ backgroundColor = '#fff' }) {
  useShouldAnimateGasEstimations();
  const active = useSelector(getGasLoadingAnimationIsShowing);

@ -24,6 +26,11 @@ export default function LoadingHeartBeat() {
        e.preventDefault();
        e.stopPropagation();
      }}
+      style={{ backgroundColor }}
    ></div>
  );
 }
+
+LoadingHeartBeat.propTypes = {
+  backgroundColor: PropTypes.string,
+};
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@ -573,7 +573,10 @@ export function roundToDecimalPlacesRemovingExtraZeroes(
  numberish,
  numberOfDecimalPlaces,
 ) {
-  return toBigNumber.dec(
-    toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
-  );
+  if (numberish === undefined || numberish === null) {
+    return '';
+  }
+  return toBigNumber
+    .dec(toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces))
+    .toNumber();
 }
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
@ -111,9 +111,19 @@ const TransactionAlerts = ({
      )}
      {isNetworkBusy ? (
        <ActionableMessage
-          message={<I18nValue messageKey="networkIsBusy" />}
+          message={
+            <Typography
+              align="left"
+              margin={[0, 0]}
+              tag={TYPOGRAPHY.Paragraph}
+              variant={TYPOGRAPHY.H7}
+            >
+              <I18nValue messageKey="networkIsBusy" />
+            </Typography>
+          }
          iconFillColor="#f8c000"
          type="warning"
+          useIcon
        />
      ) : null}
    </div>
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
@ -174,9 +174,7 @@ describe('TransactionAlerts', () => {
          },
        });
        expect(
-          getByText(
-            'Future transactions will queue after this one. This price was last seen was some time ago.',
-          ),
+          getByText('Future transactions will queue after this one.'),
        ).toBeInTheDocument();
      });
    });
@ -190,9 +188,7 @@ describe('TransactionAlerts', () => {
          },
        });
        expect(
-          queryByText(
-            'Future transactions will queue after this one. This price was last seen was some time ago.',
-          ),
+          queryByText('Future transactions will queue after this one.'),
        ).not.toBeInTheDocument();
      });
    });