Merge pull request #93 from satoshilabs/tooltips

Gas price, gas limit, token tooltips + styles + read more

src/components/Tooltip/index.js

@@ -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;

src/config/colors.js

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

src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js

@@ -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 />
+                                        Gas limit refers to the maximum amount of gas user is willing to spendon a particular transaction.{' '}
-                                        <GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
+                                        <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>.{' '}Increasing the gas limit will not get the transaction confirmed sooner.
-                                        Increasing this number will not get your TX mined faster.<br />
+                                        Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>.
-                                        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 />
+                                        Gas price refers to the amount of ether you are willing to pay for every
-                                        <GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
+                                        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
-                                        Higher the gas price = faster transaction, but more expensive. Recommended is <GreenSpan>{recommendedGasPrice} GWEI.</GreenSpan><br />
+                                        makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
-                                        <Link href="https://myetherwallet.github.io/knowledge-base/gas/what-is-gas-ethereum.html" target="_blank" rel="noreferrer noopener" isGreen>Read more</Link>
                                     </React.Fragment>
                                 )}
+                                maxWidth={400}
+                                readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
                                 placement="top"
                             >
                                 <Icon

src/views/Wallet/views/AccountSummary/index.js

@@ -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={(
+                    content="Insert token name, symbol or address to be able to send it."
-                        <React.Fragment>
-                            Insert token name, symbol or address to be able to send it.
-                        </React.Fragment>
-                    )}
                 >
                     <StyledIcon
                         icon={ICONS.HELP}
                         color={colors.TEXT_SECONDARY}
                         size={24}
                     />
-                </StyledTooltip>
+                </Tooltip>
             </H2Wrapper>
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}