Merge pull request #570 from trezor/fix/coins-settings

Better coins settings

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -7,6 +7,7 @@ import React, { PureComponent } from 'react';
 import { Link, colors, icons as ICONS } from 'trezor-ui-components';
 import { NavLink } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
 import Divider from '../Divider';
 import RowCoin from '../RowCoin';
 
@@ -93,6 +94,27 @@ class CoinMenu extends PureComponent<Props> {
             });
     }
 
+    getEmptyContent() {
+        return (
+            <Empty>
+                <Gray>
+                    <FormattedMessage
+                        {...l10nMessages.TR_SELECT_COINS}
+                        values={{
+                            TR_SELECT_COINS_LINK: (
+                                <StyledLinkEmpty to="/settings">
+                                    <FormattedMessage
+                                        {...l10nCommonMessages.TR_SELECT_COINS_LINK}
+                                    />
+                                </StyledLinkEmpty>
+                            ),
+                        }}
+                    />{' '}
+                </Gray>
+            </Empty>
+        );
+    }
+
     isTopMenuEmpty() {
         const numberOfVisibleNetworks = this.props.localStorage.config.networks
             .filter(item => !item.isHidden) // hide coins globally in config
@@ -119,24 +141,7 @@ class CoinMenu extends PureComponent<Props> {
         const { config } = this.props.localStorage;
         return (
             <Wrapper data-test="Main__page__coin__menu">
-                {this.isMenuEmpty() && (
-                    <Empty>
-                        <Gray>
-                            <FormattedMessage
-                                {...l10nMessages.TR_SELECT_COINS}
-                                values={{
-                                    TR_SELECT_COINS_LINK: (
-                                        <StyledLinkEmpty to="/settings">
-                                            <FormattedMessage
-                                                {...l10nMessages.TR_SELECT_COINS_LINK}
-                                            />
-                                        </StyledLinkEmpty>
-                                    ),
-                                }}
-                            />{' '}
-                        </Gray>
-                    </Empty>
-                )}
+                {this.isMenuEmpty() || (this.isTopMenuEmpty() && this.getEmptyContent())}
                 {config.networks
                     .filter(item => !item.isHidden) // hide coins globally in config
                     .filter(item => !hiddenCoins.includes(item.shortcut)) // hide coins by user settings
@@ -154,14 +159,15 @@ class CoinMenu extends PureComponent<Props> {
                             />
                         </NavLink>
                     ))}
-                {!this.isBottomMenuEmpty() && (
+                {!this.isMenuEmpty() && (
                     <Divider
                         testId="Main__page__coin__menu__divider"
                         textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />}
                         hasBorder
                     />
                 )}
-                {this.getOtherCoins()}
+                {this.isBottomMenuEmpty() && this.getEmptyContent()}
+                {!this.isBottomMenuEmpty() && this.getOtherCoins()}
             </Wrapper>
         );
     }

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js

@@ -12,10 +12,6 @@ const definedMessages: Messages = defineMessages({
         description: 'COMPLETE SENTENCE: Select a coin in application settings',
         defaultMessage: 'Select a coin in {TR_SELECT_COINS_LINK}',
     },
-    TR_SELECT_COINS_LINK: {
-        id: 'TR_SELECT_COINS_LINK',
-        defaultMessage: 'application settings',
-    },
 });
 
 export default definedMessages;

src/views/Wallet/views/Dashboard/index.js

@@ -3,9 +3,10 @@ import React from 'react';
 import styled from 'styled-components';
 import Content from 'views/Wallet/components/Content';
 import { NavLink } from 'react-router-dom';
-import { CoinLogo, H4, P } from 'trezor-ui-components';
-
+import { CoinLogo, H4, P, Link } from 'trezor-ui-components';
+import coins from 'constants/coins';
 import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
 import l10nMessages from './index.messages';
 import type { Props } from './Container';
 
@@ -35,6 +36,10 @@ const Coins = styled.div`
     flex-wrap: wrap;
 `;
 
+const StyledLinkEmpty = styled(Link)`
+    padding: 0;
+`;
+
 const StyledNavLink = styled(NavLink)`
     margin-right: 10px;
 
@@ -67,34 +72,63 @@ const getBaseUrl = device => {
 
     return baseUrl;
 };
-const Dashboard = (props: Props) => (
-    <Content>
-        <Wrapper>
-            <Row data-test="Dashboard__page__content">
-                <StyledH4>
-                    <FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} />
-                </StyledH4>
-                <StyledP>
-                    <FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
-                </StyledP>
-                <Coins>
-                    {props.localStorage.config.networks
-                        .filter(item => !item.isHidden)
-                        .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut))
-                        .map(network => (
-                            <StyledNavLink
-                                key={network.shortcut}
-                                to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
-                                    network.shortcut
-                                }/account/0`}
-                            >
-                                <StyledCoinLogo network={network.shortcut} height={32} />
-                            </StyledNavLink>
-                        ))}
-                </Coins>
-            </Row>
-        </Wrapper>
-    </Content>
-);
+
+const Dashboard = (props: Props) => {
+    const isEmpty = () => {
+        const numberOfVisibleNetworks = props.localStorage.config.networks
+            .filter(item => !item.isHidden) // hide coins globally in config
+            .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut));
+        const { hiddenCoinsExternal } = props.wallet;
+        const numberOfVisibleNetworksExternal = coins
+            .filter(item => !item.isHidden)
+            .filter(item => !hiddenCoinsExternal.includes(item.id));
+
+        return numberOfVisibleNetworks.length <= 0 && numberOfVisibleNetworksExternal.length <= 0;
+    };
+
+    return (
+        <Content>
+            <Wrapper>
+                <Row data-test="Dashboard__page__content">
+                    <StyledH4>
+                        {isEmpty() && (
+                            <FormattedMessage
+                                {...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY}
+                                values={{
+                                    TR_SELECT_COINS_LINK: (
+                                        <StyledLinkEmpty to="/settings">
+                                            <FormattedMessage
+                                                {...l10nCommonMessages.TR_SELECT_COINS_LINK}
+                                            />
+                                        </StyledLinkEmpty>
+                                    ),
+                                }}
+                            />
+                        )}
+                        {!isEmpty() && <FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} />}
+                    </StyledH4>
+                    <StyledP>
+                        <FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
+                    </StyledP>
+                    <Coins>
+                        {props.localStorage.config.networks
+                            .filter(item => !item.isHidden)
+                            .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut))
+                            .map(network => (
+                                <StyledNavLink
+                                    key={network.shortcut}
+                                    to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
+                                        network.shortcut
+                                    }/account/0`}
+                                >
+                                    <StyledCoinLogo network={network.shortcut} height={32} />
+                                </StyledNavLink>
+                            ))}
+                    </Coins>
+                </Row>
+            </Wrapper>
+        </Content>
+    );
+};
 
 export default Dashboard;

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

@@ -8,6 +8,11 @@ const definedMessages: Messages = defineMessages({
         defaultMessage: 'Please select your coin',
         description: 'Title of the dashboard component if coin was not selected',
     },
+    TR_PLEASE_SELECT_YOUR_EMPTY: {
+        id: 'TR_PLEASE_SELECT_YOUR_EMPTY',
+        defaultMessage: 'Please select your coin in {TR_SELECT_COINS_LINK}',
+        description: 'Title of the dashboard component if coin was not selected',
+    },
     TR_YOU_WILL_GAIN_ACCESS: {
         id: 'TR_YOU_WILL_GAIN_ACCESS',
         defaultMessage: 'You will gain access to receiving & sending selected coin',

src/views/common.messages.js

@@ -11,6 +11,10 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_APPLICATION_SETTINGS',
         defaultMessage: 'Application settings',
     },
+    TR_SELECT_COINS_LINK: {
+        id: 'TR_SELECT_COINS_LINK',
+        defaultMessage: 'application settings',
+    },
     TR_ACCOUNT_HASH: {
         id: 'TR_ACCOUNT_HASH',
         defaultMessage: 'Account #{number}',