limit number of accounts

src/config/app.js

@@ -66,3 +66,7 @@ export const FIAT_CURRENCIES = [
     'xag',
     'xau',
 ];
+
+export const SETTINGS = {
+    MAX_ACCOUNTS: 10,
+};

src/views/Wallet/components/LeftNavigation/components/AccountMenu/components/AddAccountButton/index.js

@@ -0,0 +1,64 @@
+/* @flow */
+import * as React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { Icon, Tooltip, icons as ICONS, colors } from 'trezor-ui-components';
+import { LEFT_NAVIGATION_ROW } from 'config/variables';
+import Row from '../../../Row';
+
+import l10nMessages from '../../index.messages';
+
+const RowAddAccountWrapper = styled.div`
+    width: 100%;
+    padding: ${LEFT_NAVIGATION_ROW.PADDING};
+    display: flex;
+    align-items: center;
+    color: ${colors.TEXT_SECONDARY};
+    &:hover {
+        cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+        color: ${props => (props.disabled ? colors.TEXT_SECONDARY : colors.TEXT_PRIMARY)};
+    }
+`;
+
+const AddAccountIconWrapper = styled.div`
+    margin-right: 12px;
+`;
+
+type Props = {
+    onClick?: () => any,
+    tooltipContent?: React.Node,
+    disabled?: boolean,
+};
+
+const AddAccountButton = ({ onClick, tooltipContent, disabled }: Props) => {
+    const ButtonRow = (
+        <Row onClick={onClick}>
+            <RowAddAccountWrapper disabled={disabled}>
+                <AddAccountIconWrapper>
+                    <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
+                </AddAccountIconWrapper>
+                <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
+            </RowAddAccountWrapper>
+        </Row>
+    );
+
+    if (tooltipContent) {
+        return (
+            <Tooltip maxWidth={200} content={tooltipContent} placement="bottom">
+                {ButtonRow}
+            </Tooltip>
+        );
+    }
+    return ButtonRow;
+};
+
+export default AddAccountButton;
+
+AddAccountButton.propTypes = {
+    onClick: PropTypes.func,
+    className: PropTypes.string,
+    tooltipContent: PropTypes.node,
+    disabled: PropTypes.bool,
+};

src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -8,15 +8,17 @@ import { toFiatCurrency } from 'utils/fiatConverter';
 import * as stateUtils from 'reducers/utils';
 import { findDeviceAccounts } from 'reducers/AccountsReducer';
 
-import { Icon, Loader, Tooltip, icons as ICONS, colors } from 'trezor-ui-components';
+import { Loader, icons as ICONS, colors } from 'trezor-ui-components';
 import { FONT_SIZE, BORDER_WIDTH, LEFT_NAVIGATION_ROW } from 'config/variables';
 
 import type { Accounts } from 'flowtype';
 import l10nCommonMessages from 'views/common.messages';
+import { SETTINGS } from 'config/app';
 import type { Props } from '../common';
 import Row from '../Row';
 import RowCoin from '../RowCoin';
 import l10nMessages from './index.messages';
+import AddAccountButton from './components/AddAccountButton';
 
 const Wrapper = styled.div``;
 
@@ -55,22 +57,6 @@ const RowAccountWrapper = styled.div`
         `}
 `;
 
-const RowAddAccountWrapper = styled.div`
-    width: 100%;
-    padding: ${LEFT_NAVIGATION_ROW.PADDING};
-    display: flex;
-    align-items: center;
-    color: ${colors.TEXT_SECONDARY};
-    &:hover {
-        cursor: ${props => (props.disabled ? 'default' : 'pointer')};
-        color: ${props => (props.disabled ? colors.TEXT_SECONDARY : colors.TEXT_PRIMARY)};
-    }
-`;
-
-const AddAccountIconWrapper = styled.div`
-    margin-right: 12px;
-`;
-
 const DiscoveryLoadingWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -201,48 +187,32 @@ const AccountMenu = (props: Props) => {
         const lastAccount = discoveryAccounts[discoveryAccounts.length - 1];
         if (!selected.connected) {
             discoveryStatus = (
-                <Tooltip
+                <AddAccountButton
-                    maxWidth={200}
+                    disabled
-                    content={<FormattedMessage {...l10nMessages.TR_TO_ADD_ACCOUNTS} />}
+                    tooltipContent={<FormattedMessage {...l10nMessages.TR_TO_ADD_ACCOUNTS} />}
-                    placement="bottom"
+                />
-                >
+            );
-                    <Row>
+        } else if (discoveryAccounts.length >= SETTINGS.MAX_ACCOUNTS) {
-                        <RowAddAccountWrapper disabled>
+            discoveryStatus = (
-                            <AddAccountIconWrapper>
+                <AddAccountButton
-                                <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
+                    disabled
-                            </AddAccountIconWrapper>
+                    tooltipContent={
-                            <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
+                        <FormattedMessage
-                        </RowAddAccountWrapper>
+                            {...l10nMessages.TR_YOU_CANNOT_ADD_MORE_THAN_10_ACCOUNTS}
-                    </Row>
+                        />
-                </Tooltip>
+                    }
+                />
             );
         } else if (lastAccount && !lastAccount.empty) {
-            discoveryStatus = (
+            discoveryStatus = <AddAccountButton onClick={props.addAccount} />;
-                <Row onClick={props.addAccount}>
-                    <RowAddAccountWrapper>
-                        <AddAccountIconWrapper>
-                            <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
-                        </AddAccountIconWrapper>
-                        <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
-                    </RowAddAccountWrapper>
-                </Row>
-            );
         } else {
             discoveryStatus = (
-                <Tooltip
+                <AddAccountButton
-                    maxWidth={200}
+                    disabled
-                    content={<FormattedMessage {...l10nMessages.TR_TO_ADD_A_NEW_ACCOUNT_LAST} />}
+                    tooltipContent={
-                    placement="bottom"
+                        <FormattedMessage {...l10nMessages.TR_TO_ADD_A_NEW_ACCOUNT_LAST} />
-                >
+                    }
-                    <Row>
+                />
-                        <RowAddAccountWrapper disabled>
-                            <AddAccountIconWrapper>
-                                <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
-                            </AddAccountIconWrapper>
-                            <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
-                        </RowAddAccountWrapper>
-                    </Row>
-                </Tooltip>
             );
         }
     } else {

src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js

@@ -15,6 +15,10 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_ADD_ACCOUNT',
         defaultMessage: 'Add account',
     },
+    TR_YOU_CANNOT_ADD_MORE_THAN_10_ACCOUNTS: {
+        id: 'TR_YOU_CANNOT_ADD_MORE_THAN_10_ACCOUNTS',
+        defaultMessage: 'You cannot add more than 10 accounts',
+    },
 });
 
 export default definedMessages;