arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-02 11:21:11 +00:00
Code Issues Releases Wiki Activity

Create "TooltipContent" component

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-28 09:43:45 +02:00
parent b42e8adb03
commit b599c7cf5f
5 changed files with 52 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,160 +0,0 @@
import Tooltip from 'rc-tooltip';
import styled from 'styled-components';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
const StyledTooltip = styled(Tooltip)`
.tooltip-wrapper {
width: 320px;
font-size: ${FONT_SIZE.SMALLEST};
span {
color: ${colors.GREEN_PRIMARY};
}
}
.aside-tooltip-wrapper {
width: 260px;
font-size: ${FONT_SIZE.SMALLEST};
}
&.rc-tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
border: 1px solid ${colors.DIVIDER};
border-radius: 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
&.rc-tooltip-hidden {
display: none;
}
&.rc-tooltip-inner {
padding: 8px 10px;
color: ${colors.TEXT_SECONDARY};
font-size: ${FONT_SIZE.SMALLER};
line-height: 1.5;
text-align: left;
text-decoration: none;
background-color: ${colors.WHITE};
border-radius: 3px;
min-height: 34px;
border: 1px solid ${colors.WHITE};
}
&.rc-tooltip-arrow,
&.rc-tooltip-arrow-inner {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&.rc-tooltip-placement-top &.rc-tooltip-arrow,
&.rc-tooltip-placement-topLeft &.rc-tooltip-arrow,
&.rc-tooltip-placement-topRight &.rc-tooltip-arrow {
bottom: -6px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.DIVIDER};
}
&.rc-tooltip-placement-top &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-topLeft &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-topRight &.rc-tooltip-arrow-inner {
bottom: 2px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.WHITE};
}
&.rc-tooltip-placement-top &.rc-tooltip-arrow {
left: 50%;
}
&.rc-tooltip-placement-topLeft &.rc-tooltip-arrow {
left: 15%;
}
&.rc-tooltip-placement-topRight &.rc-tooltip-arrow {
right: 15%;
}
&.rc-tooltip-placement-right &.rc-tooltip-arrow,
&.rc-tooltip-placement-rightTop &.rc-tooltip-arrow,
&.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow {
left: -5px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.DIVIDER};
}
&.rc-tooltip-placement-right &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-rightTop &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow-inner {
left: 1px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.WHITE};
}
&.rc-tooltip-placement-right &.rc-tooltip-arrow {
top: 50%;
}
&.rc-tooltip-placement-rightTop &.rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
&.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow {
bottom: 15%;
}
&.rc-tooltip-placement-left &.rc-tooltip-arrow,
&.rc-tooltip-placement-leftTop &.rc-tooltip-arrow,
&.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow {
right: -5px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.DIVIDER};
}
&.rc-tooltip-placement-left &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-leftTop &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow-inner {
right: 1px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.WHITE};
}
&.rc-tooltip-placement-left &.rc-tooltip-arrow {
top: 50%;
}
&.rc-tooltip-placement-leftTop &.rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
&.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow {
bottom: 15%;
}
&.rc-tooltip-placement-bottom &.rc-tooltip-arrow,
&.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow,
&.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow {
top: -5px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.DIVIDER};
}
&.rc-tooltip-placement-bottom &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow-inner,
&.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow-inner {
top: 1px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.WHITE};
}
&.rc-tooltip-placement-bottom &.rc-tooltip-arrow {
left: 50%;
}
&.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow {
left: 15%;
}
&.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow {
right: 15%;
}
`;
export default StyledTooltip;

26
src/components/TooltipContent/index.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
width: ${props => (props.isAside ? '260px' : '320px')};
font-size: ${FONT_SIZE.SMALLEST};
`;
const TooltipContent = ({
children, isAside = false,
}) => (
<Wrapper
isAside={isAside}
>
{children}
</Wrapper>
);
TooltipContent.propTypes = {
children: PropTypes.node,
isAside: PropTypes.bool,
};
export default TooltipContent;

8
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -1,6 +1,7 @@
/* @flow */
import React from 'react';
import BigNumber from 'bignumber.js';
import TooltipContent from 'components/TooltipContent';
import Icon from 'components/Icon';
import colors from 'config/colors';
import Loader from 'components/Loader';
@ -268,15 +269,10 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) {
discoveryStatus = <RowAddAccount onClick={props.addAccount} />;
} else {
const tooltip = (
<div className="aside-tooltip-wrapper">
To add a new account, last account must have some transactions.
</div>
);
discoveryStatus = (
<Tooltip
arrowContent={<div className="rc-tooltip-arrow-inner" />}
overlay={tooltip}
overlay={<TooltipContent isAside>To add a new account, last account must have some transactions.</TooltipContent>}
placement="bottom"
>
<RowAddAccount disabled />

36
src/views/Wallet/views/AccountSend/components/AdvancedForm.js
View File

@ -1,10 +1,16 @@
/* @flow */
import React from 'react';
import Tooltip from 'rc-tooltip';
import TooltipContent from 'components/TooltipContent';
import Link from 'components/Link';
import styled from 'styled-components';
import colors from 'config/colors';
import type { Props as BaseProps } from '../Container';
const GreenSpan = styled.span`
color: ${colors.GREEN_PRIMARY};
`;
type Props = {
selectedAccount: $ElementType<BaseProps, 'selectedAccount'>,
sendForm: $ElementType<BaseProps, 'sendForm'>,
@ -51,9 +57,9 @@ const AdvancedForm = (props: Props) => {
}
const nonceTooltip = (
<div className="tooltip-wrapper">
<TooltipContent>
TODO<br />
</div>
</TooltipContent>
);
let gasLimitTooltipCurrency: string;
@ -67,27 +73,27 @@ const AdvancedForm = (props: Props) => {
}
const gasLimitTooltip = (
<div className="tooltip-wrapper">
<TooltipContent>
Gas limit is the amount of gas to send with your transaction.<br />
<span>TX fee = gas price * gas limit</span> &amp; is paid to miners for including your TX in a block.<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 <span>{ gasLimitTooltipValue }</span>
</div>
Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>
</TooltipContent>
);
const gasPriceTooltip = (
<div className="tooltip-wrapper">
<TooltipContent>
Gas Price is the amount you pay per unit of gas.<br />
<span>TX fee = gas price * gas limit</span> &amp; is paid to miners for including your TX in a block.<br />
Higher the gas price = faster transaction, but more expensive. Recommended is <span>{ recommendedGasPrice } GWEI.</span><br />
<a className="green" href="https://myetherwallet.github.io/knowledge-base/gas/what-is-gas-ethereum.html" target="_blank" rel="noreferrer noopener">Read more</a>
</div>
<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>
</TooltipContent>
);
const dataTooltip = (
<div className="tooltip-wrapper">
<TooltipContent>
Data is usually used when you send transactions to contracts.
</div>
</TooltipContent>
);

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

@ -2,6 +2,7 @@
import styled from 'styled-components';
import React from 'react';
import { H2 } from 'components/Heading';
import TooltipContent from 'components/TooltipContent';
import BigNumber from 'bignumber.js';
import { Async as AsyncSelect } from 'react-select';
import Tooltip from 'rc-tooltip';
@ -49,9 +50,9 @@ const Summary = (props: Props) => {
if (!device || !account || !network) return null;
const tokensTooltip = (
<div className="tooltip-wrapper">
<TooltipContent>
Insert token name, symbol or address to be able to send it.
</div>
</TooltipContent>
);
const explorerLink: string = `${network.explorer.address}${account.address}`;