add link to dashboard

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

@@ -3,8 +3,8 @@ 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 l10nMessages from './index.messages';
 import type { Props } from './Container';
@@ -35,6 +35,10 @@ const Coins = styled.div`
     flex-wrap: wrap;
 `;
 
+const StyledLinkEmpty = styled(Link)`
+    padding: 0;
+`;
+
 const StyledNavLink = styled(NavLink)`
     margin-right: 10px;
 
@@ -67,34 +71,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_PLEASE_SELECT_YOUR_EMPTY_LINK: (
+                                        <StyledLinkEmpty to="/settings">
+                                            <FormattedMessage
+                                                {...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY_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,16 @@ 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_PLEASE_SELECT_YOUR_EMPTY_LINK}',
+        description: 'Title of the dashboard component if coin was not selected',
+    },
+    TR_PLEASE_SELECT_YOUR_EMPTY_LINK: {
+        id: 'TR_PLEASE_SELECT_YOUR_EMPTY_LINK',
+        defaultMessage: 'application settings',
+        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',