From 814ed3094028c7e334ed6c0521872029c6e0fc24 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 23 May 2019 15:03:11 +0200 Subject: [PATCH 1/3] add empty content to both sections in menu --- .../components/CoinMenu/index.js | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index c1e1ce2b..1e8136e1 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -93,6 +93,25 @@ 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 +138,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 +156,15 @@ class CoinMenu extends PureComponent { /> ))} - {!this.isBottomMenuEmpty() && ( + {!this.isMenuEmpty() && ( } hasBorder /> )} - {this.getOtherCoins()} + {this.isBottomMenuEmpty() && this.getEmptyContent()} + {!this.isBottomMenuEmpty() && this.getOtherCoins()} ); } From b65feeea9b4db58b4e8bdbfedcfdf7bd973853db Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 23 May 2019 15:24:59 +0200 Subject: [PATCH 2/3] add link to dashboard --- src/views/Wallet/views/Dashboard/index.js | 95 +++++++++++++------ .../Wallet/views/Dashboard/index.messages.js | 10 ++ 2 files changed, 74 insertions(+), 31 deletions(-) diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index 273dfe88..57290374 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/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) => ( - - - - - - - - - - - {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..ffbd1371 100644 --- a/src/views/Wallet/views/Dashboard/index.messages.js +++ b/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', From 9e66d1bec3b0be86bf9e8034b757e65863ef57ac Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 23 May 2019 15:46:38 +0200 Subject: [PATCH 3/3] reuse "application settings" intl message --- .../components/LeftNavigation/components/CoinMenu/index.js | 5 ++++- .../LeftNavigation/components/CoinMenu/index.messages.js | 4 ---- src/views/Wallet/views/Dashboard/index.js | 5 +++-- src/views/Wallet/views/Dashboard/index.messages.js | 7 +------ src/views/common.messages.js | 4 ++++ 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 1e8136e1..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'; @@ -102,7 +103,9 @@ class CoinMenu extends PureComponent { values={{ TR_SELECT_COINS_LINK: ( - + ), }} 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 57290374..2fbc8120 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -6,6 +6,7 @@ import { NavLink } from 'react-router-dom'; 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'; @@ -94,10 +95,10 @@ const Dashboard = (props: Props) => { ), diff --git a/src/views/Wallet/views/Dashboard/index.messages.js b/src/views/Wallet/views/Dashboard/index.messages.js index ffbd1371..88fc4cb7 100644 --- a/src/views/Wallet/views/Dashboard/index.messages.js +++ b/src/views/Wallet/views/Dashboard/index.messages.js @@ -10,12 +10,7 @@ const definedMessages: Messages = defineMessages({ }, 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', + 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: { 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}',