-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of github.com:MetaMask/metamask-extension into…
… NOTIFY-668-extension-qa-handle-reinitialising-of-push-notifications
- Loading branch information
Showing
13 changed files
with
207 additions
and
143 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { NotificationListItemSnap } from './notification-list-item-snap'; |
165 changes: 165 additions & 0 deletions
165
ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Box, Icon, IconName, Text, IconSize } from '../../component-library'; | ||
| import { | ||
| AlignItems, | ||
| BlockSize, | ||
| BackgroundColor, | ||
| Display, | ||
| FlexDirection, | ||
| FontWeight, | ||
| JustifyContent, | ||
| IconColor, | ||
| TextColor, | ||
| TextVariant, | ||
| TextAlign, | ||
| } from '../../../helpers/constants/design-system'; | ||
| import type { NotificationListItemTextProps } from '../notification-list-item-text/notification-list-item-text'; | ||
| import { NotificationListItemText } from '../notification-list-item-text'; | ||
| import { formatMenuItemDate } from '../../../helpers/utils/notification.util'; | ||
| import { SnapUIMarkdown } from '../../app/snaps/snap-ui-markdown'; | ||
| import SnapAvatar from '../../app/snaps/snap-avatar'; | ||
|
|
||
| export type NotificationListItemSnapProps = { | ||
| id: string; | ||
| isRead: boolean; | ||
| title: NotificationListItemTextProps; | ||
| snapMessage: string; | ||
| createdAt: Date; | ||
| handleSnapClick?: () => void; | ||
| handleSnapButton?: () => void; | ||
| }; | ||
|
|
||
| /** | ||
| * `NotificationListItem` is a component that displays a single notification item. | ||
| * | ||
| * @param props - The properties object. | ||
| * @param props.isRead - Indicates whether the notification has been read. | ||
| * @param props.title - The title of the notification. | ||
| * @param props.createdAt - The date of the notification. | ||
| * @param props.id - The id of the notification. | ||
| * @param props.handleSnapClick - The function to call when the notification is clicked. | ||
| * @param props.handleSnapButton - The function to call when the snap button is clicked. | ||
| * @param props.snapMessage - The snap message to display on the notification. | ||
| * @returns Returns a notification list item component. | ||
| */ | ||
| export const NotificationListItemSnap = ({ | ||
| id, | ||
| isRead, | ||
| title, | ||
| snapMessage, | ||
| createdAt, | ||
| handleSnapClick, | ||
| handleSnapButton, | ||
| }: NotificationListItemSnapProps) => { | ||
| const handleClick = () => { | ||
| handleSnapClick?.(); | ||
| }; | ||
|
|
||
| const handleButtonClick = () => { | ||
| handleSnapButton?.(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| className={`notification-list-item ${ | ||
| isRead ? '' : 'notification-list-item--unread' | ||
| }`} | ||
| display={Display.Flex} | ||
| flexDirection={FlexDirection.Column} | ||
| justifyContent={JustifyContent.spaceBetween} | ||
| alignItems={AlignItems.flexStart} | ||
| width={BlockSize.Full} | ||
| paddingBottom={3} | ||
| paddingRight={5} | ||
| paddingLeft={5} | ||
| paddingTop={3} | ||
| key={id} | ||
| onClick={handleClick} | ||
| style={{ cursor: 'pointer' }} | ||
| > | ||
| <Box | ||
| display={Display.Flex} | ||
| justifyContent={JustifyContent.spaceBetween} | ||
| flexDirection={FlexDirection.Row} | ||
| alignItems={AlignItems.flexStart} | ||
| width={BlockSize.Full} | ||
| backgroundColor={BackgroundColor.transparent} | ||
| gap={4} | ||
| height={BlockSize.Full} | ||
| style={{ paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px' }} | ||
| > | ||
| {!isRead && ( | ||
| <Box | ||
| display={Display.Block} | ||
| className="notification-list-item__unread-dot__wrapper--snap" | ||
| > | ||
| <Icon | ||
| name={IconName.FullCircle} | ||
| color={IconColor.primaryDefault} | ||
| className="notification-list-item__unread-dot__dot" | ||
| data-testid="unread-dot" | ||
| /> | ||
| </Box> | ||
| )} | ||
|
|
||
| <Box height={BlockSize.Full} className="notification-list-item__icon"> | ||
| <SnapAvatar | ||
| snapId="npm:@metamask/notification-example-snap" | ||
| badgeBackgroundColor={BackgroundColor.backgroundDefault} | ||
| avatarSize={IconSize.Md} | ||
| /> | ||
| </Box> | ||
|
|
||
| <Box | ||
| display={Display.Flex} | ||
| gap={4} | ||
| height={BlockSize.Full} | ||
| alignItems={AlignItems.flexStart} | ||
| width={BlockSize.Full} | ||
| > | ||
| <Box | ||
| display={Display.Block} | ||
| flexDirection={FlexDirection.Column} | ||
| alignItems={AlignItems.flexStart} | ||
| textAlign={TextAlign.Left} | ||
| width={BlockSize.Full} | ||
| > | ||
| <Box | ||
| display={Display.Flex} | ||
| flexDirection={FlexDirection.Row} | ||
| alignItems={AlignItems.flexStart} | ||
| justifyContent={JustifyContent.spaceBetween} | ||
| > | ||
| {/* Notification Title */} | ||
| <Box onClick={handleButtonClick}> | ||
| <NotificationListItemText | ||
| {...title} | ||
| color={TextColor.primaryDefault} | ||
| /> | ||
| </Box> | ||
|
|
||
| {/* Date */} | ||
| <Text | ||
| color={TextColor.textMuted} | ||
| variant={TextVariant.bodySm} | ||
| fontWeight={FontWeight.Normal} | ||
| as="p" | ||
| > | ||
| {formatMenuItemDate(createdAt)} | ||
| </Text> | ||
| </Box> | ||
|
|
||
| {/* Snap Message */} | ||
| <Box | ||
| color={TextColor.textDefault} | ||
| className="snap-notifications__item__details__message" | ||
| > | ||
| <SnapUIMarkdown markdown>{snapMessage}</SnapUIMarkdown> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
ui/components/multichain/notification-list-snap-button/index.ts
This file was deleted.
Oops, something went wrong.
28 changes: 0 additions & 28 deletions
28
...onents/multichain/notification-list-snap-button/notification-list-snap-button.stories.tsx
This file was deleted.
Oops, something went wrong.
20 changes: 0 additions & 20 deletions
20
...omponents/multichain/notification-list-snap-button/notification-list-snap-button.test.tsx
This file was deleted.
Oops, something went wrong.
29 changes: 0 additions & 29 deletions
29
ui/components/multichain/notification-list-snap-button/notification-list-snap-button.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.