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

Tooltip refactored to sepearated component

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-05 15:57:51 +02:00 committed by Szymon Lesisz
parent 6b1aceff0e
commit 2d9f02a4e6
4 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Tooltip/index.js
View File

@ -9,10 +9,11 @@ const Wrapper = styled.div``;
const Content = styled.div`
max-width: ${props => `${props.maxWidth}px` || 'auto'};
text-align: justify;
`;
const ContentWrapper = styled.div``;
const ContentWrapper = styled.div`
display: block;
`;
const ReadMore = styled.div`
margin-top: 15px;

1
src/support/styles/Tooltip.js
View File

@ -3,7 +3,6 @@ import colors from 'config/colors';
const tooltipStyles = css`
.rc-tooltip {
min-width: 200px;
position: absolute;
z-index: 1070;
visibility: visible;

30
src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Wrapper = styled.div``;
const Content = styled.div``;
const VerifyAddressTooltip = ({ isConnected, isAvailable, addressUnverified }) => (
<Wrapper>
{addressUnverified && (
<Content>
Unverified address. {isConnected && isAvailable ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
</Content>
)}
{!addressUnverified && (
<Content>
{isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
</Content>
)}
</Wrapper>
);
VerifyAddressTooltip.propTypes = {
isConnected: PropTypes.bool.isRequired,
isAvailable: PropTypes.bool.isRequired,
addressUnverified: PropTypes.bool.isRequired,
};
export default VerifyAddressTooltip;

20
src/views/Wallet/views/Account/Receive/index.js
View File

@ -12,6 +12,7 @@ import Tooltip from 'components/Tooltip';
import { QRCode } from 'react-qr-svg';
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container';
@ -173,20 +174,13 @@ const AccountReceive = (props: Props) => {
onClick={() => props.showAddress(account.addressPath)}
>
<Tooltip
placement="bottom"
placement="bottomRight"
content={(
<React.Fragment>
{addressUnverified ? (
<React.Fragment>
Unverified address.
{device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
</React.Fragment>
) : (
<React.Fragment>
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
</React.Fragment>
)}
</React.Fragment>
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<Icon