From 846b531f647cdee20f7f27a8a71b5c7499105d2a Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 14 Mar 2019 23:33:00 +0100
Subject: [PATCH] add hide balance toggler to device menu

---
 .../components/LeftNavigation/Container.js    |  3 ++-
 .../DeviceMenu/components/MenuItems/index.js  | 23 +++++++++++++++++++
 .../Wallet/components/LeftNavigation/index.js |  1 +
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/views/Wallet/components/LeftNavigation/Container.js b/src/views/Wallet/components/LeftNavigation/Container.js
index 8da7a325..d5d21d47 100644
--- a/src/views/Wallet/components/LeftNavigation/Container.js
+++ b/src/views/Wallet/components/LeftNavigation/Container.js
@@ -1,5 +1,5 @@
 /* @flow */
-import { toggleDeviceDropdown, toggleSidebar } from 'actions/WalletActions';
+import { toggleDeviceDropdown, toggleSidebar, setHideBalance } from 'actions/WalletActions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
@@ -43,6 +43,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
     onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
     gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
     toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
+    setHideBalance: bindActionCreators(setHideBalance, dispatch),
 });
 
 export default withRouter(
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
index 7bd10306..ac8f0794 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import Link from 'components/Link';
+import { Switch } from 'trezor-ui-components';
 import DeviceIcon from 'components/images/DeviceIcon';
 import { FormattedMessage } from 'react-intl';
 import { getPattern } from 'support/routes';
@@ -21,6 +22,7 @@ const Wrapper = styled.div`
 const Item = styled.div`
     padding: 6px 24px;
     display: flex;
+    height: 38px;
     align-items: center;
     font-size: ${FONT_SIZE.BASE};
     cursor: pointer;
@@ -39,6 +41,7 @@ const Divider = styled.div`
 
 const Label = styled.div`
     padding-left: 15px;
+    flex: 1;
 `;
 
 class MenuItems extends PureComponent {
@@ -108,6 +111,24 @@ class MenuItems extends PureComponent {
                     </Label>
                 </Item>
                 <Divider />
+                <Item>
+                    <Icon icon={icons.EYE_CROSSED} size={25} color={colors.TEXT_SECONDARY} />
+                    <Label>
+                        <FormattedMessage {...l10nCommonMessages.TR_HIDE_BALANCE} />
+                    </Label>
+                    <Switch
+                        width={36}
+                        height={18}
+                        handleDiameter={14}
+                        checkedIcon={false}
+                        uncheckedIcon={false}
+                        onChange={checked => {
+                            this.props.setHideBalance(checked);
+                        }}
+                        checked={this.props.wallet.hideBalance}
+                    />
+                </Item>
+                <Divider />
                 <Link to={getPattern('wallet-settings')}>
                     <Item>
                         <Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
@@ -123,9 +144,11 @@ class MenuItems extends PureComponent {
 
 MenuItems.propTypes = {
     device: PropTypes.object.isRequired,
+    wallet: PropTypes.object.isRequired,
     acquireDevice: PropTypes.func.isRequired,
     forgetDevice: PropTypes.func.isRequired,
     duplicateDevice: PropTypes.func.isRequired,
+    setHideBalance: PropTypes.func.isRequired,
     // toggleDeviceDropdown: PropTypes.func.isRequired,
     // gotoDeviceSettings: PropTypes.func.isRequired,
 };
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index a9fdbd70..c3067595 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -401,6 +401,7 @@ LeftNavigation.propTypes = {
     duplicateDevice: PropTypes.func,
     gotoDeviceSettings: PropTypes.func,
     onSelectDevice: PropTypes.func,
+    setHideBalance: PropTypes.func,
 };
 
 export default LeftNavigation;