Skip to content

Commit

Permalink
feat: ✨ reduce redundancy
Browse files Browse the repository at this point in the history
  • Loading branch information
@matteoscurati
matteoscurati committed Oct 25, 2024
1 parent 15c45d9 commit 1162ecf
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 161 deletions.
185 changes: 60 additions & 125 deletions ui/pages/notification-details/notification-details.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
import React from 'react';
import { Meta } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import { Provider } from 'react-redux';
import configureStore from '../../store/store';
import NotificationDetails from './notification-details';
import testData from '../../../.storybook/test-data';
import { NotificationServicesController } from '@metamask/notification-services-controller';
import { Box } from '../../components/component-library';
import {
BlockSize,
Display,
FlexDirection,
JustifyContent,
} from '../../helpers/constants/design-system';
import { NotificationsPage } from '../../components/multichain';
import { Content } from '../../components/multichain/pages/page';
import { NotificationComponents } from '../notifications/notification-components';
import { NotificationDetailsHeader } from './notification-details-header/notification-details-header';
import { NotificationDetailsBody } from './notification-details-body/notification-details-body';
import { NotificationDetailsFooter } from './notification-details-footer/notification-details-footer';

type Notification = NotificationServicesController.Types.INotification;
const { processNotification } = NotificationServicesController.Processors;

// Mock data
const {
createMockNotificationEthSent,
createMockNotificationEthReceived,
createMockNotificationERC20Sent,
Expand All @@ -40,35 +23,22 @@ const {
createMockNotificationRocketPoolStakeCompleted,
createMockNotificationRocketPoolUnStakeCompleted,
createMockFeatureAnnouncementRaw,
} = NotificationServicesController.Mocks;

// Mock data
const mockNotifications = {
ethSent: createMockNotificationEthSent,
ethReceived: createMockNotificationEthReceived,
erc20Sent: createMockNotificationERC20Sent,
erc20Received: createMockNotificationERC20Received,
erc721Sent: createMockNotificationERC721Sent,
erc721Received: createMockNotificationERC721Received,
erc1155Sent: createMockNotificationERC1155Sent,
erc1155Received: createMockNotificationERC1155Received,
lidoReadyToBeWithdrawn: createMockNotificationLidoReadyToBeWithdrawn,
lidoStakeCompleted: createMockNotificationLidoStakeCompleted,
lidoWithdrawalCompleted: createMockNotificationLidoWithdrawalCompleted,
lidoWithdrawalRequested: createMockNotificationLidoWithdrawalRequested,
metaMaskSwapsCompleted: createMockNotificationMetaMaskSwapsCompleted,
rocketPoolStakeCompleted: createMockNotificationRocketPoolStakeCompleted,
rocketPoolUnStakeCompleted: createMockNotificationRocketPoolUnStakeCompleted,
featureAnnouncement: createMockFeatureAnnouncementRaw,
};

const processedNotifications = Object.fromEntries(
Object.entries(mockNotifications).map(([key, createMock]) => [
key,
processNotification(createMock()),
]),
);
} from '@metamask/notification-services-controller/notification-services/mocks';
import {
BlockSize,
Display,
FlexDirection,
JustifyContent,
} from '../../helpers/constants/design-system';
import { NotificationsPage } from '../../components/multichain';
import { Content } from '../../components/multichain/pages/page';
import { NotificationComponents } from '../notifications/notification-components';
import { NotificationDetailsHeader } from './notification-details-header/notification-details-header';
import { NotificationDetailsBody } from './notification-details-body/notification-details-body';
import { NotificationDetailsFooter } from './notification-details-footer/notification-details-footer';

type Notification = NotificationServicesController.Types.INotification;
const { processNotification } = NotificationServicesController.Processors;
const store = configureStore({
...testData,
});
Expand All @@ -83,9 +53,28 @@ export default {
</Provider>
),
],
} as Meta;

const Template = ({ notification }) => {
} as Meta<typeof NotificationDetails>;

const notificationMocks = {
EthSent: createMockNotificationEthSent,
EthReceived: createMockNotificationEthReceived,
ERC20Sent: createMockNotificationERC20Sent,
ERC20Received: createMockNotificationERC20Received,
ERC721Sent: createMockNotificationERC721Sent,
ERC721Received: createMockNotificationERC721Received,
ERC1155Sent: createMockNotificationERC1155Sent,
ERC1155Received: createMockNotificationERC1155Received,
LidoReadyToBeWithdrawn: createMockNotificationLidoReadyToBeWithdrawn,
LidoStakeCompleted: createMockNotificationLidoStakeCompleted,
LidoWithdrawalCompleted: createMockNotificationLidoWithdrawalCompleted,
LidoWithdrawalRequested: createMockNotificationLidoWithdrawalRequested,
MetaMaskSwapsCompleted: createMockNotificationMetaMaskSwapsCompleted,
RocketPoolStakeCompleted: createMockNotificationRocketPoolStakeCompleted,
RocketPoolUnStakeCompleted: createMockNotificationRocketPoolUnStakeCompleted,
FeatureAnnouncement: createMockFeatureAnnouncementRaw,
} as const;

const Template = ({ notification }: { notification: Notification }) => {
const ncs = NotificationComponents[notification.type];

return (
Expand Down Expand Up @@ -120,82 +109,28 @@ const Template = ({ notification }) => {
);
};

export const EthSent = Template.bind({});
EthSent.args = {
notification: processedNotifications.ethSent,
};

export const EthReceived = Template.bind({});
EthReceived.args = {
notification: processedNotifications.ethReceived,
};

export const ERC20Sent = Template.bind({});
ERC20Sent.args = {
notification: processedNotifications.erc20Sent,
};

export const ERC20Received = Template.bind({});
ERC20Received.args = {
notification: processedNotifications.erc20Received,
};

export const ERC721Sent = Template.bind({});
ERC721Sent.args = {
notification: processedNotifications.erc721Sent,
};

export const ERC721Received = Template.bind({});
ERC721Received.args = {
notification: processedNotifications.erc721Received,
};

export const ERC1155Sent = Template.bind({});
ERC1155Sent.args = {
notification: processedNotifications.erc1155Sent,
};

export const ERC1155Received = Template.bind({});
ERC1155Received.args = {
notification: processedNotifications.erc1155Received,
const stories = {} as {
[key in keyof typeof notificationMocks]: StoryFn<typeof NotificationDetails>;
};

export const LidoReadyToBeWithdrawn = Template.bind({});
LidoReadyToBeWithdrawn.args = {
notification: processedNotifications.lidoReadyToBeWithdrawn,
};

export const lidoStakeCompleted = Template.bind({});
lidoStakeCompleted.args = {
notification: processedNotifications.lidoStakeCompleted,
};

export const lidoWithdrawalCompleted = Template.bind({});
lidoWithdrawalCompleted.args = {
notification: processedNotifications.lidoWithdrawalCompleted,
};

export const lidoWithdrawalRequested = Template.bind({});
lidoWithdrawalRequested.args = {
notification: processedNotifications.lidoWithdrawalRequested,
};

export const metaMaskSwapsCompleted = Template.bind({});
metaMaskSwapsCompleted.args = {
notification: processedNotifications.metaMaskSwapsCompleted,
};

export const rocketPoolStakeCompleted = Template.bind({});
rocketPoolStakeCompleted.args = {
notification: processedNotifications.rocketPoolStakeCompleted,
};

export const rocketPoolUnStakeCompleted = Template.bind({});
rocketPoolUnStakeCompleted.args = {
notification: processedNotifications.rocketPoolUnStakeCompleted,
};
Object.entries(notificationMocks).forEach(([storyName, createMock]) => {
stories[storyName] = Template.bind({});
stories[storyName].args = { notification: processNotification(createMock()) };
});

export const featureAnnouncement = Template.bind({});
featureAnnouncement.args = {
notification: processedNotifications.featureAnnouncement,
};
export const EthSent = stories.EthSent;
export const EthReceived = stories.EthReceived;
export const ERC20Sent = stories.ERC20Sent;
export const ERC20Received = stories.ERC20Received;
export const ERC721Sent = stories.ERC721Sent;
export const ERC721Received = stories.ERC721Received;
export const ERC1155Sent = stories.ERC1155Sent;
export const ERC1155Received = stories.ERC1155Received;
export const LidoReadyToBeWithdrawn = stories.LidoReadyToBeWithdrawn;
export const LidoStakeCompleted = stories.LidoStakeCompleted;
export const LidoWithdrawalCompleted = stories.LidoWithdrawalCompleted;
export const LidoWithdrawalRequested = stories.LidoWithdrawalRequested;
export const MetaMaskSwapsCompleted = stories.MetaMaskSwapsCompleted;
export const RocketPoolStakeCompleted = stories.RocketPoolStakeCompleted;
export const RocketPoolUnStakeCompleted = stories.RocketPoolUnStakeCompleted;
export const FeatureAnnouncement = stories.FeatureAnnouncement;
75 changes: 39 additions & 36 deletions ui/pages/notifications/notifications-list-item.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,24 @@ import React, { useState } from 'react';
import { Meta } from '@storybook/react';
import { processSnapNotifications } from './snap/utils/utils';
import { Box } from '../../components/component-library';
import {
createMockNotificationEthSent,
createMockNotificationEthReceived,
createMockNotificationERC20Sent,
createMockNotificationERC20Received,
createMockNotificationERC721Sent,
createMockNotificationERC721Received,
createMockNotificationERC1155Sent,
createMockNotificationERC1155Received,
createMockNotificationLidoReadyToBeWithdrawn,
createMockNotificationLidoStakeCompleted,
createMockNotificationLidoWithdrawalCompleted,
createMockNotificationLidoWithdrawalRequested,
createMockNotificationMetaMaskSwapsCompleted,
createMockNotificationRocketPoolStakeCompleted,
createMockNotificationRocketPoolUnStakeCompleted,
createMockFeatureAnnouncementRaw,
} from '@metamask/notification-services-controller/notification-services/mocks';
import type { SnapNotification } from './snap/types/types';
import { SnapComponent } from './notification-components/snap/snap';
import { NotificationsListItem } from './notifications-list-item';
Expand All @@ -20,43 +38,28 @@ const snapNotifications = processSnapNotifications([
},
]);

const {
createMockNotificationERC1155Received,
createMockNotificationERC1155Sent,
createMockNotificationERC20Received,
createMockNotificationERC20Sent,
createMockNotificationERC721Received,
createMockNotificationERC721Sent,
createMockNotificationEthReceived,
createMockNotificationEthSent,
createMockNotificationLidoReadyToBeWithdrawn,
createMockNotificationLidoStakeCompleted,
createMockNotificationLidoWithdrawalCompleted,
createMockNotificationLidoWithdrawalRequested,
createMockNotificationMetaMaskSwapsCompleted,
createMockNotificationRocketPoolStakeCompleted,
createMockNotificationRocketPoolUnStakeCompleted,
createMockFeatureAnnouncementRaw,
} = NotificationServicesController.Mocks;
const notificationMocks = {
EthSent: createMockNotificationEthSent,
EthReceived: createMockNotificationEthReceived,
ERC20Sent: createMockNotificationERC20Sent,
ERC20Received: createMockNotificationERC20Received,
ERC721Sent: createMockNotificationERC721Sent,
ERC721Received: createMockNotificationERC721Received,
ERC1155Sent: createMockNotificationERC1155Sent,
ERC1155Received: createMockNotificationERC1155Received,
LidoReadyToBeWithdrawn: createMockNotificationLidoReadyToBeWithdrawn,
LidoStakeCompleted: createMockNotificationLidoStakeCompleted,
LidoWithdrawalCompleted: createMockNotificationLidoWithdrawalCompleted,
LidoWithdrawalRequested: createMockNotificationLidoWithdrawalRequested,
MetaMaskSwapsCompleted: createMockNotificationMetaMaskSwapsCompleted,
RocketPoolStakeCompleted: createMockNotificationRocketPoolStakeCompleted,
RocketPoolUnStakeCompleted: createMockNotificationRocketPoolUnStakeCompleted,
FeatureAnnouncement: createMockFeatureAnnouncementRaw,
} as const;

const notifications: Notification[] = [
processNotification(createMockNotificationEthSent()),
processNotification(createMockNotificationEthReceived()),
processNotification(createMockNotificationERC20Sent()),
processNotification(createMockNotificationERC20Received()),
processNotification(createMockNotificationERC721Sent()),
processNotification(createMockNotificationERC721Received()),
processNotification(createMockNotificationERC1155Sent()),
processNotification(createMockNotificationERC1155Received()),
processNotification(createMockNotificationMetaMaskSwapsCompleted()),
processNotification(createMockNotificationRocketPoolStakeCompleted()),
processNotification(createMockNotificationRocketPoolUnStakeCompleted()),
processNotification(createMockNotificationLidoStakeCompleted()),
processNotification(createMockNotificationLidoWithdrawalRequested()),
processNotification(createMockNotificationLidoReadyToBeWithdrawn()),
processNotification(createMockNotificationLidoWithdrawalCompleted()),
processNotification(createMockFeatureAnnouncementRaw()),
];
const notifications: Notification[] = Object.values(notificationMocks).map(
(createMock) => processNotification(createMock()),
);

export default {
title: 'Pages/Notifications/NotificationsListItems',
Expand Down

0 comments on commit 1162ecf

Please sign in to comment.