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:
parent
c9d7fc8ea9
commit
f08e4683b1
@ -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;
|
@ -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 />
|
||||
|
@ -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)
|
||||
);
|
||||
|
16
src/views/Wallet/views/WalletSettings/index.messages.js
Normal file
16
src/views/Wallet/views/WalletSettings/index.messages.js
Normal 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;
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user