-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: better storybook stories for the notification pages #27861
base: develop
Are you sure you want to change the base?
Changes from 20 commits
5019bf2
910651a
1b492ff
59d7b22
cf66689
e7bb1b2
6f24104
2322c20
36288c3
7f9b8c6
4096501
d44e45b
14cacbc
55222f0
5c3ba50
be54666
be62ddb
b95a324
0f82b1a
e016bdb
312be96
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -173,6 +173,12 @@ env: | |
|
||
- SENTRY_MMI_DSN: '' | ||
|
||
### | ||
# Storybook | ||
### | ||
- STORYBOOK_ENV: false | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This ENV is set to false by default |
||
- INFURA_STORYBOOK_PROJECT_ID | ||
|
||
### | ||
# Notifications Feature | ||
### | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In the case of running one of these Storybook-related commands, the |
||
"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", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This sub-optimal solution was previously introduced to handle a dedicated header for RPC calls to the Infura endpoint. In this PR, the use of this call is managed without the header in the case of a Storybook build |
||
}, | ||
}; | ||
const provider = new JsonRpcProvider(connection); | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
Prithpal-Sooriya marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
// 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, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the new ENV introduced to handle a dedicated Infura ID only for Storybook builds
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We may need to discuss with someone on how we can populate this into our CI system.