add logic for hiding coins

src/actions/LocalStorageActions.js

@@ -60,6 +60,7 @@ const KEY_BETA_MODAL: string = '/betaModalPrivacy'; // this key needs to be comp
 const KEY_LANGUAGE: string = `${STORAGE_PATH}language`;
 const KEY_LOCAL_CURRENCY: string = `${STORAGE_PATH}localCurrency`;
 const KEY_HIDE_BALANCE: string = `${STORAGE_PATH}hideBalance`;
+const KEY_HIDDEN_COINS: string = `${STORAGE_PATH}hiddenCoins`;
 
 // https://github.com/STRML/react-localstorage/blob/master/react-localstorage.js
 // or
@@ -350,6 +351,31 @@ export const getImportedAccounts = (): ?Array<Account> => {
     return null;
 };
 
+export const handleCoinVisibility = (
+    coinShortcut: String,
+    shouldBeVisible: boolean
+): ThunkAction => (): void => {
+    const configuration: ?Array<String> = getHiddenCoins();
+    let newConfig = configuration;
+    const isAlreadyHidden = configuration.find(coin => coin === coinShortcut);
+
+    if (isAlreadyHidden && shouldBeVisible) {
+        newConfig = configuration.filter(coin => coin !== coinShortcut);
+    } else if (!isAlreadyHidden) {
+        newConfig = [...configuration, coinShortcut];
+    }
+
+    storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig));
+};
+
+export const getHiddenCoins = (): ?Array<String> => {
+    const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS);
+    if (coinsConfig) {
+        return JSON.parse(coinsConfig);
+    }
+    return [];
+};
+
 export const removeImportedAccounts = (device: TrezorDevice): ThunkAction => (
     dispatch: Dispatch
 ): void => {

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

@@ -5,6 +5,7 @@ import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 
 import * as WalletActions from 'actions/WalletActions';
+import * as LocalStorageActions from 'actions/LocalStorageActions';
 import type { State, Dispatch } from 'flowtype';
 import WalletSettings from './index';
 
@@ -21,6 +22,7 @@ type StateProps = {|
 type DispatchProps = {|
     setLocalCurrency: typeof WalletActions.setLocalCurrency,
     setHideBalance: typeof WalletActions.setHideBalance,
+    handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
 |};
 
 export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
@@ -34,6 +36,7 @@ const mapStateToProps = (state: State): StateProps => ({
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
     setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
     setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
+    handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch),
 });
 
 export default injectIntl<OwnProps>(

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, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { FONT_SIZE } from 'config/variables';
 
@@ -62,31 +62,41 @@ const LogoWrapper = styled.div`
     align-items: center;
 `;
 
-const CoinsSettings = (props: Props) => (
-    <Wrapper>
-        <Row>
-            <Label>
-                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
-            </Label>
-            <Content>
-                {props.networks
-                    .filter(network => !network.isHidden)
-                    .map(network => (
-                        <CoinRow key={network.shortcut}>
-                            <Left>
-                                <LogoWrapper>
-                                    <CoinLogo height="23" network={network.shortcut} />
-                                </LogoWrapper>
-                                <Name>{network.name}</Name>
-                            </Left>
-                            <Right>
-                                <Switch onChange={() => {}} checked />
-                            </Right>
-                        </CoinRow>
-                    ))}
-            </Content>
-        </Row>
-    </Wrapper>
-);
+class CoinsSettings extends Component {
+    render() {
+        const { networks, handleCoinVisibility } = this.props;
+        return (
+            <Wrapper>
+                <Row>
+                    <Label>
+                        <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
+                    </Label>
+                    <Content>
+                        {networks
+                            .filter(network => !network.isHidden)
+                            .map(network => (
+                                <CoinRow key={network.shortcut}>
+                                    <Left>
+                                        <LogoWrapper>
+                                            <CoinLogo height="23" network={network.shortcut} />
+                                        </LogoWrapper>
+                                        <Name>{network.name}</Name>
+                                    </Left>
+                                    <Right>
+                                        <Switch
+                                            onChange={isVisible => {
+                                                handleCoinVisibility(network.shortcut, !isVisible);
+                                            }}
+                                            checked
+                                        />
+                                    </Right>
+                                </CoinRow>
+                            ))}
+                    </Content>
+                </Row>
+            </Wrapper>
+        );
+    }
+}
 
 export default CoinsSettings;

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

@@ -78,6 +78,7 @@ const buildCurrencyOption = currency => {
 
 const WalletSettings = (props: Props) => (
     <StyledContent>
+        {console.log(props.localStorage)}
         <Section>
             <LabelTop>
                 <FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
@@ -111,7 +112,10 @@ const WalletSettings = (props: Props) => (
             </Row>
         </Section>
         <Section>
-            <Coins networks={props.localStorage.config.networks} />
+            <Coins
+                networks={props.localStorage.config.networks}
+                handleCoinVisibility={props.handleCoinVisibility}
+            />
         </Section>
         <Actions>
             <Info>