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;