From dc4efba4772503b1f29172c7e230bbae9848dafc Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 17 Apr 2019 16:42:34 +0200
Subject: [PATCH] added explaining tooltips

---
 .../WalletSettings/components/Coins/index.js  | 35 ++++++++++++++-----
 .../views/WalletSettings/index.messages.js    |  2 +-
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js
index 517d052e..20172da5 100644
--- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js
+++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { FONT_SIZE } from 'config/variables';
 import coins from 'constants/coins';
 
-import { colors, Switch, CoinLogo } from 'trezor-ui-components';
+import { colors, Switch, CoinLogo, Tooltip, Icon, icons as ICONS } from 'trezor-ui-components';
 import l10nMessages from '../../index.messages';
 
 const Wrapper = styled.div`
@@ -13,13 +13,6 @@ const Wrapper = styled.div`
     flex-direction: column;
 `;
 
-const Label = styled.div`
-    display: flex;
-    padding: 10px 0;
-    color: ${colors.TEXT_SECONDARY};
-    align-items: center;
-`;
-
 const Row = styled.div`
     display: flex;
     flex-direction: column;
@@ -31,6 +24,18 @@ const Content = styled.div`
     flex-direction: column;
 `;
 
+const Label = styled.div`
+    display: flex;
+    padding: 10px 0;
+    color: ${colors.TEXT_SECONDARY};
+    align-items: center;
+`;
+
+const TooltipIcon = styled(Icon)`
+    margin-left: 6px;
+    cursor: pointer;
+`;
+
 const CoinRow = styled.div`
     height: 50px;
     align-items: center;
@@ -74,6 +79,13 @@ const CoinsSettings = (props: Props) => (
             <Content>
                 <Label>
                     <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
+                    <Tooltip
+                        content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
+                        maxWidth={210}
+                        placement="right"
+                    >
+                        <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
+                    </Tooltip>
                 </Label>
                 {props.networks
                     .filter(network => !network.isHidden)
@@ -99,6 +111,13 @@ const CoinsSettings = (props: Props) => (
             <Content>
                 <Label>
                     <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
+                    <Tooltip
+                        content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
+                        maxWidth={210}
+                        placement="right"
+                    >
+                        <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
+                    </Tooltip>
                 </Label>
                 {coins
                     .sort((a, b) => a.order - b.order)
diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js
index 36a6684d..c669d4ab 100644
--- a/src/views/Wallet/views/WalletSettings/index.messages.js
+++ b/src/views/Wallet/views/WalletSettings/index.messages.js
@@ -26,7 +26,7 @@ const definedMessages: Messages = defineMessages({
     },
     TR_VISIBLE_COINS_EXPLAINED: {
         id: 'TR_VISIBLE_COINS_EXPLAINED',
-        defaultMessage: 'The changes are saved automatically as they are made',
+        defaultMessage: 'Select a coins which will be visible in wallet',
     },
 });