Added read more support, gas price tooltip

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';
 
@@ -165,6 +166,19 @@ const Wrapper = styled.div`
     }
 `;
 
+const Content = styled.div`
+    padding-bottom: 10px;
+`;
+
+const ContentWrapper = styled.div``;
+const ReadMore = styled.div`
+    padding: 10px 0;
+    text-align: center;
+    width: 100%;
+    color: ${colors.WHITE};
+    border-top: 1px solid ${colors.TEXT_SECONDARY};
+`;
+
 class Tooltip extends Component {
     render() {
         const {
@@ -172,6 +186,7 @@ class Tooltip extends Component {
             placement,
             content,
             children,
+            readMoreLink,
             maxWidth,
         } = this.props;
         return (
@@ -184,7 +199,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 +229,7 @@ Tooltip.propTypes = {
         PropTypes.element,
         PropTypes.string,
     ]),
+    readMoreLink: PropTypes.string,
 };
 
 export default Tooltip;

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

@@ -190,12 +190,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_.28GWEI.29"
                                 placement="top"
                             >
                                 <Icon