1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 12:18:09 +00:00

add link to dashboard

This commit is contained in:
Vladimir Volek 2019-05-23 15:24:59 +02:00
parent 814ed30940
commit b65feeea9b
2 changed files with 74 additions and 31 deletions

View File

@ -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) => (
<Content>
<Wrapper>
<Row data-test="Dashboard__page__content">
<StyledH4>
<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>
);
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 (
<Content>
<Wrapper>
<Row data-test="Dashboard__page__content">
<StyledH4>
{isEmpty() && (
<FormattedMessage
{...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY}
values={{
TR_PLEASE_SELECT_YOUR_EMPTY_LINK: (
<StyledLinkEmpty to="/settings">
<FormattedMessage
{...l10nMessages.TR_PLEASE_SELECT_YOUR_EMPTY_LINK}
/>
</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;

View File

@ -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',