diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 1c25903e..8c214510 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -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; diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js index 4bd3771c..10a7761b 100644 --- a/src/support/styles/Tooltip.js +++ b/src/support/styles/Tooltip.js @@ -3,7 +3,6 @@ import colors from 'config/colors'; const tooltipStyles = css` .rc-tooltip { - min-width: 200px; position: absolute; z-index: 1070; visibility: visible; diff --git a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js new file mode 100644 index 00000000..985eb2d5 --- /dev/null +++ b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js @@ -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 }) => ( + + {addressUnverified && ( + + Unverified address. {isConnected && isAvailable ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} + + )} + {!addressUnverified && ( + + {isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} + + )} + +); + +VerifyAddressTooltip.propTypes = { + isConnected: PropTypes.bool.isRequired, + isAvailable: PropTypes.bool.isRequired, + addressUnverified: PropTypes.bool.isRequired, +}; + + +export default VerifyAddressTooltip; diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 8f8e1e40..9bef69f1 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -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)} > - {addressUnverified ? ( - - Unverified address. - {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} - - ) : ( - - {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} - - )} - + )} >