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

Merge pull request #570 from trezor/fix/coins-settings

Browse Source 
Better coins settings
This commit is contained in:
Vladimir Volek 2019-05-23 16:01:25 +02:00 committed by GitHub
commit 3f50ef5343
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 100 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import React, { PureComponent } from 'react';
import { Link, colors, icons as ICONS } from 'trezor-ui-components'; import { Link, colors, icons as ICONS } from 'trezor-ui-components';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
import Divider from '../Divider'; import Divider from '../Divider';
import RowCoin from '../RowCoin'; import RowCoin from '../RowCoin';
@ -93,6 +94,27 @@ class CoinMenu extends PureComponent<Props> {
}); });
} }
getEmptyContent() {
return (
<Empty>
<Gray>
<FormattedMessage
{...l10nMessages.TR_SELECT_COINS}
values={{
TR_SELECT_COINS_LINK: (
<StyledLinkEmpty to="/settings">
<FormattedMessage
{...l10nCommonMessages.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 +141,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 +159,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>
); );
} }

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

@ -12,10 +12,6 @@ const definedMessages: Messages = defineMessages({
description: 'COMPLETE SENTENCE: Select a coin in application settings', description: 'COMPLETE SENTENCE: Select a coin in application settings',
defaultMessage: 'Select a coin in {TR_SELECT_COINS_LINK}', defaultMessage: 'Select a coin in {TR_SELECT_COINS_LINK}',
}, },
TR_SELECT_COINS_LINK: {
id: 'TR_SELECT_COINS_LINK',
defaultMessage: 'application settings',
},
}); });
export default definedMessages; export default definedMessages;

96
src/views/Wallet/views/Dashboard/index.js
View File

@ -3,9 +3,10 @@ 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 l10nCommonMessages from 'views/common.messages';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
import type { Props } from './Container'; import type { Props } from './Container';
@ -35,6 +36,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 +72,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_SELECT_COINS_LINK: (
</Coins> <StyledLinkEmpty to="/settings">
</Row> <FormattedMessage
</Wrapper> {...l10nCommonMessages.TR_SELECT_COINS_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;

5
src/views/Wallet/views/Dashboard/index.messages.js
View File

@ -8,6 +8,11 @@ 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_SELECT_COINS_LINK}',
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',

4
src/views/common.messages.js
View File

@ -11,6 +11,10 @@ const definedMessages: Messages = defineMessages({
id: 'TR_APPLICATION_SETTINGS', id: 'TR_APPLICATION_SETTINGS',
defaultMessage: 'Application settings', defaultMessage: 'Application settings',
}, },
TR_SELECT_COINS_LINK: {
id: 'TR_SELECT_COINS_LINK',
defaultMessage: 'application settings',
},
TR_ACCOUNT_HASH: { TR_ACCOUNT_HASH: {
id: 'TR_ACCOUNT_HASH', id: 'TR_ACCOUNT_HASH',
defaultMessage: 'Account #{number}', defaultMessage: 'Account #{number}',