1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 10:48:22 +00:00

add wallet settings page

This commit is contained in:
slowbackspace 2019-03-11 17:52:21 +01:00
parent c9d7fc8ea9
commit f08e4683b1
5 changed files with 185 additions and 27 deletions

View File

@ -0,0 +1,56 @@
import styled from 'styled-components';
import React from 'react';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { getPattern } from 'support/routes';
import { NavLink } from 'react-router-dom';
import colors from 'config/colors';
import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
const Wrapper = styled.div`
position: relative;
display: flex;
height: 100%;
flex: 1;
align-items: center;
padding: 0px 30px 0 35px;
overflow-y: hidden;
overflow-x: auto;
`;
const StyledNavLink = styled(NavLink)`
font-weight: ${FONT_WEIGHT.MEDIUM};
font-size: ${FONT_SIZE.TOP_MENU};
color: ${colors.TEXT_SECONDARY};
margin: 0px 4px;
padding: 20px 10px;
white-space: nowrap;
&.active,
&:hover {
transition: all 0.3s ease-in-out;
color: ${colors.TEXT_PRIMARY};
}
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
`;
// TODO: make universal TopNavigation component
const TopNavigationWalletSettings = () => (
<Wrapper>
<StyledNavLink exact to={getPattern('wallet-settings')}>
<FormattedMessage {...l10nCommonMessages.TR_APPLICATION_SETTINGS} />
</StyledNavLink>
</Wrapper>
);
export default TopNavigationWalletSettings;

View File

@ -5,6 +5,7 @@ import colors from 'config/colors';
import styled, { css } from 'styled-components';
import { connect } from 'react-redux';
import { Route, withRouter } from 'react-router-dom';
import { getPattern } from 'support/routes';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State } from 'flowtype';
@ -27,6 +28,7 @@ import Backdrop from 'components/Backdrop';
import LeftNavigation from './components/LeftNavigation/Container';
import TopNavigationAccount from './components/TopNavigationAccount';
import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings';
import TopNavigationWalletSettings from './components/TopNavigationWalletSettings';
type StateProps = {
wallet: $ElementType<State, 'wallet'>,
@ -132,13 +134,17 @@ const Wallet = (props: Props) => (
<MainContent preventBgScroll={props.wallet.showSidebar}>
<Navigation>
<Route
path="/device/:device/network/:network/account/:account"
path={getPattern('wallet-account-summary')}
component={TopNavigationAccount}
/>
<Route
path="/device/:device/device-settings"
path={getPattern('wallet-device-settings')}
component={TopNavigationDeviceSettings}
/>
<Route
path={getPattern('wallet-settings')}
component={TopNavigationWalletSettings}
/>
</Navigation>
<ContextNotifications />
<Log />

View File

@ -1,47 +1,119 @@
/* @flow */
import styled from 'styled-components';
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { FormattedMessage, injectIntl } from 'react-intl';
import colors from 'config/colors';
import icons from 'config/icons';
import * as WalletActions from 'actions/WalletActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import Content from 'views/Wallet/components/Content';
import { H1 } from 'components/Heading';
import Icon from 'components/Icon';
import Link from 'components/Link';
import Content from 'views/Wallet/components/Content';
import { Select } from 'components/Select';
import Button from 'components/Button';
const Section = styled.section`
import colors from 'config/colors';
import { FIAT_CURRENCIES } from 'config/app';
import { FONT_SIZE } from 'config/variables';
import l10nCommonMessages from 'views/common.messages';
import l10nMessages from './index.messages';
const CurrencySelect = styled(Select)`
min-width: 77px;
/* max-width: 200px; */
`;
const CurrencyLabel = styled.div`
color: ${colors.TEXT_SECONDARY};
padding-bottom: 10px;
`;
const Section = styled.div`
margin-bottom: 20px;
`;
const Actions = styled.div`
display: flex;
flex-direction: column;
`;
const Row = styled.div`
const Buttons = styled.div`
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0;
justify-content: flex-end;
`;
const StyledH1 = styled(H1)`
text-align: center;
const Info = styled.div`
flex: 1;
color: ${colors.TEXT_SECONDARY};
font-size: ${FONT_SIZE.SMALL};
align-self: center;
`;
const WalletSettings = () => (
const buildCurrencyOption = currency => {
return { value: currency, label: currency.toUpperCase() };
};
const WalletSettings = (props: Props) => (
<Content>
<Section>
<Row>
<Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
<StyledH1>Wallet settings is under construction</StyledH1>
<Link to="/">
<Button>Take me back</Button>
</Link>
</Row>
<CurrencyLabel>
<FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
</CurrencyLabel>
<CurrencySelect
isSearchable
isClearable={false}
onChange={option => props.setLocalCurrency(option.value)}
value={buildCurrencyOption(props.wallet.localCurrency)}
options={FIAT_CURRENCIES.map(c => buildCurrencyOption(c))}
/>
</Section>
<Actions>
<Info>
<FormattedMessage {...l10nMessages.TR_THE_CHANGES_ARE_SAVED} />
</Info>
<Buttons>
<Link to="/">
<Button isGreen>
<FormattedMessage {...l10nCommonMessages.TR_CLOSE} />
</Button>
</Link>
</Buttons>
</Actions>
</Content>
);
export default connect(
null,
null
)(WalletSettings);
type OwnProps = {};
type StateProps = {
wallet: $ElementType<State, 'wallet'>,
fiat: $ElementType<State, 'fiat'>,
localStorage: $ElementType<State, 'localStorage'>,
};
type DispatchProps = {
setLocalCurrency: typeof WalletActions.setLocalCurrency,
};
export type Props = StateProps & DispatchProps;
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (
state: State
): StateProps => ({
wallet: state.wallet,
fiat: state.fiat,
localStorage: state.localStorage,
});
const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (
dispatch: Dispatch
): DispatchProps => ({
setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
});
export default injectIntl(
connect(
mapStateToProps,
mapDispatchToProps
)(WalletSettings)
);

View File

@ -0,0 +1,16 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_LOCAL_CURRENCY: {
id: 'TR_LOCAL_CURRENCY',
defaultMessage: 'Local currency',
},
TR_THE_CHANGES_ARE_SAVED: {
id: 'TR_THE_CHANGES_ARE_SAVED',
defaultMessage: 'The changes are saved automatically as they are made',
},
});
export default definedMessages;

View File

@ -7,6 +7,10 @@ const definedMessages: Messages = defineMessages({
id: 'TR_DEVICE_SETTINGS',
defaultMessage: 'Device settings',
},
TR_APPLICATION_SETTINGS: {
id: 'TR_APPLICATION_SETTINGS',
defaultMessage: 'Application settings',
},
TR_ACCOUNT_HASH: {
id: 'TR_ACCOUNT_HASH',
defaultMessage: 'Account #{number}',
@ -62,6 +66,10 @@ const definedMessages: Messages = defineMessages({
id: 'TR_FORGET_DEVICE',
defaultMessage: 'Forget device',
},
TR_CLOSE: {
id: 'TR_CLOSE',
defaultMessage: 'Close',
},
});
export default definedMessages;