From 859b5da127006592acdbb58bbc57e6299d9a393c Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Fri, 11 May 2018 13:46:18 +0200
Subject: [PATCH] Summary token add tooltip

---
 src/js/components/wallet/summary/Summary.js | 18 +++++++++++++++++-
 src/styles/summary.less                     | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/js/components/wallet/summary/Summary.js b/src/js/components/wallet/summary/Summary.js
index b06e78b4..57d05637 100644
--- a/src/js/components/wallet/summary/Summary.js
+++ b/src/js/components/wallet/summary/Summary.js
@@ -4,6 +4,8 @@
 import React, { Component } from 'react';
 import BigNumber from 'bignumber.js';
 import { Async } from 'react-select';
+import Tooltip from 'rc-tooltip';
+
 import { resolveAfter } from '../../../utils/promiseUtils';
 import AbstractAccount from '../account/AbstractAccount';
 import { Notification } from '../../common/Notification';
@@ -41,6 +43,12 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
     const tokens = findAccountTokens(props.tokens, account);
     const explorerLink: string = `${abstractAccount.coin.explorer.address}${account.address}`;
 
+    const tokensTooltip = (
+        <div className="tooltip-wrapper">
+            Insert token name, symbol or address to be able to send it.
+        </div>
+    );
+
     return (
 
         <section className="summary">
@@ -60,7 +68,15 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
                 localStorage={ props.localStorage }
                 onToggle={ props.onDetailsToggle } />
 
-            <h2>Tokens</h2>
+            <h2>
+                Tokens
+                <Tooltip
+                    arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                    overlay={ tokensTooltip }
+                    placement="top">
+                        <span className="what-is-it"></span>
+                </Tooltip>
+            </h2>
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
             <div className="filter">
diff --git a/src/styles/summary.less b/src/styles/summary.less
index 299ee2af..af866f56 100644
--- a/src/styles/summary.less
+++ b/src/styles/summary.less
@@ -127,6 +127,24 @@
         }
     }
 
+    .what-is-it {
+        &:before {
+            .icomoon-help;
+            .hover();
+            transform-origin: 50% 50%;
+            font-size: 24px;
+            position: relative;
+            top: 5px;
+            cursor: pointer;
+            color: @color_text_secondary;
+        }
+        &:hover {
+            &:before {
+                color: @color_text_primary;
+            }
+        }
+    }
+
     .filter {
         //background: @color_main;
         padding: 0px 48px 32px 48px;