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

Merge pull request #93 from satoshilabs/tooltips

Browse Source 
Gas price, gas limit, token tooltips + styles + read more
This commit is contained in:
Vaclav Mlejnsky 2018-09-27 13:33:36 +02:00 committed by GitHub
commit 25758ba313
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Tooltip/index.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import RcTooltip from 'rc-tooltip';
import colors from 'config/colors';
import Link from 'components/Link';
import styled from 'styled-components';
import PropTypes from 'prop-types';
@ -11,7 +12,7 @@ const Wrapper = styled.div`
z-index: 1070;
display: block;
visibility: visible;
border: 1px solid ${colors.DIVIDER};
border: none;
border-radius: 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
@ -22,15 +23,15 @@ const Wrapper = styled.div`
.rc-tooltip-inner {
padding: 8px 10px;
color: ${colors.TEXT_SECONDARY};
color: ${colors.WHITE};
font-size: 12px;
line-height: 1.5;
text-align: left;
text-decoration: none;
background-color: ${colors.WHITE};
background-color: ${colors.TOOLTIP_BACKGROUND};
border-radius: 3px;
min-height: 34px;
border: 1px solid ${colors.WHITE};
border: none;
}
.rc-tooltip-arrow,
@ -48,7 +49,7 @@ const Wrapper = styled.div`
bottom: -6px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.DIVIDER};
border-top-color: ${colors.BLACK};
}
.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
@ -57,7 +58,7 @@ const Wrapper = styled.div`
bottom: 2px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.WHITE};
border-top-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
@ -78,7 +79,7 @@ const Wrapper = styled.div`
left: -5px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.DIVIDER};
border-right-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
@ -87,7 +88,7 @@ const Wrapper = styled.div`
left: 1px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.WHITE};
border-right-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-right .rc-tooltip-arrow {
@ -109,7 +110,7 @@ const Wrapper = styled.div`
right: -5px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.DIVIDER};
border-left-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
@ -118,7 +119,7 @@ const Wrapper = styled.div`
right: 1px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.WHITE};
border-left-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-left .rc-tooltip-arrow {
@ -140,7 +141,7 @@ const Wrapper = styled.div`
top: -5px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.DIVIDER};
border-bottom-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
@ -149,7 +150,7 @@ const Wrapper = styled.div`
top: 1px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.WHITE};
border-bottom-color: ${colors.TOOLTIP_BACKGROUND};
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
@ -165,6 +166,20 @@ const Wrapper = styled.div`
}
`;
const Content = styled.div`
padding-bottom: 10px;
text-align: justify;
`;
const ContentWrapper = styled.div``;
const ReadMore = styled.div`
padding: 10px 0 5px 0;
text-align: center;
width: 100%;
color: ${colors.WHITE};
border-top: 1px solid ${colors.TEXT_SECONDARY};
`;
class Tooltip extends Component {
render() {
const {
@ -172,6 +187,7 @@ class Tooltip extends Component {
placement,
content,
children,
readMoreLink,
maxWidth,
} = this.props;
return (
@ -184,7 +200,16 @@ class Tooltip extends Component {
getTooltipContainer={() => this.tooltipContainerRef}
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement={placement}
overlay={content}
overlay={() => (
<ContentWrapper>
<Content>{content}</Content>
{readMoreLink && (
<Link target="_blank" href={readMoreLink}>
<ReadMore>Read more</ReadMore>
</Link>
)
}
</ContentWrapper>)}
>
{children}
</RcTooltip>
@ -205,6 +230,7 @@ Tooltip.propTypes = {
PropTypes.element,
PropTypes.string,
]),
readMoreLink: PropTypes.string,
};
export default Tooltip;

1
src/config/colors.js
View File

@ -30,4 +30,5 @@ export default {
ERROR_SECONDARY: '#FFE9E9',
LABEL_COLOR: '#A9A9A9',
TOOLTIP_BACKGROUND: '#333333',
};

18
src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js
View File

@ -156,12 +156,13 @@ const AdvancedForm = (props: Props) => {
<Tooltip
content={(
<React.Fragment>
Gas limit is the amount of gas to send with your transaction.<br />
<GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
Increasing this number will not get your TX mined faster.<br />
Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>
Gas limit refers to the maximum amount of gas user is willing to spendon a particular transaction.{' '}
<GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>.{' '}Increasing the gas limit will not get the transaction confirmed sooner.
Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>.
</React.Fragment>
)}
maxWidth={410}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
placement="top"
>
<Icon
@ -190,12 +191,13 @@ const AdvancedForm = (props: Props) => {
<Tooltip
content={(
<React.Fragment>
Gas Price is the amount you pay per unit of gas.<br />
<GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
Higher the gas price = faster transaction, but more expensive. Recommended is <GreenSpan>{recommendedGasPrice} GWEI.</GreenSpan><br />
<Link href="https://myetherwallet.github.io/knowledge-base/gas/what-is-gas-ethereum.html" target="_blank" rel="noreferrer noopener" isGreen>Read more</Link>
Gas price refers to the amount of ether you are willing to pay for every
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
</React.Fragment>
)}
maxWidth={400}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
placement="top"
>
<Icon

19
src/views/Wallet/views/AccountSummary/index.js
View File

@ -25,17 +25,16 @@ const AccountHeading = styled.div`
align-items: center;
`;
const TooltipContent = styled.div`
display: block;
`;
const H2Wrapper = styled.div`
display: flex;
align-items: center;
padding: 20px 48px;
`;
const StyledTooltip = styled(Tooltip)`
position: relative;
top: 2px;
`;
const AccountName = styled.div`
display: flex;
align-items: center;
@ -102,20 +101,16 @@ const AccountSummary = (props: Props) => {
<H2Wrapper>
<H2>Tokens</H2>
<StyledTooltip
<Tooltip
placement="top"
content={(
<React.Fragment>
Insert token name, symbol or address to be able to send it.
</React.Fragment>
)}
content="Insert token name, symbol or address to be able to send it."
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</StyledTooltip>
</Tooltip>
</H2Wrapper>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}