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:
parent
ba90e57663
commit
627ff3c0ad
@ -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={() => {
|
||||
|
Loading…
Reference in New Issue
Block a user