arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

tooltip position fixed

Browse Source
pull/133/merge
Vladimir Volek 6 years ago committed by Szymon Lesisz
parent 2d9f02a4e6
commit f32c2d351d
2 changed files with 65 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -60,8 +60,8 @@
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-raven-middleware": "^1.2.0", "redux-raven-middleware": "^1.2.0",
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"styled-components": "^3.4.9",
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"styled-components": "^3.4.9",
"styled-media-query": "^2.0.2", "styled-media-query": "^2.0.2",
"styled-normalize": "^8.0.0", "styled-normalize": "^8.0.0",
"trezor-connect": "^5.0.32", "trezor-connect": "^5.0.32",

136
src/views/Wallet/views/Account/Receive/index.js
Unescape View File

@ -80,7 +80,7 @@ const ValueWrapper = styled.div`
const ArrowUp = styled.div` const ArrowUp = styled.div`
position: absolute; position: absolute;
top: 30px; top: 35px;
left: 70px; left: 70px;
width: 0; width: 0;
height: 0; height: 0;
@ -97,7 +97,7 @@ const AddressInfoText = styled.div`
margin: 0px 2px; margin: 0px 2px;
padding: 0 14px 0 5px; padding: 0 14px 0 5px;
position: absolute; position: absolute;
top: 39px; top: 45px;
background: black; background: black;
color: ${colors.WHITE}; color: ${colors.WHITE};
border-radius: 5px; border-radius: 5px;
@ -127,10 +127,10 @@ const ShowAddressIcon = styled(Icon)`
const EyeButton = styled(Button)` const EyeButton = styled(Button)`
z-index: 10001; z-index: 10001;
padding: 0; padding: 0;
width: 30px;
top: 5px;
position: absolute; position: absolute;
left: auto;
right: 10px; right: 10px;
top: 6px;
`; `;
const AccountReceive = (props: Props) => { const AccountReceive = (props: Props) => {
@ -159,81 +159,73 @@ const AccountReceive = (props: Props) => {
return ( return (
<Content> <Content>
<React.Fragment> <H2>Receive Ethereum or tokens</H2>
<H2>Receive Ethereum or tokens</H2> <AddressWrapper
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}
isShowingQrCode={addressVerified || addressUnverified} >
> {isAddressVerifying && (
{isAddressVerifying && ( <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
<AddressInfoText>Confirm address on TREZOR</AddressInfoText> )}
)} {((addressVerified || addressUnverified) && !isAddressVerifying) && (
{((addressVerified || addressUnverified) && !isAddressVerifying) && ( <Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton <EyeButton
isTransparent isTransparent
onClick={() => props.showAddress(account.addressPath)} onClick={() => props.showAddress(account.addressPath)}
> >
<Tooltip
placement="bottomRight" <Icon
content={( icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
<VerifyAddressTooltip color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</Tooltip>
</EyeButton>
)}
<ValueWrapper
isHidden={isAddressHidden}
isVerifying={isAddressVerifying}
>
{address}
</ValueWrapper>
{isAddressVerifying && (
<React.Fragment>
<ArrowUp />
<AddressInfoText>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</AddressInfoText>
</React.Fragment>
)}
{(addressVerified || addressUnverified) && (
<React.Fragment>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/> />
</React.Fragment>
)} </EyeButton>
{!(addressVerified || addressUnverified) && ( </Tooltip>
<ShowAddressButton )}
onClick={() => props.showAddress(account.addressPath)} <ValueWrapper
isDisabled={device.connected && !discovery.completed} isHidden={isAddressHidden}
> isVerifying={isAddressVerifying}
<ShowAddressIcon >
icon={ICONS.EYE} {address}
</ValueWrapper>
{isAddressVerifying && (
<React.Fragment>
<ArrowUp />
<AddressInfoText>
<Icon
icon={ICONS.T1}
color={colors.WHITE} color={colors.WHITE}
/> />
Show full address Check address on your Trezor
</ShowAddressButton> </AddressInfoText>
)} </React.Fragment>
</AddressWrapper> )}
</React.Fragment> {(addressVerified || addressUnverified) && (
<React.Fragment>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</React.Fragment>
)}
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</AddressWrapper>
</Content> </Content>
); );
}; };

Write Preview
Loading…
Cancel
Save