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 && (