part of show all

src/actions/LocalStorageActions.js

@@ -12,7 +12,6 @@ import * as buildUtils from 'utils/build';
 import * as storageUtils from 'utils/storage';
 import * as WalletActions from 'actions/WalletActions';
 import * as l10nUtils from 'utils/l10n';
-
 import { getAccountTokens } from 'reducers/utils';
 import type { Account } from 'reducers/AccountsReducer';
 import type { Token } from 'reducers/TokensReducer';
@@ -380,7 +379,35 @@ export const handleCoinVisibility = (
     });
 };
 
-// export const handleAllCoinsVisibility => ();
+export const handleAllCoinsVisibility = (
+    checked: boolean,
+    allCoins: Array<string>,
+    hiddenCoins: Array<string>
+): ThunkAction => (dispatch: Dispatch) => {
+    const configuration: Array<string> = getHiddenCoins();
+    const newConfig: Array<string> = configuration;
+    let result = [];
+
+    console.log('old config', newConfig);
+
+    if (checked) {
+        const intersection = allCoins.filter(x => hiddenCoins.includes(x));
+        if (intersection) {
+            result = newConfig.filter(x => !intersection.includes(x));
+        }
+    } else {
+        const intersection = allCoins.filter(x => hiddenCoins.includes(x));
+        console.log('intersection', intersection);
+        result = [configuration, ...intersection];
+    }
+
+    dispatch({
+        type: WALLET.SET_HIDDEN_COINS,
+        hiddenCoins: result,
+    });
+
+    storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(result));
+};
 
 export const getHiddenCoins = (): Array<string> => {
     const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS);

src/views/Wallet/views/WalletSettings/Container.js

@@ -23,7 +23,7 @@ type DispatchProps = {|
     setLocalCurrency: typeof WalletActions.setLocalCurrency,
     setHideBalance: typeof WalletActions.setHideBalance,
     handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
-    // handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility,
+    handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility,
 |};
 
 export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
@@ -38,10 +38,10 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
     setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
     setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
     handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch),
-    // handleAllCoinsVisibility: bindActionCreators(
+    handleAllCoinsVisibility: bindActionCreators(
-    //     LocalStorageActions.handleAllCoinsVisibility,
+        LocalStorageActions.handleAllCoinsVisibility,
-    //     dispatch
+        dispatch
-    // ),
+    ),
 });
 
 export default injectIntl<OwnProps>(

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

@@ -14,6 +14,7 @@ type Props = {
     networks: Array<Network>,
     hiddenCoins: Array<string>,
     handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
+    handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility,
 };
 
 const Wrapper = styled.div`
@@ -85,6 +86,10 @@ const LogoWrapper = styled.div`
     align-items: center;
 `;
 
+const ToggleAll = styled.span`
+    cursor: pointer;
+`;
+
 const CoinsSettings = (props: Props) => (
     <Wrapper>
         <Row>
@@ -106,7 +111,25 @@ const CoinsSettings = (props: Props) => (
                             />
                         </Tooltip>
                     </Left>
-                    <Right>Show all</Right>
+                    <Right>
+                        <ToggleAll
+                            onClick={checked => {
+                                const allCoins = props.networks
+                                    .filter(x => !x.isHidden)
+                                    .map(item => item.shortcut);
+
+                                props.handleAllCoinsVisibility(
+                                    checked,
+                                    allCoins,
+                                    props.hiddenCoins
+                                );
+                            }}
+                        >
+                            {props.hiddenCoins.every(val => props.networks.includes(val))
+                                ? 'Hide all'
+                                : 'Show all'}
+                        </ToggleAll>
+                    </Right>
                 </Label>
                 {props.networks
                     .filter(network => !network.isHidden)
@@ -150,7 +173,23 @@ const CoinsSettings = (props: Props) => (
                             />
                         </Tooltip>
                     </Left>
-                    <Right>Show all</Right>
+                    <Right>
+                        <ToggleAll
+                            onClick={checked => {
+                                const allCoins = coins
+                                    .filter(x => !x.isHidden)
+                                    .map(coin => coin.id);
+
+                                props.handleAllCoinsVisibility(
+                                    checked,
+                                    allCoins,
+                                    props.hiddenCoins
+                                );
+                            }}
+                        >
+                            Show all
+                        </ToggleAll>
+                    </Right>
                 </Label>
                 {coins
                     .sort((a, b) => a.order - b.order)

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

@@ -73,7 +73,10 @@ const TooltipIcon = styled(Icon)`
 `;
 
 const buildCurrencyOption = currency => {
-    return { value: currency, label: currency.toUpperCase() };
+    return {
+        value: currency,
+        label: currency.toUpperCase(),
+    };
 };
 
 const WalletSettings = (props: Props) => (
@@ -117,6 +120,7 @@ const WalletSettings = (props: Props) => (
             <Coins
                 networks={props.localStorage.config.networks}
                 handleCoinVisibility={props.handleCoinVisibility}
+                handleAllCoinsVisibility={props.handleAllCoinsVisibility}
                 hiddenCoins={props.wallet.hiddenCoins}
             />
         </Section>