hide balances when hide balance setting is active

src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -141,7 +141,7 @@ const AccountMenu = (props: Props) => {
                             {...l10nCommonMessages.TR_ACCOUNT_HASH}
                             values={{ number: account.index + 1 }}
                         />
-                        {balance && (
+                        {balance && !props.wallet.hideBalance && (
                             <Text>
                                 {balance}
                                 {fiatRates && (

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -17,6 +17,7 @@ type Props = {
     balance: string,
     fiat: $ElementType<ReducersState, 'fiat'>,
     localCurrency: string,
+    isHidden: boolean,
 };
 
 type State = {
@@ -105,11 +106,19 @@ class AccountBalance extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            isHidden: false,
+            isHidden: props.isHidden,
-            canAnimateHideBalanceIcon: false,
+            canAnimateHideBalanceIcon: props.isHidden,
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isHidden !== this.props.isHidden) {
+            this.setState({
+                isHidden: this.props.isHidden,
+            });
+        }
+    }
+
     handleHideBalanceIconClick() {
         this.setState(previousState => ({
             isHidden: !previousState.isHidden,

src/views/Wallet/views/Account/Summary/components/Token/index.js

@@ -84,7 +84,11 @@ class AddedToken extends PureComponent {
 
                 <TokenName>{this.props.token.name}</TokenName>
                 <TokenBalance>
-                    {this.getTokenBalance(this.props.token)} {this.props.token.symbol}
+                    {this.props.hideBalance ? (
+                        <Icon icon={ICONS.EYE_CROSSED} size={25} color={colors.TEXT_SECONDARY} />
+                    ) : (
+                        `${this.getTokenBalance(this.props.token)}  ${this.props.token.symbol}`
+                    )}
                 </TokenBalance>
                 <RemoveTokenButton
                     isTransparent
@@ -101,6 +105,7 @@ AddedToken.propTypes = {
     token: PropTypes.object,
     pending: PropTypes.array,
     removeToken: PropTypes.func,
+    hideBalance: PropTypes.bool,
 };
 
 export default AddedToken;

src/views/Wallet/views/Account/Summary/ethereum/index.js

@@ -105,6 +105,7 @@ const AccountSummary = (props: Props) => {
                     balance={balance}
                     fiat={props.fiat}
                     localCurrency={props.wallet.localCurrency}
+                    isHidden={props.wallet.hideBalance}
                 />
                 <H2Wrapper>
                     <H2>
@@ -164,6 +165,7 @@ const AccountSummary = (props: Props) => {
                             token={token}
                             pending={pending}
                             removeToken={props.removeToken}
+                            hideBalance={props.wallet.hideBalance}
                         />
                     ))}
                 </AddedTokensWrapper>

src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js

@@ -15,6 +15,7 @@ type Props = {
     reserve: 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,
+            isHidden: props.isHidden,
-            canAnimateHideBalanceIcon: false,
+            canAnimateHideBalanceIcon: props.isHidden,
         };
     }
 
+    componentDidUpdate(prevProps) {
+        console.log(this.props.isHidden);
+        if (prevProps.isHidden !== this.props.isHidden) {
+            this.setState({
+                isHidden: this.props.isHidden,
+            });
+        }
+    }
+
     handleHideBalanceIconClick() {
         this.setState(previousState => ({
             isHidden: !previousState.isHidden,

src/views/Wallet/views/Account/Summary/ripple/index.js

@@ -86,6 +86,7 @@ const AccountSummary = (props: Props) => {
                     reserve={reserve}
                     fiat={props.fiat}
                     localCurrency={props.wallet.localCurrency}
+                    isHidden={props.wallet.hideBalance}
                 />
                 {TMP_SHOW_HISTORY && (
                     <H2Wrapper>