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() && (
+                {this.isMenuEmpty() || (this.isTopMenuEmpty() && this.getEmptyContent())}
-                    <Empty>
-                        <Gray>
-                            <FormattedMessage
-                                {...l10nMessages.TR_SELECT_COINS}
-                                values={{
-                                    TR_SELECT_COINS_LINK: (
-                                        <StyledLinkEmpty to="/settings">
-                                            <FormattedMessage
-                                                {...l10nMessages.TR_SELECT_COINS_LINK}
-                                            />
-                                        </StyledLinkEmpty>
-                                    ),
-                                }}
-                            />{' '}
-                        </Gray>
-                    </Empty>
-                )}
                 {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,12 +72,40 @@ const getBaseUrl = device => {
 
     return baseUrl;
 };
-const Dashboard = (props: Props) => (
+
+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>
-                    <FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} />
+                        {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} />
@@ -96,5 +129,6 @@ const Dashboard = (props: Props) => (
             </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}',