chore: removing error message and adding story for vrt

Author: georgewrmarshall

ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap

@@ -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';

ui/components/ui/error-message/error-message.component.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 = () => {
           <div className="edit-gas-fee-popover__content">
             <Box>
               {balanceError && (
-                <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
+                <BannerAlert
+                  severity={BannerAlertSeverity.Danger}
+                  description={t('insufficientFunds')}
+                  marginBottom={6}
+                />
               )}
               <div className="edit-gas-fee-popover__content__header">
                 <span className="edit-gas-fee-popover__content__header-option">

ui/components/ui/error-message/error-message.component.test.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 (
+    <TransactionModalContext.Provider
+      value={{
+        closeModal: () => {},
+        closeAllModals: () => {},
+        currentModal: 'editGasFee',
+        openModal: () => {},
+        openModalCount: 1,
+      }}
+    >
+      {children}
+    </TransactionModalContext.Provider>
+  );
+};
+
+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 }) => (
+      <Provider store={store}>
+        <MockTransactionModalProvider>
+          <GasFeeContextProvider
+            transaction={createTransaction(args.editGasMode)}
+            editGasMode={args.editGasMode}
+            balanceError={args.balanceError}
+          >
+            <div style={{ width: '400px', height: '600px' }}>
+              <Story />
+            </div>
+          </GasFeeContextProvider>
+        </MockTransactionModalProvider>
+      </Provider>
+    ),
+  ],
+  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,
+  },
+};

ui/components/ui/error-message/error-message.stories.js

@@ -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;