feat: better storybook stories for the notification pages

.metamaskrc.dist

@@ -4,6 +4,10 @@
 ; This variable is required
 INFURA_PROJECT_ID=00000000000
 
+; This variable is not required but it's necessary for the storybook
+; to render stories that use onchain data.
+INFURA_STORYBOOK_PROJECT_ID=
+
 ;PASSWORD=METAMASK PASSWORD
 ;SEGMENT_WRITE_KEY=
 ;BRIDGE_USE_DEV_APIS=

.storybook/main.js

@@ -1,6 +1,9 @@
 const path = require('path');
 const { ProvidePlugin } = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const dotenv = require('dotenv');
+dotenv.config({ path: path.resolve(__dirname, '../.metamaskrc') });
+
 module.exports = {
   core: {
     disableTelemetry: true,
@@ -29,6 +32,7 @@ module.exports = {
   env: (config) => ({
     ...config,
     ENABLE_CONFIRMATION_REDESIGN: true,
+    INFURA_PROJECT_ID: process.env.INFURA_STORYBOOK_PROJECT_ID || '',
   }),
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
   babel: async (options) => ({
@@ -89,7 +93,7 @@ module.exports = {
             sourceMap: true,
             implementation: require('sass-embedded'),
             sassOptions: {
-              includePaths: ['ui/css/', 'node_modules/',],
+              includePaths: ['ui/css/', 'node_modules/'],
             },
           },
         },
@@ -99,12 +103,7 @@ module.exports = {
       new CopyWebpackPlugin({
         patterns: [
           {
-            from: path.join(
-              'ui',
-              'css',
-              'utilities',
-              'fonts/',
-            ),
+            from: path.join('ui', 'css', 'utilities', 'fonts/'),
             to: 'fonts',
           },
           {

builds.yml

@@ -173,6 +173,12 @@ env:
 
   - SENTRY_MMI_DSN: ''
 
+  ###
+  # Storybook
+  ###
+  - STORYBOOK_ENV: false
+  - INFURA_STORYBOOK_PROJECT_ID
+
   ###
   # Notifications Feature
   ###

package.json

@@ -96,9 +96,9 @@
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
-    "storybook": "storybook dev -p 6006 -c .storybook",
-    "storybook:build": "storybook build -c .storybook -o storybook-build",
-    "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
+    "storybook": "STORYBOOK_ENV=true storybook dev -p 6006 -c .storybook",
+    "storybook:build": "STORYBOOK_ENV=true storybook build -c .storybook -o storybook-build",
+    "storybook:deploy": "STORYBOOK_ENV=true storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
     "update-changelog": "auto-changelog update",
     "generate:migration": "./development/generate-migration.sh",
     "lavamoat:build": "lavamoat development/build/index.js --policy lavamoat/build-system/policy.json --policyOverride lavamoat/build-system/policy-override.json",

ui/helpers/utils/notification.util.ts

@@ -420,9 +420,11 @@ export const getNetworkFees = async (notification: OnChainRawNotification) => {
   const rpcUrl = getRpcUrlByChainId(`0x${chainId}` as HexChainId);
   const connection = {
     url: rpcUrl,
-    headers: {
-      'Infura-Source': 'metamask/metamask',
-    },
+    headers: process.env.STORYBOOK_ENV
+      ? undefined
+      : {
+          'Infura-Source': 'metamask/metamask',
+        },
   };
   const provider = new JsonRpcProvider(connection);
 

ui/pages/notification-details/notification-details.stories.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Meta } 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,
+  createMockNotificationERC20Received,
+  createMockNotificationERC721Sent,
+  createMockNotificationERC721Received,
+  createMockNotificationERC1155Sent,
+  createMockNotificationERC1155Received,
+  createMockNotificationLidoReadyToBeWithdrawn,
+  createMockNotificationLidoStakeCompleted,
+  createMockNotificationLidoWithdrawalCompleted,
+  createMockNotificationLidoWithdrawalRequested,
+  createMockNotificationMetaMaskSwapsCompleted,
+  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()),
+  ]),
+);
+
+const store = configureStore({
+  ...testData,
+});
+
+export default {
+  title: 'Pages/Notifications/NotificationDetails',
+  component: NotificationDetails,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+} as Meta;
+
+const Template = ({ notification }) => {
+  const ncs = NotificationComponents[notification.type];
+
+  return (
+    <Box marginLeft={'auto'} marginRight={'auto'}>
+      <NotificationsPage>
+        <NotificationDetailsHeader
+          onClickBack={() => console.log('click back')}
+        >
+          <ncs.details.title notification={notification} />
+        </NotificationDetailsHeader>
+        <Content padding={0}>
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            gap={2}
+            width={BlockSize.Full}
+            height={BlockSize.Full}
+            justifyContent={JustifyContent.spaceBetween}
+          >
+            <NotificationDetailsBody
+              body={ncs.details.body}
+              notification={notification}
+            />
+            <NotificationDetailsFooter
+              footer={ncs.footer}
+              notification={notification}
+            />
+          </Box>
+        </Content>
+      </NotificationsPage>
+    </Box>
+  );
+};
+
+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,
+};
+
+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,
+};
+
+export const featureAnnouncement = Template.bind({});
+featureAnnouncement.args = {
+  notification: processedNotifications.featureAnnouncement,
+};

ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx

@@ -95,6 +95,7 @@ export const components: NotificationComponent<FeatureAnnouncementNotification>
           <Box paddingLeft={4} paddingRight={4}>
             <Text
               variant={TextVariant.bodyMd}
+              as="div"
               dangerouslySetInnerHTML={{
                 __html: notification.data.longDescription,
               }}