From a820bce99aeed658cf4b90106aaa52172c6d3286 Mon Sep 17 00:00:00 2001 From: Elliot Winkler Date: Thu, 9 Dec 2021 14:34:38 -0700 Subject: [PATCH] Wire up network stability slider in new gas modal (#13029) Use the new `networkCongestion` property available when we fetch gas fee estimates. --- .../status-slider/index.scss | 7 +- .../status-slider/status-slider.js | 82 +++++++------ .../status-slider/status-slider.test.js | 114 ++++++++++++------ .../network-statistics/tooltips.js | 9 +- 4 files changed, 135 insertions(+), 77 deletions(-) diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss index bc7b60d1d..47626d64c 100644 --- a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss @@ -1,7 +1,6 @@ .status-slider { display: flex; flex-direction: column; - align-items: center; justify-content: center; width: 56px; @@ -17,6 +16,12 @@ font-size: 10px; font-weight: bold; margin-top: 4px; + text-align: center; + } + + &__arrow-container { + margin-left: -10px; + width: 100%; } &__arrow-border { 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 index a0bd8fbe4..7f4f34e77 100644 --- 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 @@ -1,5 +1,6 @@ import React from 'react'; +import { useGasFeeContext } from '../../../../../contexts/gasFee'; import I18nValue from '../../../../ui/i18n-value'; import { NetworkStabilityTooltip } from '../tooltips'; @@ -14,57 +15,70 @@ const GRADIENT_COLORS = [ '#9A4D71', '#B44561', '#C54055', + '#D73A49', ]; -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 determineStatusInfo = (givenNetworkCongestion) => { + const networkCongestion = givenNetworkCongestion ?? 0.5; + const colorIndex = Math.round(networkCongestion * 10); + const color = GRADIENT_COLORS[colorIndex]; + const sliderTickValue = colorIndex * 10; -const getStatusInfo = (status) => { - if (status <= 0.33) { - return STATUS_INFO.low; - } else if (status > 0.66) { - return STATUS_INFO.high; + if (networkCongestion <= 0.33) { + return { + statusLabel: 'notBusy', + tooltipLabel: 'lowLowercase', + color, + sliderTickValue, + }; + } else if (networkCongestion > 0.66) { + return { + statusLabel: 'busy', + tooltipLabel: 'highLowercase', + color, + sliderTickValue, + }; } - return STATUS_INFO.stable; + return { + statusLabel: 'stable', + tooltipLabel: 'stableLowercase', + color, + sliderTickValue, + }; }; const StatusSlider = () => { - const statusValue = 0.5; - const sliderValueNumeric = Math.round(statusValue * 10); - - const statusInfo = getStatusInfo(statusValue); + const { gasFeeEstimates } = useGasFeeContext(); + const statusInfo = determineStatusInfo(gasFeeEstimates.networkCongestion); return ( - +
-
+
+ data-testid="status-slider-arrow-border" + > +
+
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js index a10ed82bb..004838aa0 100644 --- a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js @@ -1,51 +1,89 @@ import React from 'react'; -import { screen } from '@testing-library/react'; import { renderWithProvider } from '../../../../../../test/jest'; -import { ETH } from '../../../../../helpers/constants/common'; -import { GasFeeContextProvider } from '../../../../../contexts/gasFee'; +import { GasFeeContext } from '../../../../../contexts/gasFee'; import configureStore from '../../../../../store/store'; import StatusSlider from './status-slider'; -jest.mock('../../../../../store/actions', () => ({ - disconnectGasFeeEstimatePoller: jest.fn(), - getGasFeeEstimatesAndStartPolling: jest - .fn() - .mockImplementation(() => Promise.resolve()), - addPollingTokenToAppState: jest.fn(), - getGasFeeTimeEstimate: jest - .fn() - .mockImplementation(() => Promise.resolve('unknown')), -})); - -const renderComponent = () => { - const store = configureStore({ - metamask: { - nativeCurrency: ETH, - provider: {}, - cachedBalances: {}, - accounts: { - '0xAddress': { - address: '0xAddress', - balance: '0x176e5b6f173ebe66', - }, - }, - selectedAddress: '0xAddress', - }, - }); - - return renderWithProvider( - +const renderComponent = ({ networkCongestion }) => { + const component = ( + - , - store, + ); + + const store = configureStore(); + + return renderWithProvider(component, store); }; -describe('NetworkStatus', () => { - it('should renders stable for statusValue > 0.33 and <= 0.66', () => { - renderComponent(); - expect(screen.queryByText('Stable')).toBeInTheDocument(); +describe('StatusSlider', () => { + it('should show "Not busy" when networkCongestion is less than 0.33', () => { + const { queryByText } = renderComponent({ networkCongestion: 0.32 }); + expect(queryByText('Not busy')).toBeInTheDocument(); + }); + + it('should show "Not busy" when networkCongestion is 0.33', () => { + const { queryByText } = renderComponent({ networkCongestion: 0.33 }); + expect(queryByText('Not busy')).toBeInTheDocument(); + }); + + it('should show "Stable" when networkCongestion is between 0.33 and 0.66', () => { + const { queryByText } = renderComponent({ networkCongestion: 0.5 }); + expect(queryByText('Stable')).toBeInTheDocument(); + }); + + it('should show "Stable" when networkCongestion is 0.66', () => { + const { queryByText } = renderComponent({ networkCongestion: 0.66 }); + expect(queryByText('Stable')).toBeInTheDocument(); + }); + + it('should show "Busy" when networkCongestion is greater than 0.66', () => { + const { queryByText } = renderComponent({ networkCongestion: 0.67 }); + expect(queryByText('Busy')).toBeInTheDocument(); + }); + + it('should show "Stable" if networkCongestion has not been set yet', () => { + const { getByText } = renderComponent({}); + expect(getByText('Stable')).toBeInTheDocument(); + }); + + it('should position the arrow based on converting networkCongestion to a percentage rounded to the nearest 10', () => { + const { getByTestId } = renderComponent({ networkCongestion: 0.23 }); + expect(getByTestId('status-slider-arrow-border')).toHaveStyle( + 'margin-left: 20%', + ); + }); + + it('should position the arrow in the middle if networkCongestion has not been set yet', () => { + const { getByTestId } = renderComponent({}); + expect(getByTestId('status-slider-arrow-border')).toHaveStyle( + 'margin-left: 50%', + ); + }); + + it('should color the arrow and label based on converting networkCongestion to a percentage rounded to the nearest 10', () => { + const { getByTestId } = renderComponent({ networkCongestion: 0.23 }); + expect(getByTestId('status-slider-arrow')).toHaveStyle( + 'border-top-color: #2D70BA', + ); + expect(getByTestId('status-slider-label')).toHaveStyle('color: #2D70BA'); + }); + + it('should color the arrow and label for the end position if networkCongestion rounds to 100%', () => { + const { getByTestId } = renderComponent({ networkCongestion: 0.95 }); + expect(getByTestId('status-slider-arrow')).toHaveStyle( + 'border-top-color: #D73A49', + ); + expect(getByTestId('status-slider-label')).toHaveStyle('color: #D73A49'); + }); + + it('should color the arrow and label for the middle position if networkCongestion has not been set yet', () => { + const { getByTestId } = renderComponent({}); + expect(getByTestId('status-slider-arrow')).toHaveStyle( + 'border-top-color: #6A5D92', + ); + expect(getByTestId('status-slider-label')).toHaveStyle('color: #6A5D92'); }); }); 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 a9f028c22..e775c367f 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 @@ -57,7 +57,7 @@ PriorityFeeTooltip.propTypes = { children: PropTypes.node.isRequired, }; -export const NetworkStabilityTooltip = ({ children, statusInfo }) => { +export const NetworkStabilityTooltip = ({ children, color, tooltipLabel }) => { const t = useI18nContext(); return ( @@ -66,9 +66,9 @@ export const NetworkStabilityTooltip = ({ children, statusInfo }) => { - {t(statusInfo.tooltipLabel)} + {t(tooltipLabel)} , ])} > @@ -79,5 +79,6 @@ export const NetworkStabilityTooltip = ({ children, statusInfo }) => { NetworkStabilityTooltip.propTypes = { children: PropTypes.node.isRequired, - statusInfo: PropTypes.object, + color: PropTypes.string.isRequired, + tooltipLabel: PropTypes.string.isRequired, };