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;