From af597c586509a2b6b9133c90994d2685189c0a9c Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Oct 2025 14:49:00 -0700 Subject: [PATCH 1/4] chore: removing error message and adding story for vrt --- .../error-message.component.test.js.snap | 37 ------- .../error-message/error-message.component.js | 48 --------- .../error-message.component.test.js | 23 ---- .../ui/error-message/error-message.stories.js | 19 ---- ui/components/ui/error-message/index.js | 1 - ui/components/ui/error-message/index.scss | 19 ---- ui/components/ui/ui-components.scss | 1 - .../edit-gas-fee-popover.js | 14 ++- .../edit-gas-fee-popover.stories.js | 100 ++++++++++++++++++ .../edit-gas-fee-popover/index.scss | 5 - 10 files changed, 110 insertions(+), 157 deletions(-) delete mode 100644 ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap delete mode 100644 ui/components/ui/error-message/error-message.component.js delete mode 100644 ui/components/ui/error-message/error-message.component.test.js delete mode 100644 ui/components/ui/error-message/error-message.stories.js delete mode 100644 ui/components/ui/error-message/index.js delete mode 100644 ui/components/ui/error-message/index.scss create mode 100644 ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js diff --git a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap deleted file mode 100644 index 63bf4bafaae0..000000000000 --- a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ErrorMessage Component should render a message from props.errorMessage 1`] = ` -
-
- -
- This is an error. -
-
-
-`; - -exports[`ErrorMessage Component should render a message translated from props.errorKey 1`] = ` -
-
- -
- [testKey] -
-
-
-`; diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js deleted file mode 100644 index 64ff8fc80ed0..000000000000 --- a/ui/components/ui/error-message/error-message.component.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Icon, IconName, IconSize } from '../../component-library'; -import { IconColor } from '../../../helpers/constants/design-system'; - -/** - * @deprecated The `` component has been deprecated in favor of the new `` component from the component-library. - * Please update your code to use the new `` component instead, which can be found at ui/components/component-library/banner-alert/banner-alert.js. - * You can find documentation for the new BannerAlert component in the MetaMask Storybook: - * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--docs} - * If you would like to help with the replacement of the old ErrorMessage component, please submit a pull request against this GitHub issue: - * {@link https://github.com/MetaMask/metamask-extension/issues/20394} - */ - -const ErrorMessage = (props, context) => { - const { errorMessage, errorKey } = props; - const error = errorKey ? context.t(errorKey) : errorMessage; - - return ( -
- -
{error}
-
- ); -}; - -ErrorMessage.propTypes = { - /** - * The text content for the error message - */ - errorMessage: PropTypes.string, - /** - * The translate key for localization. Uses context.t(). Will override the error message - */ - errorKey: PropTypes.string, -}; - -ErrorMessage.contextTypes = { - t: PropTypes.func, -}; - -export default ErrorMessage; diff --git a/ui/components/ui/error-message/error-message.component.test.js b/ui/components/ui/error-message/error-message.component.test.js deleted file mode 100644 index beafb20b51e0..000000000000 --- a/ui/components/ui/error-message/error-message.component.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { renderWithProvider } from '../../../../test/lib/render-helpers'; -import ErrorMessage from '.'; - -describe('ErrorMessage Component', () => { - it('should render a message from props.errorMessage', () => { - const props = { - errorMessage: 'This is an error.', - }; - const { container } = renderWithProvider(); - - expect(container).toMatchSnapshot(); - }); - - it('should render a message translated from props.errorKey', () => { - const props = { - errorKey: 'testKey', - }; - const { container } = renderWithProvider(); - - expect(container).toMatchSnapshot(); - }); -}); diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js deleted file mode 100644 index 6f9add283adb..000000000000 --- a/ui/components/ui/error-message/error-message.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ErrorMessage from '.'; - -export default { - title: 'Components/UI/ErrorMessage(deprecated)', - component: ErrorMessage, - argTypes: { - errorMessage: { control: 'text' }, - errorKey: { control: 'text' }, - }, -}; - -export const DefaultStory = (args) => ; - -DefaultStory.storyName = 'Default'; - -DefaultStory.args = { - errorMessage: 'There was an error!', -}; diff --git a/ui/components/ui/error-message/index.js b/ui/components/ui/error-message/index.js deleted file mode 100644 index d4ea3575ff62..000000000000 --- a/ui/components/ui/error-message/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './error-message.component'; diff --git a/ui/components/ui/error-message/index.scss b/ui/components/ui/error-message/index.scss deleted file mode 100644 index 336ab186e158..000000000000 --- a/ui/components/ui/error-message/index.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use "design-system"; - -.error-message { - @include design-system.H7; - - min-height: 32px; - border: 1px solid var(--color-error-default); - color: var(--color-text-default); - background-color: var(--color-error-muted); - border-radius: 8px; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 8px 10px; - - &__text { - overflow: auto; - } -} diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index 06037b24a717..2d10ab0e8579 100644 --- a/ui/components/ui/ui-components.scss +++ b/ui/components/ui/ui-components.scss @@ -14,7 +14,6 @@ @import 'definition-list/definition-list'; @import 'dialog/dialog'; @import 'dropdown/dropdown'; -@import 'error-message/index'; @import 'icon-border/icon-border'; @import 'icon-button/icon-button'; @import 'icon-with-fallback/icon-with-fallback'; diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js index ecbae0b00e18..ed3d89ee89a5 100644 --- a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -7,18 +7,20 @@ import { import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useTransactionModalContext } from '../../../../contexts/transaction-modal'; import Box from '../../../../components/ui/box'; -import ErrorMessage from '../../../../components/ui/error-message'; import Popover from '../../../../components/ui/popover'; import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; -import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys'; import { useGasFeeContext } from '../../../../contexts/gasFee'; import AppLoadingSpinner from '../../../../components/app/app-loading-spinner'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; -import { Text } from '../../../../components/component-library'; +import { + BannerAlert, + BannerAlertSeverity, + Text, +} from '../../../../components/component-library'; import EditGasItem from './edit-gas-item'; import NetworkStatistics from './network-statistics'; @@ -55,7 +57,11 @@ const EditGasFeePopover = () => {
{balanceError && ( - + )}
diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js new file mode 100644 index 000000000000..4e9621284de8 --- /dev/null +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import mockState from '../../../../../test/data/mock-state.json'; +import configureStore from '../../../../store/store'; +import { GasFeeContextProvider } from '../../../../contexts/gasFee'; +import { TransactionModalContext } from '../../../../contexts/transaction-modal'; +import { + EditGasModes, + PriorityLevels, +} from '../../../../../shared/constants/gas'; +import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils'; +import EditGasFeePopover from './edit-gas-fee-popover'; + +const store = configureStore({ + ...mockState, + metamask: { + ...mockState.metamask, + featureFlags: { + ...mockState.metamask.featureFlags, + advancedInlineGas: true, + }, + }, +}); + +// Custom TransactionModalContextProvider that sets editGasFee as current modal +const MockTransactionModalProvider = ({ children }) => { + return ( + {}, + closeAllModals: () => {}, + currentModal: 'editGasFee', + openModal: () => {}, + openModalCount: 1, + }} + > + {children} + + ); +}; + +const createTransaction = (editGasMode = EditGasModes.modifyInPlace) => ({ + userFeeLevel: PriorityLevels.medium, + txParams: { + maxFeePerGas: decGWEIToHexWEI('70'), + maxPriorityFeePerGas: decGWEIToHexWEI('7'), + gas: '0x5208', + gasPrice: decGWEIToHexWEI('50'), + type: '0x2', + from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + to: '0xc42edfcc21ed14dda456aa0756c153f7985d8813', + }, + chainId: '0x5', // Use Goerli from mock state + editGasMode, +}); + +export default { + title: 'Pages/Confirmations/Components/EditGasFeePopover', + component: EditGasFeePopover, + decorators: [ + (Story, { args }) => ( + + + +
+ +
+ + + + ), + ], + argTypes: { + editGasMode: { + control: { type: 'select' }, + options: [ + EditGasModes.modifyInPlace, + EditGasModes.swaps, + EditGasModes.speedUp, + EditGasModes.cancel, + ], + description: 'The mode for editing gas fees', + }, + balanceError: { + control: { type: 'boolean' }, + description: 'Whether to show insufficient funds error', + }, + }, +}; + +export const Default = { + args: { + editGasMode: EditGasModes.modifyInPlace, + balanceError: false, + }, +}; diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/index.scss b/ui/pages/confirmations/components/edit-gas-fee-popover/index.scss index 9d72b840fdcf..04c924328341 100644 --- a/ui/pages/confirmations/components/edit-gas-fee-popover/index.scss +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/index.scss @@ -13,11 +13,6 @@ justify-content: space-between; padding: 16px 12px; - & .error-message { - margin-top: 0; - margin-bottom: 12px; - } - &__header { color: var(--color-text-alternative); font-size: 10px; From ddfbe8371c0542e78bee7813bdf7dad310a4ede1 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Oct 2025 15:04:29 -0700 Subject: [PATCH 2/4] chore: use translation constant and adjust margin --- .../components/edit-gas-fee-popover/edit-gas-fee-popover.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js index ed3d89ee89a5..162d8d03b9fd 100644 --- a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -13,6 +13,7 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; +import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys'; import { useGasFeeContext } from '../../../../contexts/gasFee'; import AppLoadingSpinner from '../../../../components/app/app-loading-spinner'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; @@ -59,8 +60,8 @@ const EditGasFeePopover = () => { {balanceError && ( )}
From d01f9bc1aa88a7d279cde81abf80cb2a440af64f Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Oct 2025 15:07:39 -0700 Subject: [PATCH 3/4] chore: simplify story --- .../edit-gas-fee-popover.stories.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js index 4e9621284de8..918a3941b4be 100644 --- a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js @@ -74,22 +74,6 @@ export default { ), ], - argTypes: { - editGasMode: { - control: { type: 'select' }, - options: [ - EditGasModes.modifyInPlace, - EditGasModes.swaps, - EditGasModes.speedUp, - EditGasModes.cancel, - ], - description: 'The mode for editing gas fees', - }, - balanceError: { - control: { type: 'boolean' }, - description: 'Whether to show insufficient funds error', - }, - }, }; export const Default = { From c4da056bbef67e8d440a7187e5eee1716ef6924a Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Oct 2025 16:17:30 -0700 Subject: [PATCH 4/4] chore: converting story to typescript and fixing linting --- ...es.js => edit-gas-fee-popover.stories.tsx} | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) rename ui/pages/confirmations/components/edit-gas-fee-popover/{edit-gas-fee-popover.stories.js => edit-gas-fee-popover.stories.tsx} (72%) diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx similarity index 72% rename from ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js rename to ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx index 918a3941b4be..ebc6340c8021 100644 --- a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.js +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Provider } from 'react-redux'; +import { Meta, StoryObj } from '@storybook/react'; import mockState from '../../../../../test/data/mock-state.json'; import configureStore from '../../../../store/store'; import { GasFeeContextProvider } from '../../../../contexts/gasFee'; @@ -22,15 +23,20 @@ const store = configureStore({ }, }); -// Custom TransactionModalContextProvider that sets editGasFee as current modal -const MockTransactionModalProvider = ({ children }) => { +type MockTransactionModalProviderProps = { + children: React.ReactNode; +}; + +const MockTransactionModalProvider: React.FC< + MockTransactionModalProviderProps +> = ({ children }) => { return ( {}, - closeAllModals: () => {}, + closeModal: () => undefined, + closeAllModals: () => undefined, currentModal: 'editGasFee', - openModal: () => {}, + openModal: () => undefined, openModalCount: 1, }} > @@ -54,21 +60,22 @@ const createTransaction = (editGasMode = EditGasModes.modifyInPlace) => ({ editGasMode, }); -export default { +interface StoryArgs { + editGasMode: EditGasModes; +} + +const meta: Meta = { title: 'Pages/Confirmations/Components/EditGasFeePopover', component: EditGasFeePopover, decorators: [ - (Story, { args }) => ( + (Story, context) => ( -
- -
+ @@ -76,9 +83,12 @@ export default { ], }; -export const Default = { +export default meta; + +type Story = StoryObj; + +export const Default: Story = { args: { editGasMode: EditGasModes.modifyInPlace, - balanceError: false, }, };