From 55fa711e478ce38e2afb13955ce0319985c326f9 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 14 Mar 2019 23:32:21 +0100
Subject: [PATCH] add hide balance setting to app settings

---
 .../Wallet/views/WalletSettings/Container.js  |  2 +
 .../Wallet/views/WalletSettings/index.js      | 48 ++++++++++++++++---
 .../views/WalletSettings/index.messages.js    |  4 ++
 src/views/common.messages.js                  |  4 ++
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/views/Wallet/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js
index 24e5c4d0..6b76b4b2 100644
--- a/src/views/Wallet/views/WalletSettings/Container.js
+++ b/src/views/Wallet/views/WalletSettings/Container.js
@@ -18,6 +18,7 @@ type StateProps = {
 
 type DispatchProps = {
     setLocalCurrency: typeof WalletActions.setLocalCurrency,
+    setHideBalance: typeof WalletActions.setHideBalance,
 };
 
 export type Props = StateProps & DispatchProps;
@@ -34,6 +35,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
     dispatch: Dispatch
 ): DispatchProps => ({
     setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
+    setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
 });
 
 export default injectIntl(
diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js
index 91ddd07b..cb42d4e2 100644
--- a/src/views/Wallet/views/WalletSettings/index.js
+++ b/src/views/Wallet/views/WalletSettings/index.js
@@ -3,11 +3,8 @@ import styled from 'styled-components';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Link from 'components/Link';
 import Content from 'views/Wallet/components/Content';
-import { Select } from 'components/Select';
-import Button from 'components/Button';
-
+import { Switch, Select, Link, Button, Tooltip, Icon, icons as ICONS } from 'trezor-ui-components';
 import colors from 'config/colors';
 import { FIAT_CURRENCIES } from 'config/app';
 import { FONT_SIZE } from 'config/variables';
@@ -20,7 +17,13 @@ const CurrencySelect = styled(Select)`
     /* max-width: 200px; */
 `;
 
-const CurrencyLabel = styled.div`
+const Label = styled.div`
+    display: flex;
+    color: ${colors.TEXT_SECONDARY};
+    align-items: center;
+`;
+
+const LabelTop = styled.div`
     color: ${colors.TEXT_SECONDARY};
     padding-bottom: 10px;
 `;
@@ -29,8 +32,15 @@ const Section = styled.div`
     margin-bottom: 20px;
 `;
 
+const Row = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
 const Actions = styled.div`
     display: flex;
+    margin-top: 40px;
 `;
 
 const Buttons = styled.div`
@@ -45,6 +55,10 @@ const Info = styled.div`
     align-self: center;
 `;
 
+const TooltipIcon = styled(Icon)`
+    cursor: pointer;
+`;
+
 const buildCurrencyOption = currency => {
     return { value: currency, label: currency.toUpperCase() };
 };
@@ -53,9 +67,9 @@ const WalletSettings = (props: Props) => (
     <Content>
         {console.log(props)}
         <Section>
-            <CurrencyLabel>
+            <LabelTop>
                 <FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
-            </CurrencyLabel>
+            </LabelTop>
             <CurrencySelect
                 isSearchable
                 isClearable={false}
@@ -64,6 +78,26 @@ const WalletSettings = (props: Props) => (
                 options={FIAT_CURRENCIES.map(c => buildCurrencyOption(c))}
             />
         </Section>
+        <Section>
+            <Row>
+                <Label>
+                    <FormattedMessage {...l10nCommonMessages.TR_HIDE_BALANCE} />
+                    <Tooltip
+                        content={<FormattedMessage {...l10nMessages.TR_HIDE_BALANCE_EXPLAINED} />}
+                        maxWidth={210}
+                        placement="right"
+                    >
+                        <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={24} />
+                    </Tooltip>
+                </Label>
+                <Switch
+                    onChange={checked => {
+                        props.setHideBalance(checked);
+                    }}
+                    checked={props.wallet.hideBalance}
+                />
+            </Row>
+        </Section>
         <Actions>
             <Info>
                 <FormattedMessage {...l10nMessages.TR_THE_CHANGES_ARE_SAVED} />
diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js
index abcc4d99..5e03318a 100644
--- a/src/views/Wallet/views/WalletSettings/index.messages.js
+++ b/src/views/Wallet/views/WalletSettings/index.messages.js
@@ -7,6 +7,10 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_LOCAL_CURRENCY',
         defaultMessage: 'Local currency',
     },
+    TR_HIDE_BALANCE_EXPLAINED: {
+        id: 'TR_HIDE_BALANCE_EXPLAINED',
+        defaultMessage: 'Hides your account balance so nobody sees how much of a whale you are!',
+    },
     TR_THE_CHANGES_ARE_SAVED: {
         id: 'TR_THE_CHANGES_ARE_SAVED',
         defaultMessage: 'The changes are saved automatically as they are made',
diff --git a/src/views/common.messages.js b/src/views/common.messages.js
index f4ee59ba..f3bc9e1b 100644
--- a/src/views/common.messages.js
+++ b/src/views/common.messages.js
@@ -70,6 +70,10 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_CLOSE',
         defaultMessage: 'Close',
     },
+    TR_HIDE_BALANCE: {
+        id: 'TR_HIDE_BALANCE',
+        defaultMessage: 'Hide balance',
+    },
 });
 
 export default definedMessages;