1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00

Refactor trezor action

This commit is contained in:
Vladimir Volek 2018-11-05 15:13:22 +01:00
parent 53f7a8ecef
commit 12f094a595
4 changed files with 23 additions and 85 deletions

View File

@ -1,70 +0,0 @@
import React from 'react';
import RcTooltip from 'rc-tooltip';
import colors from 'config/colors';
import Link from 'components/Link';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Wrapper = styled.div``;
const Content = styled.div`
max-width: ${props => `${props.maxWidth}px` || 'auto'};
`;
const ContentWrapper = styled.div`
display: block;
`;
const ReadMore = styled.div`
margin-top: 15px;
padding: 10px 0 5px 0;
text-align: center;
width: 100%;
color: ${colors.WHITE};
border-top: 1px solid ${colors.TEXT_SECONDARY};
`;
const Tooltip = ({
maxWidth,
className,
placement,
content,
readMoreLink,
children,
}) => (
<Wrapper className={className}>
<RcTooltip
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement={placement}
overlay={() => (
<ContentWrapper>
<Content maxWidth={maxWidth}>{content}</Content>
{readMoreLink && (
<Link href={readMoreLink}>
<ReadMore>Read more</ReadMore>
</Link>
)
}
</ContentWrapper>)}
>
{children}
</RcTooltip>
</Wrapper>
);
Tooltip.propTypes = {
className: PropTypes.string,
placement: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string,
]),
maxWidth: PropTypes.number,
content: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string,
]),
readMoreLink: PropTypes.string,
};
export default Tooltip;

View File

@ -0,0 +1,21 @@
import React from 'react';
import colors from 'config/colors';
import ICONS from 'config/icons';
import Icon from 'components/Icon';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
`;
const Tooltip = () => (
<Wrapper>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</Wrapper>
);
export default Tooltip;

View File

@ -3,7 +3,6 @@ export const FONT_SIZE = {
SMALLER: '12px',
SMALL: '14px',
BASE: '16px',
WALLET_TITLE: '18px',
TOP_MENU: '17px',
WALLET_TITLE: '18px',
BIG: '21px',

View File

@ -1,25 +1,21 @@
/* @flow */
import React from 'react';
import { QRCode } from 'react-qr-svg';
<<<<<<< HEAD
import styled, { css } from 'styled-components';
=======
import styled from 'styled-components';
import media from 'styled-media-query';
import { H2 } from 'components/Heading';
>>>>>>> master
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import Input from 'components/inputs/Input';
import ICONS from 'config/icons';
import TrezorConfirm from 'components/trezorActions/Confirm';
import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content';
import Title from 'views/Wallet/components/Title';
import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container';
@ -126,15 +122,7 @@ const AccountReceive = (props: Props) => {
type="text"
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
<React.Fragment>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</React.Fragment>
) : null}
trezorAction={isAddressVerifying ? <TrezorConfirm /> : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"