feat: Integrate JSX into snap notifications #27407
+451
−216
There are no files selected for viewing
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 |
|---|---|---|
|
|
@@ -21,7 +21,7 @@ import { | |
| TextVariant, | ||
| } from '../../../helpers/constants/design-system'; | ||
| import Tooltip from '../../ui/tooltip'; | ||
| import { AvatarGroup } from '../../multichain/avatar-group'; | ||
| import { AvatarType } from '../../multichain/avatar-group/avatar-group.types'; | ||
| import { useI18nContext } from '../../../hooks/useI18nContext'; | ||
| import { formatDate } from '../../../helpers/utils/util'; | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -17,7 +17,7 @@ import { | |
| } from '../../../component-library'; | ||
| import SnapLinkWarning from '../snap-link-warning'; | ||
|
|
||
| export const Paragraph = (props) => ( | ||
hmalik88 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <Text | ||
| {...props} | ||
| variant={TextVariant.bodyMd} | ||
|
|
@@ -69,7 +69,14 @@ export const SnapUIMarkdown = ({ children, markdown }) => { | |
| components={{ | ||
| p: Paragraph, | ||
| a: ({ children: value, href }) => ( | ||
| <Link | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| handleLinkClick(href); | ||
| }} | ||
| > | ||
| {value ?? href} | ||
| </Link> | ||
| ), | ||
| }} | ||
| > | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -39,7 +39,7 @@ import { | |
| } from '../../../store/actions'; | ||
| import { TextVariant } from '../../../helpers/constants/design-system'; | ||
| import { formatAccountType } from '../../../helpers/utils/metrics'; | ||
| import { AccountDetailsMenuItem, ViewExplorerMenuItem } from '../menu-items'; | ||
|
|
||
| const METRICS_LOCATION = 'Account Options'; | ||
|
|
||
|
|
||
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 |
|---|---|---|
|
|
@@ -6,7 +6,8 @@ import { useSelector } from 'react-redux'; | |
| import { useI18nContext } from '../../../hooks/useI18nContext'; | ||
| import { shortenAddress } from '../../../helpers/utils/util'; | ||
|
|
||
| import { AccountListItemMenu } from '../account-list-item-menu'; | ||
| import { AvatarGroup } from '../avatar-group'; | ||
| import { ConnectedAccountsMenu } from '../connected-accounts-menu'; | ||
| import { | ||
| AvatarAccount, | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -43,12 +43,9 @@ import { | |
| import { ModalContent } from '../../component-library/modal-content/deprecated'; | ||
| import { ModalHeader } from '../../component-library/modal-header'; | ||
| import { TextFieldSearch } from '../../component-library/text-field-search/deprecated'; | ||
| import { AccountListItem } from '../account-list-item'; | ||
| import { AccountListItemMenuTypes } from '../account-list-item/account-list-item.types'; | ||
|
|
||
| import { | ||
| AlignItems, | ||
| BlockSize, | ||
|
|
@@ -130,6 +127,8 @@ import { | |
| ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP, | ||
| AccountOverviewTabKey, | ||
| } from '../../../../shared/constants/app-state'; | ||
| import { CreateEthAccount } from '../create-eth-account'; | ||
| import { ImportAccount } from '../import-account'; | ||
| ///: BEGIN:ONLY_INCLUDE_IF(solana) | ||
| import { | ||
| SOLANA_WALLET_NAME, | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -34,8 +34,10 @@ import { | |
| IconSize, | ||
| Text, | ||
| } from '../../component-library'; | ||
| import { | ||
| AccountListItem, | ||
| AccountListItemMenuTypes, | ||
| } from '../account-list-item'; | ||
| import { mergeAccounts } from './account-list-menu'; | ||
|
|
||
| export const HiddenAccountList = ({ onClose }) => { | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -7,7 +7,7 @@ import { | |
| setAccountLabel, | ||
| getNextAvailableAccountName as getNextAvailableAccountNameFromController, | ||
| } from '../../../store/actions'; | ||
| import { CreateAccount } from '../create-account'; | ||
GuillaumeRx marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| export const CreateEthAccount = ({ onActionComplete }) => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -46,6 +46,16 @@ const mockNotification = { | |
| type: 'ERC20_RECEIVED', | ||
| }; | ||
|
|
||
| jest.mock('react-router-dom', () => { | ||
| const original = jest.requireActual('react-router-dom'); | ||
| return { | ||
| ...original, | ||
| useHistory: () => ({ | ||
| push: jest.fn(), | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| describe('NotificationDetailBlockExplorerButton', () => { | ||
| it('renders correctly with a valid block explorer URL', () => { | ||
| render( | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -8,6 +8,16 @@ const { TRIGGER_TYPES } = NotificationServicesController.Constants; | |
|
|
||
| type Notification = NotificationServicesController.Types.INotification; | ||
|
|
||
| jest.mock('react-router-dom', () => { | ||
| const original = jest.requireActual('react-router-dom'); | ||
| return { | ||
| ...original, | ||
| useHistory: () => ({ | ||
| push: jest.fn(), | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| describe('NotificationDetailButton', () => { | ||
| const defaultProps = { | ||
| variant: ButtonVariant.Primary, | ||
|
|
||
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 |
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| import React, { useContext, useState } from 'react'; | ||
| import { MetaMetricsContext } from '../../../contexts/metametrics'; | ||
| import { | ||
| MetaMetricsEventCategory, | ||
|
|
@@ -12,8 +11,10 @@ import { | |
| IconName, | ||
| } from '../../component-library'; | ||
| import { BlockSize } from '../../../helpers/constants/design-system'; | ||
| import { TRIGGER_TYPES } from '../../../pages/notifications/notification-components'; | ||
| import useSnapNavigation from '../../../hooks/snaps/useSnapNavigation'; | ||
| import { type Notification } from '../../../pages/notifications/notification-components/types/notifications/notifications'; | ||
| import SnapLinkWarning from '../../app/snaps/snap-link-warning'; | ||
|
|
||
| type NotificationDetailButtonProps = { | ||
| notification: Notification; | ||
|
|
@@ -35,6 +36,21 @@ export const NotificationDetailButton = ({ | |
| endIconName = true, | ||
| }: NotificationDetailButtonProps) => { | ||
| const trackEvent = useContext(MetaMetricsContext); | ||
| const { navigate } = useSnapNavigation(); | ||
| const isMetaMaskUrl = href.startsWith('metamask:'); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| const handleModalClose = () => { | ||
| setIsOpen(false); | ||
| }; | ||
|
|
||
| // this logic can be expanded once this detail button is used outside of the current use cases | ||
| const getClickedItem = () => { | ||
| if (notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) { | ||
| return 'block_explorer'; | ||
| } | ||
| return isExternal ? 'external_link' : 'internal_link'; | ||
| }; | ||
|
|
||
| const onClick = () => { | ||
| trackEvent({ | ||
|
|
@@ -46,23 +62,34 @@ export const NotificationDetailButton = ({ | |
| ...('chain_id' in notification && { | ||
| chain_id: notification.chain_id, | ||
| }), | ||
| clicked_item: getClickedItem(), | ||
| }, | ||
| }); | ||
|
|
||
| if (notification.type === TRIGGER_TYPES.SNAP) { | ||
| if (isMetaMaskUrl) { | ||
| navigate(href); | ||
| } else { | ||
| setIsOpen(true); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <SnapLinkWarning isOpen={isOpen} onClose={handleModalClose} url={href} /> | ||
| <Button | ||
| key={id} | ||
| href={!isMetaMaskUrl && href ? href : undefined} | ||
| variant={variant} | ||
| externalLink={isExternal || !isMetaMaskUrl} | ||
| size={ButtonSize.Lg} | ||
| width={BlockSize.Full} | ||
| endIconName={endIconName ? IconName.Arrow2UpRight : undefined} | ||
| onClick={onClick} | ||
| > | ||
| {text} | ||
| </Button> | ||
| </> | ||
| ); | ||
| }; | ||
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 |
|---|---|---|
| @@ -1,14 +1,12 @@ | ||
| import React, { createContext, useContext, useEffect, useMemo } from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { useListNotifications } from '../../hooks/metamask-notifications/useNotifications'; | ||
| import { useAccountSyncingEffect } from '../../hooks/identity/useProfileSyncing'; | ||
| import { selectIsProfileSyncingEnabled } from '../../selectors/identity/profile-syncing'; | ||
| import { selectIsMetamaskNotificationsEnabled } from '../../selectors/metamask-notifications/metamask-notifications'; | ||
| import { getUseExternalServices } from '../../selectors'; | ||
| import { getIsUnlocked } from '../../ducks/metamask/metamask'; | ||
| import { type Notification } from '../../pages/notifications/notification-components/types/notifications/notifications'; | ||
|
|
||
| type MetamaskNotificationsContextType = { | ||
| listNotifications: () => void; | ||
|
|
||
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 |
|---|---|---|
| @@ -1,20 +1,17 @@ | ||
| import { useState, useCallback } from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import type { InternalAccount } from '@metamask/keyring-api'; | ||
| import log from 'loglevel'; | ||
|
|
||
| import { type MarkAsReadNotificationsParam } from '@metamask/notification-services-controller/notification-services'; | ||
| import { | ||
| createOnChainTriggers, | ||
| fetchAndUpdateMetamaskNotifications, | ||
| markMetamaskNotificationsAsRead, | ||
| enableMetamaskNotifications, | ||
| disableMetamaskNotifications, | ||
| } from '../../store/actions'; | ||
| import { type Notification } from '../../pages/notifications/notification-components/types/notifications/notifications'; | ||
|
|
||
| // Define KeyringType interface | ||
| type KeyringType = { | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ import React from 'react'; | |
|
|
||
| import { Text } from '../../../../components/component-library'; | ||
| import { useI18nContext } from '../../../../hooks/useI18nContext'; | ||
| import { SnapAccountCard } from '../../../remove-snap-account/snap-account-card'; | ||
|
|
||
| const SnapAccountSuccessMessage = ({ | ||
| message, | ||
|
|
||
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 |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| import React from 'react'; | ||
| import { Box } from '../../../components/component-library'; | ||
| import { | ||
| Display, | ||
| FlexDirection, | ||
| } from '../../../helpers/constants/design-system'; | ||
| import { | ||
| Notification, | ||
| NotificationComponentType, | ||
| type NotificationComponent, | ||
| } from '../../notifications/notification-components/types/notifications/notifications'; | ||
|
|
||
| type NotificationDetailsBodyProps = { | ||
| body: NotificationComponent['details']['body']; | ||
|
|
@@ -24,13 +25,13 @@ export const NotificationDetailsBody = ({ | |
| flexDirection={FlexDirection.Column} | ||
| padding={0} | ||
| > | ||
| {body.type === NotificationComponentType.AnnouncementBody && ( | ||
| <> | ||
| <body.Image notification={notification} /> | ||
| <body.Description notification={notification} /> | ||
| </> | ||
| )} | ||
| {body.type === NotificationComponentType.OnChainBody && ( | ||
| <> | ||
| {body.Image && <body.Image notification={notification} />} | ||
| {body.From && <body.From notification={notification} />} | ||
|
|
@@ -47,6 +48,9 @@ export const NotificationDetailsBody = ({ | |
| {body.NetworkFee && <body.NetworkFee notification={notification} />} | ||
| </> | ||
| )} | ||
| {body.type === NotificationComponentType.SnapBody && ( | ||
| <body.Content notification={notification} /> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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.
I'd like to keep the object clean without
undefined. The performance difference of creating the intermediate object is neglible.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 not a performance worry, but it adds additional complexity that makes it harder to reason about the code.
I'm not necessarily against it, but why do we need
undefinedto not be present here?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.
Technically it's not type correct if
footerLinkordetailedViewis present on the notification object, also I have to do more type-fu to access thedetailedViewproperty instead of usinghasPropertyas I'm currently doing in some of the components.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.
I agree with Frederik that it would be better to pass
undefinedand do a stricter property check when trying to use itThere 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.
I'll consider this as a nit that we can fix after if we really want. This would just improve code readability :)