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

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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 {
+import { renderFeeRange } from '../utils';
-  roundToDecimalPlacesRemovingExtraZeroes,
-  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 {
+  const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY);
-    currency,
-    numberOfDecimals: numberOfDecimalsFiat,
-  } = 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(

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(
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
-  numberish,
-  numberOfDecimalPlaces,
-) {
-  if (numberish) {
-    return toBigNumber.dec(
-      toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
-    );
-  }
-  return null;
-}
 
 export const renderFeeRange = (feeRange) => {
   if (feeRange) {

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 {
+  const { closeAllModals, currentModal } = useTransactionModalContext();
-    closeAllModals,
-    closeModal,
-    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 />}
       >

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 && (
+            <Box>
-              <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
+              {balanceError && (
-            )}
+                <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
-            <div className="edit-gas-fee-popover__content__header">
+              )}
-              <span className="edit-gas-fee-popover__content__header-option">
+              <div className="edit-gas-fee-popover__content__header">
-                <I18nValue messageKey="gasOption" />
+                <span className="edit-gas-fee-popover__content__header-option">
-              </span>
+                  <I18nValue messageKey="gasOption" />
-              <span className="edit-gas-fee-popover__content__header-time">
+                </span>
-                {editGasMode !== EDIT_GAS_MODES.SWAPS && (
+                <span className="edit-gas-fee-popover__content__header-time">
-                  <I18nValue messageKey="time" />
+                  {editGasMode !== EDIT_GAS_MODES.SWAPS && (
-                )}
+                    <I18nValue messageKey="time" />
-              </span>
+                  )}
-              <span className="edit-gas-fee-popover__content__header-max-fee">
+                </span>
-                <I18nValue messageKey="maxFee" />
+                <span className="edit-gas-fee-popover__content__header-max-fee">
-              </span>
+                  <I18nValue messageKey="maxFee" />
-            </div>
+                </span>
-            {(editGasMode === EDIT_GAS_MODES.CANCEL ||
+              </div>
-              editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
+              {(editGasMode === EDIT_GAS_MODES.CANCEL ||
-              <EditGasItem
+                editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
-                priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
+                <EditGasItem
-              />
+                  priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
-            )}
+                />
-            {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
+              )}
-              <EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
+              {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
-            )}
+                <EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.MEDIUM} />
+              )}
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.HIGH} />
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.MEDIUM} />
-            <div className="edit-gas-fee-popover__content__separator" />
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.HIGH} />
-            {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
+              <div className="edit-gas-fee-popover__content__separator" />
-              <EditGasItem priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} />
+              {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
-            )}
+                <EditGasItem priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} />
-            <EditGasItem priorityLevel={PRIORITY_LEVELS.CUSTOM} />
+              )}
-            <NetworkStatistics />
+              <EditGasItem priorityLevel={PRIORITY_LEVELS.CUSTOM} />
-            <Typography
+            </Box>
-              className="edit-gas-fee-popover__know-more"
+            <Box>
-              align="center"
+              <NetworkStatistics />
-              color={COLORS.UI4}
+              <Typography
-              tag={TYPOGRAPHY.Paragraph}
+                className="edit-gas-fee-popover__know-more"
-              variant={TYPOGRAPHY.H7}
+                align="center"
-            >
+                color={COLORS.UI4}
-              <I18nValue
+                tag={TYPOGRAPHY.Paragraph}
-                messageKey="learmMoreAboutGas"
+                variant={TYPOGRAPHY.H7}
-                options={[
+              >
-                  <a
+                <I18nValue
-                    key="learnMoreLink"
+                  messageKey="learmMoreAboutGas"
-                    target="_blank"
+                  options={[
-                    rel="noopener noreferrer"
+                    <a
-                    href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
+                      key="learnMoreLink"
-                  >
+                      target="_blank"
-                    <I18nValue messageKey="learnMore" />
+                      rel="noopener noreferrer"
-                  </a>,
+                      href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
-                ]}
+                    >
-              />
+                      <I18nValue messageKey="learnMore" />
-            </Typography>
+                    </a>,
+                  ]}
+                />
+              </Typography>
+            </Box>
           </div>
         </div>
       </>

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}

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>

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('2.0102')).toBeInTheDocument();
-    expect(queryByText('1.20004164')).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();
   });

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 {

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 {

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">
+      <PriorityFeeTooltip>
-        {priorityFeeRange && (
+        <span className="network-statistics__info__field-data">
-          <PriorityFeeTooltip>{priorityFeeRange}</PriorityFeeTooltip>
+          {priorityFeeRange}
-        )}
+        </span>
-      </span>
+        <span className="network-statistics__info__field-label">
-      <span className="network-statistics__info__field-label">
+          <I18nValue messageKey="priorityFee" />
-        <I18nValue messageKey="priorityFee" />
+        </span>
-      </span>
+      </PriorityFeeTooltip>
     </div>
   );
 }

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">
+          <BaseFeeTooltip>
-            {gasFeeEstimates?.estimatedBaseFee && (
+            <span className="network-statistics__info__field-data">
-              <BaseFeeTooltip>{`${roundToDecimalPlacesRemovingExtraZeroes(
+              {gasFeeEstimates?.estimatedBaseFee &&
-                gasFeeEstimates?.estimatedBaseFee,
+                `${roundToDecimalPlacesRemovingExtraZeroes(
-                0,
+                  gasFeeEstimates?.estimatedBaseFee,
-              )} GWEI`}</BaseFeeTooltip>
+                  0,
-            )}
+                )} GWEI`}
-          </span>
+            </span>
-          <span className="network-statistics__info__field-label">
+            <span className="network-statistics__info__field-label">
-            <I18nValue messageKey="baseFee" />
+              <I18nValue messageKey="baseFee" />
-          </span>
+            </span>
+          </BaseFeeTooltip>
         </div>
         <div className="network-statistics__info__separator" />
         <LatestPriorityFeeField />

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

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

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,
+};

ui/helpers/utils/util.js

@@ -573,7 +573,10 @@ export function roundToDecimalPlacesRemovingExtraZeroes(
   numberish,
   numberOfDecimalPlaces,
 ) {
-  return toBigNumber.dec(
+  if (numberish === undefined || numberish === null) {
-    toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
+    return '';
-  );
+  }
+  return toBigNumber
+    .dec(toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces))
+    .toNumber();
 }

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>

ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js

@@ -174,9 +174,7 @@ describe('TransactionAlerts', () => {
           },
         });
         expect(
-          getByText(
+          getByText('Future transactions will queue after this one.'),
-            'Future transactions will queue after this one. This price was last seen was some time ago.',
-          ),
         ).toBeInTheDocument();
       });
     });
@@ -190,9 +188,7 @@ describe('TransactionAlerts', () => {
           },
         });
         expect(
-          queryByText(
+          queryByText('Future transactions will queue after this one.'),
-            'Future transactions will queue after this one. This price was last seen was some time ago.',
-          ),
         ).not.toBeInTheDocument();
       });
     });