diff --git a/src/config/app.js b/src/config/app.js
index 2e8eaa08..386d7d0c 100644
--- a/src/config/app.js
+++ b/src/config/app.js
@@ -66,3 +66,7 @@ export const FIAT_CURRENCIES = [
'xag',
'xau',
];
+
+export const SETTINGS = {
+ MAX_ACCOUNTS: 10,
+};
diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/components/AddAccountButton/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/components/AddAccountButton/index.js
new file mode 100644
index 00000000..c0334435
--- /dev/null
+++ b/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 = (
+
+
+
+
+
+
+
+
+ );
+
+ if (tooltipContent) {
+ return (
+
+ {ButtonRow}
+
+ );
+ }
+ return ButtonRow;
+};
+
+export default AddAccountButton;
+
+AddAccountButton.propTypes = {
+ onClick: PropTypes.func,
+ className: PropTypes.string,
+ tooltipContent: PropTypes.node,
+ disabled: PropTypes.bool,
+};
diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
index 0c441fb3..05e59cf2 100644
--- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/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 = (
- }
- placement="bottom"
- >
-
-
-
-
-
-
-
-
-
+ }
+ />
);
- } else if (lastAccount && !lastAccount.empty) {
+ } else if (discoveryAccounts.length >= SETTINGS.MAX_ACCOUNTS) {
discoveryStatus = (
-
-
-
-
-
-
-
-
+
+ }
+ />
);
+ } else if (lastAccount && !lastAccount.empty) {
+ discoveryStatus = ;
} else {
discoveryStatus = (
- }
- placement="bottom"
- >
-
-
-
-
-
-
-
-
-
+
+ }
+ />
);
}
} else {
diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js
index 576cd30e..acb31062 100644
--- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js
+++ b/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;