grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

i18n string dictionaries (#3532)

Browse Source 
* 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
This commit is contained in:
Jaco Greeff 2016-12-11 17:42:35 +01:00 committed by GitHub
parent 839e3385dd
commit 885d6eaa4d
24 changed files with 783 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/.babelrc
View File

@ -13,18 +13,19 @@
"retainLines": true,
"env": {
"production": {
"plugins": ["transform-react-remove-prop-types"]
"plugins": [
"transform-react-remove-prop-types"
]
},
"development": {
"plugins": ["react-hot-loader/babel"]
"plugins": [
"react-hot-loader/babel",
["react-intl", { "messagesDir": "./.build/i18n/" }]
]
},
"test": {
"plugins": [
[
"babel-plugin-webpack-alias", {
"config": "webpack/test.js"
}
]
["babel-plugin-webpack-alias", { "config": "webpack/test.js" }]
]
}
}

4
js/package.json
View File

@ -52,6 +52,7 @@
"babel-eslint": "7.1.1",
"babel-loader": "6.2.8",
"babel-plugin-lodash": "3.2.10",
"babel-plugin-react-intl": "2.2.0",
"babel-plugin-transform-class-properties": "6.18.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-object-rest-spread": "6.20.2",
@ -111,6 +112,7 @@
"react-addons-perf": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"react-intl-aggregate-webpack-plugin": "0.0.1",
"rucksack-css": "0.9.1",
"sinon": "1.17.6",
"sinon-as-promised": "4.0.2",
@ -133,6 +135,7 @@
"ethereumjs-tx": "1.1.4",
"eventemitter3": "2.0.2",
"file-saver": "1.3.3",
"flat": "2.0.1",
"format-json": "1.0.3",
"format-number": "2.0.1",
"geopattern": "1.2.3",
@ -155,6 +158,7 @@
"react-copy-to-clipboard": "4.2.3",
"react-dom": "15.4.1",
"react-dropzone": "3.7.3",
"react-intl": "2.1.5",
"react-redux": "4.4.6",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",

21
js/src/i18n/de/index.js Normal file
View File

@ -0,0 +1,21 @@
// 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 settings from './settings';
export default {
settings
};

96
js/src/i18n/de/settings.js Normal file
View File

@ -0,0 +1,96 @@
// 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 {
label: 'Einstellungen',
background: {
label: 'Hintergrund',
overview_0: 'Dein Hintergrundmuster ist einzigartig und beruht auf deiner Parity-Installation. Es ändert sich immer dann, wenn du ein neues Signer-Token erstellst. So können dezentrale Applicationen keine Vertrauenswürdigkeit vortäuschen.',
overview_1: 'Such dir ein Muster aus und merke es dir. Dieses Muster wird dir von nun an immer angezeigt, es sei denn du löschst deinen Browser-Cache oder benutzt ein neues Signer-Token.',
button_more: 'weitere generieren'
},
parity: {
label: 'Parity',
overview_0: 'Diese Einstellungen verändern das Verhalten deines Parity-Knotens.',
languages: {
label: 'Anzeigesprache',
hint: 'Die Sprache, in der dir diese Obefläche angezeigt wird'
},
modes: {
label: 'Betriebsmodus',
hint: 'Der Synchronisations-Modus deines Parity-Knotens',
mode_active: 'Parity synchronisiert kontinuierlich die Blockchain',
mode_passive: 'Parity synchronisiert zu Beginn, schläft dann und wacht regelmäßig zum Synchronisieren auf',
mode_dark: 'Parity synchronisiert nur falls erforderlich, etwa wenn es aus der Ferne aufgerufen wird',
mode_offline: 'Parity synchronisiert nicht'
}
},
proxy: {
label: 'Proxy',
overview_0: 'Die Proxy-Einstellungen ermöglichen dir einen einfachen Zugriff über einprägsame Adressen, auf die Oberfläche mit all ihren dezentralen Anwendungen.',
details_0: 'Anstelle des Zugriffs über IP-Adresse und Port wirst du über die .parity-Subdomain auf die Parity-Oberfläche zugreifen können, indem du {homeProxy} besuchst. Dafür musst du folgenden Eintrag in den Proxy-Einstellungen deines Browsers hinzufügen:',
details_1: 'Hier findest du Anleitungen zum Anpassen der Proxy-Einstellungen in {windowsLink}, {macOSLink} oder {ubuntuLink}.'
},
views: {
label: 'Ansicht',
overview_0: 'Hier kannst du entscheiden, welche Teile der Parity-Oberfläche dir angezeigt werden sollen.',
overview_1: 'Benutzt du Parity ganz normal? Die Standardeinstellungen sind gleichermaßen für Einsteigende als auch für Fortgeschrittene gedacht.',
overview_2: 'Entwickelst du mit Parity? Füge zum Beispiel den Reiter "Contracts" zu deiner Ansicht hinzu.',
overview_3: 'Bist du Miner oder betreibst du einen großen Knoten? Füge den Reiter "Status" hinzu, um alle Information über den Betrieb deines Knotens im Blick zu halten.',
accounts: {
label: 'Konten',
description: 'Eine Liste aller Konten, die mit dieser Parity-Installation verbunden sind. Sende Transaktionen, empfange eingehende Beträge, verwalte deine Kontostände oder lade deine Konten auf.'
},
addresses: {
label: 'Adressbuch',
description: 'Eine Liste all deiner Kontakte und der Adressen, die von dieser Parity-Installation verwaltet werden. Überwache Konten und gelange mit nur einem Klick zu Details deiner Transaktionen.'
},
apps: {
label: 'Anwendungen',
description: 'Dezentrale Anwendungen, die mit dem Netzwerk interagieren. Füge Anwendungen hinzu, entferne oder öffne Anwendungen.'
},
contracts: {
label: 'Contracts',
description: 'Interagiere mit Smart Contracts im Netzwerk. Diese Umgebung ist auf Fortgeschrittene mit gutem Verständnis der Fuktionsweise von Smart Contracts zugeschnitten.'
},
status: {
label: 'Status',
description: 'Schau dir an, wie sich dein Parity-Knoten schlägt. Hier findest du zum Beispiel die Anzahl der aktuellen Verbindungen zum Netzwerk, Logs deiner laufenden Instanz und (sofern konfiguriert) Details zum Mining.'
},
signer: {
label: 'Signer',
description: 'In diesem sicheren Bereich kannst du Transaktionen, die von dir oder von dezentralen Anwendungen erstellt wurden, prüfen und dann genehmigen oder ablehnen.'
},
settings: {
label: 'Einstellungen',
description: 'Diese Seite. Pass die Parity-Oberfläche nach deinen Wünschen an.'
}
}
};

21
js/src/i18n/en/index.js Normal file
View File

@ -0,0 +1,21 @@
// 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 settings from './settings';
export default {
settings
};

63
js/src/i18n/en/settings.js Normal file
View File

@ -0,0 +1,63 @@
// 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 {
label: 'settings',
background: {
label: 'background'
},
parity: {
label: 'parity'
},
proxy: {
label: 'proxy'
},
views: {
label: 'views',
accounts: {
label: 'Accounts'
},
addresses: {
label: 'Addressbook'
},
apps: {
label: 'Applications'
},
contracts: {
label: 'Contracts'
},
status: {
label: 'Status'
},
signer: {
label: 'Signer'
},
settings: {
label: 'Settings'
}
}
};

21
js/src/i18n/index.js Normal file
View File

@ -0,0 +1,21 @@
// 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 LocaleStore from './store';
export {
LocaleStore
};

20
js/src/i18n/languages.js Normal file
View File

@ -0,0 +1,20 @@
// 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 {
de: 'Deutsch',
en: 'English'
};

62
js/src/i18n/store.js Normal file
View File

@ -0,0 +1,62 @@
// 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 flatten from 'flat';
import { action, observable, transaction } from 'mobx';
import { addLocaleData } from 'react-intl';
import de from 'react-intl/locale-data/de';
import en from 'react-intl/locale-data/en';
import languages from './languages';
import deMessages from './de';
import enMessages from './en';
let instance = null;
const isProduction = process.env.NODE_ENV === 'production';
const DEFAULT = 'en';
const LANGUAGES = flatten({ languages });
const MESSAGES = {
de: Object.assign(flatten(deMessages), LANGUAGES),
en: Object.assign(flatten(enMessages), LANGUAGES)
};
const LOCALES = isProduction
? ['en']
: ['en', 'de'];
addLocaleData([...de, ...en]);
export default class Store {
@observable locale = DEFAULT;
@observable locales = LOCALES;
@observable messages = MESSAGES[DEFAULT];
@observable isDevelopment = !isProduction;
@action setLocale (locale) {
transaction(() => {
this.locale = locale;
this.messages = MESSAGES[locale];
});
}
static get () {
if (!instance) {
instance = new Store();
}
return instance;
}
}

16
js/src/ui/ContextProvider/contextProvider.js
View File

@ -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 () {

8
js/src/ui/Form/Select/select.js
View File

@ -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,

17
js/src/ui/LanguageSelector/index.js Normal file
View File

@ -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';

71
js/src/ui/LanguageSelector/languageSelector.js Normal file
View File

@ -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);
}
}

6
js/src/ui/index.js
View File

@ -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,

97
js/src/views/Application/TabBar/tabBar.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
@ -23,85 +24,57 @@ import { isEqual } from 'lodash';
import { Badge, Tooltip } from '~/ui';
import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
import styles from './tabBar.css';
import imagesEthcoreBlock from '../../../../assets/images/parity-logo-white-no-text.svg';
class Tab extends Component {
static propTypes = {
view: PropTypes.object,
children: PropTypes.node,
pendings: PropTypes.number
pendings: PropTypes.number,
view: PropTypes.object
};
shouldComponentUpdate (nextProps) {
return (nextProps.view.id === 'signer' && nextProps.pendings !== this.props.pendings);
}
render () {
const { view, children } = this.props;
const label = this.getLabel(view);
return (
<MUITab
icon={ view.icon }
label={ label }
>
label={
view.id === 'signer'
? this.renderSignerLabel(view.id)
: this.renderLabel(view.id)
}>
{ children }
</MUITab>
);
}
getLabel (view) {
const { label } = view;
if (view.id === 'signer') {
return this.renderSignerLabel(label);
}
if (view.id === 'status') {
return this.renderStatusLabel(label);
}
return this.renderLabel(label);
}
renderLabel (name, bubble) {
renderLabel (id, bubble) {
return (
<div className={ styles.label }>
{ name }
<FormattedMessage
id={ `settings.views.${id}.label` } />
{ bubble }
</div>
);
}
renderSignerLabel (label) {
renderSignerLabel (id) {
const { pendings } = this.props;
let bubble;
if (pendings) {
const bubble = (
bubble = (
<Badge
color='red'
className={ styles.labelBubble }
value={ pendings } />
);
return this.renderLabel(label, bubble);
}
return this.renderLabel(label);
}
renderStatusLabel (label) {
// const { isTest, netChain } = this.props;
// const bubble = (
// <Badge
// color={ isTest ? 'red' : 'default' }
// className={ styles.labelBubble }
// value={ isTest ? 'TEST' : netChain } />
// );
return this.renderLabel(label, null);
return this.renderLabel(id, bubble);
}
}
@ -111,28 +84,19 @@ class TabBar extends Component {
};
static propTypes = {
views: PropTypes.array.isRequired,
pending: PropTypes.array,
isTest: PropTypes.bool,
netChain: PropTypes.string
netChain: PropTypes.string,
pending: PropTypes.array,
views: PropTypes.array.isRequired
};
static defaultProps = {
pending: []
};
shouldComponentUpdate (nextProps, nextState) {
const prevViews = this.props.views.map((v) => v.id).sort();
const nextViews = nextProps.views.map((v) => v.id).sort();
return (nextProps.pending.length !== this.props.pending.length) ||
(!isEqual(prevViews, nextViews));
}
render () {
return (
<Toolbar
className={ styles.toolbar }>
<Toolbar className={ styles.toolbar }>
{ this.renderLogo() }
{ this.renderTabs() }
{ this.renderLast() }
@ -167,21 +131,20 @@ class TabBar extends Component {
.map((view, index) => {
const body = (view.id === 'accounts')
? (
<Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
<Tooltip
className={ styles.tabbarTooltip }
text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
)
: null;
return (
<Link
key={ view.id }
to={ view.route }
activeClassName={ styles.tabactive }
className={ styles.tabLink }
>
className={ styles.tabLink }key={ view.id }
to={ view.route }>
<Tab
view={ view }
pendings={ pending.length }
>
view={ view }>
{ body }
</Tab>
</Link>
@ -203,8 +166,7 @@ function mapStateToProps (initState) {
.keys(views)
.filter((id) => views[id].fixed || views[id].active);
let filteredViews = filteredViewIds
.map((id) => ({
let filteredViews = filteredViewIds.map((id) => ({
...views[id],
id
}));
@ -221,8 +183,7 @@ function mapStateToProps (initState) {
}
filteredViewIds = viewIds;
filteredViews = viewIds
.map((id) => ({
filteredViews = viewIds.map((id) => ({
...views[id],
id
}));

51
js/src/views/Dapps/AddDapps/AddDapps.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react';
import DoneIcon from 'material-ui/svg-icons/action/done';
import { List, ListItem } from 'material-ui/List';
@ -39,22 +40,56 @@ export default class AddDapps extends Component {
return (
<Modal
visible
compact
title='visible applications'
title={
<FormattedMessage
id='dapps.add.label'
defaultMessage='visible applications' />
}
actions={ [
<Button
label={ 'Done' }
label={
<FormattedMessage
id='dapps.add.button.done'
defaultMessage='Done' />
}
key='done'
onClick={ store.closeModal }
icon={ <DoneIcon /> }
/>
] }
visible
>
] }>
<div className={ styles.warning } />
{ this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') }
{ this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') }
{ this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') }
{
this.renderList(store.sortedLocal,
<FormattedMessage
id='dapps.add.local.label'
defaultMessage='Applications locally available' />,
<FormattedMessage
id='dapps.add.local.desc'
defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.' />
)
}
{
this.renderList(store.sortedBuiltin,
<FormattedMessage
id='dapps.add.builtin.label'
defaultMessage='Applications bundled with Parity' />,
<FormattedMessage
id='dapps.add.builtin.desc'
defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.' />
)
}
{
this.renderList(store.sortedNetwork,
<FormattedMessage
id='dapps.add.network.label'
defaultMessage='Applications on the global network' />,
<FormattedMessage
id='dapps.add.network.desc'
defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.' />
)
}
</Modal>
);
}

25
js/src/views/Dapps/dapps.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Checkbox } from 'material-ui';
import { observer } from 'mobx-react';
@ -43,11 +44,19 @@ export default class Dapps extends Component {
externalOverlay = (
<div className={ styles.overlay }>
<div className={ styles.body }>
<div>Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.</div>
<div>
<FormattedMessage
id='dapps.external.warning'
defaultMessage='Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.' />
</div>
<div>
<Checkbox
className={ styles.accept }
label='I understand that these applications are not affiliated with Parity'
label={
<FormattedMessage
id='dapps.external.accept'
defaultMessage='I understand that these applications are not affiliated with Parity' />
}
checked={ false }
onCheck={ this.onClickAcceptExternal } />
</div>
@ -61,10 +70,18 @@ export default class Dapps extends Component {
<AddDapps store={ this.store } />
<Actionbar
className={ styles.toolbar }
title='Decentralized Applications'
title={
<FormattedMessage
id='dapps.label'
defaultMessage='Decentralized Applications' />
}
buttons={ [
<FlatButton
label='edit'
label={
<FormattedMessage
id='dapps.button.edit'
defaultMessage='edit' />
}
key='edit'
icon={ <EyeIcon /> }
onTouchTap={ this.store.openModal }

23
js/src/views/Settings/Background/background.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
@ -55,15 +56,29 @@ class Background extends Component {
render () {
return (
<Container title='Background Pattern'>
<Container title={
<FormattedMessage id='settings.background.label' />
}>
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.</div>
<div>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.</div>
<div>
<FormattedMessage
id='settings.background.overview_0'
defaultMessage='The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.' />
</div>
<div>
<FormattedMessage
id='settings.background.overview_1'
defaultMessage='Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.' />
</div>
<div>
<Button
icon={ <NavigationRefresh /> }
label='generate more'
label={
<FormattedMessage
id='settings.background.button_more'
defaultMessage='generate more' />
}
onClick={ this.generateSeeds } />
</div>
</div>

68
js/src/views/Settings/Parity/parity.js
View File

@ -15,19 +15,13 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { MenuItem } from 'material-ui';
import { Select, Container } from '~/ui';
import { Select, Container, LanguageSelector } from '~/ui';
import layout from '../layout.css';
const MODES = {
'active': 'Parity continuously syncs the chain',
'passive': 'Parity syncs initially, then sleeps and wakes regularly to resync',
'dark': 'Parity syncs only when the RPC is active',
'offline': 'Parity doesn\'t sync'
};
export default class Parity extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
@ -43,12 +37,19 @@ export default class Parity extends Component {
render () {
return (
<Container title='Parity'>
<Container title={
<FormattedMessage id='settings.parity.label' />
}>
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>Control the Parity node settings and mode of operation via this interface.</div>
<div>
<FormattedMessage
id='settings.parity.overview_0'
defaultMessage='Control the Parity node settings and mode of operation via this interface.' />
</div>
</div>
<div className={ layout.details }>
<LanguageSelector />
{ this.renderModes() }
</div>
</div>
@ -57,30 +58,53 @@ export default class Parity extends Component {
}
renderModes () {
const modes = Object
.keys(MODES)
.map((mode) => {
const description = MODES[mode];
const { mode } = this.state;
const renderItem = (mode, label) => {
return (
<MenuItem
key={ mode }
value={ mode }
label={ description }>
{ description }
label={ label }>
{ label }
</MenuItem>
);
});
const { mode } = this.state;
};
return (
<Select
label='mode of operation'
hint='the syning mode for the Parity node'
label={
<FormattedMessage
id='settings.parity.modes.label'
defaultMessage='mode of operation' />
}
hint={
<FormattedMessage
id='settings.parity.modes.hint'
defaultMessage='the syning mode for the Parity node' />
}
value={ mode }
onChange={ this.onChangeMode }>
{ modes }
{
renderItem('active', <FormattedMessage
id='settings.parity.modes.mode_active'
defaultMessage='Parity continuously syncs the chain' />)
}
{
renderItem('passive', <FormattedMessage
id='settings.parity.modes.mode_passive'
defaultMessage='Parity syncs initially, then sleeps and wakes regularly to resync' />)
}
{
renderItem('dark', <FormattedMessage
id='settings.parity.modes.mode_dark'
defaultMessage='Parity syncs only when the RPC is active' />)
}
{
renderItem('offline', <FormattedMessage
id='settings.parity.modes.mode_offline'
defaultMessage="Parity doesn't sync" />)
}
</Select>
);
}

35
js/src/views/Settings/Proxy/proxy.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Container } from '~/ui';
@ -31,16 +32,40 @@ export default class Proxy extends Component {
const proxyurl = `${dappsUrl}/proxy/proxy.pac`;
return (
<Container title='Proxy'>
<Container title={
<FormattedMessage id='settings.proxy.label' />
}>
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.</div>
<div>
<FormattedMessage
id='settings.proxy.overview_0'
defaultMessage='The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.' />
</div>
</div>
<div className={ layout.details }>
<div className={ styles.details }>
<div>Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting <span className={ layout.console }>http://home.parity/</span>. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,</div>
<div className={ layout.center }><a href={ proxyurl } target='_blank'>{ proxyurl }</a></div>
<div>To learn how to configure the proxy, instructions are provided for <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'>Windows</a>, <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'>Max OS X</a> or <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'>Ubuntu</a>.</div>
<div>
<FormattedMessage
id='settings.proxy.details_0'
defaultMessage='Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting {homeProxy}. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,'
values={ {
homeProxy: <span className={ layout.console }>http://home.parity/</span>
} } />
</div>
<div className={ layout.center }>
<a href={ proxyurl } target='_blank'>{ proxyurl }</a>
</div>
<div>
<FormattedMessage
id='settings.proxy.details_1'
defaultMessage='To learn how to configure the proxy, instructions are provided for {windowsLink}, {macOSLink} or {ubuntuLink}.'
values={ {
windowsLink: <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'><FormattedMessage id='details_windows' defaultMessage='Windows' /></a>,
macOSLink: <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'><FormattedMessage id='settings.proxy.details_macos' defaultMessage='macOS' /></a>,
ubuntuLink: <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'><FormattedMessage id='settings.proxy.details_ubuntu' defaultMessage='Ubuntu' /></a>
} } />
</div>
</div>
</div>
</div>

28
js/src/views/Settings/Views/defaults.js
View File

@ -28,66 +28,52 @@ const defaultViews = {
active: true,
fixed: true,
icon: <ActionAccountBalanceWallet />,
label: 'Accounts',
route: '/accounts',
value: 'account',
description: 'A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.'
value: 'account'
},
addresses: {
active: true,
icon: <CommunicationContacts />,
label: 'Addressbook',
route: '/addresses',
value: 'address',
description: 'A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.'
value: 'address'
},
apps: {
active: true,
icon: <NavigationApps />,
label: 'Applications',
route: '/apps',
value: 'app',
description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the network.'
value: 'app'
},
contracts: {
active: false,
icon: <ImageGridOn />,
label: 'Contracts',
route: '/contracts',
value: 'contract',
description: 'Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focused environment, specifically for advanced users that understand the inner working of certain contracts.'
value: 'contract'
},
status: {
active: false,
icon: <ActionTrackChanges />,
label: 'Status',
route: '/status',
value: 'status',
description: 'See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).'
value: 'status'
},
signer: {
active: true,
fixed: true,
icon: <ActionFingerprint />,
label: 'Signer',
route: '/signer',
value: 'signer',
description: 'The secure transaction management area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.'
value: 'signer'
},
settings: {
active: true,
fixed: true,
icon: <ActionSettings />,
label: 'Settings',
route: '/settings',
value: 'settings',
description: 'This view. Allows you to customize the application in term of options, operation and look and feel.'
value: 'settings'
}
};

129
js/src/views/Settings/Views/views.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Checkbox } from 'material-ui';
@ -34,16 +35,96 @@ class Views extends Component {
render () {
return (
<Container title='Views'>
<Container title={
<FormattedMessage id='settings.views.label' />
}>
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>Manage the available application views, using only the parts of the application that is applicable to you.</div>
<div>Are you an end-user? The defaults are setups for both beginner and advanced users alike.</div>
<div>Are you a developer? Add some features to manage contracts are interact with application deployments.</div>
<div>Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.</div>
<div>
<FormattedMessage
id='settings.views.overview_0'
defaultMessage='Manage the available application views, using only the parts of the application that is applicable to you.' />
</div>
<div>
<FormattedMessage
id='settings.views.overview_1'
defaultMessage='Are you an end-user? The defaults are setups for both beginner and advanced users alike.' />
</div>
<div>
<FormattedMessage
id='settings.views.overview_2'
defaultMessage='Are you a developer? Add some features to manage contracts are interact with application deployments.' />
</div>
<div>
<FormattedMessage
id='settings.views.overview_3'
defaultMessage='Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.' />
</div>
</div>
<div className={ layout.details }>
{ this.renderViews() }
{
this.renderView('accounts',
<FormattedMessage
id='settings.views.accounts.label' />,
<FormattedMessage
id='settings.views.accounts.description'
defaultMessage='A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.' />
)
}
{
this.renderView('addresses',
<FormattedMessage
id='settings.views.addresses.label' />,
<FormattedMessage
id='settings.views.addresses.description'
defaultMessage='A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.' />
)
}
{
this.renderView('apps',
<FormattedMessage
id='settings.views.apps.label' />,
<FormattedMessage
id='settings.views.apps.description'
defaultMessage='Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the network.' />
)
}
{
this.renderView('contracts',
<FormattedMessage
id='settings.views.contracts.label' />,
<FormattedMessage
id='settings.views.contracts.description'
defaultMessage='Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focused environment, specifically for advanced users that understand the inner working of certain contracts.' />
)
}
{
this.renderView('status',
<FormattedMessage
id='settings.views.status.label' />,
<FormattedMessage
id='settings.views.status.description'
defaultMessage='See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).' />
)
}
{
this.renderView('signer',
<FormattedMessage
id='settings.views.signer.label' />,
<FormattedMessage
id='settings.views.signer.description'
defaultMessage='The secure transaction management area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.' />
)
}
{
this.renderView('settings',
<FormattedMessage
id='settings.views.settings.label' />,
<FormattedMessage
id='settings.views.settings.description'
defaultMessage='This view. Allows you to customize the application in term of options, operation and look and feel.' />
)
}
</div>
</div>
</Container>
@ -51,36 +132,44 @@ class Views extends Component {
}
renderViews () {
const { settings, toggleView } = this.props;
const { settings } = this.props;
return Object.keys(settings.views).map((id) => {
const description = <FormattedMessage id={ `settings.views.${id}.description` } />;
const label = <FormattedMessage id={ `settings.views.${id}.label` } />;
this.renderView(id, label, description);
});
}
renderView = (id, label, description) => {
const { settings, toggleView } = this.props;
const toggle = () => toggleView(id);
const view = settings.views[id];
const label = (
<div className={ styles.header }>
<div className={ styles.labelicon }>
{ view.icon }
</div>
<div className={ styles.label }>
{ view.label }
</div>
</div>
);
return (
<div className={ styles.view } key={ id }>
<Checkbox
disabled={ view.fixed }
label={ label }
label={
<div className={ styles.header }>
<div className={ styles.labelicon }>
{ view.icon }
</div>
<div className={ styles.label }>
{ label }
</div>
</div>
}
onCheck={ toggle }
checked={ view.active }
value={ view.active } />
<div className={ styles.info }>
{ view.description }
{ description }
</div>
</div>
);
});
}
}

25
js/src/views/Settings/settings.js
View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Tab, Tabs } from 'material-ui';
import ActionSettingsEthernet from 'material-ui/svg-icons/action/settings-ethernet';
import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
@ -46,7 +47,11 @@ export default class Settings extends Component {
return (
<div>
<Actionbar title='settings' className={ styles.bar }>
<Actionbar
className={ styles.bar }
title={
<FormattedMessage id='settings.label' />
}>
<Tabs className={ styles.tabs } value={ hash }>
{ this.renderTab(hash, 'views', <ImageRemoveRedEye />) }
{ this.renderTab(hash, 'background', <ImageBlurOn />) }
@ -64,12 +69,20 @@ export default class Settings extends Component {
renderTab (hash, section, icon) {
return (
<Tab
className={ hash === section ? styles.tabactive : styles.tab }
value={ section }
key={ section }
className={
hash === section
? styles.tabactive
: styles.tab
}
icon={ icon }
label={ <div className={ styles.menu }>{ section }</div> }
onActive={ this.onActivate(section) } />
key={ section }
label={
<div className={ styles.menu }>
<FormattedMessage id={ `settings.${section}.label` } />
</div>
}
onActive={ this.onActivate(section) }
value={ section } />
);
}

9
js/webpack/app.js
View File

@ -17,6 +17,7 @@
const webpack = require('webpack');
const path = require('path');
const ReactIntlAggregatePlugin = require('react-intl-aggregate-webpack-plugin');
const WebpackErrorNotificationPlugin = require('webpack-error-notification');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -163,7 +164,15 @@ module.exports = {
}));
if (!isProd) {
const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
plugins.push(
new ReactIntlAggregatePlugin({
messagesPattern: DEST_I18N + '/src/**/*.json',
aggregateOutputDir: DEST_I18N + '/i18n/',
aggregateFilename: 'en'
}),
new webpack.optimize.CommonsChunkPlugin({
filename: 'commons.[hash:10].js',
name: 'commons',