1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Multichain: UX: Snaps: Add Notifications to Global Menu (#19204)

* Multichain: UX: Snaps: Add Notifications to Global Menu

* Fix lint

* Move notification count after text
This commit is contained in:
David Walsh 2023-05-23 14:44:05 -05:00 committed by GitHub
parent ba90e57663
commit 627ff3c0ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -6,10 +6,18 @@ import {
CONNECTED_ROUTE,
SETTINGS_ROUTE,
DEFAULT_ROUTE,
///: BEGIN:ONLY_INCLUDE_IN(snaps)
NOTIFICATIONS_ROUTE,
///: END:ONLY_INCLUDE_IN(snaps)
} from '../../../helpers/constants/routes';
import { lockMetamask } from '../../../store/actions';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { IconName } from '../../component-library';
import {
IconName,
///: BEGIN:ONLY_INCLUDE_IN(snaps)
Text,
///: END:ONLY_INCLUDE_IN(snaps)
} from '../../component-library';
import { Menu, MenuItem } from '../../ui/menu';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@ -22,7 +30,23 @@ import {
MetaMetricsContextProp,
} from '../../../../shared/constants/metametrics';
import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
import { getMetaMetricsId } from '../../../selectors';
import {
getMetaMetricsId,
///: BEGIN:ONLY_INCLUDE_IN(snaps)
getUnreadNotificationsCount,
///: END:ONLY_INCLUDE_IN
} from '../../../selectors';
///: BEGIN:ONLY_INCLUDE_IN(snaps)
import {
AlignItems,
BackgroundColor,
Display,
JustifyContent,
TextAlign,
TextColor,
TextVariant,
} from '../../../helpers/constants/design-system';
///: END:ONLY_INCLUDE_IN
export const GlobalMenu = ({ closeMenu, anchorElement }) => {
const t = useI18nContext();
@ -31,6 +55,10 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
const history = useHistory();
const metaMetricsId = useSelector(getMetaMetricsId);
///: BEGIN:ONLY_INCLUDE_IN(snaps)
const unreadNotificationsCount = useSelector(getUnreadNotificationsCount);
///: END:ONLY_INCLUDE_IN
return (
<Menu anchorElement={anchorElement} onHide={closeMenu}>
<MenuItem
@ -96,6 +124,41 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
{t('expandView')}
</MenuItem>
)}
{
///: BEGIN:ONLY_INCLUDE_IN(snaps)
<>
<MenuItem
iconName={IconName.Notification}
onClick={() => {
closeMenu();
history.push(NOTIFICATIONS_ROUTE);
}}
>
<Text as="span">{t('notifications')}</Text>
{unreadNotificationsCount > 0 && (
<Text
as="span"
display={Display.InlineBlock}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
backgroundColor={BackgroundColor.primaryDefault}
color={TextColor.primaryInverse}
padding={[0, 1, 0, 1]}
variant={TextVariant.bodyXs}
textAlign={TextAlign.Center}
style={{
borderRadius: '16px',
minWidth: '24px',
}}
marginInlineStart={2}
>
{unreadNotificationsCount}
</Text>
)}
</MenuItem>
</>
///: END:ONLY_INCLUDE_IN(snaps)
}
<MenuItem
iconName={IconName.MessageQuestion}
onClick={() => {