Merge branch 'master' into feature/trezor-ui-components

2024-11-30 12:18:09 +00:00 · 2019-03-21 10:37:46 +01:00 · 2019-03-21 10:37:46 +01:00 · 34ff337db1
commit 34ff337db1
parent d5be28f6d7 58008eb6be
29 changed files with 234 additions and 68 deletions
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-![Alt text](src/images/trezor-rocks.png?raw=true "Trezor Wallet rocks")
+![Alt text](trezor-rocks.png?raw=true "Trezor Wallet rocks")

 # Trezor Wallet

--- a/src/actions/LocalStorageActions.js
+++ b/src/actions/LocalStorageActions.js
@ -58,6 +58,7 @@ const KEY_PENDING: string = `${STORAGE_PATH}pending`;
 const KEY_BETA_MODAL: string = '/betaModalPrivacy'; // this key needs to be compatible with "parent" (old) wallet
 const KEY_LANGUAGE: string = `${STORAGE_PATH}language`;
 const KEY_LOCAL_CURRENCY: string = `${STORAGE_PATH}localCurrency`;
+const KEY_HIDE_BALANCE: string = `${STORAGE_PATH}hideBalance`;

 // https://github.com/STRML/react-localstorage/blob/master/react-localstorage.js
 // or
@ -282,6 +283,11 @@ const loadStorageData = (): ThunkAction => (dispatch: Dispatch): void => {
    if (localCurrency) {
        dispatch(WalletActions.setLocalCurrency(JSON.parse(localCurrency)));
    }
+
+    const hideBalance: ?boolean = storageUtils.get(TYPE, KEY_HIDE_BALANCE);
+    if (hideBalance) {
+        dispatch(WalletActions.setHideBalance(hideBalance));
+    }
 };

 export const loadData = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
@ -303,6 +309,11 @@ export const setLanguage = (): ThunkAction => (dispatch: Dispatch, getState: Get
    storageUtils.set(TYPE, KEY_LANGUAGE, JSON.stringify(language));
 };

+export const setHideBalance = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
+    const { hideBalance } = getState().wallet;
+    storageUtils.set(TYPE, KEY_HIDE_BALANCE, hideBalance);
+};
+
 export const setLocalCurrency = (): ThunkAction => (
    dispatch: Dispatch,
    getState: GetState
--- a/src/actions/WalletActions.js
+++ b/src/actions/WalletActions.js
@ -62,6 +62,10 @@ export type WalletAction =
    | {
          type: typeof WALLET.SET_LOCAL_CURRENCY,
          localCurrency: string,
+      }
+    | {
+          type: typeof WALLET.SET_HIDE_BALANCE,
+          toggled: boolean,
      };

 export const init = (): ThunkAction => (dispatch: Dispatch): void => {
@ -113,6 +117,11 @@ export const setLocalCurrency = (localCurrency: string): WalletAction => ({
    localCurrency: localCurrency.toLowerCase(),
 });

+export const setHideBalance = (toggled: boolean): WalletAction => ({
+    type: WALLET.SET_HIDE_BALANCE,
+    toggled,
+});
+
 // This method will be called after each DEVICE.CONNECT action
 // if connected device has different "passphrase_protection" settings than saved instances
 // all saved instances will be removed immediately inside DevicesReducer
--- a/src/actions/constants/wallet.js
+++ b/src/actions/constants/wallet.js
@ -18,3 +18,4 @@ export const CLEAR_UNAVAILABLE_DEVICE_DATA: 'wallet__clear_unavailable_device_da
 export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar';
 export const SET_LANGUAGE: 'wallet__set_language' = 'wallet__set_language';
 export const SET_LOCAL_CURRENCY: 'wallet__set_local_currency' = 'wallet__set_local_currency';
+export const SET_HIDE_BALANCE: 'wallet__set_hide_balance' = 'wallet__set_hide_balance';
--- a/src/components/images/CoinLogo/index.js
+++ b/src/components/images/CoinLogo/index.js
@ -5,35 +5,22 @@ import PropTypes from 'prop-types';
 const Wrapper = styled.div`
    padding-right: 20px;
    width: 40px;
+    display: flex;
+    justify-content: center;
 `;

 const Logo = styled.img`
-    width: ${props => (props.hasLongIcon ? '15px' : '23px')};
-    margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')};
+    height: 23px;
    display: block;
 `;

 class CoinLogo extends PureComponent {
-    constructor() {
-        super();
-        this.longIcons = ['etc', 'eth', 'trop'];
-    }
-
-    hasLongIcon(network) {
-        let hasLongIcon = false;
-        if (this.longIcons.includes(network)) {
-            hasLongIcon = true;
-        }
-        return hasLongIcon;
-    }
-
    render() {
        const { network, className, standalone } = this.props;

        const logo = (
            <Logo
                className={className}
-                hasLongIcon={this.hasLongIcon(network)}
                src={require(`images/coins/${network}.png`)} // eslint-disable-line
            />
        );
--- a/src/components/modals/device/Remember/index.js
+++ b/src/components/modals/device/Remember/index.js
@ -41,9 +41,7 @@ const Wrapper = styled.div`
    padding: 30px 48px;
 `;

-const Text = styled.div`
-    padding-right: 10px;
-`;
+const Text = styled.div``;

 const Column = styled.div`
    display: flex;
@ -55,8 +53,12 @@ const Column = styled.div`
 `;

 const StyledLoader = styled(Loader)`
-    position: absolute;
-    left: 200px;
+    padding-left: 6px;
+`;
+
+const ButtonWithLoader = styled(Button)`
+    padding-top: 6px;
+    padding-bottom: 6px;
 `;

 class RememberDevice extends PureComponent<Props, State> {
@ -138,7 +140,7 @@ class RememberDevice extends PureComponent<Props, State> {
                    />
                </StyledP>
                <Column>
-                    <Button onClick={() => this.forget()}>
+                    <ButtonWithLoader onClick={() => this.forget()}>
                        <ButtonContent>
                            <Text>
                                <FormattedMessage {...l10nCommonMessages.TR_FORGET_DEVICE} />
@ -150,7 +152,7 @@ class RememberDevice extends PureComponent<Props, State> {
                                text={this.state.countdown.toString()}
                            />
                        </ButtonContent>
-                    </Button>
+                    </ButtonWithLoader>
                    <Button isWhite onClick={() => onRememberDevice(device)}>
                        <FormattedMessage {...l10nMessages.TR_REMEMBER_DEVICE} />
                    </Button>
--- a/src/config/app.js
+++ b/src/config/app.js
@ -13,7 +13,7 @@ export const LANGUAGE = [
    { code: 'pl', name: 'Polski', en: 'Polish' },
    { code: 'pt', name: 'Português', en: 'Portuguese' },
    { code: 'ru', name: 'Русский', en: 'Russian' },
-    { code: 'uk', name: 'Український', en: 'Ukrainian' },
+    { code: 'uk', name: 'Українська', en: 'Ukrainian' },
    { code: 'zh', name: '中文(简体)', en: 'Chinese Simplified' },
    { code: 'zh_TW', name: '中文(台灣)', en: 'Chinese Traditional' },
 ];
--- a/src/reducers/WalletReducer.js
+++ b/src/reducers/WalletReducer.js
@ -13,8 +13,9 @@ type State = {
    ready: boolean,
    online: boolean,
    language: string,
-    localCurrency: string,
    messages: { [string]: string },
+    localCurrency: string,
+    hideBalance: boolean,
    dropdownOpened: boolean,
    showBetaDisclaimer: boolean,
    showSidebar: ?boolean,
@ -29,8 +30,9 @@ const initialState: State = {
    ready: false,
    online: navigator.onLine,
    language: 'en',
-    localCurrency: 'usd',
    messages: {},
+    localCurrency: 'usd',
+    hideBalance: false,
    dropdownOpened: false,
    firstLocationChange: true,
    showBetaDisclaimer: false,
@ -137,6 +139,12 @@ export default function wallet(state: State = initialState, action: Action): Sta
                localCurrency: action.localCurrency,
            };

+        case WALLET.SET_HIDE_BALANCE:
+            return {
+                ...state,
+                hideBalance: action.toggled,
+            };
+
        default:
            return state;
    }
--- a/src/services/LocalStorageService.js
+++ b/src/services/LocalStorageService.js
@ -26,6 +26,10 @@ const LocalStorageService: Middleware = (api: MiddlewareAPI) => (next: Middlewar
            api.dispatch(LocalStorageActions.setLanguage());
            break;

+        case WALLET.SET_HIDE_BALANCE:
+            api.dispatch(LocalStorageActions.setHideBalance());
+            break;
+
        case WALLET.SET_LOCAL_CURRENCY:
            api.dispatch(LocalStorageActions.setLocalCurrency());
            break;
--- a/src/views/Landing/components/BrowserNotSupported/index.js
+++ b/src/views/Landing/components/BrowserNotSupported/index.js
@ -49,7 +49,7 @@ const BrowserNotSupported = () => (
            </Browser>
            <Browser>
                <BrowserLogo src={FirefoxImage} />
-                <P size="small">Mozzila Firefox</P>
+                <P size="small">Mozila Firefox</P>
                <Link href="https://www.mozilla.org/en-US/firefox/new/">
                    <Button>
                        <FormattedMessage {...l10nMessages.TR_GET_FIREFOX} />
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@ -14,6 +14,7 @@ import FirmwareUnsupported from './components/FirmwareUnsupported';
 import l10nMessages from './index.messages';

 type Props = {
+    className?: string,
    children?: React.Node,
    isLoading?: boolean,
    loader?: $ElementType<$ElementType<State, 'selectedAccount'>, 'loader'>,
@ -72,8 +73,8 @@ const getExceptionPage = exceptionPage => {
    }
 };

-const Content = ({ children, isLoading = false, loader, exceptionPage }: Props) => (
-    <Wrapper>
+const Content = ({ className, children, isLoading = false, loader, exceptionPage }: Props) => (
+    <Wrapper className={className}>
        {!isLoading && children}
        {isLoading && exceptionPage && getExceptionPage(exceptionPage)}
        {isLoading && loader && (
@ -94,6 +95,7 @@ const Content = ({ children, isLoading = false, loader, exceptionPage }: Props)

 Content.propTypes = {
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
+    className: PropTypes.string,
    isLoading: PropTypes.bool,
    loader: PropTypes.object,
    exceptionPage: PropTypes.object,
--- a/src/views/Wallet/components/LeftNavigation/Container.js
+++ b/src/views/Wallet/components/LeftNavigation/Container.js
@ -1,5 +1,5 @@
 /* @flow */
-import { toggleDeviceDropdown } 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';
@ -42,6 +42,8 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
    gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch),
    onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
    gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
+    toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
+    setHideBalance: bindActionCreators(setHideBalance, dispatch),
 });

 export default withRouter(
--- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
@ -137,7 +137,7 @@ const AccountMenu = (props: Props) => {
                            {...l10nCommonMessages.TR_ACCOUNT_HASH}
                            values={{ number: account.index + 1 }}
                        />
-                        {balance && (
+                        {balance && !props.wallet.hideBalance && (
                            <Text>
                                {balance}
                                {fiatRates && (
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { getPattern } from 'support/routes';

-import { Link, Icon, colors, icons } from 'trezor-ui-components';
+import { Switch, Link, Icon, colors, icons } from 'trezor-ui-components';
 import DeviceIcon from 'components/images/DeviceIcon';
 import { FONT_SIZE } from 'config/variables';

@ -18,6 +18,7 @@ const Wrapper = styled.div`
 const Item = styled.div`
    padding: 12px 24px;
    display: flex;
+    height: 38px;
    align-items: center;
    font-size: ${FONT_SIZE.BASE};
    cursor: pointer;
@ -36,6 +37,7 @@ const Divider = styled.div`

 const Label = styled.div`
    padding-left: 15px;
+    flex: 1;
 `;

 class MenuItems extends PureComponent {
@ -105,6 +107,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={14} color={colors.TEXT_SECONDARY} />
@ -120,9 +140,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,
 };
--- a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
@ -14,7 +14,9 @@ const CoinNameWrapper = styled.div`

 const RowCoinWrapper = styled.div`
    padding: ${LEFT_NAVIGATION_ROW.PADDING};
-    height: 50px;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 44px;
    display: block;
    font-size: ${FONT_SIZE.BIG};
    color: ${colors.TEXT_PRIMARY};
--- a/src/views/Wallet/components/LeftNavigation/components/common.js
+++ b/src/views/Wallet/components/LeftNavigation/components/common.js
@ -3,7 +3,7 @@ import * as TrezorConnectActions from 'actions/TrezorConnectActions';
 import * as DiscoveryActions from 'actions/DiscoveryActions';
 import * as RouterActions from 'actions/RouterActions';
 import * as ModalActions from 'actions/ModalActions';
-import { toggleDeviceDropdown } from 'actions/WalletActions';
+import * as WalletActions from 'actions/WalletActions';
 import type { State } from 'flowtype';

 export type StateProps = {
@ -19,7 +19,9 @@ export type StateProps = {
 };

 export type DispatchProps = {
-    toggleDeviceDropdown: typeof toggleDeviceDropdown,
+    toggleDeviceDropdown: typeof WalletActions.toggleDeviceDropdown,
+    toggleSidebar: typeof WalletActions.toggleSidebar,
+    setHideBalance: typeof WalletActions.setHideBalance,
    addAccount: typeof DiscoveryActions.addAccount,
    acquireDevice: typeof TrezorConnectActions.acquire,
    forgetDevice: typeof TrezorConnectActions.forget,
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@ -3,11 +3,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Tooltip, icons, colors } from 'trezor-ui-components';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
 import WalletTypeIcon from 'components/images/WalletType';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
 import DeviceHeader from 'components/DeviceHeader';
+import Backdrop from 'components/Backdrop';
 // import Link from 'components/Link';
 import * as deviceUtils from 'utils/device';

@ -104,6 +105,14 @@ type TransitionMenuProps = {
    children?: React.Node,
 };

+const StyledBackdrop = styled(Backdrop)`
+    display: none;
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        display: initial;
+    }
+`;
+
 // TransitionMenu needs to dispatch window.resize event
 // in order to StickyContainer be recalculated
 const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
@ -261,6 +270,11 @@ class LeftNavigation extends React.PureComponent<Props, State> {

        return (
            <Sidebar isOpen={props.wallet.showSidebar}>
+                <StyledBackdrop
+                    show={props.wallet.showSidebar}
+                    onClick={props.toggleSidebar}
+                    animated
+                />
                <Header
                    isSelected
                    testId="Main__page__device__header"
@ -392,6 +406,7 @@ LeftNavigation.propTypes = {
    duplicateDevice: PropTypes.func,
    gotoDeviceSettings: PropTypes.func,
    onSelectDevice: PropTypes.func,
+    setHideBalance: PropTypes.func,
 };

 export default LeftNavigation;
--- a/src/views/Wallet/index.js
+++ b/src/views/Wallet/index.js
@ -23,7 +23,6 @@ import ContextNotifications from 'components/notifications/Context';
 import { SCREEN_SIZE } from 'config/variables';

 import Log from 'components/Log';
-import Backdrop from 'components/Backdrop';

 import LeftNavigation from './components/LeftNavigation/Container';
 import TopNavigationAccount from './components/TopNavigationAccount';
@ -110,14 +109,6 @@ const Body = styled.div`
    flex-direction: column;
 `;

-const StyledBackdrop = styled(Backdrop)`
-    display: none;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: initial;
-    }
-`;
-
 const Wallet = (props: Props) => (
    <AppWrapper>
        <Header
@ -127,11 +118,6 @@ const Wallet = (props: Props) => (
        />
        <AppNotifications />
        <WalletWrapper>
-            <StyledBackdrop
-                show={props.wallet.showSidebar}
-                onClick={props.toggleSidebar}
-                animated
-            />
            {props.wallet.selectedDevice && <LeftNavigation />}
            <MainContent preventBgScroll={props.wallet.showSidebar}>
                <Navigation>
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@ -401,7 +401,7 @@ const AccountSend = (props: Props) => {
                            <AmountInputLabel>
                                <FormattedMessage {...l10nSendMessages.TR_AMOUNT} />
                            </AmountInputLabel>
-                            {isCurrentCurrencyToken && selectedToken && (
+                            {isCurrentCurrencyToken && selectedToken && !props.wallet.hideBalance && (
                                <AmountInputLabel>
                                    <FormattedMessage
                                        {...l10nMessages.YOU_HAVE_TOKEN_BALANCE}
--- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js
+++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.js
@ -15,6 +15,7 @@ type Props = {
    balance: string,
    fiat: $ElementType<ReducersState, 'fiat'>,
    localCurrency: string,
+    isHidden: boolean,
 };

 type State = {
@ -103,11 +104,20 @@ class AccountBalance extends PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
-            isHidden: false,
-            canAnimateHideBalanceIcon: false,
+            isHidden: props.isHidden,
+            canAnimateHideBalanceIcon: props.isHidden,
        };
    }

+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.isHidden !== this.props.isHidden) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                isHidden: this.props.isHidden,
+            });
+        }
+    }
+
    handleHideBalanceIconClick() {
        this.setState(previousState => ({
            isHidden: !previousState.isHidden,
--- a/src/views/Wallet/views/Account/Summary/components/Token/index.js
+++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js
@ -1,12 +1,14 @@
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
 import ColorHash from 'color-hash';
 import ScaleText from 'react-scale-text';
 import { FONT_WEIGHT } from 'config/variables';
-import { Button, Icon, colors, icons as ICONS } from 'trezor-ui-components';
+import { Button, Icon, Tooltip, colors, icons as ICONS } from 'trezor-ui-components';
 import * as stateUtils from 'reducers/utils';
 import BigNumber from 'bignumber.js';
 import PropTypes from 'prop-types';
+import l10nCommonMessages from 'views/common.messages';

 const TokenWrapper = styled.div`
    padding: 14px 0;
@ -57,6 +59,10 @@ const RemoveTokenButton = styled(Button)`
    padding: 0 0 0 10px;
 `;

+const TooltipIcon = styled(Icon)`
+    cursor: pointer;
+`;
+
 class AddedToken extends PureComponent {
    getTokenBalance(token) {
        const pendingAmount = stateUtils.getPendingAmount(this.props.pending, token.symbol, true);
@ -81,7 +87,25 @@ class AddedToken extends PureComponent {

                <TokenName>{this.props.token.name}</TokenName>
                <TokenBalance>
-                    {this.getTokenBalance(this.props.token)} {this.props.token.symbol}
+                    {this.props.hideBalance ? (
+                        <Tooltip
+                            maxWidth={200}
+                            placement="top"
+                            content={
+                                <FormattedMessage
+                                    {...l10nCommonMessages.TR_THE_ACCOUNT_BALANCE_IS_HIDDEN}
+                                />
+                            }
+                        >
+                            <TooltipIcon
+                                icon={ICONS.EYE_CROSSED}
+                                size={25}
+                                color={colors.TEXT_SECONDARY}
+                            />
+                        </Tooltip>
+                    ) : (
+                        `${this.getTokenBalance(this.props.token)}  ${this.props.token.symbol}`
+                    )}
                </TokenBalance>
                <RemoveTokenButton
                    isTransparent
@ -98,6 +122,7 @@ AddedToken.propTypes = {
    token: PropTypes.object,
    pending: PropTypes.array,
    removeToken: PropTypes.func,
+    hideBalance: PropTypes.bool,
 };

 export default AddedToken;
--- a/src/views/Wallet/views/Account/Summary/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js
@ -93,6 +93,7 @@ const AccountSummary = (props: Props) => {
                    balance={balance}
                    fiat={props.fiat}
                    localCurrency={props.wallet.localCurrency}
+                    isHidden={props.wallet.hideBalance}
                />
                <TokensHeadingWrapper>
                    <H5>
@ -152,6 +153,7 @@ const AccountSummary = (props: Props) => {
                            token={token}
                            pending={pending}
                            removeToken={props.removeToken}
+                            hideBalance={props.wallet.hideBalance}
                        />
                    ))}
                </AddedTokensWrapper>
--- a/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
+++ b/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
@ -14,6 +14,7 @@ type Props = {
    reserve: string,
    fiat: $ElementType<ReducersState, 'fiat'>,
    localCurrency: string,
+    isHidden: boolean,
 };

 type State = {
@ -102,11 +103,21 @@ class AccountBalance extends PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
-            isHidden: false,
-            canAnimateHideBalanceIcon: false,
+            isHidden: props.isHidden,
+            canAnimateHideBalanceIcon: props.isHidden,
        };
    }

+    componentDidUpdate(prevProps: Props) {
+        console.log(this.props.isHidden);
+        if (prevProps.isHidden !== this.props.isHidden) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                isHidden: this.props.isHidden,
+            });
+        }
+    }
+
    handleHideBalanceIconClick() {
        this.setState(previousState => ({
            isHidden: !previousState.isHidden,
--- a/src/views/Wallet/views/Account/Summary/ripple/index.js
+++ b/src/views/Wallet/views/Account/Summary/ripple/index.js
@ -85,6 +85,7 @@ const AccountSummary = (props: Props) => {
                    reserve={reserve}
                    fiat={props.fiat}
                    localCurrency={props.wallet.localCurrency}
+                    isHidden={props.wallet.hideBalance}
                />
                {TMP_SHOW_HISTORY && (
                    <HeadingWrapper>
--- 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(
--- a/src/views/Wallet/views/WalletSettings/index.js
+++ b/src/views/Wallet/views/WalletSettings/index.js
@ -2,21 +2,39 @@
 import styled from 'styled-components';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Button, Link, Select, colors } from 'trezor-ui-components';
-import Content from 'views/Wallet/components/Content';

+import Content from 'views/Wallet/components/Content';
+import {
+    Switch,
+    Select,
+    Link,
+    Button,
+    Tooltip,
+    Icon,
+    icons as ICONS,
+    colors,
+} from 'trezor-ui-components';
 import { FIAT_CURRENCIES } from 'config/app';
 import { FONT_SIZE } from 'config/variables';
 import l10nCommonMessages from 'views/common.messages';
 import l10nMessages from './index.messages';
 import type { Props } from './Container';

-const CurrencySelect = styled(Select)`
-    min-width: 77px;
-    /* max-width: 200px; */
+const StyledContent = styled(Content)`
+    max-width: 800px;
 `;

-const CurrencyLabel = styled.div`
+const CurrencySelect = styled(Select)`
+    min-width: 77px;
+`;
+
+const Label = styled.div`
+    display: flex;
+    color: ${colors.TEXT_SECONDARY};
+    align-items: center;
+`;
+
+const LabelTop = styled.div`
    color: ${colors.TEXT_SECONDARY};
    padding-bottom: 10px;
 `;
@ -25,8 +43,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`
@ -41,16 +66,20 @@ const Info = styled.div`
    align-self: center;
 `;

+const TooltipIcon = styled(Icon)`
+    cursor: pointer;
+`;
+
 const buildCurrencyOption = currency => {
    return { value: currency, label: currency.toUpperCase() };
 };

 const WalletSettings = (props: Props) => (
-    <Content>
+    <StyledContent>
        <Section>
-            <CurrencyLabel>
+            <LabelTop>
                <FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
-            </CurrencyLabel>
+            </LabelTop>
            <CurrencySelect
                isSearchable
                isClearable={false}
@ -59,6 +88,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} />
@ -71,7 +120,7 @@ const WalletSettings = (props: Props) => (
                </Link>
            </Buttons>
        </Actions>
-    </Content>
+    </StyledContent>
 );

 export default WalletSettings;
--- a/src/views/Wallet/views/WalletSettings/index.messages.js
+++ b/src/views/Wallet/views/WalletSettings/index.messages.js
@ -7,6 +7,11 @@ 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 you don't have to worry about anyone looking over your shoulder.",
+    },
    TR_THE_CHANGES_ARE_SAVED: {
        id: 'TR_THE_CHANGES_ARE_SAVED',
        defaultMessage: 'The changes are saved automatically as they are made',
--- a/src/views/common.messages.js
+++ b/src/views/common.messages.js
@ -70,6 +70,14 @@ const definedMessages: Messages = defineMessages({
        id: 'TR_CLOSE',
        defaultMessage: 'Close',
    },
+    TR_HIDE_BALANCE: {
+        id: 'TR_HIDE_BALANCE',
+        defaultMessage: 'Hide balance',
+    },
+    TR_THE_ACCOUNT_BALANCE_IS_HIDDEN: {
+        id: 'TR_THE_ACCOUNT_BALANCE_IS_HIDDEN',
+        defaultMessage: 'The account balance is hidden.',
+    },
 });

 export default definedMessages;
--- a/src/images/trezor-rocks.png
+++ b/src/images/trezor-rocks.png