diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 5d910bed..ee25ea5a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -60,6 +60,15 @@ const StyledInput = styled.input` background: ${colors.GRAY_LIGHT}; color: ${colors.TEXT_SECONDARY}; } + + ${props => props.trezorAction && css` + z-index: 10001; + position: relative; /* bigger than modal container */ + border-color: ${colors.WHITE}; + border-width: 2px; + transform: translate(-1px, -1px); + background: ${colors.DIVIDER}; + `}; `; const StyledIcon = styled(Icon)` @@ -90,6 +99,34 @@ const Overlay = styled.div` `} `; +const TrezorAction = styled.div` + display: ${props => (props.action ? 'flex' : 'none')}; + align-items: center; + height: 37px; + margin: 0px 10px; + padding: 0 14px 0 5px; + position: absolute; + top: 45px; + background: black; + color: ${colors.WHITE}; + border-radius: 5px; + line-height: 37px; + z-index: 10001; + transform: translate(-1px, -1px); +`; + +const ArrowUp = styled.div` + position: absolute; + top: -9px; + left: 12px; + width: 0; + height: 0; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-bottom: 9px solid black; + z-index: 10001; +`; + class Input extends PureComponent { getIcon(inputState) { let icon = []; @@ -134,6 +171,7 @@ class Input extends PureComponent { {this.props.icon} 0} innerRef={this.props.innerRef} hasAddon={!!this.props.sideAddons} @@ -151,7 +189,9 @@ class Input extends PureComponent { name={this.props.name} data-lpignore="true" /> - + + {this.props.trezorAction} + {this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)} @@ -182,6 +222,7 @@ Input.propTypes = { state: PropTypes.string, bottomText: PropTypes.string, topLabel: PropTypes.node, + trezorAction: PropTypes.node, sideAddons: PropTypes.arrayOf(PropTypes.node), isDisabled: PropTypes.bool, name: PropTypes.string, diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 3339e286..c366479e 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -37,45 +37,6 @@ const StyledQRCode = styled(QRCode)` border: 1px solid ${colors.BODY}; `; -const StyledInput = styled.div` - - ${props => props.isVerifying && css` - z-index: 10001; /* bigger than modal container */ - border-color: ${colors.WHITE}; - border-width: 2px; - transform: translate(-1px, -1px); - background: ${colors.DIVIDER}; - `}; -`; - -const ArrowUp = styled.div` - position: absolute; - top: 35px; - left: 70px; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-bottom: 9px solid black; - z-index: 10001; -`; - -const AddressInfoText = styled.div` - display: flex; - align-items: center; - height: 37px; - margin: 0px 2px; - padding: 0 14px 0 5px; - position: absolute; - top: 45px; - background: black; - color: ${colors.WHITE}; - border-radius: 5px; - line-height: 37px; - z-index: 10001; - transform: translate(-1px, -1px); -`; - const ShowAddressButton = styled(Button)` min-width: 195px; padding: 0; @@ -156,18 +117,15 @@ const AccountReceive = (props: Props) => { type="text" value={address} isPartiallyHidden={isAddressHidden} - trezorAction={( + trezorAction={isAddressVerifying ? ( - - - + Check address on your Trezor - - )} + ) : null} icon={((addressVerified || addressUnverified) && !isAddressVerifying) && ( { )} - {(addressVerified || addressUnverified) && ( + {(addressVerified || addressUnverified) && !isAddressVerifying && (