From 113fdc189c2cbd10ae8a1cb4e2fed73c166b2a9a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 26 Jun 2023 21:52:54 +0100 Subject: [PATCH] Part of #17670: Replace Typography with Text component in CancelSpeedupPopover (#18638) * create story * replace Typography with Text component * review changes * replace CSS with props styling * use `Button` from `component-library` * tooltip HTML refactor with `component-library` components * remove whitespace in story * strong tag support within Text component * addresses #18651 * taken from #18752 as suggested in https://github.com/MetaMask/metamask-extension/pull/18638#discussion_r1176334805 * replace `strong` with new `Text as="strong"` * remove unneccessary css from fa564e3f036f1439f9f220cca23595b508760614 * add text variant definition * Updating text variant of button * restrore proper spacing between elements * Quick fix for test * Adding key --------- Co-authored-by: georgewrmarshall Co-authored-by: Garrett Bear --- .../cancel-speedup-popover.js | 64 +++++++-------- .../cancel-speedup-popover.stories.js | 80 +++++++++++++++++++ .../cancel-speedup-popover.test.js | 4 +- .../app/cancel-speedup-popover/index.scss | 3 +- 4 files changed, 113 insertions(+), 38 deletions(-) create mode 100644 ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js index 72b6eacf9..377d7eaeb 100644 --- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js +++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js @@ -1,11 +1,10 @@ import { useSelector } from 'react-redux'; import React, { useEffect } from 'react'; -import { Text } from '../../component-library'; import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas'; import { AlignItems, - DISPLAY, - FLEX_DIRECTION, + Display, + FlexDirection, TextVariant, } from '../../../helpers/constants/design-system'; import { getAppIsLoading } from '../../../selectors'; @@ -16,10 +15,10 @@ import { useTransactionModalContext } from '../../../contexts/transaction-modal' import EditGasFeeButton from '../edit-gas-fee-button'; import GasDetailsItem from '../gas-details-item'; import Box from '../../ui/box'; -import Button from '../../ui/button'; import InfoTooltip from '../../ui/info-tooltip'; import Popover from '../../ui/popover'; import AppLoadingSpinner from '../app-loading-spinner'; +import { Text, Button, ButtonLink } from '../../component-library'; const CancelSpeedupPopover = () => { const { @@ -98,11 +97,11 @@ const CancelSpeedupPopover = () => {
{t('cancelSpeedUpLabel', [ {t('replace')}, @@ -110,42 +109,39 @@ const CancelSpeedupPopover = () => { - {t('cancelSpeedUpTransactionTooltip', [ - editGasMode === EditGasModes.cancel - ? t('cancel') - : t('speedUp'), - ])} - - + <> + + {t('cancelSpeedUpTransactionTooltip', [ + editGasMode === EditGasModes.cancel + ? t('cancel') + : t('speedUp'), + ])} + + + {t('learnMoreUpperCase')} + + } /> -
- +
{!appIsLoading && } - - +
+
- +
- +
); diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js new file mode 100644 index 000000000..0b2d541d7 --- /dev/null +++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import BigNumber from 'bignumber.js'; +import configureStore from '../../../store/store'; +import { TransactionModalContext } from '../../../contexts/transaction-modal'; +import mockEstimates from '../../../../test/data/mock-estimates.json'; +import mockState from '../../../../test/data/mock-state.json'; +import { + EditGasModes, + GasEstimateTypes, +} from '../../../../shared/constants/gas'; +import { decGWEIToHexWEI } from '../../../../shared/modules/conversion.utils'; +import { GasFeeContextProvider } from '../../../contexts/gasFee'; +import CancelSpeedupPopover from './cancel-speedup-popover'; + +const store = configureStore({ + metamask: { + ...mockState.metamask, + accounts: { + [mockState.metamask.selectedAddress]: { + address: mockState.metamask.selectedAddress, + balance: '0x1F4', + }, + }, + gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates, + }, +}); + +const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI = + mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates.medium + .suggestedMaxFeePerGas; + +const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI = new BigNumber( + decGWEIToHexWEI(MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI), + 16, +); + +const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI = + MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI.toString(16); + +export default { + title: 'Components/App/CancelSpeedupPopover', + component: CancelSpeedupPopover, + decorators: [ + (story) => ( + + + undefined, + currentModal: 'cancelSpeedUpTransaction', + }} + > + {story()} + + + + ), + ], +}; + +export const DefaultStory = (args) => { + return ( +
+ +
+ ); +}; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js index 1d8c28056..1512b8992 100644 --- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js +++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js @@ -125,7 +125,7 @@ describe('CancelSpeedupPopover', () => { it('information tooltip should contain the correct text if editGasMode is cancel', async () => { await act(async () => render()); expect( - InfoTooltip.mock.calls[0][0].contentText.props.children[0], + InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children, ).toStrictEqual( 'To Cancel a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.', ); @@ -134,7 +134,7 @@ describe('CancelSpeedupPopover', () => { it('information tooltip should contain the correct text if editGasMode is speedup', async () => { await act(async () => render({ editGasMode: EditGasModes.speedUp })); expect( - InfoTooltip.mock.calls[0][0].contentText.props.children[0], + InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children, ).toStrictEqual( 'To Speed up a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.', ); diff --git a/ui/components/app/cancel-speedup-popover/index.scss b/ui/components/app/cancel-speedup-popover/index.scss index cd7886982..4127a7eac 100644 --- a/ui/components/app/cancel-speedup-popover/index.scss +++ b/ui/components/app/cancel-speedup-popover/index.scss @@ -20,8 +20,7 @@ height: calc(100% + 30px); } - &__separator { + &__description { border-bottom: 1px solid var(--color-border-default); - width: 100%; } }