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

fixed state checking

Browse Source
This commit is contained in:
Vladimir Volek 2019-04-24 14:42:02 +02:00
parent e32d7a32bd
commit a600266786
2 changed files with 178 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/actions/LocalStorageActions.js
View File

@ -401,21 +401,9 @@ export const toggleGroupCoinsVisibility = (
checked: boolean, checked: boolean,
isExternal: boolean isExternal: boolean
): ThunkAction => (dispatch: Dispatch) => { ): ThunkAction => (dispatch: Dispatch) => {
if (checked && isExternal) { // supported coins
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: [],
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([]));
}
if (!checked && isExternal) { console.log('checked', checked);
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: allCoins,
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins));
}
if (checked && !isExternal) { if (checked && !isExternal) {
dispatch({ dispatch({
@ -432,6 +420,23 @@ export const toggleGroupCoinsVisibility = (
}); });
storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(allCoins)); storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(allCoins));
} }
// external coins
if (checked && isExternal) {
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: [],
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([]));
}
if (!checked && isExternal) {
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: allCoins,
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins));
}
}; };
export const getHiddenCoins = (isExternal: boolean): Array<string> => { export const getHiddenCoins = (isExternal: boolean): Array<string> => {

271
src/views/Wallet/views/WalletSettings/components/Coins/index.js
View File

@ -1,6 +1,6 @@
/* @flow */ /* @flow */
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React, { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import coins from 'constants/coins'; import coins from 'constants/coins';
@ -18,6 +18,11 @@ type Props = {
toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility, toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility,
}; };
type State = {
showAllCoins: boolean,
showAllCoinsExternal: boolean,
};
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -87,131 +92,173 @@ const LogoWrapper = styled.div`
align-items: center; align-items: center;
`; `;
const ToggleAll = styled.span` const ToggleAll = styled.div`
cursor: pointer; cursor: pointer;
`; `;
const CoinsSettings = (props: Props) => ( class CoinsSettings extends PureComponent<Props, State> {
<Wrapper> constructor(props: Props) {
<Row> super(props);
<Content> this.state = {
<Label> showAllCoins: this.props.hiddenCoins.length === 0,
<Left> showAllCoinsExternal: this.props.hiddenCoinsExternal.length === 0,
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} /> };
<Tooltip }
content={
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left>
<Right>
<ToggleAll
onClick={checked => {
const allCoins = props.networks
.filter(x => !x.isHidden)
.map(item => item.shortcut);
props.toggleGroupCoinsVisibility(allCoins, checked, false); render() {
}} const { props } = this;
> return (
{props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'} <Wrapper>
</ToggleAll> <Row>
</Right> <Content>
</Label> {console.log('hidden coins', props.hiddenCoins)}
{props.networks {console.log('hidden coins', props.hiddenCoins)}
.filter(network => !network.isHidden) {console.log('hidden coins external', props.hiddenCoinsExternal)}
.map(network => ( <Label>
<CoinRow key={network.shortcut}>
<Left> <Left>
<LogoWrapper> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
<CoinLogo height="23" network={network.shortcut} /> <Tooltip
</LogoWrapper> content={
<Name>{network.name}</Name> <FormattedMessage
{...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
/>
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
<Right> <Right>
<Switch <ToggleAll
isSmall onClick={() => {
checkedIcon={false} const allCoins = props.networks
uncheckedIcon={false} .filter(x => !x.isHidden)
onChange={visible => { .map(item => item.shortcut);
props.handleCoinVisibility(
network.shortcut, props.toggleGroupCoinsVisibility(
visible, allCoins,
!this.state.showAllCoins,
false false
); );
}}
checked={!props.hiddenCoins.includes(network.shortcut)}
/>
</Right>
</CoinRow>
))}
</Content>
<Content>
<Label>
<Left>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
<Tooltip
content={
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left>
<Right>
<ToggleAll
onClick={checked => {
const allCoins = coins
.filter(x => !x.isHidden)
.map(coin => coin.id);
props.toggleGroupCoinsVisibility(allCoins, checked, true); this.setState(prevState => ({
}} showAllCoins: !prevState.showAllCoins,
> }));
Show all }}
</ToggleAll> >
</Right> {props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'}
</Label> </ToggleAll>
{coins </Right>
.sort((a, b) => a.order - b.order) </Label>
.map(network => ( {props.networks
<CoinRow key={network.id}> .filter(network => !network.isHidden)
.map(network => (
<CoinRow key={network.shortcut}>
<Left>
<LogoWrapper>
<CoinLogo height="23" network={network.shortcut} />
</LogoWrapper>
<Name>{network.name}</Name>
</Left>
<Right>
<Switch
isSmall
checkedIcon={false}
uncheckedIcon={false}
onChange={visible => {
props.handleCoinVisibility(
network.shortcut,
visible,
false
);
}}
checked={!props.hiddenCoins.includes(network.shortcut)}
/>
</Right>
</CoinRow>
))}
</Content>
<Content>
<Label>
<Left> <Left>
<LogoWrapper> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
<CoinLogo height="23" network={network.id} /> <Tooltip
</LogoWrapper> content={
<Name>{network.coinName}</Name> <FormattedMessage
{...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
/>
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
<Right> <Right>
<Switch <ToggleAll
isSmall onClick={() => {
checkedIcon={false} const allCoins = coins
uncheckedIcon={false} .filter(x => !x.isHidden)
onChange={visible => { .map(coin => coin.id);
props.handleCoinVisibility(network.id, visible, true);
props.toggleGroupCoinsVisibility(
allCoins,
!this.state.showAllCoinsExternal,
true
);
this.setState(prevState => ({
showAllCoinsExternal: !prevState.showAllCoinsExternal,
}));
}} }}
checked={!props.hiddenCoinsExternal.includes(network.id)} >
/> {props.hiddenCoinsExternal.length > 0 ? 'Show all' : 'Hide all'}
</ToggleAll>
</Right> </Right>
</CoinRow> </Label>
))} {coins
</Content> .sort((a, b) => a.order - b.order)
</Row> .map(network => (
</Wrapper> <CoinRow key={network.id}>
); <Left>
<LogoWrapper>
<CoinLogo height="23" network={network.id} />
</LogoWrapper>
<Name>{network.coinName}</Name>
</Left>
<Right>
<Switch
isSmall
checkedIcon={false}
uncheckedIcon={false}
onChange={visible => {
props.handleCoinVisibility(
network.id,
visible,
true
);
}}
checked={
!props.hiddenCoinsExternal.includes(network.id)
}
/>
</Right>
</CoinRow>
))}
</Content>
</Row>
</Wrapper>
);
}
}
export default CoinsSettings; export default CoinsSettings;