add empty content to both sections in menu

pull/570/head
Vladimir Volek 5 years ago
parent 01ddcf5349
commit 814ed30940

@ -93,6 +93,25 @@ class CoinMenu extends PureComponent<Props> {
}); });
} }
getEmptyContent() {
return (
<Empty>
<Gray>
<FormattedMessage
{...l10nMessages.TR_SELECT_COINS}
values={{
TR_SELECT_COINS_LINK: (
<StyledLinkEmpty to="/settings">
<FormattedMessage {...l10nMessages.TR_SELECT_COINS_LINK} />
</StyledLinkEmpty>
),
}}
/>{' '}
</Gray>
</Empty>
);
}
isTopMenuEmpty() { isTopMenuEmpty() {
const numberOfVisibleNetworks = this.props.localStorage.config.networks const numberOfVisibleNetworks = this.props.localStorage.config.networks
.filter(item => !item.isHidden) // hide coins globally in config .filter(item => !item.isHidden) // hide coins globally in config
@ -119,24 +138,7 @@ class CoinMenu extends PureComponent<Props> {
const { config } = this.props.localStorage; const { config } = this.props.localStorage;
return ( return (
<Wrapper data-test="Main__page__coin__menu"> <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 {config.networks
.filter(item => !item.isHidden) // hide coins globally in config .filter(item => !item.isHidden) // hide coins globally in config
.filter(item => !hiddenCoins.includes(item.shortcut)) // hide coins by user settings .filter(item => !hiddenCoins.includes(item.shortcut)) // hide coins by user settings
@ -154,14 +156,15 @@ class CoinMenu extends PureComponent<Props> {
/> />
</NavLink> </NavLink>
))} ))}
{!this.isBottomMenuEmpty() && ( {!this.isMenuEmpty() && (
<Divider <Divider
testId="Main__page__coin__menu__divider" testId="Main__page__coin__menu__divider"
textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />} textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />}
hasBorder hasBorder
/> />
)} )}
{this.getOtherCoins()} {this.isBottomMenuEmpty() && this.getEmptyContent()}
{!this.isBottomMenuEmpty() && this.getOtherCoins()}
</Wrapper> </Wrapper>
); );
} }

Loading…
Cancel
Save