mirror of https://github.com/trezor/trezor-wallet
Merge pull request #512 from trezor/feature/limit-max-accounts
Feature/limit number of accounts to 10pull/516/head
commit
5fbb0cd2ea
@ -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,
|
||||||
|
};
|
Loading…
Reference in new issue