fixed state checking

src/actions/LocalStorageActions.js

@@ -401,21 +401,9 @@ export const toggleGroupCoinsVisibility = (
     checked: boolean,
     isExternal: boolean
 ): ThunkAction => (dispatch: Dispatch) => {
-    if (checked && isExternal) {
+    // supported coins
-        dispatch({
-            type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
-            hiddenCoinsExternal: [],
-        });
-        storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([]));
-    }
 
-    if (!checked && isExternal) {
+    console.log('checked', checked);
-        dispatch({
-            type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
-            hiddenCoinsExternal: allCoins,
-        });
-        storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins));
-    }
 
     if (checked && !isExternal) {
         dispatch({
@@ -432,6 +420,23 @@ export const toggleGroupCoinsVisibility = (
         });
         storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(allCoins));
     }
+
+    // external coins
+    if (checked && isExternal) {
+        dispatch({
+            type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
+            hiddenCoinsExternal: [],
+        });
+        storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([]));
+    }
+
+    if (!checked && isExternal) {
+        dispatch({
+            type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
+            hiddenCoinsExternal: allCoins,
+        });
+        storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins));
+    }
 };
 
 export const getHiddenCoins = (isExternal: boolean): Array<string> => {

src/views/Wallet/views/WalletSettings/components/Coins/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 import styled from 'styled-components';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { FONT_SIZE } from 'config/variables';
 import coins from 'constants/coins';
@@ -18,6 +18,11 @@ type Props = {
     toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility,
 };
 
+type State = {
+    showAllCoins: boolean,
+    showAllCoinsExternal: boolean,
+};
+
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -87,20 +92,36 @@ const LogoWrapper = styled.div`
     align-items: center;
 `;
 
-const ToggleAll = styled.span`
+const ToggleAll = styled.div`
     cursor: pointer;
 `;
 
-const CoinsSettings = (props: Props) => (
+class CoinsSettings extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            showAllCoins: this.props.hiddenCoins.length === 0,
+            showAllCoinsExternal: this.props.hiddenCoinsExternal.length === 0,
+        };
+    }
+
+    render() {
+        const { props } = this;
+        return (
             <Wrapper>
                 <Row>
                     <Content>
+                        {console.log('hidden coins', props.hiddenCoins)}
+                        {console.log('hidden coins', props.hiddenCoins)}
+                        {console.log('hidden coins external', props.hiddenCoinsExternal)}
                         <Label>
                             <Left>
                                 <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
                                 <Tooltip
                                     content={
-                                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
+                                        <FormattedMessage
+                                            {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
+                                        />
                                     }
                                     maxWidth={210}
                                     placement="right"
@@ -114,12 +135,20 @@ const CoinsSettings = (props: Props) => (
                             </Left>
                             <Right>
                                 <ToggleAll
-                            onClick={checked => {
+                                    onClick={() => {
                                         const allCoins = props.networks
                                             .filter(x => !x.isHidden)
                                             .map(item => item.shortcut);
 
-                                props.toggleGroupCoinsVisibility(allCoins, checked, false);
+                                        props.toggleGroupCoinsVisibility(
+                                            allCoins,
+                                            !this.state.showAllCoins,
+                                            false
+                                        );
+
+                                        this.setState(prevState => ({
+                                            showAllCoins: !prevState.showAllCoins,
+                                        }));
                                     }}
                                 >
                                     {props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'}
@@ -160,7 +189,9 @@ const CoinsSettings = (props: Props) => (
                                 <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
                                 <Tooltip
                                     content={
-                                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
+                                        <FormattedMessage
+                                            {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
+                                        />
                                     }
                                     maxWidth={210}
                                     placement="right"
@@ -174,15 +205,23 @@ const CoinsSettings = (props: Props) => (
                             </Left>
                             <Right>
                                 <ToggleAll
-                            onClick={checked => {
+                                    onClick={() => {
                                         const allCoins = coins
                                             .filter(x => !x.isHidden)
                                             .map(coin => coin.id);
 
-                                props.toggleGroupCoinsVisibility(allCoins, checked, true);
+                                        props.toggleGroupCoinsVisibility(
+                                            allCoins,
+                                            !this.state.showAllCoinsExternal,
+                                            true
+                                        );
+
+                                        this.setState(prevState => ({
+                                            showAllCoinsExternal: !prevState.showAllCoinsExternal,
+                                        }));
                                     }}
                                 >
-                            Show all
+                                    {props.hiddenCoinsExternal.length > 0 ? 'Show all' : 'Hide all'}
                                 </ToggleAll>
                             </Right>
                         </Label>
@@ -202,9 +241,15 @@ const CoinsSettings = (props: Props) => (
                                             checkedIcon={false}
                                             uncheckedIcon={false}
                                             onChange={visible => {
-                                        props.handleCoinVisibility(network.id, visible, true);
+                                                props.handleCoinVisibility(
+                                                    network.id,
+                                                    visible,
+                                                    true
+                                                );
                                             }}
-                                    checked={!props.hiddenCoinsExternal.includes(network.id)}
+                                            checked={
+                                                !props.hiddenCoinsExternal.includes(network.id)
+                                            }
                                         />
                                     </Right>
                                 </CoinRow>
@@ -212,6 +257,8 @@ const CoinsSettings = (props: Props) => (
                     </Content>
                 </Row>
             </Wrapper>
-);
+        );
+    }
+}
 
 export default CoinsSettings;