diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index c1e1ce2b..f6896513 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/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 { }); } + getEmptyContent() { + return ( + + + + + + ), + }} + />{' '} + + + ); + } + 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 { const { config } = this.props.localStorage; return ( - {this.isMenuEmpty() && ( - - - - - - ), - }} - />{' '} - - - )} + {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 { /> ))} - {!this.isBottomMenuEmpty() && ( + {!this.isMenuEmpty() && ( } hasBorder /> )} - {this.getOtherCoins()} + {this.isBottomMenuEmpty() && this.getEmptyContent()} + {!this.isBottomMenuEmpty() && this.getOtherCoins()} ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js index 2117247b..72129c97 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js +++ b/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; diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index 273dfe88..2fbc8120 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/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) => ( - - - - - - - - - - - {props.localStorage.config.networks - .filter(item => !item.isHidden) - .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut)) - .map(network => ( - - - - ))} - - - - -); + +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 ( + + + + + {isEmpty() && ( + + + + ), + }} + /> + )} + {!isEmpty() && } + + + + + + {props.localStorage.config.networks + .filter(item => !item.isHidden) + .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut)) + .map(network => ( + + + + ))} + + + + + ); +}; export default Dashboard; diff --git a/src/views/Wallet/views/Dashboard/index.messages.js b/src/views/Wallet/views/Dashboard/index.messages.js index 936115cf..88fc4cb7 100644 --- a/src/views/Wallet/views/Dashboard/index.messages.js +++ b/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', diff --git a/src/views/common.messages.js b/src/views/common.messages.js index ba5c95fb..ebf1b461 100644 --- a/src/views/common.messages.js +++ b/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}',