arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-27 08:21:27 +00:00
Code Issues Releases Wiki Activity

hide and show menu parts according to visible coins

Browse Source
This commit is contained in:
Vladimir Volek 2019-04-17 16:20:14 +02:00
parent 53c8fd4eb5
commit 7d5b08aa3b
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
View File

@ -26,13 +26,21 @@ const StyledLink = styled(Link)`
} }
`; `;
const Empty = styled.div` const Empty = styled.span`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 50px; min-height: 50px;
`; `;
const StyledLinkEmpty = styled(Link)`
padding: 0 5px;
`;
const Gray = styled.span`
color: ${colors.TEXT_SECONDARY};
`;
class CoinMenu extends PureComponent<Props> { class CoinMenu extends PureComponent<Props> {
getBaseUrl() { getBaseUrl() {
const { selectedDevice } = this.props.wallet; 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 => !item.isHidden) // hide coins globally in config
.filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut)); .filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut));
return numberOfVisibleNetworks.length <= 0; 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() { render() {
const { hiddenCoins } = this.props.wallet; const { hiddenCoins } = this.props.wallet;
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.isEmpty(config.networks) && ( {this.isMenuEmpty() && (
<Empty> <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> </Empty>
)} )}
{config.networks {config.networks
@ -120,11 +142,13 @@ class CoinMenu extends PureComponent<Props> {
/> />
</NavLink> </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()} {this.getOtherCoins()}
</Wrapper> </Wrapper>
); );