diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 4c308c91b..9512aa32e 100644 --- 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" diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 495781f05..d38ec374d 100644 --- 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" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 7250f14c3..7d3fe77dc 100644 --- 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" diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 25f9f5c7e..c70180b6c 100644 --- 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" diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index b951b3887..624d4f4b3 100644 --- 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" diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 3361819c2..aa098370c 100644 --- 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" diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 4f1477f7a..d6663d856 100644 --- 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" diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 99085c5f5..0b2d31fd2 100644 --- 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" diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index efef53600..7b9460350 100644 --- 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" diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 99f68d427..fb58a4f41 100644 --- 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" diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 13edabecb..b3d64447e 100644 --- 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" diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 53f8da176..a2d28f57e 100644 --- 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" diff --git 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 index 26fcd93a8..2354faa84 100644 --- 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( diff --git 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 index 4dfa8852a..8782628f8 100644 --- 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) { diff --git 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 index a422b2acf..d246c67c9 100644 --- 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 = () => { closeModal('advancedGasFee')} onClose={closeAllModals} footer={} > diff --git 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 index ee0dad1d3..cb11ed53b 100644 --- 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 = () => {
- {balanceError && ( - - )} -
- - - - - {editGasMode !== EDIT_GAS_MODES.SWAPS && ( - - )} - - - - -
- {(editGasMode === EDIT_GAS_MODES.CANCEL || - editGasMode === EDIT_GAS_MODES.SPEED_UP) && ( - - )} - {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && ( - - )} - - -
- {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && ( - - )} - - - - - - , - ]} - /> - + + {balanceError && ( + + )} +
+ + + + + {editGasMode !== EDIT_GAS_MODES.SWAPS && ( + + )} + + + + +
+ {(editGasMode === EDIT_GAS_MODES.CANCEL || + editGasMode === EDIT_GAS_MODES.SPEED_UP) && ( + + )} + {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && ( + + )} + + +
+ {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && ( + + )} + + + + + + + + , + ]} + /> + +
diff --git 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 index f6a0104d6..7e8604405 100644 --- 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 ? (
- + ) : null} - {priorityLevel === PRIORITY_LEVELS.HIGH && - editGasMode !== EDIT_GAS_MODES.SWAPS && - !estimateGreaterThanGasUse ? ( -
- - {t('highGasSettingToolTipDialog')} - -
- ) : null} {toolTipMessage && (
{toolTipMessage} @@ -120,7 +112,7 @@ const EditGasToolTip = ({ color={COLORS.NEUTRAL_GREY} className="edit-gas-tooltip__container__value" > - {maxFeePerGas} + {roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)} )}
@@ -138,7 +130,10 @@ const EditGasToolTip = ({ color={COLORS.NEUTRAL_GREY} className="edit-gas-tooltip__container__value" > - {maxPriorityFeePerGas} + {roundToDecimalPlacesRemovingExtraZeroes( + maxPriorityFeePerGas, + 4, + )} )}
@@ -156,7 +151,7 @@ const EditGasToolTip = ({ color={COLORS.NEUTRAL_GREY} className="edit-gas-tooltip__container__value" > - {gasLimit} + {roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)} )}
diff --git 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 index e505b7d62..6c9adbadb 100644 --- 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(); }); diff --git a/ui/components/app/edit-gas-fee-popover/index.scss b/ui/components/app/edit-gas-fee-popover/index.scss index f1c8b27ac..5319938a3 100644 --- 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 { diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss b/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss index 263884abb..d52741eb9 100644 --- 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 { diff --git 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 index 3fc9a7543..12585123c 100644 --- 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 (
- - {priorityFeeRange && ( - {priorityFeeRange} - )} - - - - + + + {priorityFeeRange} + + + + +
); } diff --git 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 index 81b92bc2e..9e2f730c5 100644 --- 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 = () => {
- - {gasFeeEstimates?.estimatedBaseFee && ( - {`${roundToDecimalPlacesRemovingExtraZeroes( - gasFeeEstimates?.estimatedBaseFee, - 0, - )} GWEI`} - )} - - - - + + + {gasFeeEstimates?.estimatedBaseFee && + `${roundToDecimalPlacesRemovingExtraZeroes( + gasFeeEstimates?.estimatedBaseFee, + 0, + )} GWEI`} + + + + +
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js b/ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js index e775c367f..f626959bd 100644 --- 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 }) => ( - {children} + + {children} + ); diff --git a/ui/components/app/gas-timing/index.scss b/ui/components/app/gas-timing/index.scss index 3b158b090..bd4e03c3e 100644 --- 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); } diff --git a/ui/components/ui/loading-heartbeat/index.js b/ui/components/ui/loading-heartbeat/index.js index a94855b91..7c3895d9e 100644 --- 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 }} >
); } + +LoadingHeartBeat.propTypes = { + backgroundColor: PropTypes.string, +}; diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index e35826881..ae2568fbb 100644 --- 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(); } diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js index 31394557d..ae6b195ad 100644 --- 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 ? ( } + message={ + + + + } iconFillColor="#f8c000" type="warning" + useIcon /> ) : null}
diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js index 038e9c3d3..5bb113556 100644 --- 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(); }); });