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

Added trezor action for input

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-30 16:08:31 +01:00 committed by Szymon Lesisz
parent d682833aa3
commit b87386a6b1
2 changed files with 49 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/inputs/Input/index.js
View File

@ -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 {
<Overlay isPartiallyHidden={this.props.isPartiallyHidden} />
{this.props.icon}
<StyledInput
trezorAction={this.props.trezorAction}
hasIcon={this.getIcon(this.props.state).length > 0}
innerRef={this.props.innerRef}
hasAddon={!!this.props.sideAddons}
@ -151,7 +189,9 @@ class Input extends PureComponent {
name={this.props.name}
data-lpignore="true"
/>
<TrezorAction action={this.props.trezorAction}>
<ArrowUp />{this.props.trezorAction}
</TrezorAction>
</InputIconWrapper>
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
</InputWrapper>
@ -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,

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

@ -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 ? (
<React.Fragment>
<ArrowUp />
<AddressInfoText>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</AddressInfoText>
</React.Fragment>
)}
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="bottom"
@ -199,7 +157,7 @@ const AccountReceive = (props: Props) => {
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && (
{(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper>
<Label>QR code</Label>
<StyledQRCode