render coin visibility switcher

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

@@ -0,0 +1,104 @@
+/* @flow */
+import styled from 'styled-components';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FONT_SIZE } from 'config/variables';
+
+import { Tooltip, Icon, icons as ICONS, colors, Switch, CoinLogo } from 'trezor-ui-components';
+import l10nMessages from '../../index.messages';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const Label = styled.div`
+    display: flex;
+    color: ${colors.TEXT_SECONDARY};
+    align-items: center;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const TooltipIcon = styled(Icon)`
+    margin-left: 6px;
+    cursor: pointer;
+`;
+
+const Content = styled.div`
+    display: flex;
+    margin-top: 20px;
+    flex-direction: column;
+`;
+
+const CoinRow = styled.div`
+    height: 50px;
+    align-items: center;
+    display: flex;
+    border-bottom: 1px solid ${colors.DIVIDER};
+    color: ${colors.TEXT_PRIMARY};
+    justify-content: space-between;
+
+    &:first-child {
+        border-top: 1px solid ${colors.DIVIDER};
+    }
+`;
+
+const Left = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const Right = styled.div``;
+
+const Name = styled.div`
+    display: flex;
+    font-size: ${FONT_SIZE.BIG};
+    color: ${colors.TEXT_PRIMARY};
+`;
+
+const LogoWrapper = styled.div`
+    display: flex;
+    width: 45px;
+    justify-content: center;
+    align-items: center;
+`;
+
+const CoinsSettings = (props: Props) => (
+    <Wrapper>
+        <Row>
+            <Label>
+                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
+                <Tooltip
+                    content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
+                    maxWidth={210}
+                    placement="right"
+                >
+                    <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
+                </Tooltip>
+            </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>
+);
+
+export default CoinsSettings;

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

@@ -17,6 +17,7 @@ import {
 import { FIAT_CURRENCIES } from 'config/app';
 import { FONT_SIZE } from 'config/variables';
 import l10nCommonMessages from 'views/common.messages';
+import Coins from './components/Coins';
 import l10nMessages from './index.messages';
 import type { Props } from './Container';
 
@@ -109,6 +110,9 @@ const WalletSettings = (props: Props) => (
                 />
             </Row>
         </Section>
+        <Section>
+            <Coins networks={props.localStorage.config.networks} />
+        </Section>
         <Actions>
             <Info>
                 <FormattedMessage {...l10nMessages.TR_THE_CHANGES_ARE_SAVED} />

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

@@ -16,6 +16,14 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_THE_CHANGES_ARE_SAVED',
         defaultMessage: 'The changes are saved automatically as they are made',
     },
+    TR_VISIBLE_COINS: {
+        id: 'TR_VISIBLE_COINS',
+        defaultMessage: 'Visible coins',
+    },
+    TR_VISIBLE_COINS_EXPLAINED: {
+        id: 'TR_VISIBLE_COINS_EXPLAINED',
+        defaultMessage: 'The changes are saved automatically as they are made',
+    },
 });
 
 export default definedMessages;