add wallet settings page

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 = () => (
+    <Wrapper>
+        <StyledNavLink exact to={getPattern('wallet-settings')}>
+            <FormattedMessage {...l10nCommonMessages.TR_APPLICATION_SETTINGS} />
+        </StyledNavLink>
+    </Wrapper>
+);
+
+export default TopNavigationWalletSettings;

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<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 />

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) => (
     <Content>
         <Section>
-            <Row>
-                <Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-                <StyledH1>Wallet settings is under construction</StyledH1>
+            <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>Take me back</Button>
+                    <Button isGreen>
+                        <FormattedMessage {...l10nCommonMessages.TR_CLOSE} />
+                    </Button>
                 </Link>
-            </Row>
-        </Section>
+            </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)
+);

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;

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;