|
|
|
@ -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);
|
|
|
|
|
|
|
|
|
|
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}>
|
|
|
|
|
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,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
this.setState(prevState => ({
|
|
|
|
|
showAllCoins: !prevState.showAllCoins,
|
|
|
|
|
}));
|
|
|
|
|
}}
|
|
|
|
|
checked={!props.hiddenCoins.includes(network.shortcut)}
|
|
|
|
|
/>
|
|
|
|
|
>
|
|
|
|
|
{props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'}
|
|
|
|
|
</ToggleAll>
|
|
|
|
|
</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}>
|
|
|
|
|
</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;
|
|
|
|
|