From 3e5b6c880693f5d82408c5db41b57160585617e8 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 14:33:28 +0200 Subject: [PATCH 01/35] render coin visibility switcher --- .../WalletSettings/components/Coins/index.js | 104 ++++++++++++++++++ .../Wallet/views/WalletSettings/index.js | 4 + .../views/WalletSettings/index.messages.js | 8 ++ 3 files changed, 116 insertions(+) create mode 100644 src/views/Wallet/views/WalletSettings/components/Coins/index.js diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js new file mode 100644 index 00000000..57b57512 --- /dev/null +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -0,0 +1,104 @@ +/* @flow */ +import styled from 'styled-components'; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { FONT_SIZE } from 'config/variables'; + +import { Tooltip, Icon, icons as ICONS, colors, Switch, CoinLogo } from 'trezor-ui-components'; +import l10nMessages from '../../index.messages'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; +`; + +const Label = styled.div` + display: flex; + color: ${colors.TEXT_SECONDARY}; + align-items: center; +`; + +const Row = styled.div` + display: flex; + flex-direction: column; +`; + +const TooltipIcon = styled(Icon)` + margin-left: 6px; + cursor: pointer; +`; + +const Content = styled.div` + display: flex; + margin-top: 20px; + flex-direction: column; +`; + +const CoinRow = styled.div` + height: 50px; + align-items: center; + display: flex; + border-bottom: 1px solid ${colors.DIVIDER}; + color: ${colors.TEXT_PRIMARY}; + justify-content: space-between; + + &:first-child { + border-top: 1px solid ${colors.DIVIDER}; + } +`; + +const Left = styled.div` + display: flex; + align-items: center; +`; + +const Right = styled.div``; + +const Name = styled.div` + display: flex; + font-size: ${FONT_SIZE.BIG}; + color: ${colors.TEXT_PRIMARY}; +`; + +const LogoWrapper = styled.div` + display: flex; + width: 45px; + justify-content: center; + align-items: center; +`; + +const CoinsSettings = (props: Props) => ( + + + + + {props.networks + .filter(network => !network.isHidden) + .map(network => ( + + + + + + {network.name} + + + {}} checked /> + + + ))} + + + +); + +export default CoinsSettings; diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index e8c4a752..866b5a1a 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -17,6 +17,7 @@ import { import { FIAT_CURRENCIES } from 'config/app'; import { FONT_SIZE } from 'config/variables'; import l10nCommonMessages from 'views/common.messages'; +import Coins from './components/Coins'; import l10nMessages from './index.messages'; import type { Props } from './Container'; @@ -109,6 +110,9 @@ const WalletSettings = (props: Props) => ( /> +
+ +
diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index 43557498..abf718ee 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -16,6 +16,14 @@ const definedMessages: Messages = defineMessages({ id: 'TR_THE_CHANGES_ARE_SAVED', defaultMessage: 'The changes are saved automatically as they are made', }, + TR_VISIBLE_COINS: { + id: 'TR_VISIBLE_COINS', + defaultMessage: 'Visible coins', + }, + TR_VISIBLE_COINS_EXPLAINED: { + id: 'TR_VISIBLE_COINS_EXPLAINED', + defaultMessage: 'The changes are saved automatically as they are made', + }, }); export default definedMessages; From 0833d1597a395325b71d2896a3196a15d33428d9 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 14:36:41 +0200 Subject: [PATCH 02/35] remove tooltip --- .../views/WalletSettings/components/Coins/index.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 57b57512..d6a11abc 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -4,7 +4,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; -import { Tooltip, Icon, icons as ICONS, colors, Switch, CoinLogo } from 'trezor-ui-components'; +import { colors, Switch, CoinLogo } from 'trezor-ui-components'; import l10nMessages from '../../index.messages'; const Wrapper = styled.div` @@ -23,11 +23,6 @@ const Row = styled.div` flex-direction: column; `; -const TooltipIcon = styled(Icon)` - margin-left: 6px; - cursor: pointer; -`; - const Content = styled.div` display: flex; margin-top: 20px; @@ -72,13 +67,6 @@ const CoinsSettings = (props: Props) => ( {props.networks From cc217c7aa1fa8264d17008a4f1f17c02f48fa83d Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 18:40:00 +0200 Subject: [PATCH 03/35] add logic for hiding coins --- src/actions/LocalStorageActions.js | 26 ++++++++ .../Wallet/views/WalletSettings/Container.js | 3 + .../WalletSettings/components/Coins/index.js | 64 +++++++++++-------- .../Wallet/views/WalletSettings/index.js | 6 +- 4 files changed, 71 insertions(+), 28 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 84fb9710..475557fb 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -60,6 +60,7 @@ const KEY_BETA_MODAL: string = '/betaModalPrivacy'; // this key needs to be comp 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`; // https://github.com/STRML/react-localstorage/blob/master/react-localstorage.js // or @@ -350,6 +351,31 @@ export const getImportedAccounts = (): ?Array => { return null; }; +export const handleCoinVisibility = ( + coinShortcut: String, + shouldBeVisible: boolean +): ThunkAction => (): void => { + const configuration: ?Array = getHiddenCoins(); + let newConfig = configuration; + const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); + + if (isAlreadyHidden && shouldBeVisible) { + newConfig = configuration.filter(coin => coin !== coinShortcut); + } else if (!isAlreadyHidden) { + newConfig = [...configuration, coinShortcut]; + } + + storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig)); +}; + +export const getHiddenCoins = (): ?Array => { + const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); + if (coinsConfig) { + return JSON.parse(coinsConfig); + } + return []; +}; + export const removeImportedAccounts = (device: TrezorDevice): ThunkAction => ( dispatch: Dispatch ): void => { diff --git a/src/views/Wallet/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js index 19b4390b..3d30be05 100644 --- a/src/views/Wallet/views/WalletSettings/Container.js +++ b/src/views/Wallet/views/WalletSettings/Container.js @@ -5,6 +5,7 @@ import { injectIntl } from 'react-intl'; import type { IntlShape } from 'react-intl'; import * as WalletActions from 'actions/WalletActions'; +import * as LocalStorageActions from 'actions/LocalStorageActions'; import type { State, Dispatch } from 'flowtype'; import WalletSettings from './index'; @@ -21,6 +22,7 @@ type StateProps = {| type DispatchProps = {| setLocalCurrency: typeof WalletActions.setLocalCurrency, setHideBalance: typeof WalletActions.setHideBalance, + handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, |}; export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; @@ -34,6 +36,7 @@ const mapStateToProps = (state: State): StateProps => ({ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch), + handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, 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 d6a11abc..0f00af28 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, { Component } from 'react'; import { FormattedMessage } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; @@ -62,31 +62,41 @@ const LogoWrapper = styled.div` align-items: center; `; -const CoinsSettings = (props: Props) => ( - - - - - {props.networks - .filter(network => !network.isHidden) - .map(network => ( - - - - - - {network.name} - - - {}} checked /> - - - ))} - - - -); +class CoinsSettings extends Component { + render() { + const { networks, handleCoinVisibility } = this.props; + return ( + + + + + {networks + .filter(network => !network.isHidden) + .map(network => ( + + + + + + {network.name} + + + { + handleCoinVisibility(network.shortcut, !isVisible); + }} + checked + /> + + + ))} + + + + ); + } +} export default CoinsSettings; diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 866b5a1a..405ed3d0 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -78,6 +78,7 @@ const buildCurrencyOption = currency => { const WalletSettings = (props: Props) => ( + {console.log(props.localStorage)}
@@ -111,7 +112,10 @@ const WalletSettings = (props: Props) => (
- +
From 184d8a2b236d0ceb2e5cc9e5994f63bd7b838806 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 18:59:12 +0200 Subject: [PATCH 04/35] dispatch new action --- src/actions/LocalStorageActions.js | 6 +- src/actions/constants/wallet.js | 1 + src/reducers/WalletReducer.js | 8 +++ .../WalletSettings/components/Coins/index.js | 69 +++++++++---------- .../Wallet/views/WalletSettings/index.js | 2 +- 5 files changed, 47 insertions(+), 39 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 475557fb..2976e23c 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -354,7 +354,7 @@ export const getImportedAccounts = (): ?Array => { export const handleCoinVisibility = ( coinShortcut: String, shouldBeVisible: boolean -): ThunkAction => (): void => { +): ThunkAction => (dispatch: Dispatch): void => { const configuration: ?Array = getHiddenCoins(); let newConfig = configuration; const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); @@ -366,6 +366,10 @@ export const handleCoinVisibility = ( } storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig)); + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: newConfig, + }); }; export const getHiddenCoins = (): ?Array => { diff --git a/src/actions/constants/wallet.js b/src/actions/constants/wallet.js index fa3bf052..a32cddfa 100644 --- a/src/actions/constants/wallet.js +++ b/src/actions/constants/wallet.js @@ -19,3 +19,4 @@ export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar' 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'; diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index fab169a2..2a56c1a7 100644 --- a/src/reducers/WalletReducer.js +++ b/src/reducers/WalletReducer.js @@ -24,6 +24,7 @@ type State = { firstLocationChange: boolean, disconnectRequest: ?TrezorDevice, selectedDevice: ?TrezorDevice, + hiddenCoins: ?Array, }; const initialState: State = { @@ -41,6 +42,7 @@ const initialState: State = { initialPathname: null, disconnectRequest: null, selectedDevice: null, + hiddenCoins: [], }; export default function wallet(state: State = initialState, action: Action): State { @@ -145,6 +147,12 @@ export default function wallet(state: State = initialState, action: Action): Sta hideBalance: action.toggled, }; + case WALLET.SET_HIDDEN_COINS: + return { + ...state, + hiddenCoins: action.hiddenCoins, + }; + default: return state; } diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 0f00af28..93c1a6b0 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, { Component } from 'react'; +import React from 'react'; import { FormattedMessage } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; @@ -62,41 +62,36 @@ const LogoWrapper = styled.div` align-items: center; `; -class CoinsSettings extends Component { - render() { - const { networks, handleCoinVisibility } = this.props; - return ( - - - - - {networks - .filter(network => !network.isHidden) - .map(network => ( - - - - - - {network.name} - - - { - handleCoinVisibility(network.shortcut, !isVisible); - }} - checked - /> - - - ))} - - - - ); - } -} +const CoinsSettings = (props: Props) => ( + + + + + {props.networks + .filter(network => !network.isHidden) + .map(network => ( + + + + + + {network.name} + + + { + props.handleCoinVisibility(network.shortcut, !isVisible); + }} + checked={props.hiddenCoins.includes(network.shortcut)} + /> + + + ))} + + + +); export default CoinsSettings; diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 405ed3d0..33929d38 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -78,7 +78,6 @@ const buildCurrencyOption = currency => { const WalletSettings = (props: Props) => ( - {console.log(props.localStorage)}
@@ -115,6 +114,7 @@ const WalletSettings = (props: Props) => (
From 7050cf006d31b3ed13ef8a79a66e811c8f1d5920 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 19:05:06 +0200 Subject: [PATCH 05/35] load first config from local storage if there is one --- src/actions/LocalStorageActions.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 2976e23c..7dc24d11 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -248,6 +248,14 @@ const loadStorageData = (): ThunkAction => (dispatch: Dispatch): void => { }); } + const hiddenCoins = getHiddenCoins(); + if (hiddenCoins) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins, + }); + } + const userTokens: ?string = storageUtils.get(TYPE, KEY_TOKENS); if (userTokens) { dispatch({ From a0c4a6e477d1bec4fcf114a5789f5d685ce01782 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 19:10:19 +0200 Subject: [PATCH 06/35] filter coins in menu --- .../components/LeftNavigation/components/CoinMenu/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index f3ee7fda..346065c5 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -76,11 +76,13 @@ class CoinMenu extends PureComponent { } render() { + const { hiddenCoins } = this.props.wallet; const { config } = this.props.localStorage; return ( {config.networks - .filter(item => !item.isHidden) + .filter(item => !item.isHidden) // filter coins globally in config + .filter(item => hiddenCoins.includes(item.shortcut)) // filter coins by user settings .sort((a, b) => a.order - b.order) .map(item => ( Date: Tue, 16 Apr 2019 19:24:46 +0200 Subject: [PATCH 07/35] add secondary coins --- .../components/CoinMenu/index.js | 7 +++++-- .../WalletSettings/components/Coins/index.js | 21 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 346065c5..f9be9c7c 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -41,8 +41,11 @@ class CoinMenu extends PureComponent { } getOtherCoins() { + const { hiddenCoins } = 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)) .map(coin => { const row = ( { return ( {config.networks - .filter(item => !item.isHidden) // filter coins globally in config - .filter(item => hiddenCoins.includes(item.shortcut)) // filter coins by user settings + .filter(item => !item.isHidden) // hide coins globally in config + .filter(item => hiddenCoins.includes(item.shortcut)) // hide coins by user settings .sort((a, b) => a.order - b.order) .map(item => ( ( ))} + {coins + .sort((a, b) => a.order - b.order) + .map(network => ( + + + + + + {network.coinName} + + + { + props.handleCoinVisibility(network.id, !isVisible); + }} + checked={props.hiddenCoins.includes(network.id)} + /> + + + ))} From 9aa7e75f010ca3a9348e5cbd306d2433d8e8be57 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 19:43:37 +0200 Subject: [PATCH 08/35] hide also coins from dashboard --- src/views/Wallet/views/Dashboard/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index cbc38daa..258c4e09 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -76,6 +76,7 @@ const Dashboard = (props: Props) => ( {props.localStorage.config.networks .filter(item => !item.isHidden) + .filter(item => props.wallet.hiddenCoins.includes(item.shortcut)) .map(network => ( Date: Tue, 16 Apr 2019 19:50:21 +0200 Subject: [PATCH 09/35] separate external wallets --- .../WalletSettings/components/Coins/index.js | 18 ++++++++++++++---- .../views/WalletSettings/index.messages.js | 4 ++++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 6bae2b0a..517d052e 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -15,6 +15,7 @@ const Wrapper = styled.div` const Label = styled.div` display: flex; + padding: 10px 0; color: ${colors.TEXT_SECONDARY}; align-items: center; `; @@ -26,7 +27,7 @@ const Row = styled.div` const Content = styled.div` display: flex; - margin-top: 20px; + margin: 20px 0; flex-direction: column; `; @@ -41,6 +42,10 @@ const CoinRow = styled.div` &:first-child { border-top: 1px solid ${colors.DIVIDER}; } + + &:last-child { + border-bottom: 0; + } `; const Left = styled.div` @@ -66,10 +71,10 @@ const LogoWrapper = styled.div` const CoinsSettings = (props: Props) => ( - + {props.networks .filter(network => !network.isHidden) .map(network => ( @@ -90,6 +95,11 @@ const CoinsSettings = (props: Props) => ( ))} + + + {coins .sort((a, b) => a.order - b.order) .map(network => ( diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index abf718ee..36a6684d 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -20,6 +20,10 @@ const definedMessages: Messages = defineMessages({ id: 'TR_VISIBLE_COINS', defaultMessage: 'Visible coins', }, + TR_VISIBLE_COINS_EXTERNAL: { + id: 'TR_VISIBLE_COINS', + defaultMessage: 'Visible external coins', + }, TR_VISIBLE_COINS_EXPLAINED: { id: 'TR_VISIBLE_COINS_EXPLAINED', defaultMessage: 'The changes are saved automatically as they are made', From 53c8fd4eb53d90f92c1c7e2efd438fe0667c2778 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 16 Apr 2019 20:33:48 +0200 Subject: [PATCH 10/35] add empty message for coin menu --- .../components/CoinMenu/index.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index f9be9c7c..b8dfdc11 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -26,6 +26,13 @@ const StyledLink = styled(Link)` } `; +const Empty = styled.div` + display: flex; + justify-content: center; + align-items: center; + min-height: 50px; +`; + class CoinMenu extends PureComponent { getBaseUrl() { const { selectedDevice } = this.props.wallet; @@ -78,11 +85,24 @@ class CoinMenu extends PureComponent { }); } + isEmpty(networks) { + const numberOfVisibleNetworks = networks + .filter(item => !item.isHidden) // hide coins globally in config + .filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut)); + + return numberOfVisibleNetworks.length <= 0; + } + render() { const { hiddenCoins } = this.props.wallet; const { config } = this.props.localStorage; return ( + {this.isEmpty(config.networks) && ( + + Please select a coin in application settings + + )} {config.networks .filter(item => !item.isHidden) // hide coins globally in config .filter(item => hiddenCoins.includes(item.shortcut)) // hide coins by user settings From 7d5b08aa3bfde979fefcd9093ee9dc4f84ce4729 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Apr 2019 16:20:14 +0200 Subject: [PATCH 11/35] hide and show menu parts according to visible coins --- .../components/CoinMenu/index.js | 44 ++++++++++++++----- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index b8dfdc11..1162a5d7 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -26,13 +26,21 @@ const StyledLink = styled(Link)` } `; -const Empty = styled.div` +const Empty = styled.span` display: flex; justify-content: center; align-items: center; min-height: 50px; `; +const StyledLinkEmpty = styled(Link)` + padding: 0 5px; +`; + +const Gray = styled.span` + color: ${colors.TEXT_SECONDARY}; +`; + class CoinMenu extends PureComponent { getBaseUrl() { const { selectedDevice } = this.props.wallet; @@ -85,22 +93,36 @@ class CoinMenu extends PureComponent { }); } - isEmpty(networks) { - const numberOfVisibleNetworks = networks + isTopMenuEmpty() { + const numberOfVisibleNetworks = this.props.localStorage.config.networks .filter(item => !item.isHidden) // hide coins globally in config .filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut)); return numberOfVisibleNetworks.length <= 0; } + isBottomMenuEmpty() { + const { hiddenCoins } = this.props.wallet; + const numberOfVisibleNetworks = coins + .filter(item => !item.isHidden) + .filter(item => hiddenCoins.includes(item.id)); + + return numberOfVisibleNetworks.length <= 0; + } + + isMenuEmpty() { + return this.isTopMenuEmpty() && this.isBottomMenuEmpty(); + } + render() { const { hiddenCoins } = this.props.wallet; const { config } = this.props.localStorage; return ( - {this.isEmpty(config.networks) && ( + {this.isMenuEmpty() && ( - Please select a coin in application settings + Select a coin + in application settings )} {config.networks @@ -120,11 +142,13 @@ class CoinMenu extends PureComponent { /> ))} - } - hasBorder - /> + {!this.isBottomMenuEmpty() && ( + } + hasBorder + /> + )} {this.getOtherCoins()} ); From dc4efba4772503b1f29172c7e230bbae9848dafc Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Apr 2019 16:42:34 +0200 Subject: [PATCH 12/35] added explaining tooltips --- .../WalletSettings/components/Coins/index.js | 35 ++++++++++++++----- .../views/WalletSettings/index.messages.js | 2 +- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 517d052e..20172da5 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; import coins from 'constants/coins'; -import { colors, Switch, CoinLogo } from 'trezor-ui-components'; +import { colors, Switch, CoinLogo, Tooltip, Icon, icons as ICONS } from 'trezor-ui-components'; import l10nMessages from '../../index.messages'; const Wrapper = styled.div` @@ -13,13 +13,6 @@ const Wrapper = styled.div` flex-direction: column; `; -const Label = styled.div` - display: flex; - padding: 10px 0; - color: ${colors.TEXT_SECONDARY}; - align-items: center; -`; - const Row = styled.div` display: flex; flex-direction: column; @@ -31,6 +24,18 @@ const Content = styled.div` flex-direction: column; `; +const Label = styled.div` + display: flex; + padding: 10px 0; + color: ${colors.TEXT_SECONDARY}; + align-items: center; +`; + +const TooltipIcon = styled(Icon)` + margin-left: 6px; + cursor: pointer; +`; + const CoinRow = styled.div` height: 50px; align-items: center; @@ -74,6 +79,13 @@ const CoinsSettings = (props: Props) => ( {props.networks .filter(network => !network.isHidden) @@ -99,6 +111,13 @@ const CoinsSettings = (props: Props) => ( {coins .sort((a, b) => a.order - b.order) diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index 36a6684d..c669d4ab 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -26,7 +26,7 @@ const definedMessages: Messages = defineMessages({ }, TR_VISIBLE_COINS_EXPLAINED: { id: 'TR_VISIBLE_COINS_EXPLAINED', - defaultMessage: 'The changes are saved automatically as they are made', + defaultMessage: 'Select a coins which will be visible in wallet', }, }); From 36848591c025a453eef4971b8e4a5acbd21b04cb Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Apr 2019 17:13:23 +0200 Subject: [PATCH 13/35] fix some flow --- src/actions/LocalStorageActions.js | 4 ++-- src/actions/WalletActions.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 7dc24d11..5329cf57 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -363,8 +363,8 @@ export const handleCoinVisibility = ( coinShortcut: String, shouldBeVisible: boolean ): ThunkAction => (dispatch: Dispatch): void => { - const configuration: ?Array = getHiddenCoins(); - let newConfig = configuration; + const configuration: Array = getHiddenCoins(); + let newConfig: Array = configuration; const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); if (isAlreadyHidden && shouldBeVisible) { diff --git a/src/actions/WalletActions.js b/src/actions/WalletActions.js index 1aa9a853..c25531bb 100644 --- a/src/actions/WalletActions.js +++ b/src/actions/WalletActions.js @@ -25,6 +25,10 @@ export type WalletAction = state?: RouterLocationState, pathname?: string, } + | { + type: typeof WALLET.SET_HIDDEN_COINS, + hiddenCoins: Array, + } | { type: typeof WALLET.TOGGLE_DEVICE_DROPDOWN, opened: boolean, From ec5786ad03ea3ddd548f2d93df2068eecd55df12 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Apr 2019 19:14:06 +0200 Subject: [PATCH 14/35] fix all flow --- src/actions/LocalStorageActions.js | 8 ++++---- src/actions/WalletActions.js | 2 +- src/reducers/WalletReducer.js | 2 +- .../Wallet/views/WalletSettings/components/Coins/index.js | 8 ++++++++ 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 5329cf57..bfc652cc 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -360,11 +360,11 @@ export const getImportedAccounts = (): ?Array => { }; export const handleCoinVisibility = ( - coinShortcut: String, + coinShortcut: string, shouldBeVisible: boolean ): ThunkAction => (dispatch: Dispatch): void => { - const configuration: Array = getHiddenCoins(); - let newConfig: Array = configuration; + const configuration: Array = getHiddenCoins(); + let newConfig: Array = configuration; const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); if (isAlreadyHidden && shouldBeVisible) { @@ -380,7 +380,7 @@ export const handleCoinVisibility = ( }); }; -export const getHiddenCoins = (): ?Array => { +export const getHiddenCoins = (): Array => { const coinsConfig: ?string = 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 c25531bb..221c7c1d 100644 --- a/src/actions/WalletActions.js +++ b/src/actions/WalletActions.js @@ -27,7 +27,7 @@ export type WalletAction = } | { type: typeof WALLET.SET_HIDDEN_COINS, - hiddenCoins: Array, + hiddenCoins: Array, } | { type: typeof WALLET.TOGGLE_DEVICE_DROPDOWN, diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index 2a56c1a7..9a940e0a 100644 --- a/src/reducers/WalletReducer.js +++ b/src/reducers/WalletReducer.js @@ -24,7 +24,7 @@ type State = { firstLocationChange: boolean, disconnectRequest: ?TrezorDevice, selectedDevice: ?TrezorDevice, - hiddenCoins: ?Array, + hiddenCoins: Array, }; const initialState: State = { diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 20172da5..ed18de98 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -4,10 +4,18 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; import coins from 'constants/coins'; +import * as LocalStorageActions from 'actions/LocalStorageActions'; +import type { Network } from 'flowtype'; import { colors, Switch, CoinLogo, Tooltip, Icon, icons as ICONS } from 'trezor-ui-components'; import l10nMessages from '../../index.messages'; +type Props = { + networks: Array, + hiddenCoins: Array, + handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, +}; + const Wrapper = styled.div` display: flex; flex-direction: column; From 6ad33b23ddc1f5262e1cdc8ca7aa7fd0a92b48ae Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Apr 2019 19:37:09 +0200 Subject: [PATCH 15/35] fix test name --- src/utils/__tests__/{l10n.js => l10n.test.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/utils/__tests__/{l10n.js => l10n.test.js} (100%) diff --git a/src/utils/__tests__/l10n.js b/src/utils/__tests__/l10n.test.js similarity index 100% rename from src/utils/__tests__/l10n.js rename to src/utils/__tests__/l10n.test.js From 5220dcf108a26f10f0f37b46b060918770504d28 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 22 Apr 2019 20:09:04 +0200 Subject: [PATCH 16/35] update TR_VISIBLE_COINS_EXPLAINED --- src/views/Wallet/views/WalletSettings/index.messages.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index c669d4ab..12dd5832 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -26,7 +26,8 @@ const definedMessages: Messages = defineMessages({ }, TR_VISIBLE_COINS_EXPLAINED: { id: 'TR_VISIBLE_COINS_EXPLAINED', - defaultMessage: 'Select a coins which will be visible in wallet', + defaultMessage: + 'Select the coins you wish to see in the walet interface. You will be able to change your preferences later.', }, }); From 777f951a00b020a4032227e3fa222e526fa8fb5d Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 11:48:49 +0200 Subject: [PATCH 17/35] fix typo --- src/views/Wallet/views/WalletSettings/index.messages.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js index 12dd5832..b22ad616 100644 --- a/src/views/Wallet/views/WalletSettings/index.messages.js +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -27,7 +27,7 @@ const definedMessages: Messages = defineMessages({ TR_VISIBLE_COINS_EXPLAINED: { id: 'TR_VISIBLE_COINS_EXPLAINED', defaultMessage: - 'Select the coins you wish to see in the walet interface. You will be able to change your preferences later.', + 'Select the coins you wish to see in the wallet interface. You will be able to change your preferences later.', }, }); From bf47a1684b1669948f22219f67d88f70449439cf Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 12:13:13 +0200 Subject: [PATCH 18/35] move link --- .../LeftNavigation/components/CoinMenu/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 1162a5d7..ee3e7e20 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -34,7 +34,7 @@ const Empty = styled.span` `; const StyledLinkEmpty = styled(Link)` - padding: 0 5px; + padding: 0; `; const Gray = styled.span` @@ -121,8 +121,10 @@ class CoinMenu extends PureComponent { {this.isMenuEmpty() && ( - Select a coin - in application settings + + Select a coin in{' '} + application settings + )} {config.networks From 7abc4a61fe4e3e3c1cd4b00ee1590afb393df57f Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 13:44:08 +0200 Subject: [PATCH 19/35] fix selected coins at start, handle not visible coins properly --- src/actions/LocalStorageActions.js | 2 +- .../LeftNavigation/components/CoinMenu/index.js | 6 +++--- src/views/Wallet/views/Dashboard/index.js | 2 +- .../views/WalletSettings/components/Coins/index.js | 12 ++++++------ 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index bfc652cc..7f242269 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -367,7 +367,7 @@ export const handleCoinVisibility = ( let newConfig: Array = configuration; const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); - if (isAlreadyHidden && shouldBeVisible) { + if (shouldBeVisible) { newConfig = configuration.filter(coin => coin !== coinShortcut); } else if (!isAlreadyHidden) { newConfig = [...configuration, coinShortcut]; diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index ee3e7e20..93be4c52 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -60,7 +60,7 @@ class CoinMenu extends PureComponent { 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 => !hiddenCoins.includes(item.id)) .map(coin => { const row = ( { const { hiddenCoins } = this.props.wallet; const numberOfVisibleNetworks = coins .filter(item => !item.isHidden) - .filter(item => hiddenCoins.includes(item.id)); + .filter(item => !hiddenCoins.includes(item.id)); return numberOfVisibleNetworks.length <= 0; } @@ -129,7 +129,7 @@ class CoinMenu extends PureComponent { )} {config.networks .filter(item => !item.isHidden) // hide coins globally in config - .filter(item => hiddenCoins.includes(item.shortcut)) // hide coins by user settings + .filter(item => !hiddenCoins.includes(item.shortcut)) // hide coins by user settings .sort((a, b) => a.order - b.order) .map(item => ( ( {props.localStorage.config.networks .filter(item => !item.isHidden) - .filter(item => props.wallet.hiddenCoins.includes(item.shortcut)) + .filter(item => !props.wallet.hiddenCoins.includes(item.shortcut)) .map(network => ( ( { - props.handleCoinVisibility(network.shortcut, !isVisible); + onChange={visible => { + props.handleCoinVisibility(network.shortcut, visible); }} - checked={props.hiddenCoins.includes(network.shortcut)} + checked={!props.hiddenCoins.includes(network.shortcut)} /> @@ -139,10 +139,10 @@ const CoinsSettings = (props: Props) => ( { - props.handleCoinVisibility(network.id, !isVisible); + onChange={visible => { + props.handleCoinVisibility(network.id, visible); }} - checked={props.hiddenCoins.includes(network.id)} + checked={!props.hiddenCoins.includes(network.id)} /> From 97f372fe01f806ce4ca5194b79cf0941abaf7d19 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 13:46:03 +0200 Subject: [PATCH 20/35] fix empty case --- .../components/LeftNavigation/components/CoinMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 93be4c52..6d85c2bc 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -96,7 +96,7 @@ class CoinMenu extends PureComponent { isTopMenuEmpty() { const numberOfVisibleNetworks = this.props.localStorage.config.networks .filter(item => !item.isHidden) // hide coins globally in config - .filter(item => this.props.wallet.hiddenCoins.includes(item.shortcut)); + .filter(item => !this.props.wallet.hiddenCoins.includes(item.shortcut)); return numberOfVisibleNetworks.length <= 0; } From bbabdca732e53725074da84d7d36750e427a280d Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 13:58:05 +0200 Subject: [PATCH 21/35] add translations --- .../LeftNavigation/components/CoinMenu/index.js | 14 ++++++++++++-- .../components/CoinMenu/index.messages.js | 9 +++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 6d85c2bc..5a63ef48 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -122,8 +122,18 @@ class CoinMenu extends PureComponent { {this.isMenuEmpty() && ( - Select a coin in{' '} - application settings + + + + ), + }} + />{' '} )} diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js index 78b43096..fa837418 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js @@ -7,6 +7,15 @@ const definedMessages: Messages = defineMessages({ id: 'TR_OTHER_COINS', defaultMessage: 'Other coins', }, + TR_SELECT_COINS: { + id: 'TR_SELECT_COINS', + description: 'COMPLETE SENTENCE: Select a coin in application settings', + defaultMessage: 'Select a coin in {TR_SELECT_COINS_LINK}', + }, + TR_SELECT_COINS_LINK: { + id: 'TR_SELECT_COINS_LINK', + defaultMessage: 'application settings', + }, }); export default definedMessages; From ee9ebd29160d0f1fcf6680a68e8a6e5745b10b61 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 14:35:07 +0200 Subject: [PATCH 22/35] smaller switch in settings, add show all --- src/actions/LocalStorageActions.js | 2 + .../Wallet/views/WalletSettings/Container.js | 5 ++ .../WalletSettings/components/Coins/index.js | 66 ++++++++++++++----- .../Wallet/views/WalletSettings/index.js | 5 ++ 4 files changed, 61 insertions(+), 17 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 7f242269..74e5d6f5 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -380,6 +380,8 @@ export const handleCoinVisibility = ( }); }; +// export const handleAllCoinsVisibility => (); + export const getHiddenCoins = (): Array => { const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); if (coinsConfig) { diff --git a/src/views/Wallet/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js index 3d30be05..70ff7869 100644 --- a/src/views/Wallet/views/WalletSettings/Container.js +++ b/src/views/Wallet/views/WalletSettings/Container.js @@ -23,6 +23,7 @@ type DispatchProps = {| setLocalCurrency: typeof WalletActions.setLocalCurrency, setHideBalance: typeof WalletActions.setHideBalance, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, + // handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, |}; export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; @@ -37,6 +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 + // ), }); 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 7d3ae0ef..f95e3b42 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -35,6 +35,7 @@ const Content = styled.div` const Label = styled.div` display: flex; padding: 10px 0; + justify-content: space-between; color: ${colors.TEXT_SECONDARY}; align-items: center; `; @@ -66,7 +67,10 @@ const Left = styled.div` align-items: center; `; -const Right = styled.div``; +const Right = styled.div` + display: flex; + align-items: center; +`; const Name = styled.div` display: flex; @@ -86,14 +90,23 @@ const CoinsSettings = (props: Props) => ( {props.networks .filter(network => !network.isHidden) @@ -107,6 +120,11 @@ const CoinsSettings = (props: Props) => ( { props.handleCoinVisibility(network.shortcut, visible); }} @@ -118,14 +136,23 @@ const CoinsSettings = (props: Props) => ( {coins .sort((a, b) => a.order - b.order) @@ -139,6 +166,11 @@ const CoinsSettings = (props: Props) => ( { props.handleCoinVisibility(network.id, visible); }} diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 33929d38..a9a6e020 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -103,6 +103,11 @@ const WalletSettings = (props: Props) => ( { props.setHideBalance(checked); }} From 2959271a40e15e2e6ba6ce3882a943726c55a632 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 14:36:32 +0200 Subject: [PATCH 23/35] use isSmall prop for switch size --- .../Wallet/views/WalletSettings/components/Coins/index.js | 8 ++------ src/views/Wallet/views/WalletSettings/index.js | 4 +--- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index f95e3b42..724157f7 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -120,9 +120,7 @@ const CoinsSettings = (props: Props) => ( { @@ -166,9 +164,7 @@ const CoinsSettings = (props: Props) => ( { diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index a9a6e020..3642b6ba 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -103,9 +103,7 @@ const WalletSettings = (props: Props) => ( { From 59a3284e67ba8a3470118ce15648ecaade87e3cc Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 16:39:43 +0200 Subject: [PATCH 24/35] part of show all --- src/actions/LocalStorageActions.js | 31 ++++++++++++- .../Wallet/views/WalletSettings/Container.js | 10 ++--- .../WalletSettings/components/Coins/index.js | 43 ++++++++++++++++++- .../Wallet/views/WalletSettings/index.js | 6 ++- 4 files changed, 80 insertions(+), 10 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 74e5d6f5..d4f3badf 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'; @@ -380,7 +379,35 @@ export const handleCoinVisibility = ( }); }; -// export const handleAllCoinsVisibility => (); +export const handleAllCoinsVisibility = ( + checked: boolean, + allCoins: Array, + hiddenCoins: Array +): ThunkAction => (dispatch: Dispatch) => { + const configuration: Array = getHiddenCoins(); + const newConfig: Array = configuration; + let result = []; + + console.log('old config', newConfig); + + if (checked) { + const intersection = allCoins.filter(x => hiddenCoins.includes(x)); + if (intersection) { + result = newConfig.filter(x => !intersection.includes(x)); + } + } else { + const intersection = allCoins.filter(x => hiddenCoins.includes(x)); + console.log('intersection', intersection); + result = [configuration, ...intersection]; + } + + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: result, + }); + + storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(result)); +}; export const getHiddenCoins = (): Array => { const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); diff --git a/src/views/Wallet/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js index 70ff7869..0e185bb6 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, + handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, |}; 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 - // ), + handleAllCoinsVisibility: bindActionCreators( + LocalStorageActions.handleAllCoinsVisibility, + 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 724157f7..8b86ed2f 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -14,6 +14,7 @@ type Props = { networks: Array, hiddenCoins: Array, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, + handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, }; const Wrapper = styled.div` @@ -85,6 +86,10 @@ const LogoWrapper = styled.div` align-items: center; `; +const ToggleAll = styled.span` + cursor: pointer; +`; + const CoinsSettings = (props: Props) => ( @@ -106,7 +111,25 @@ const CoinsSettings = (props: Props) => ( /> - Show all + + { + const allCoins = props.networks + .filter(x => !x.isHidden) + .map(item => item.shortcut); + + props.handleAllCoinsVisibility( + checked, + allCoins, + props.hiddenCoins + ); + }} + > + {props.hiddenCoins.every(val => props.networks.includes(val)) + ? 'Hide all' + : 'Show all'} + + {props.networks .filter(network => !network.isHidden) @@ -150,7 +173,23 @@ const CoinsSettings = (props: Props) => ( /> - Show all + + { + const allCoins = coins + .filter(x => !x.isHidden) + .map(coin => coin.id); + + props.handleAllCoinsVisibility( + checked, + allCoins, + props.hiddenCoins + ); + }} + > + Show all + + {coins .sort((a, b) => a.order - b.order) diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 3642b6ba..677cd5f2 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,6 +120,7 @@ const WalletSettings = (props: Props) => ( From 15cfcee50027fb4da576cff5596fd958f268b3da Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 23 Apr 2019 16:44:52 +0200 Subject: [PATCH 25/35] remove show all --- .../Wallet/views/WalletSettings/components/Coins/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 724157f7..fea41bda 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -106,7 +106,7 @@ const CoinsSettings = (props: Props) => ( /> - Show all + {props.networks .filter(network => !network.isHidden) @@ -150,7 +150,7 @@ const CoinsSettings = (props: Props) => ( /> - Show all + {coins .sort((a, b) => a.order - b.order) From e32d7a32bd386496c67e665d30ec8f569c45ec4a Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 24 Apr 2019 14:05:07 +0200 Subject: [PATCH 26/35] split hidden coins, toggle all --- src/actions/LocalStorageActions.js | 106 +++++++++++------- src/actions/WalletActions.js | 4 + src/actions/constants/wallet.js | 2 + src/reducers/WalletReducer.js | 8 ++ .../Wallet/views/WalletSettings/Container.js | 6 +- .../WalletSettings/components/Coins/index.js | 29 ++--- .../Wallet/views/WalletSettings/index.js | 3 +- 7 files changed, 99 insertions(+), 59 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index d4f3badf..c2fb7790 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -60,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 @@ -247,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) { @@ -360,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); @@ -372,45 +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, - }); + console.log(coinShortcut, shouldBeVisible, isExternal); + + 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 = ( - checked: boolean, +export const toggleGroupCoinsVisibility = ( allCoins: Array, - hiddenCoins: Array + checked: boolean, + isExternal: boolean ): ThunkAction => (dispatch: Dispatch) => { - const configuration: Array = getHiddenCoins(); - const newConfig: Array = configuration; - let result = []; - - console.log('old config', newConfig); + if (checked && isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS_EXTERNAL, + hiddenCoinsExternal: [], + }); + storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify([])); + } - if (checked) { - const intersection = allCoins.filter(x => hiddenCoins.includes(x)); - if (intersection) { - result = newConfig.filter(x => !intersection.includes(x)); - } - } else { - const intersection = allCoins.filter(x => hiddenCoins.includes(x)); - console.log('intersection', intersection); - result = [configuration, ...intersection]; + if (!checked && isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS_EXTERNAL, + hiddenCoinsExternal: allCoins, + }); + storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(allCoins)); } - dispatch({ - type: WALLET.SET_HIDDEN_COINS, - hiddenCoins: result, - }); + if (checked && !isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: [], + }); + storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify([])); + } - storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(result)); + if (!checked && !isExternal) { + dispatch({ + type: WALLET.SET_HIDDEN_COINS, + hiddenCoins: allCoins, + }); + storageUtils.set(TYPE, KEY_HIDDEN_COINS, 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/views/WalletSettings/Container.js b/src/views/Wallet/views/WalletSettings/Container.js index 0e185bb6..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,8 +38,8 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch), handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch), - handleAllCoinsVisibility: bindActionCreators( - LocalStorageActions.handleAllCoinsVisibility, + toggleGroupCoinsVisibility: bindActionCreators( + LocalStorageActions.toggleGroupCoinsVisibility, dispatch ), }); diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 8b86ed2f..c2215c06 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -13,8 +13,9 @@ import l10nMessages from '../../index.messages'; type Props = { networks: Array, hiddenCoins: Array, + hiddenCoinsExternal: Array, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, - handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, + toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility, }; const Wrapper = styled.div` @@ -118,16 +119,10 @@ const CoinsSettings = (props: Props) => ( .filter(x => !x.isHidden) .map(item => item.shortcut); - props.handleAllCoinsVisibility( - checked, - allCoins, - props.hiddenCoins - ); + props.toggleGroupCoinsVisibility(allCoins, checked, false); }} > - {props.hiddenCoins.every(val => props.networks.includes(val)) - ? 'Hide all' - : 'Show all'} + {props.hiddenCoins.length > 0 ? 'Show all' : 'Hide all'} @@ -147,7 +142,11 @@ const CoinsSettings = (props: Props) => ( checkedIcon={false} uncheckedIcon={false} onChange={visible => { - props.handleCoinVisibility(network.shortcut, visible); + props.handleCoinVisibility( + network.shortcut, + visible, + false + ); }} checked={!props.hiddenCoins.includes(network.shortcut)} /> @@ -180,11 +179,7 @@ const CoinsSettings = (props: Props) => ( .filter(x => !x.isHidden) .map(coin => coin.id); - props.handleAllCoinsVisibility( - checked, - allCoins, - props.hiddenCoins - ); + props.toggleGroupCoinsVisibility(allCoins, checked, true); }} > Show all @@ -207,9 +202,9 @@ const CoinsSettings = (props: Props) => ( checkedIcon={false} uncheckedIcon={false} onChange={visible => { - props.handleCoinVisibility(network.id, visible); + props.handleCoinVisibility(network.id, visible, true); }} - checked={!props.hiddenCoins.includes(network.id)} + checked={!props.hiddenCoinsExternal.includes(network.id)} /> diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 677cd5f2..a9b4626b 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -120,8 +120,9 @@ const WalletSettings = (props: Props) => ( From a6002667862b7bbddb7a33d8c8f83c85d38bc6bd Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 24 Apr 2019 14:42:02 +0200 Subject: [PATCH 27/35] fixed state checking --- src/actions/LocalStorageActions.js | 33 ++- .../WalletSettings/components/Coins/index.js | 271 ++++++++++-------- 2 files changed, 178 insertions(+), 126 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index c2fb7790..1439a1b2 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -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 => { diff --git a/src/views/Wallet/views/WalletSettings/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index c2215c06..0df8ee99 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'; @@ -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) => ( - - - - - {props.networks - .filter(network => !network.isHidden) - .map(network => ( - +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 ( + + + + {console.log('hidden coins', props.hiddenCoins)} + {console.log('hidden coins', props.hiddenCoins)} + {console.log('hidden coins external', props.hiddenCoinsExternal)} + - ))} - - - - {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; From 88394eede2a93980f7bd6b5e0edb6ea24318ba1f Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 24 Apr 2019 14:46:16 +0200 Subject: [PATCH 28/35] cleanup --- src/actions/LocalStorageActions.js | 5 ----- .../LeftNavigation/components/CoinMenu/index.js | 8 ++++---- .../Wallet/views/WalletSettings/components/Coins/index.js | 3 --- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 1439a1b2..c44cdb33 100644 --- a/src/actions/LocalStorageActions.js +++ b/src/actions/LocalStorageActions.js @@ -379,8 +379,6 @@ export const handleCoinVisibility = ( newConfig = [...configuration, coinShortcut]; } - console.log(coinShortcut, shouldBeVisible, isExternal); - if (isExternal) { storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(newConfig)); dispatch({ @@ -402,9 +400,6 @@ export const toggleGroupCoinsVisibility = ( isExternal: boolean ): ThunkAction => (dispatch: Dispatch) => { // supported coins - - console.log('checked', checked); - if (checked && !isExternal) { dispatch({ type: WALLET.SET_HIDDEN_COINS, 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/components/Coins/index.js b/src/views/Wallet/views/WalletSettings/components/Coins/index.js index 0df8ee99..21aab25a 100644 --- a/src/views/Wallet/views/WalletSettings/components/Coins/index.js +++ b/src/views/Wallet/views/WalletSettings/components/Coins/index.js @@ -111,9 +111,6 @@ class CoinsSettings extends PureComponent { - {console.log('hidden coins', props.hiddenCoins)} - {console.log('hidden coins', props.hiddenCoins)} - {console.log('hidden coins external', props.hiddenCoinsExternal)}