add initial support for setting language

src/actions/WalletActions.js

@@ -42,6 +42,9 @@ export type WalletAction = {
     type: typeof WALLET.SHOW_BETA_DISCLAIMER | typeof WALLET.HIDE_BETA_DISCLAIMER | typeof WALLET.SET_FIRST_LOCATION_CHANGE,
 } | {
     type: typeof WALLET.TOGGLE_SIDEBAR,
+} | {
+    type: typeof WALLET.SET_LANGUAGE,
+    language: string
 }
 
 export const init = (): ThunkAction => (dispatch: Dispatch): void => {
@@ -68,6 +71,11 @@ export const toggleSidebar = (): WalletAction => ({
     type: WALLET.TOGGLE_SIDEBAR,
 });
 
+export const setLanguage = (language: string): WalletAction => ({
+    type: WALLET.SET_LANGUAGE,
+    language,
+});
+
 // This method will be called after each DEVICE.CONNECT action
 // if connected device has different "passphrase_protection" settings than saved instances
 // all saved instances will be removed immediately inside DevicesReducer

src/actions/constants/wallet.js

@@ -12,4 +12,5 @@ export const HIDE_BETA_DISCLAIMER: 'wallet__hide_beta_disclaimer' = 'wallet__hid
 
 export const CLEAR_UNAVAILABLE_DEVICE_DATA: 'wallet__clear_unavailable_device_data' = 'wallet__clear_unavailable_device_data';
 
-export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar';
+export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar';
+export const SET_LANGUAGE: 'wallet__set_language' = 'wallet__set_language';

src/reducers/WalletReducer.js

@@ -13,6 +13,7 @@ import type { Action, RouterLocationState, TrezorDevice } from 'flowtype';
 type State = {
     ready: boolean;
     online: boolean;
+    language: string;
     dropdownOpened: boolean;
     showBetaDisclaimer: boolean;
     showSidebar: boolean;
@@ -26,6 +27,7 @@ type State = {
 const initialState: State = {
     ready: false,
     online: navigator.onLine,
+    language: 'en',
     dropdownOpened: false,
     firstLocationChange: true,
     showBetaDisclaimer: false,
@@ -119,6 +121,12 @@ export default function wallet(state: State = initialState, action: Action): Sta
                 showBetaDisclaimer: false,
             };
 
+        case WALLET.SET_LANGUAGE:
+            return {
+                ...state,
+                language: action.language,
+            };
+
         default:
             return state;
     }

src/support/ConnectedIntlProvider.js

@@ -0,0 +1,49 @@
+/* @flow */
+import * as React from 'react';
+import { connect } from 'react-redux';
+import type { MapStateToProps } from 'react-redux';
+import type { State } from 'flowtype';
+
+import { IntlProvider, addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
+import de from 'react-intl/locale-data/de';
+
+import messagesEn from '../../translations/en.json';
+import messagesDe from '../../translations/de.json';
+
+addLocaleData([...en, ...de]);
+
+const messages = {
+    en: messagesEn,
+    de: messagesDe,
+};
+
+type OwnProps = {
+    children: React.Node
+}
+
+type StateProps = {
+    locale: string
+}
+
+type Props = StateProps & OwnProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    locale: state.wallet.language,
+});
+
+
+const ReactIntlProvider = ({ children, locale }: Props) => {
+    console.log(locale);
+    console.log(messages);
+    return (
+        <IntlProvider
+            locale={locale}
+            messages={messages[locale]}
+        >
+            {children}
+        </IntlProvider>
+    );
+};
+
+export default connect(mapStateToProps, null)(ReactIntlProvider);

src/views/index.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 
 // general
+import ConnectedIntlProvider from 'support/ConnectedIntlProvider';
 import ErrorBoundary from 'support/ErrorBoundary';
 import ImagesPreloader from 'support/ImagesPreloader';
 import { getPattern } from 'support/routes';
@@ -35,34 +36,36 @@ import store, { history } from 'store';
 
 const App = () => (
     <Provider store={store}>
-        <ConnectedRouter history={history}>
+        <ConnectedIntlProvider>
-            <Switch>
+            <ConnectedRouter history={history}>
-                <Route exact path={getPattern('landing-home')} component={RootView} />
+                <Switch>
-                <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
+                    <Route exact path={getPattern('landing-home')} component={RootView} />
-                <Route exact path={getPattern('landing-import')} component={ImportView} />
+                    <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
-                <Route>
+                    <Route exact path={getPattern('landing-import')} component={ImportView} />
-                    <ErrorBoundary>
+                    <Route>
-                        <ImagesPreloader />
+                        <ErrorBoundary>
-                        <WalletContainer>
+                            <ImagesPreloader />
-                            <Route exact path={getPattern('wallet-settings')} component={WalletSettings} />
+                            <WalletContainer>
-                            <Route exact path={getPattern('wallet-dashboard')} component={WalletDashboard} />
+                                <Route exact path={getPattern('wallet-settings')} component={WalletSettings} />
-                            <Route exact path={getPattern('wallet-acquire')} component={WalletAcquire} />
+                                <Route exact path={getPattern('wallet-dashboard')} component={WalletDashboard} />
-                            <Route exact path={getPattern('wallet-unreadable')} component={WalletUnreadableDevice} />
+                                <Route exact path={getPattern('wallet-acquire')} component={WalletAcquire} />
-                            <Route exact path={getPattern('wallet-bootloader')} component={WalletBootloader} />
+                                <Route exact path={getPattern('wallet-unreadable')} component={WalletUnreadableDevice} />
-                            <Route exact path={getPattern('wallet-initialize')} component={WalletInitialize} />
+                                <Route exact path={getPattern('wallet-bootloader')} component={WalletBootloader} />
-                            <Route exact path={getPattern('wallet-seedless')} component={WalletSeedless} />
+                                <Route exact path={getPattern('wallet-initialize')} component={WalletInitialize} />
-                            <Route exact path={getPattern('wallet-firmware-update')} component={WalletFirmwareUpdate} />
+                                <Route exact path={getPattern('wallet-seedless')} component={WalletSeedless} />
-                            <Route exact path={getPattern('wallet-device-settings')} component={WalletDeviceSettings} />
+                                <Route exact path={getPattern('wallet-firmware-update')} component={WalletFirmwareUpdate} />
-                            <Route exact path={getPattern('wallet-account-summary')} component={AccountSummary} />
+                                <Route exact path={getPattern('wallet-device-settings')} component={WalletDeviceSettings} />
-                            <Route path={getPattern('wallet-account-send')} component={AccountSend} />
+                                <Route exact path={getPattern('wallet-account-summary')} component={AccountSummary} />
-                            <Route path={getPattern('wallet-account-send-override')} component={AccountSend} />
+                                <Route path={getPattern('wallet-account-send')} component={AccountSend} />
-                            <Route path={getPattern('wallet-account-receive')} component={AccountReceive} />
+                                <Route path={getPattern('wallet-account-send-override')} component={AccountSend} />
-                            <Route path={getPattern('wallet-account-signverify')} component={AccountSignVerify} />
+                                <Route path={getPattern('wallet-account-receive')} component={AccountReceive} />
-                        </WalletContainer>
+                                <Route path={getPattern('wallet-account-signverify')} component={AccountSignVerify} />
-                    </ErrorBoundary>
+                            </WalletContainer>
-                </Route>
+                        </ErrorBoundary>
-            </Switch>
+                    </Route>
-        </ConnectedRouter>
+                </Switch>
+            </ConnectedRouter>
+        </ConnectedIntlProvider>
     </Provider>
 );
 

translations/de.json

@@ -0,0 +1,4 @@
+{
+    "dashboard.selectyourcoin.title": "Willkommen bei react-intl",
+    "dashboard.selectyourcoin.body": "Zum Loslegen editiere <code>src/App.js</code>."
+}

translations/en.json

@@ -0,0 +1,4 @@
+{
+    "dashboard.selectyourcoin.title": "Please select your coin EN",
+    "dashboard.selectyourcoin.body": "You will gain access to receiving & sending selected coin"
+}

webpack/constants.js

@@ -8,6 +8,7 @@ const constants: Object = Object.freeze({
     BUILD: path.join(ABSOLUTE_BASE, 'build/'),
     PUBLIC: path.join(ABSOLUTE_BASE, 'public/'),
     SRC: path.join(ABSOLUTE_BASE, 'src/'),
+    TRANSLATIONS: path.join(ABSOLUTE_BASE, 'translations/'),
     PORT: 8081,
     INDEX: path.join(ABSOLUTE_BASE, 'src/index.html'),
     TREZOR_CONNECT_ROOT: path.join(ABSOLUTE_BASE, '../trezor-connect/'),
@@ -24,10 +25,11 @@ export const TREZOR_CONNECT_FILES: string = path.join(constants.TREZOR_CONNECT_R
 export const {
     BUILD,
     SRC,
+    TRANSLATIONS,
     PORT,
     INDEX,
     PUBLIC,
-}: { BUILD: string, SRC: string, PORT: string, INDEX: string, PUBLIC: string } = constants;
+}: { BUILD: string, SRC: string, TRANSLATIONS: string, PORT: string, INDEX: string, PUBLIC: string } = constants;
 // export const SRC: string = constants.SRC;
 // export const PORT: string = constants.PORT;
 // export const INDEX: string = constants.INDEX;

webpack/dev.babel.js

@@ -9,7 +9,7 @@ import WebpackBuildNotifierPlugin from 'webpack-build-notifier';
 // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 import {
-    SRC, BUILD, PORT, PUBLIC,
+    SRC, BUILD, PORT, PUBLIC, TRANSLATIONS,
 } from './constants';
 
 const gitRevisionPlugin = new GitRevisionPlugin();
@@ -79,7 +79,7 @@ module.exports = {
             {
                 type: 'javascript/auto',
                 test: /\.json/,
-                exclude: /(node_modules)/,
+                exclude: [/(node_modules)/, TRANSLATIONS],
                 loader: 'file-loader',
                 query: {
                     outputPath: './data',