i18n string dictionaries (#3532)

* TabBar & Settings -> Views i18n enabled

* Proxy i18n

* Settings i18n

* defaultLocale

* Introduce thin Translate wrapper

* PropTypes util caters for multiples

* Translate & LanguageSelector under ui

* Update location & proptypes

* Add UI Language selector

* German settings pages

* Add German language selection

* Corrected umlaut encoding

* Lint

* Re-apply pre-merge conflict changes

* better German i18n

* Language names in locale language

* i8n -> index

* Allow for development/production operation

* Use Yahoo react-intl (as opposed to react-i18nify)

* Use default messages wih expansions

* Remove non-reused variable definitions

* Use FormattedMessage directly, opens up WebPack & Babel opportunities

* Add flat to flatten

* Extract default messages via babel

* Webpack to aggegrate i18n defaultMessage

* Re-add react-intl after merge

* Update proptype references (merge)

* Strip down external dictionary

* i18n for dapps

* Restore tests submodule

* Allow language changes to reflect

* Style updates

js/src/ui/ContextProvider/contextProvider.js

@@ -14,8 +14,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Component, PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
+import { IntlProvider } from 'react-intl';
+import { observer } from 'mobx-react';
 
+import { LocaleStore } from '../../i18n';
+
+@observer
 export default class ContextProvider extends Component {
   static propTypes = {
     api: PropTypes.object.isRequired,
@@ -30,10 +35,17 @@ export default class ContextProvider extends Component {
     store: PropTypes.object
   }
 
+  localeStore = LocaleStore.get();
+
   render () {
     const { children } = this.props;
+    const { locale, messages } = this.localeStore;
 
-    return children;
+    return (
+      <IntlProvider locale={ locale } messages={ messages }>
+        { children }
+      </IntlProvider>
+    );
   }
 
   getChildContext () {

js/src/ui/Form/Select/select.js

@@ -17,6 +17,8 @@
 import React, { Component, PropTypes } from 'react';
 import { SelectField } from 'material-ui';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 // TODO: duplicated in Input
 const UNDERLINE_DISABLED = {
   borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
@@ -33,9 +35,9 @@ export default class Select extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    error: PropTypes.string,
-    hint: PropTypes.string,
-    label: PropTypes.string,
+    error: nodeOrStringProptype(),
+    hint: nodeOrStringProptype(),
+    label: nodeOrStringProptype(),
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
     onKeyDown: PropTypes.func,

js/src/ui/LanguageSelector/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './languageSelector';

js/src/ui/LanguageSelector/languageSelector.js

@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { MenuItem } from 'material-ui';
+import { observer } from 'mobx-react';
+
+import Select from '../Form/Select';
+import { LocaleStore } from '../../i18n';
+
+@observer
+export default class LanguageSelector extends Component {
+  store = LocaleStore.get();
+
+  render () {
+    if (!this.store.isDevelopment) {
+      return null;
+    }
+
+    return (
+      <Select
+        hint={
+          <FormattedMessage
+            id='settings.parity.languages.hint'
+            defaultMessage='the language this interface is displayed with' />
+        }
+        label={
+          <FormattedMessage
+            id='settings.parity.languages.label'
+            defaultMessage='UI language' />
+        }
+        value={ this.store.locale }
+        onChange={ this.onChange }>
+        { this.renderOptions() }
+      </Select>
+    );
+  }
+
+  renderOptions () {
+    return this.store.locales.map((locale) => {
+      const label = <FormattedMessage id={ `languages.${locale}` } />;
+
+      return (
+        <MenuItem
+          key={ locale }
+          value={ locale }
+          label={ label }>
+          { label }
+        </MenuItem>
+      );
+    });
+  }
+
+  onChange = (event, index, locale) => {
+    this.store.setLocale(locale);
+  }
+}

js/src/ui/index.js

@@ -34,6 +34,7 @@ import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAd
 import GasPriceEditor from './GasPriceEditor';
 import IdentityIcon from './IdentityIcon';
 import IdentityName from './IdentityName';
+import LanguageSelector from './LanguageSelector';
 import Loading from './Loading';
 import MethodDecoding from './MethodDecoding';
 import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
@@ -74,10 +75,10 @@ export {
   InputAddressSelect,
   InputChip,
   InputInline,
-  Loading,
-  Select,
   IdentityIcon,
   IdentityName,
+  LanguageSelector,
+  Loading,
   MethodDecoding,
   Modal,
   BusyStep,
@@ -87,6 +88,7 @@ export {
   ParityBackground,
   RadioButtons,
   ShortenedHash,
+  Select,
   SignerIcon,
   Tags,
   Tooltip,