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..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 @@ -7,7 +7,6 @@ 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 { @@ -18,7 +17,11 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/erro 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 +58,11 @@ const EditGasFeePopover = () => {
{balanceError && ( - + )}
diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx new file mode 100644 index 000000000000..ebc6340c8021 --- /dev/null +++ b/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.stories.tsx @@ -0,0 +1,94 @@ +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'; +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, + }, + }, +}); + +type MockTransactionModalProviderProps = { + children: React.ReactNode; +}; + +const MockTransactionModalProvider: React.FC< + MockTransactionModalProviderProps +> = ({ children }) => { + return ( + undefined, + closeAllModals: () => undefined, + currentModal: 'editGasFee', + openModal: () => undefined, + 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, +}); + +interface StoryArgs { + editGasMode: EditGasModes; +} + +const meta: Meta = { + title: 'Pages/Confirmations/Components/EditGasFeePopover', + component: EditGasFeePopover, + decorators: [ + (Story, context) => ( + + + + + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + editGasMode: EditGasModes.modifyInPlace, + }, +}; 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;