arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-26 15:12:34 +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,
isExternal: boolean
): ThunkAction => (dispatch: Dispatch) => {
if (checked && isExternal) {
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: [],
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([]));
}
// supported coins
if (!checked && isExternal) {
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: allCoins,
});
storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins));
}
console.log('checked', checked);
if (checked && !isExternal) {
dispatch({
@ -432,6 +420,23 @@ export const toggleGroupCoinsVisibility = (
});
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> => {

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

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