Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

48 changes: 0 additions & 48 deletions ui/components/ui/error-message/error-message.component.js

This file was deleted.

23 changes: 0 additions & 23 deletions ui/components/ui/error-message/error-message.component.test.js

This file was deleted.

19 changes: 0 additions & 19 deletions ui/components/ui/error-message/error-message.stories.js

This file was deleted.

1 change: 0 additions & 1 deletion ui/components/ui/error-message/index.js

This file was deleted.

19 changes: 0 additions & 19 deletions ui/components/ui/error-message/index.scss

This file was deleted.

1 change: 0 additions & 1 deletion ui/components/ui/ui-components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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';

Expand Down Expand Up @@ -55,7 +58,11 @@ const EditGasFeePopover = () => {
<div className="edit-gas-fee-popover__content">
<Box>
{balanceError && (
<ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
<BannerAlert
severity={BannerAlertSeverity.Danger}
description={t(INSUFFICIENT_FUNDS_ERROR_KEY)}
marginBottom={1}
/>
Comment on lines -58 to +65
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaces last instance of the ErrorMessage component with BannerAlert

Image

)}
<div className="edit-gas-fee-popover__content__header">
<span className="edit-gas-fee-popover__content__header-option">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding story

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 (
<TransactionModalContext.Provider
value={{
closeModal: () => undefined,
closeAllModals: () => undefined,
currentModal: 'editGasFee',
openModal: () => undefined,
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,
});

interface StoryArgs {
editGasMode: EditGasModes;
}

const meta: Meta<StoryArgs> = {
title: 'Pages/Confirmations/Components/EditGasFeePopover',
component: EditGasFeePopover,
decorators: [
(Story, context) => (
<Provider store={store}>
<MockTransactionModalProvider>
<GasFeeContextProvider
transaction={createTransaction(context.args.editGasMode)}
editGasMode={context.args.editGasMode}
>
<Story />
</GasFeeContextProvider>
</MockTransactionModalProvider>
</Provider>
),
],
};

export default meta;

type Story = StoryObj<StoryArgs>;

export const Default: Story = {
args: {
editGasMode: EditGasModes.modifyInPlace,
},
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding story for easier updates and visual regression testing

Image

Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@
justify-content: space-between;
padding: 16px 12px;

& .error-message {
margin-top: 0;
margin-bottom: 12px;
}
Comment on lines -16 to -19
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no longer using this component. this is why we shouldn't use direct CSS classnames from other components in our styles. Very easy to miss


&__header {
color: var(--color-text-alternative);
font-size: 10px;
Expand Down
Loading