diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js new file mode 100644 index 00000000..57b57512 --- /dev/null +++ b/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) => ( + + + + + {props.networks + .filter(network => !network.isHidden) + .map(network => ( + + + + + + {network.name} + + + {}} checked /> + + + ))} + + + +); + +export default CoinsSettings; diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index e8c4a752..866b5a1a 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/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) => ( /> +
+ +
diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index 43557498..abf718ee 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/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;