add link to dashboard

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

@ -3,8 +3,8 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import { NavLink } from 'react-router-dom'; 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 { FormattedMessage } from 'react-intl';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
import type { Props } from './Container'; import type { Props } from './Container';
@ -35,6 +35,10 @@ const Coins = styled.div`
flex-wrap: wrap; flex-wrap: wrap;
`; `;
const StyledLinkEmpty = styled(Link)`
padding: 0;
`;
const StyledNavLink = styled(NavLink)` const StyledNavLink = styled(NavLink)`
margin-right: 10px; margin-right: 10px;
@ -67,34 +71,63 @@ const getBaseUrl = device => {
return baseUrl; return baseUrl;
}; };
const Dashboard = (props: Props) => (
<Content> const Dashboard = (props: Props) => {
<Wrapper> const isEmpty = () => {
<Row data-test="Dashboard__page__content"> const numberOfVisibleNetworks = props.localStorage.config.networks
<StyledH4> .filter(item => !item.isHidden) // hide coins globally in config
<FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} /> .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut));
</StyledH4> const { hiddenCoinsExternal } = props.wallet;
<StyledP> const numberOfVisibleNetworksExternal = coins
<FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} /> .filter(item => !item.isHidden)
</StyledP> .filter(item => !hiddenCoinsExternal.includes(item.id));
<Coins>
{props.localStorage.config.networks return numberOfVisibleNetworks.length <= 0 && numberOfVisibleNetworksExternal.length <= 0;
.filter(item => !item.isHidden) };
.filter(item => !props.wallet.hiddenCoins.includes(item.shortcut))
.map(network => ( return (
<StyledNavLink <Content>
key={network.shortcut} <Wrapper>
to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${ <Row data-test="Dashboard__page__content">
network.shortcut <StyledH4>
}/account/0`} {isEmpty() && (
> <FormattedMessage
<StyledCoinLogo network={network.shortcut} height={32} /> {...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY}
</StyledNavLink> values={{
))} TR_PLEASE_SELECT_YOUR_EMPTY_LINK: (
</Coins> <StyledLinkEmpty to="/settings">
</Row> <FormattedMessage
</Wrapper> {...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY_LINK}
</Content> />
); </StyledLinkEmpty>
),
}}
/>
)}
{!isEmpty() && <FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} />}
</StyledH4>
<StyledP>
<FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
</StyledP>
<Coins>
{props.localStorage.config.networks
.filter(item => !item.isHidden)
.filter(item => !props.wallet.hiddenCoins.includes(item.shortcut))
.map(network => (
<StyledNavLink
key={network.shortcut}
to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
network.shortcut
}/account/0`}
>
<StyledCoinLogo network={network.shortcut} height={32} />
</StyledNavLink>
))}
</Coins>
</Row>
</Wrapper>
</Content>
);
};
export default Dashboard; export default Dashboard;

@ -8,6 +8,16 @@ const definedMessages: Messages = defineMessages({
defaultMessage: 'Please select your coin', defaultMessage: 'Please select your coin',
description: 'Title of the dashboard component if coin was not selected', 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: { TR_YOU_WILL_GAIN_ACCESS: {
id: 'TR_YOU_WILL_GAIN_ACCESS', id: 'TR_YOU_WILL_GAIN_ACCESS',
defaultMessage: 'You will gain access to receiving & sending selected coin', defaultMessage: 'You will gain access to receiving & sending selected coin',

Loading…
Cancel
Save