mirror of https://github.com/trezor/trezor-wallet
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;
|
@ -1,47 +1,119 @@
|
|||||||
|
/* @flow */
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||||
|
|
||||||
import colors from 'config/colors';
|
import * as WalletActions from 'actions/WalletActions';
|
||||||
import icons from 'config/icons';
|
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 Link from 'components/Link';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
|
import { Select } from 'components/Select';
|
||||||
import Button from 'components/Button';
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Row = styled.div`
|
const Buttons = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
|
||||||
padding: 50px 0;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledH1 = styled(H1)`
|
const Info = styled.div`
|
||||||
text-align: center;
|
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>
|
<Content>
|
||||||
<Section>
|
<Section>
|
||||||
<Row>
|
<CurrencyLabel>
|
||||||
<Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
|
<FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
|
||||||
<StyledH1>Wallet settings is under construction</StyledH1>
|
</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="/">
|
<Link to="/">
|
||||||
<Button>Take me back</Button>
|
<Button isGreen>
|
||||||
|
<FormattedMessage {...l10nCommonMessages.TR_CLOSE} />
|
||||||
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</Row>
|
</Buttons>
|
||||||
</Section>
|
</Actions>
|
||||||
</Content>
|
</Content>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default connect(
|
type OwnProps = {};
|
||||||
null,
|
|
||||||
null
|
type StateProps = {
|
||||||
)(WalletSettings);
|
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)
|
||||||
|
);
|
||||||
|
@ -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;
|
Loading…
Reference in new issue