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

merge

Browse Source
pull/513/head
Vladimir Volek 5 years ago
parent 15cfcee500 88394eede2
commit 5437ddb9f2
8 changed files with 267 additions and 113 deletions
Show Stats Download Patch File Download Diff File

93
src/actions/LocalStorageActions.js
Unescape View File

@ -12,7 +12,6 @@ import * as buildUtils from 'utils/build';
import * as storageUtils from 'utils/storage'; import * as storageUtils from 'utils/storage';
import * as WalletActions from 'actions/WalletActions'; import * as WalletActions from 'actions/WalletActions';
import * as l10nUtils from 'utils/l10n'; import * as l10nUtils from 'utils/l10n';
import { getAccountTokens } from 'reducers/utils'; import { getAccountTokens } from 'reducers/utils';
import type { Account } from 'reducers/AccountsReducer'; import type { Account } from 'reducers/AccountsReducer';
import type { Token } from 'reducers/TokensReducer'; 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_LOCAL_CURRENCY: string = `${STORAGE_PATH}localCurrency`;
const KEY_HIDE_BALANCE: string = `${STORAGE_PATH}hideBalance`; const KEY_HIDE_BALANCE: string = `${STORAGE_PATH}hideBalance`;
const KEY_HIDDEN_COINS: string = `${STORAGE_PATH}hiddenCoins`; 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 // https://github.com/STRML/react-localstorage/blob/master/react-localstorage.js
// or // or
@ -248,13 +248,18 @@ const loadStorageData = (): ThunkAction => (dispatch: Dispatch): void => {
}); });
} }
const hiddenCoins = getHiddenCoins(); const hiddenCoins = getHiddenCoins(false);
if (hiddenCoins) { dispatch({
dispatch({ type: WALLET.SET_HIDDEN_COINS,
type: WALLET.SET_HIDDEN_COINS, hiddenCoins,
hiddenCoins, });
});
} const isExternal = true;
const hiddenCoinsExternal = getHiddenCoins(isExternal);
dispatch({
type: WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal,
});
const userTokens: ?string = storageUtils.get(TYPE, KEY_TOKENS); const userTokens: ?string = storageUtils.get(TYPE, KEY_TOKENS);
if (userTokens) { if (userTokens) {
@ -361,9 +366,10 @@ export const getImportedAccounts = (): ?Array<Account> => {
export const handleCoinVisibility = ( export const handleCoinVisibility = (
coinShortcut: string, coinShortcut: string,
shouldBeVisible: boolean shouldBeVisible: boolean,
isExternal: boolean
): ThunkAction => (dispatch: Dispatch): void => { ): ThunkAction => (dispatch: Dispatch): void => {
const configuration: Array<string> = getHiddenCoins(); const configuration: Array<string> = getHiddenCoins(isExternal);
let newConfig: Array<string> = configuration; let newConfig: Array<string> = configuration;
const isAlreadyHidden = configuration.find(coin => coin === coinShortcut); const isAlreadyHidden = configuration.find(coin => coin === coinShortcut);
@ -373,17 +379,68 @@ export const handleCoinVisibility = (
newConfig = [...configuration, coinShortcut]; newConfig = [...configuration, coinShortcut];
} }
storageUtils.set(TYPE, KEY_HIDDEN_COINS, JSON.stringify(newConfig)); if (isExternal) {
dispatch({ storageUtils.set(TYPE, KEY_HIDDEN_COINS_EXTERNAL, JSON.stringify(newConfig));
type: WALLET.SET_HIDDEN_COINS, dispatch({
hiddenCoins: newConfig, 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<string>,
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<string> => { export const getHiddenCoins = (isExternal: boolean): Array<string> => {
const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); let coinsConfig: ?string = '';
if (isExternal) {
coinsConfig = storageUtils.get(TYPE, KEY_HIDDEN_COINS_EXTERNAL);
} else {
coinsConfig = storageUtils.get(TYPE, KEY_HIDDEN_COINS);
}
if (coinsConfig) { if (coinsConfig) {
return JSON.parse(coinsConfig); return JSON.parse(coinsConfig);
} }

4
src/actions/WalletActions.js
Unescape View File

@ -29,6 +29,10 @@ export type WalletAction =
type: typeof WALLET.SET_HIDDEN_COINS, type: typeof WALLET.SET_HIDDEN_COINS,
hiddenCoins: Array<string>, hiddenCoins: Array<string>,
} }
| {
type: typeof WALLET.SET_HIDDEN_COINS_EXTERNAL,
hiddenCoinsExternal: Array<string>,
}
| { | {
type: typeof WALLET.TOGGLE_DEVICE_DROPDOWN, type: typeof WALLET.TOGGLE_DEVICE_DROPDOWN,
opened: boolean, opened: boolean,

2
src/actions/constants/wallet.js
Unescape View File

@ -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_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_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: 'wallet__set_hidden_coins' = 'wallet__set_hidden_coins';
export const SET_HIDDEN_COINS_EXTERNAL: 'wallet__set_hidden_coins_external' =
'wallet__set_hidden_coins_external';

8
src/reducers/WalletReducer.js
Unescape View File

@ -25,6 +25,7 @@ type State = {
disconnectRequest: ?TrezorDevice, disconnectRequest: ?TrezorDevice,
selectedDevice: ?TrezorDevice, selectedDevice: ?TrezorDevice,
hiddenCoins: Array<string>, hiddenCoins: Array<string>,
hiddenCoinsExternal: Array<string>,
}; };
const initialState: State = { const initialState: State = {
@ -43,6 +44,7 @@ const initialState: State = {
disconnectRequest: null, disconnectRequest: null,
selectedDevice: null, selectedDevice: null,
hiddenCoins: [], hiddenCoins: [],
hiddenCoinsExternal: [],
}; };
export default function wallet(state: State = initialState, action: Action): State { 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, hiddenCoins: action.hiddenCoins,
}; };
case WALLET.SET_HIDDEN_COINS_EXTERNAL:
return {
...state,
hiddenCoinsExternal: action.hiddenCoinsExternal,
};
default: default:
return state; return state;
} }

8
src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
Unescape View File

@ -56,11 +56,11 @@ class CoinMenu extends PureComponent<Props> {
} }
getOtherCoins() { getOtherCoins() {
const { hiddenCoins } = this.props.wallet; const { hiddenCoinsExternal } = this.props.wallet;
return coins return coins
.sort((a, b) => a.order - b.order) .sort((a, b) => a.order - b.order)
.filter(item => !item.isHidden) // hide coins globally in config .filter(item => !item.isHidden) // hide coins globally in config
.filter(item => !hiddenCoins.includes(item.id)) .filter(item => !hiddenCoinsExternal.includes(item.id))
.map(coin => { .map(coin => {
const row = ( const row = (
<RowCoin <RowCoin
@ -102,10 +102,10 @@ class CoinMenu extends PureComponent<Props> {
} }
isBottomMenuEmpty() { isBottomMenuEmpty() {
const { hiddenCoins } = this.props.wallet; const { hiddenCoinsExternal } = this.props.wallet;
const numberOfVisibleNetworks = coins const numberOfVisibleNetworks = coins
.filter(item => !item.isHidden) .filter(item => !item.isHidden)
.filter(item => !hiddenCoins.includes(item.id)); .filter(item => !hiddenCoinsExternal.includes(item.id));
return numberOfVisibleNetworks.length <= 0; return numberOfVisibleNetworks.length <= 0;
} }

10
src/views/Wallet/views/WalletSettings/Container.js
Unescape View File

@ -23,7 +23,7 @@ type DispatchProps = {|
setLocalCurrency: typeof WalletActions.setLocalCurrency, setLocalCurrency: typeof WalletActions.setLocalCurrency,
setHideBalance: typeof WalletActions.setHideBalance, setHideBalance: typeof WalletActions.setHideBalance,
handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
// handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility, toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility,
|}; |};
export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
@ -38,10 +38,10 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch), setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch), handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch),
// handleAllCoinsVisibility: bindActionCreators( toggleGroupCoinsVisibility: bindActionCreators(
// LocalStorageActions.handleAllCoinsVisibility, LocalStorageActions.toggleGroupCoinsVisibility,
// dispatch dispatch
// ), ),
}); });
export default injectIntl<OwnProps>( export default injectIntl<OwnProps>(

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

@ -1,6 +1,6 @@
/* @flow */ /* @flow */
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React, { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import coins from 'constants/coins'; import coins from 'constants/coins';
@ -13,7 +13,14 @@ import l10nMessages from '../../index.messages';
type Props = { type Props = {
networks: Array<Network>, networks: Array<Network>,
hiddenCoins: Array<string>, hiddenCoins: Array<string>,
hiddenCoinsExternal: Array<string>,
handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
toggleGroupCoinsVisibility: typeof LocalStorageActions.toggleGroupCoinsVisibility,
};
type State = {
showAllCoins: boolean,
showAllCoinsExternal: boolean,
}; };
const Wrapper = styled.div` const Wrapper = styled.div`
@ -85,99 +92,170 @@ const LogoWrapper = styled.div`
align-items: center; align-items: center;
`; `;
const CoinsSettings = (props: Props) => ( const ToggleAll = styled.div`
<Wrapper> cursor: pointer;
<Row> `;
<Content>
<Label> class CoinsSettings extends PureComponent<Props, State> {
<Left> constructor(props: Props) {
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} /> super(props);
<Tooltip this.state = {
content={ showAllCoins: this.props.hiddenCoins.length === 0,
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} /> showAllCoinsExternal: this.props.hiddenCoinsExternal.length === 0,
} };
maxWidth={210} }
placement="right"
> render() {
<TooltipIcon const { props } = this;
icon={ICONS.HELP} return (
color={colors.TEXT_SECONDARY} <Wrapper>
size={12} <Row>
/> <Content>
</Tooltip> <Label>
</Left>
<Right />
</Label>
{props.networks
.filter(network => !network.isHidden)
.map(network => (
<CoinRow key={network.shortcut}>
<Left> <Left>
<LogoWrapper> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
<CoinLogo height="23" network={network.shortcut} /> <Tooltip
</LogoWrapper> content={
<Name>{network.name}</Name> <FormattedMessage
{...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
/>
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
<Right> <Right>
<Switch <ToggleAll
isSmall onClick={() => {
checkedIcon={false} const allCoins = props.networks
uncheckedIcon={false} .filter(x => !x.isHidden)
onChange={visible => { .map(item => item.shortcut);
props.handleCoinVisibility(network.shortcut, visible);
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> </Right>
</CoinRow> </Label>
))} {props.networks
</Content> .filter(network => !network.isHidden)
<Content> .map(network => (
<Label> <CoinRow key={network.shortcut}>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} /> <LogoWrapper>
<Tooltip <CoinLogo height="23" network={network.shortcut} />
content={ </LogoWrapper>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} /> <Name>{network.name}</Name>
} </Left>
maxWidth={210} <Right>
placement="right" <Switch
> isSmall
<TooltipIcon checkedIcon={false}
icon={ICONS.HELP} uncheckedIcon={false}
color={colors.TEXT_SECONDARY} onChange={visible => {
size={12} props.handleCoinVisibility(
/> network.shortcut,
</Tooltip> visible,
</Left> false
<Right /> );
</Label> }}
{coins checked={!props.hiddenCoins.includes(network.shortcut)}
.sort((a, b) => a.order - b.order) />
.map(network => ( </Right>
<CoinRow key={network.id}> </CoinRow>
))}
</Content>
<Content>
<Label>
<Left> <Left>
<LogoWrapper> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
<CoinLogo height="23" network={network.id} /> <Tooltip
</LogoWrapper> content={
<Name>{network.coinName}</Name> <FormattedMessage
{...l10nMessages.TR_VISIBLE_COINS_EXPLAINED}
/>
}
maxWidth={210}
placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
<Right> <Right>
<Switch <ToggleAll
isSmall onClick={() => {
checkedIcon={false} const allCoins = coins
uncheckedIcon={false} .filter(x => !x.isHidden)
onChange={visible => { .map(coin => coin.id);
props.handleCoinVisibility(network.id, visible);
props.toggleGroupCoinsVisibility(
allCoins,
!this.state.showAllCoinsExternal,
true
);
this.setState(prevState => ({
showAllCoinsExternal: !prevState.showAllCoinsExternal,
}));
}} }}
checked={!props.hiddenCoins.includes(network.id)} >
/> {props.hiddenCoinsExternal.length > 0 ? 'Show all' : 'Hide all'}
</ToggleAll>
</Right> </Right>
</CoinRow> </Label>
))} {coins
</Content> .sort((a, b) => a.order - b.order)
</Row> .map(network => (
</Wrapper> <CoinRow key={network.id}>
); <Left>
<LogoWrapper>
<CoinLogo height="23" network={network.id} />
</LogoWrapper>
<Name>{network.coinName}</Name>
</Left>
<Right>
<Switch
isSmall
checkedIcon={false}
uncheckedIcon={false}
onChange={visible => {
props.handleCoinVisibility(
network.id,
visible,
true
);
}}
checked={
!props.hiddenCoinsExternal.includes(network.id)
}
/>
</Right>
</CoinRow>
))}
</Content>
</Row>
</Wrapper>
);
}
}
export default CoinsSettings; export default CoinsSettings;

7
src/views/Wallet/views/WalletSettings/index.js
Unescape View File

@ -73,7 +73,10 @@ const TooltipIcon = styled(Icon)`
`; `;
const buildCurrencyOption = currency => { const buildCurrencyOption = currency => {
return { value: currency, label: currency.toUpperCase() }; return {
value: currency,
label: currency.toUpperCase(),
};
}; };
const WalletSettings = (props: Props) => ( const WalletSettings = (props: Props) => (
@ -117,7 +120,9 @@ const WalletSettings = (props: Props) => (
<Coins <Coins
networks={props.localStorage.config.networks} networks={props.localStorage.config.networks}
handleCoinVisibility={props.handleCoinVisibility} handleCoinVisibility={props.handleCoinVisibility}
toggleGroupCoinsVisibility={props.toggleGroupCoinsVisibility}
hiddenCoins={props.wallet.hiddenCoins} hiddenCoins={props.wallet.hiddenCoins}
hiddenCoinsExternal={props.wallet.hiddenCoinsExternal}
/> />
</Section> </Section>
<Actions> <Actions>

Write Preview
Loading…
Cancel
Save