diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 74e5d6f5..c44cdb33 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -12,7 +12,6 @@ import * as buildUtils from 'utils/build'; import * as storageUtils from 'utils/storage'; import * as WalletActions from 'actions/WalletActions'; import * as l10nUtils from 'utils/l10n'; - import { getAccountTokens } from 'reducers/utils'; import type { Account } from 'reducers/AccountsReducer'; import type { Token } from 'reducers/TokensReducer'; @@ -61,6 +60,7 @@ const KEY_LANGUAGE: string = `${STORAGE_PATH}language`; const KEY_LOCAL_CURRENCY: string = `${STORAGE_PATH}localCurrency`; const KEY_HIDE_BALANCE: string = `${STORAGE_PATH}hideBalance`; const KEY_HIDDEN_COINS: string = `${STORAGE_PATH}hiddenCoins`; +const KEY_HIDDEN_COINS_EXTERNAL: string = `${STORAGE_PATH}hiddenCoinsExternal`; // https://github.com/STRML/react-localstorage/blob/master/react-localstorage.js // or @@ -248,13 +248,18 @@ const loadStorageData = (): ThunkAction => (dispatch: Dispatch): void => { }); } - const hiddenCoins = getHiddenCoins(); - if (hiddenCoins) { - dispatch({ - type: WALLET.SET_HIDDEN_COINS, - hiddenCoins, - }); - } + const hiddenCoins = getHiddenCoins(false); + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins, + }); + + const isExternal = true; + const hiddenCoinsExternal = getHiddenCoins(isExternal); + dispatch({ + type: WALLET.SET_HIDDEN_COINS_EXTERNAL, + hiddenCoinsExternal, + }); const userTokens: ?string = storageUtils.get(TYPE, KEY_TOKENS); if (userTokens) { @@ -361,9 +366,10 @@ export const getImportedAccounts = (): ?Array => { export const handleCoinVisibility = ( coinShortcut: string, - shouldBeVisible: boolean + shouldBeVisible: boolean, + isExternal: boolean ): ThunkAction => (dispatch: Dispatch): void => { - const configuration: Array = getHiddenCoins(); + const configuration: Array = getHiddenCoins(isExternal); let newConfig: Array = configuration; const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); @@ -373,17 +379,68 @@ export const handleCoinVisibility = ( newConfig = [...configuration, coinShortcut]; } - storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig)); - dispatch({ - type: WALLET.SET_HIDDEN_COINS, - hiddenCoins: newConfig, - }); + if (isExternal) { + storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(newConfig)); + dispatch({ + type: WALLET.SET_HIDDEN_COINS_EXTERNAL, + hiddenCoinsExternal: newConfig, + }); + } else { + storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig)); + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: newConfig, + }); + } }; -// export const handleAllCoinsVisibility => (); +export const toggleGroupCoinsVisibility = ( + allCoins: Array, + checked: boolean, + isExternal: boolean +): ThunkAction => (dispatch: Dispatch) => { + // supported coins + if (checked && !isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: [], + }); + storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify([])); + } + + if (!checked && !isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: 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 = (): Array => { - const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); +export const getHiddenCoins = (isExternal: boolean): Array => { + let coinsConfig: ?string = ''; + if (isExternal) { + coinsConfig = storageUtils.get(TYPE, KEY_HIDDEN_COINS_EXTERNAL); + } else { + coinsConfig = storageUtils.get(TYPE, KEY_HIDDEN_COINS); + } if (coinsConfig) { return JSON.parse(coinsConfig); } diff --git a/src/actions/WalletActions.js b/src/actions/WalletActions.js index 221c7c1d..ed84b5e8 100644 --- a/src/actions/WalletActions.js +++ b/src/actions/WalletActions.js @@ -29,6 +29,10 @@ export type WalletAction = type: typeof WALLET.SET_HIDDEN_COINS, hiddenCoins: Array, } + | { + type: typeof WALLET.SET_HIDDEN_COINS_EXTERNAL, + hiddenCoinsExternal: Array, + } | { type: typeof WALLET.TOGGLE_DEVICE_DROPDOWN, opened: boolean, diff --git a/src/actions/constants/wallet.js b/src/actions/constants/wallet.js index a32cddfa..562cd539 100644 --- a/src/actions/constants/wallet.js +++ b/src/actions/constants/wallet.js @@ -20,3 +20,5 @@ export const SET_LANGUAGE: 'wallet__set_language' = 'wallet__set_language'; export const SET_LOCAL_CURRENCY: 'wallet__set_local_currency' = 'wallet__set_local_currency'; export const SET_HIDE_BALANCE: 'wallet__set_hide_balance' = 'wallet__set_hide_balance'; export const SET_HIDDEN_COINS: 'wallet__set_hidden_coins' = 'wallet__set_hidden_coins'; +export const SET_HIDDEN_COINS_EXTERNAL: 'wallet__set_hidden_coins_external' = + 'wallet__set_hidden_coins_external'; diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index 9a940e0a..04d3a15e 100644 --- a/src/reducers/WalletReducer.js +++ b/src/reducers/WalletReducer.js @@ -25,6 +25,7 @@ type State = { disconnectRequest: ?TrezorDevice, selectedDevice: ?TrezorDevice, hiddenCoins: Array, + hiddenCoinsExternal: Array, }; const initialState: State = { @@ -43,6 +44,7 @@ const initialState: State = { disconnectRequest: null, selectedDevice: null, hiddenCoins: [], + hiddenCoinsExternal: [], }; export default function wallet(state: State = initialState, action: Action): State { @@ -153,6 +155,12 @@ export default function wallet(state: State = initialState, action: Action): Sta hiddenCoins: action.hiddenCoins, }; + case WALLET.SET_HIDDEN_COINS_EXTERNAL: + return { + ...state, + hiddenCoinsExternal: action.hiddenCoinsExternal, + }; + default: return state; } diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 5a63ef48..c1e1ce2b 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -56,11 +56,11 @@ class CoinMenu extends PureComponent { } getOtherCoins() { - const { hiddenCoins } = this.props.wallet; + const { hiddenCoinsExternal } = this.props.wallet; return coins .sort((a, b) => a.order - b.order) .filter(item => !item.isHidden) // hide coins globally in config - .filter(item => !hiddenCoins.includes(item.id)) + .filter(item => !hiddenCoinsExternal.includes(item.id)) .map(coin => { const row = ( { } isBottomMenuEmpty() { - const { hiddenCoins } = this.props.wallet; + const { hiddenCoinsExternal } = this.props.wallet; const numberOfVisibleNetworks = coins .filter(item => !item.isHidden) - .filter(item => !hiddenCoins.includes(item.id)); + .filter(item => !hiddenCoinsExternal.includes(item.id)); return numberOfVisibleNetworks.length <= 0; } diff --git a/src/views/Wallet/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js index 70ff7869..56a5a4ff 100644 --- a/src/views/Wallet/views/WalletSettings/Container.js +++ b/src/views/Wallet/views/WalletSettings/Container.js @@ -23,7 +23,7 @@ type DispatchProps = {| setLocalCurrency: typeof WalletActions.setLocalCurrency, setHideBalance: typeof WalletActions.setHideBalance, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, - // handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, + toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility, |}; export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; @@ -38,10 +38,10 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch), handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch), - // handleAllCoinsVisibility: bindActionCreators( - // LocalStorageActions.handleAllCoinsVisibility, - // dispatch - // ), + toggleGroupCoinsVisibility: bindActionCreators( + LocalStorageActions.toggleGroupCoinsVisibility, + dispatch + ), }); export default injectIntl( diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index fea41bda..21aab25a 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -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'; @@ -13,7 +13,14 @@ import l10nMessages from '../../index.messages'; type Props = { networks: Array, hiddenCoins: Array, + hiddenCoinsExternal: Array, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, + toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility, +}; + +type State = { + showAllCoins: boolean, + showAllCoinsExternal: boolean, }; const Wrapper = styled.div` @@ -85,99 +92,170 @@ const LogoWrapper = styled.div` align-items: center; `; -const CoinsSettings = (props: Props) => ( - - - - - {props.networks - .filter(network => !network.isHidden) - .map(network => ( - +const ToggleAll = styled.div` + cursor: pointer; +`; + +class CoinsSettings extends PureComponent { + constructor(props: Props) { + super(props); + this.state = { + showAllCoins: this.props.hiddenCoins.length === 0, + showAllCoinsExternal: this.props.hiddenCoinsExternal.length === 0, + }; + } + + render() { + const { props } = this; + return ( + + + + - ))} - - - - {coins - .sort((a, b) => a.order - b.order) - .map(network => ( - + + {props.networks + .filter(network => !network.isHidden) + .map(network => ( + + + + + + {network.name} + + + { + props.handleCoinVisibility( + network.shortcut, + visible, + false + ); + }} + checked={!props.hiddenCoins.includes(network.shortcut)} + /> + + + ))} + + + - - -); + + {coins + .sort((a, b) => a.order - b.order) + .map(network => ( + + + + + + {network.coinName} + + + { + props.handleCoinVisibility( + network.id, + visible, + true + ); + }} + checked={ + !props.hiddenCoinsExternal.includes(network.id) + } + /> + + + ))} + + + + ); + } +} export default CoinsSettings; diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 3642b6ba..a9b4626b 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -73,7 +73,10 @@ const TooltipIcon = styled(Icon)` `; const buildCurrencyOption = currency => { - return { value: currency, label: currency.toUpperCase() }; + return { + value: currency, + label: currency.toUpperCase(), + }; }; const WalletSettings = (props: Props) => ( @@ -117,7 +120,9 @@ const WalletSettings = (props: Props) => (