diff --git a/src/views/Wallet/components/TopNavigationWalletSettings/index.js b/src/views/Wallet/components/TopNavigationWalletSettings/index.js new file mode 100644 index 00000000..6d25a34b --- /dev/null +++ b/src/views/Wallet/components/TopNavigationWalletSettings/index.js @@ -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 = () => ( + + + + + +); + +export default TopNavigationWalletSettings; diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 36ef5cc0..00a40178 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -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, @@ -132,13 +134,17 @@ const Wallet = (props: Props) => ( + diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index ba094339..c8e76aeb 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -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) => (
- - - Wallet settings is under construction + + + + props.setLocalCurrency(option.value)} + value={buildCurrencyOption(props.wallet.localCurrency)} + options={FIAT_CURRENCIES.map(c => buildCurrencyOption(c))} + /> +
+ + + + + - + - - + +
); -export default connect( - null, - null -)(WalletSettings); +type OwnProps = {}; + +type StateProps = { + wallet: $ElementType, + fiat: $ElementType, + localStorage: $ElementType, +}; + +type DispatchProps = { + setLocalCurrency: typeof WalletActions.setLocalCurrency, +}; + +export type Props = StateProps & DispatchProps; + +const mapStateToProps: MapStateToProps = ( + state: State +): StateProps => ({ + wallet: state.wallet, + fiat: state.fiat, + localStorage: state.localStorage, +}); + +const mapDispatchToProps: MapDispatchToProps = ( + dispatch: Dispatch +): DispatchProps => ({ + setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), +}); + +export default injectIntl( + connect( + mapStateToProps, + mapDispatchToProps + )(WalletSettings) +); diff --git a/src/views/Wallet/views/WalletSettings/index.messages.js b/src/views/Wallet/views/WalletSettings/index.messages.js new file mode 100644 index 00000000..abcc4d99 --- /dev/null +++ b/src/views/Wallet/views/WalletSettings/index.messages.js @@ -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; diff --git a/src/views/common.messages.js b/src/views/common.messages.js index bb578fb9..f4ee59ba 100644 --- a/src/views/common.messages.js +++ b/src/views/common.messages.js @@ -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;