arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-12 00:50:58 +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}; background: ${colors.GRAY_LIGHT};
color: ${colors.TEXT_SECONDARY}; 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)` 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 { class Input extends PureComponent {
getIcon(inputState) { getIcon(inputState) {
let icon = []; let icon = [];
@ -134,6 +171,7 @@ class Input extends PureComponent {
<Overlay isPartiallyHidden={this.props.isPartiallyHidden} /> <Overlay isPartiallyHidden={this.props.isPartiallyHidden} />
{this.props.icon} {this.props.icon}
<StyledInput <StyledInput
trezorAction={this.props.trezorAction}
hasIcon={this.getIcon(this.props.state).length > 0} hasIcon={this.getIcon(this.props.state).length > 0}
innerRef={this.props.innerRef} innerRef={this.props.innerRef}
hasAddon={!!this.props.sideAddons} hasAddon={!!this.props.sideAddons}
@ -151,7 +189,9 @@ class Input extends PureComponent {
name={this.props.name} name={this.props.name}
data-lpignore="true" data-lpignore="true"
/> />
<TrezorAction action={this.props.trezorAction}>
<ArrowUp />{this.props.trezorAction}
</TrezorAction>
</InputIconWrapper> </InputIconWrapper>
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)} {this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
</InputWrapper> </InputWrapper>
@ -182,6 +222,7 @@ Input.propTypes = {
state: PropTypes.string, state: PropTypes.string,
bottomText: PropTypes.string, bottomText: PropTypes.string,
topLabel: PropTypes.node, topLabel: PropTypes.node,
trezorAction: PropTypes.node,
sideAddons: PropTypes.arrayOf(PropTypes.node), sideAddons: PropTypes.arrayOf(PropTypes.node),
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
name: PropTypes.string, name: PropTypes.string,

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

@ -37,45 +37,6 @@ const StyledQRCode = styled(QRCode)`
border: 1px solid ${colors.BODY}; 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)` const ShowAddressButton = styled(Button)`
min-width: 195px; min-width: 195px;
padding: 0; padding: 0;
@ -156,18 +117,15 @@ const AccountReceive = (props: Props) => {
type="text" type="text"
value={address} value={address}
isPartiallyHidden={isAddressHidden} isPartiallyHidden={isAddressHidden}
trezorAction={( trezorAction={isAddressVerifying ? (
<React.Fragment> <React.Fragment>
<ArrowUp /> <Icon
<AddressInfoText> icon={ICONS.T1}
<Icon color={colors.WHITE}
icon={ICONS.T1} />
color={colors.WHITE}
/>
Check address on your Trezor Check address on your Trezor
</AddressInfoText>
</React.Fragment> </React.Fragment>
)} ) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && ( icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip <Tooltip
placement="bottom" placement="bottom"
@ -199,7 +157,7 @@ const AccountReceive = (props: Props) => {
</ShowAddressButton> </ShowAddressButton>
)} )}
</Row> </Row>
{(addressVerified || addressUnverified) && ( {(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper> <QrWrapper>
<Label>QR code</Label> <Label>QR code</Label>
<StyledQRCode <StyledQRCode