arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 02:38:18 +00:00
Code Issues Releases Wiki Activity

limit number of accounts

Browse Source
This commit is contained in:
slowbackspace 2019-04-16 12:37:58 +02:00
parent bcd618aa0a
commit 1e6a654168
4 changed files with 97 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/config/app.js
View File

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

64
src/views/Wallet/components/LeftNavigation/components/AccountMenu/components/AddAccountButton/index.js Normal file
View File

@ -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,
};

80
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -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
maxWidth={200}
content={<FormattedMessage {...l10nMessages.TR_TO_ADD_ACCOUNTS} />}
placement="bottom"
>
<Row>
<RowAddAccountWrapper disabled>
<AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper>
</Row>
</Tooltip>
<AddAccountButton
disabled
tooltipContent={<FormattedMessage {...l10nMessages.TR_TO_ADD_ACCOUNTS} />}
/>
);
} else if (discoveryAccounts.length >= SETTINGS.MAX_ACCOUNTS) {
discoveryStatus = (
<AddAccountButton
disabled
tooltipContent={
<FormattedMessage
{...l10nMessages.TR_YOU_CANNOT_ADD_MORE_THAN_10_ACCOUNTS}
/>
}
/>
);
} else if (lastAccount && !lastAccount.empty) {
discoveryStatus = (
<Row onClick={props.addAccount}>
<RowAddAccountWrapper>
<AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper>
</Row>
);
discoveryStatus = <AddAccountButton onClick={props.addAccount} />;
} else {
discoveryStatus = (
<Tooltip
maxWidth={200}
content={<FormattedMessage {...l10nMessages.TR_TO_ADD_A_NEW_ACCOUNT_LAST} />}
placement="bottom"
>
<Row>
<RowAddAccountWrapper disabled>
<AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper>
</Row>
</Tooltip>
<AddAccountButton
disabled
tooltipContent={
<FormattedMessage {...l10nMessages.TR_TO_ADD_A_NEW_ACCOUNT_LAST} />
}
/>
);
}
} else {

4
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js
View File

@ -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;