diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a6e5d5ac2..f9b478e99 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -320,6 +320,9 @@ "balanceOutdated": { "message": "Balance may be outdated" }, + "baseFee": { + "message": "Base fee" + }, "basic": { "message": "Basic" }, @@ -1276,6 +1279,9 @@ "message": "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": { + "message": "high" + }, "history": { "message": "History" }, @@ -1535,6 +1541,9 @@ "message": "Use $1 to wait for a cheaper price. Time estimates are much less accurate as prices are somewhat unpredicible.", "description": "$1 is key 'low' separated here so that it can be passed in with bold fontweight" }, + "lowLowercase": { + "message": "low" + }, "lowPriorityMessage": { "message": "Future transactions will queue after this one. This price was last seen was some time ago." }, @@ -1728,6 +1737,17 @@ "networkStatus": { "message": "Network status" }, + "networkStatusBaseFeeTooltip": { + "message": "The base fee is set by the network and changes every 13-14 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 priority 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 72 hours.", + "description": "$1 is networks stability value - stable, low, high" + }, "networkURL": { "message": "Network URL" }, @@ -2089,6 +2109,9 @@ "message": "Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency." }, "priorityFee": { + "message": "Priority fee" + }, + "priorityFeeProperCase": { "message": "Priority Fee" }, "privacyMsg": { @@ -2552,6 +2575,9 @@ "stable": { "message": "Stable" }, + "stableLowercase": { + "message": "stable" + }, "stateLogError": { "message": "Error in retrieving state logs." }, diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js index e1d717fd8..6bf861674 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js @@ -52,7 +52,7 @@ const PriorityFeeInput = () => { <> { const { balanceError } = useGasFeeContext(); @@ -52,7 +52,7 @@ const EditGasFeePopover = () => {
- + - {t('priorityFee')} + {t('priorityFeeProperCase')} { + const { gasFeeEstimates } = useGasFeeContext(); + + return ( +
+ + + +
+
+ + + {gasFeeEstimates?.estimatedBaseFee && + `${gasFeeEstimates?.estimatedBaseFee} GWEI`} + + + + + +
+
+
+ + 0.5 - 22 GWEI + + + + +
+
+
+ +
+
+
+ ); +}; + +export default NetworkStatistics; diff --git a/ui/components/app/edit-gas-fee-popover/network-status/network-status.test.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js similarity index 93% rename from ui/components/app/edit-gas-fee-popover/network-status/network-status.test.js rename to ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js index 7981b5a72..6ad2d5574 100644 --- a/ui/components/app/edit-gas-fee-popover/network-status/network-status.test.js +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js @@ -6,7 +6,7 @@ import { ETH } from '../../../../helpers/constants/common'; import { GasFeeContextProvider } from '../../../../contexts/gasFee'; import configureStore from '../../../../store/store'; -import NetworkStatus from './network-status'; +import NetworkStatistics from './network-statistics'; jest.mock('../../../../store/actions', () => ({ disconnectGasFeeEstimatePoller: jest.fn(), @@ -44,13 +44,13 @@ const renderComponent = (props) => { return renderWithProvider( - + , store, ); }; -describe('NetworkStatus', () => { +describe('NetworkStatistics', () => { it('should renders labels', () => { renderComponent(); expect(screen.queryByText('Base fee')).toBeInTheDocument(); diff --git a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.js b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.js similarity index 100% rename from ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.js rename to ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.js diff --git a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.scss b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss similarity index 98% rename from ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.scss rename to ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss index 2ae4daf0c..bc7b60d1d 100644 --- a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/index.scss +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/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); diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js new file mode 100644 index 000000000..a0bd8fbe4 --- /dev/null +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import I18nValue from '../../../../ui/i18n-value'; +import { NetworkStabilityTooltip } from '../tooltips'; + +const GRADIENT_COLORS = [ + '#037DD6', + '#1876C8', + '#2D70BA', + '#4369AB', + '#57629E', + '#6A5D92', + '#805683', + '#9A4D71', + '#B44561', + '#C54055', +]; + +const STATUS_INFO = { + low: { + statusLabel: 'notBusy', + tooltipLabel: 'lowLowercase', + color: GRADIENT_COLORS[0], + }, + stable: { + statusLabel: 'stable', + tooltipLabel: 'stableLowercase', + color: GRADIENT_COLORS[4], + }, + high: { + statusLabel: 'busy', + tooltipLabel: 'highLowercase', + color: GRADIENT_COLORS[9], + }, +}; + +const getStatusInfo = (status) => { + if (status <= 0.33) { + return STATUS_INFO.low; + } else if (status > 0.66) { + return STATUS_INFO.high; + } + return STATUS_INFO.stable; +}; + +const StatusSlider = () => { + const statusValue = 0.5; + const sliderValueNumeric = Math.round(statusValue * 10); + + const statusInfo = getStatusInfo(statusValue); + + return ( + +
+
+
+
+
+
+ +
+
+ + ); +}; + +export default StatusSlider; diff --git a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.test.js b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js similarity index 100% rename from ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.test.js rename to ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js 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 new file mode 100644 index 000000000..a9f028c22 --- /dev/null +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/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 }) => ( + + {children} + +); + +NetworkStatusTooltip.propTypes = { + children: PropTypes.node.isRequired, + html: PropTypes.node, + title: PropTypes.string, +}; + +export const BaseFeeTooltip = ({ children }) => { + const t = useI18nContext(); + return ( + + {t('medium')} + , + + {t('high')} + , + ])} + > + {children} + + ); +}; + +BaseFeeTooltip.propTypes = { + children: PropTypes.node.isRequired, +}; + +export const PriorityFeeTooltip = ({ children }) => { + const t = useI18nContext(); + return ( + + {children} + + ); +}; + +PriorityFeeTooltip.propTypes = { + children: PropTypes.node.isRequired, +}; + +export const NetworkStabilityTooltip = ({ children, statusInfo }) => { + const t = useI18nContext(); + + return ( + + {t(statusInfo.tooltipLabel)} + , + ])} + > + {children} + + ); +}; + +NetworkStabilityTooltip.propTypes = { + children: PropTypes.node.isRequired, + statusInfo: PropTypes.object, +}; diff --git a/ui/components/app/edit-gas-fee-popover/network-status/index.js b/ui/components/app/edit-gas-fee-popover/network-status/index.js deleted file mode 100644 index 0ba1f18f3..000000000 --- a/ui/components/app/edit-gas-fee-popover/network-status/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './network-status'; diff --git a/ui/components/app/edit-gas-fee-popover/network-status/network-status.js b/ui/components/app/edit-gas-fee-popover/network-status/network-status.js deleted file mode 100644 index 1ad983f59..000000000 --- a/ui/components/app/edit-gas-fee-popover/network-status/network-status.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import { - COLORS, - TYPOGRAPHY, -} from '../../../../helpers/constants/design-system'; -import { useGasFeeContext } from '../../../../contexts/gasFee'; -import I18nValue from '../../../ui/i18n-value'; -import Typography from '../../../ui/typography/typography'; - -import StatusSlider from './status-slider'; - -const NetworkStatus = () => { - const { gasFeeEstimates } = useGasFeeContext(); - - return ( -
- - - -
-
- - {gasFeeEstimates?.estimatedBaseFee && - `${gasFeeEstimates?.estimatedBaseFee} GWEI`} - - Base fee -
-
-
- - 0.5 - 22 GWEI - - - Priority fee - -
-
-
- -
-
-
- ); -}; - -NetworkStatus.propTypes = {}; - -export default NetworkStatus; diff --git a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.js b/ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.js deleted file mode 100644 index 8271cac6a..000000000 --- a/ui/components/app/edit-gas-fee-popover/network-status/status-slider/status-slider.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import I18nValue from '../../../../ui/i18n-value'; - -const GRADIENT_COLORS = [ - '#037DD6', - '#1876C8', - '#2D70BA', - '#4369AB', - '#57629E', - '#6A5D92', - '#805683', - '#9A4D71', - '#B44561', - '#C54055', -]; - -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'; - } - - return ( -
-
-
-
-
-
- -
-
- ); -}; - -export default StatusSlider;