View on GitHub
File Changes
  isActive: boolean,
  onClick: Function,
  className?: string,
+
  hasNotification?: boolean,
};

                      
@observer
export default class NavButton extends Component<Props> {
  render() {
-
    const { isActive, icon, onClick, className } = this.props;
+
    const { isActive, icon, onClick, className, hasNotification } = this.props;
    const componentClasses = classnames([
      className,
      styles.component,
      isActive ? styles.active : styles.normal,
+
      hasNotification ? styles.hasNotification : null,
    ]);
    const iconClasses = classnames([
      styles.icon,
  justify-content: center;
  text-align: center;
  width: 100%;
+

                      
+
  &.hasNotification {
+
    background: red !important;
+
  }
}

                      
.container {
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
+
import classnames from 'classnames';

                      
import { Select } from 'react-polymorph/lib/components/Select';
import { SelectSkin } from './NavSelectSkin';
  isActive: boolean,
  options?: Array<{ value: number | string, label: string }>,
  onChange: Function,
+
  hasNotification?: boolean,
};

                      
@observer
export default class NavDropdown extends Component<Props> {
  render() {
-
    const { label, icon, isActive, onChange, options, activeItem } = this.props;
+
    const {
+
      label,
+
      icon,
+
      isActive,
+
      onChange,
+
      options,
+
      activeItem,
+
      hasNotification,
+
    } = this.props;
+
    const componentStyles = classnames([
+
      styles.component,
+
      hasNotification ? styles.hasNotification : null,
+
    ]);
    return (
-
      <div className={styles.component}>
+
      <div className={componentStyles}>
        <Select
          label={
            <NavButton
    width: 100%;
  }

                      
+
  &.hasNotification {
+
    &:after {
+
      background: red;
+
      border-radius: 50%;
+
      content: '';
+
      display: block;
+
      height: 8px;
+
      position: absolute;
+
      right: 30px;
+
      top: 16px;
+
      width: 8px;
+
    }
+
  }
+

                      
  :global {
    .SimpleOptions_options {
      left: auto !important;
  id: string,
  label: string,
  icon?: string,
+
  hasNotification?: boolean,
};

                      
export type NavDropdownProps = {
  ...$Exact<NavButtonProps>,
  type: 'dropdown',
  options: Array<{ value: number | string, label: string }>,
+
  hasNotification: boolean,
};

                      
type Props = {
    } = this.props;
    return (
      <div className={styles.component}>
-
        {items.map(({ id, icon, label, ...item }) =>
+
        {items.map(({ id, icon, label, hasNotification, ...item }) =>
          item.type === 'dropdown' ? (
            <NavDropdown
              key={id}
              onChange={i => onNavItemClick(i)}
              activeItem={activeItem}
              options={item.options}
+
              hasNotification={hasNotification}
            />
          ) : (
            <NavButton
              icon={icon}
              isActive={isActiveNavItem(id, item)}
              onClick={() => onNavItemClick(id)}
+
              hasNotification={hasNotification}
            />
          )
        )}
    display: block;
    height: 10px;
    position: absolute;
-
    right: 10px;
-
    width: 10px;
+
    right: 8px;
+
    width: 8px;
  }
}
  activeItem: string,
  isActiveScreen: Function,
  onWalletNavItemClick: Function,
+
  hasNotification: boolean,
};

                      
@observer
      isActiveScreen,
      onWalletNavItemClick,
      activeItem,
+
      hasNotification,
    } = this.props;
    return (
      <div className={styles.component}>
            isActiveNavItem={isActiveScreen}
            onNavItemClick={onWalletNavItemClick}
            activeItem={activeItem}
+
            hasNotification={hasNotification}
          />
        </div>
        <div className={styles.page}>{children}</div>
  activeItem: string,
  isActiveNavItem: Function,
  onNavItemClick: Function,
+
  hasNotification: boolean,
};

                      
@observer
  };

                      
  render() {
-
    const { isActiveNavItem, onNavItemClick, activeItem } = this.props;
+
    const {
+
      isActiveNavItem,
+
      onNavItemClick,
+
      activeItem,
+
      hasNotification,
+
    } = this.props;
    const { intl } = this.context;
    return (
      <Navigation
            id: 'settings',
            label: intl.formatMessage(messages.more),
            icon: settingsIcon,
+
            hasNotification,
            options: [
              {
                label: intl.formatMessage(messages.settings),
                value: 'settings',
+
                hasNotification,
              },
              {
                label: intl.formatMessage(messages.utxo),
import RestoreNotification from '../../components/notifications/RestoreNotification';
import { buildRoute } from '../../utils/routing';
import { ROUTES } from '../../routes-config';
-
import { WalletSyncStateTags } from '../../domains/Wallet';
+
import { WalletSyncStateTags, WalletStatuses } from '../../domains/Wallet';
import type { InjectedContainerProps } from '../../types/injectedPropsType';
import type { NavDropdownProps } from '../../components/navigation/Navigation';

                      
      'syncState.data.estimatedCompletionTime.quantity',
      0
    );
+
    const hasNotification =
+
      wallets.active.mnemonicsConfirmationStatus ===
+
      WalletStatuses.NOTIFICATION;

                      
    return (
      <MainLayout>
          isActiveScreen={this.isActiveScreen}
          onWalletNavItemClick={this.handleWalletNavItemClick}
          activeItem={app.currentPage}
+
          hasNotification={hasNotification}
        >
          {this.props.children}
        </WalletWithNavigation>