hide and show menu parts according to visible coins

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

@@ -26,13 +26,21 @@ const StyledLink = styled(Link)`
     }
 `;
 
-const Empty = styled.div`
+const Empty = styled.span`
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 50px;
 `;
 
+const StyledLinkEmpty = styled(Link)`
+    padding: 0 5px;
+`;
+
+const Gray = styled.span`
+    color: ${colors.TEXT_SECONDARY};
+`;
+
 class CoinMenu extends PureComponent<Props> {
     getBaseUrl() {
         const { selectedDevice } = this.props.wallet;
@@ -85,22 +93,36 @@ class CoinMenu extends PureComponent<Props> {
             });
     }
 
-    isEmpty(networks) {
+    isTopMenuEmpty() {
-        const numberOfVisibleNetworks = networks
+        const numberOfVisibleNetworks = this.props.localStorage.config.networks
             .filter(item => !item.isHidden) // hide coins globally in config
             .filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut));
 
         return numberOfVisibleNetworks.length <= 0;
     }
 
+    isBottomMenuEmpty() {
+        const { hiddenCoins } = this.props.wallet;
+        const numberOfVisibleNetworks = coins
+            .filter(item => !item.isHidden)
+            .filter(item => hiddenCoins.includes(item.id));
+
+        return numberOfVisibleNetworks.length <= 0;
+    }
+
+    isMenuEmpty() {
+        return this.isTopMenuEmpty() && this.isBottomMenuEmpty();
+    }
+
     render() {
         const { hiddenCoins } = this.props.wallet;
         const { config } = this.props.localStorage;
         return (
             <Wrapper data-test="Main__page__coin__menu">
-                {this.isEmpty(config.networks) && (
+                {this.isMenuEmpty() && (
                     <Empty>
-                        Please <Link to="/settings"> select a coin </Link> in application settings
+                        <StyledLinkEmpty to="/settings">Select a coin</StyledLinkEmpty>
+                        <Gray> in application settings</Gray>
                     </Empty>
                 )}
                 {config.networks
@@ -120,11 +142,13 @@ class CoinMenu extends PureComponent<Props> {
                             />
                         </NavLink>
                     ))}
-                <Divider
+                {!this.isBottomMenuEmpty() && (
-                    testId="Main__page__coin__menu__divider"
+                    <Divider
-                    textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />}
+                        testId="Main__page__coin__menu__divider"
-                    hasBorder
+                        textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />}
-                />
+                        hasBorder
+                    />
+                )}
                 {this.getOtherCoins()}
             </Wrapper>
         );