arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

fixed state checking

Browse Source
pull/513/head
Vladimir Volek 5 years ago
parent e32d7a32bd
commit a600266786
2 changed files with 178 additions and 126 deletions
Show Stats Download Patch File Download Diff File

33
src/actions/LocalStorageActions.js
Unescape 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
Unescape 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} /> render() {
} const { props } = this;
maxWidth={210} return (
placement="right" <Wrapper>
> <Row>
<TooltipIcon <Content>
icon={ICONS.HELP} {console.log('hidden coins', props.hiddenCoins)}
color={colors.TEXT_SECONDARY} {console.log('hidden coins', props.hiddenCoins)}
size={12} {console.log('hidden coins external', props.hiddenCoinsExternal)}
/> <Label>
</Tooltip>
</Left>
<Right>
<ToggleAll
onClick={checked => {
const allCoins = props.networks
.filter(x => !x.isHidden)
.map(item => item.shortcut);
props.toggleGroupCoinsVisibility(allCoins, checked, false);
}}
>
{props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'}
</ToggleAll>
</Right>
</Label>
{props.networks
.filter(network => !network.isHidden)
.map(network => (
<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
); );
this.setState(prevState => ({
showAllCoins: !prevState.showAllCoins,
}));
}} }}
checked={!props.hiddenCoins.includes(network.shortcut)} >
/> {props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'}
</ToggleAll>
</Right> </Right>
</CoinRow> </Label>
))} {props.networks
</Content> .filter(network => !network.isHidden)
<Content> .map(network => (
<Label> <CoinRow key={network.shortcut}>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} /> <LogoWrapper>
<Tooltip <CoinLogo height="23" network={network.shortcut} />
content={ </LogoWrapper>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} /> <Name>{network.name}</Name>
} </Left>
maxWidth={210} <Right>
placement="right" <Switch
> isSmall
<TooltipIcon checkedIcon={false}
icon={ICONS.HELP} uncheckedIcon={false}
color={colors.TEXT_SECONDARY} onChange={visible => {
size={12} props.handleCoinVisibility(
/> network.shortcut,
</Tooltip> visible,
</Left> false
<Right> );
<ToggleAll }}
onClick={checked => { checked={!props.hiddenCoins.includes(network.shortcut)}
const allCoins = coins />
.filter(x => !x.isHidden) </Right>
.map(coin => coin.id); </CoinRow>
))}
props.toggleGroupCoinsVisibility(allCoins, checked, true); </Content>
}} <Content>
> <Label>
Show all
</ToggleAll>
</Right>
</Label>
{coins
.sort((a, b) => a.order - b.order)
.map(network => (
<CoinRow key={network.id}>
<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;

Write Preview
Loading…
Cancel
Save