mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Merge pull request #93 from satoshilabs/tooltips
Gas price, gas limit, token tooltips + styles + read more
This commit is contained in:
Vaclav Mlejnsky
GitHub
commit
25758ba313
@ -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;
|
||||
|
||||
@ -30,4 +30,5 @@ export default {
|
||||
ERROR_SECONDARY: '#FFE9E9',
|
||||
|
||||
LABEL_COLOR: '#A9A9A9',
|
||||
TOOLTIP_BACKGROUND: '#333333',
|
||||
};
|
||||
@ -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> & 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> & 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
|
||||
|
||||
@ -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 */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user