Extract i18n strings in views/* (#4695)

* i18n for writecontract

* i18n for writecontract store

* wallet i18n

* wallet confirmations i18n

* wallet details i18n

* wallet transactions i18n

* status i18n

* status calls i18n

* status callstoolbar i18n

* status debug i18n

* status editableValue i18n

* status miningSettings i18n

* status rpcCalls i18n

* status rpcDocs i18n

* status status i18n

* signer i18n

* signer origin i18n

* signer signRequest i18n

* signer transactionMainDetails i18n

* sign transactionPending i18n

* signer transactionPending i18n

* Fix duplicate ids

* Typo

* Adapt tests for i18n

* Actionbar i18n

* contracts i18n

* contract i18n

* contract/queries i18n

* contract/events i18n

* application/frameError i18n

* Actionbar key naming

* addresses i18n

* address i18n

* accounts i18n (tooltip)

* Plural strings for owner numbers

* IdentityIcon placement

* Re-apply s/actiobar/actionbar/ after merge

js/src/ui/Actionbar/Import/import.js

@@ -65,7 +65,7 @@ export default class ActionbarImport extends Component {
           icon={ <FileUploadIcon /> }
           label={
             <FormattedMessage
-              id='ui.actiobar.import.button.import'
+              id='ui.actionbar.import.button.import'
               defaultMessage='import'
             />
           }
@@ -87,19 +87,19 @@ export default class ActionbarImport extends Component {
     const steps = typeof renderValidation === 'function'
       ? [
         <FormattedMessage
-          id='ui.actiobar.import.step.select'
+          id='ui.actionbar.import.step.select'
           defaultMessage='select a file'
         />,
         error
           ? (
             <FormattedMessage
-              id='ui.actiobar.import.step.error'
+              id='ui.actionbar.import.step.error'
               defaultMessage='error'
             />
           )
           : (
             <FormattedMessage
-              id='ui.actiobar.import.step.validate'
+              id='ui.actionbar.import.step.validate'
               defaultMessage='validate'
             />)
       ]
@@ -128,7 +128,7 @@ export default class ActionbarImport extends Component {
         key='cancel'
         label={
           <FormattedMessage
-            id='ui.actiobar.import.button.cancel'
+            id='ui.actionbar.import.button.cancel'
             defaultMessage='Cancel'
           />
         }
@@ -147,7 +147,7 @@ export default class ActionbarImport extends Component {
           key='confirm'
           label={
             <FormattedMessage
-              id='ui.actiobar.import.button.confirm'
+              id='ui.actionbar.import.button.confirm'
               defaultMessage='Confirm'
             />
           }
@@ -169,7 +169,7 @@ export default class ActionbarImport extends Component {
         <div>
           <p>
             <FormattedMessage
-              id='ui.actiobar.import.error'
+              id='ui.actionbar.import.error'
               defaultMessage='An error occured: {errorText}'
               values={ {
                 errorText
@@ -196,7 +196,7 @@ export default class ActionbarImport extends Component {
       <div>
         <p className={ styles.desc }>
           <FormattedMessage
-            id='ui.actiobar.import.confirm'
+            id='ui.actionbar.import.confirm'
             defaultMessage='Confirm that this is what was intended to import.'
           />
         </p>

js/src/ui/Actionbar/Sort/sort.js

@@ -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 IconMenu from 'material-ui/IconMenu';
@@ -71,12 +72,38 @@ export default class ActionbarSort extends Component {
       >
         {
           showDefault
-          ? this.renderMenuItem('', 'Default')
+            ? this.renderMenuItem('', (
-          : null
+              <FormattedMessage
+                id='ui.actionbar.sort.typeDefault'
+                defaultMessage='Default'
+              />
+            ))
+            : null
+        }
+        {
+          this.renderMenuItem('tags', (
+            <FormattedMessage
+              id='ui.actionbar.sort.typeTags'
+              defaultMessage='Sort by tags'
+            />
+          ))
+        }
+        {
+          this.renderMenuItem('name', (
+            <FormattedMessage
+              id='ui.actionbar.sort.typeName'
+              defaultMessage='Sort by name'
+            />
+          ))
+        }
+        {
+          this.renderMenuItem('eth', (
+            <FormattedMessage
+              id='ui.actionbar.sort.typeEth'
+              defaultMessage='Sort by ETH'
+            />
+          ))
         }
-        { this.renderMenuItem('tags', 'Sort by tags') }
-        { this.renderMenuItem('name', 'Sort by name') }
-        { this.renderMenuItem('eth', 'Sort by ETH') }
 
         { this.renderSortByMetas() }
       </IconMenu>
@@ -88,8 +115,17 @@ export default class ActionbarSort extends Component {
 
     return metas
       .map((meta, index) => {
-        return this
+        const label = (
-          .renderMenuItem(meta.key, `Sort by ${meta.label}`, index);
+          <FormattedMessage
+            id='ui.actionbar.sort.sortBy'
+            defaultMessage='Sort by {label}'
+            values={ {
+              label: meta.label
+            } }
+          />
+        );
+
+        return this.renderMenuItem(meta.key, label, index);
       });
   }
 

js/src/ui/Icons/index.js

@@ -29,22 +29,29 @@ export ContractIcon from 'material-ui/svg-icons/action/code';
 export CopyIcon from 'material-ui/svg-icons/content/content-copy';
 export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
 export DeleteIcon from 'material-ui/svg-icons/action/delete';
+export DevelopIcon from 'material-ui/svg-icons/action/description';
 export DoneIcon from 'material-ui/svg-icons/action/done-all';
 export EditIcon from 'material-ui/svg-icons/content/create';
 export ErrorIcon from 'material-ui/svg-icons/alert/error';
 export FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
 export FileIcon from 'material-ui/svg-icons/editor/insert-drive-file';
 export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
+export GasIcon from 'material-ui/svg-icons/maps/local-gas-station';
 export KeyIcon from 'material-ui/svg-icons/communication/vpn-key';
 export KeyboardIcon from 'material-ui/svg-icons/hardware/keyboard';
 export LinkIcon from 'material-ui/svg-icons/content/link';
+export ListIcon from 'material-ui/svg-icons/action/view-list';
 export LockedIcon from 'material-ui/svg-icons/action/lock';
 export MembershipIcon from 'material-ui/svg-icons/action/card-membership';
 export MoveIcon from 'material-ui/svg-icons/action/open-with';
 export NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
+export PauseIcon from 'material-ui/svg-icons/av/pause';
+export PlayIcon from 'material-ui/svg-icons/av/play-arrow';
 export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
 export PrintIcon from 'material-ui/svg-icons/action/print';
 export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
+export ReorderIcon from 'material-ui/svg-icons/action/reorder';
+export ReplayIcon from 'material-ui/svg-icons/av/replay';
 export SaveIcon from 'material-ui/svg-icons/content/save';
 export SendIcon from 'material-ui/svg-icons/content/send';
 export SettingsIcon from 'material-ui/svg-icons/action/settings';

js/src/views/Accounts/Summary/summary.js

@@ -214,7 +214,13 @@ class Summary extends Component {
                   />
                 </div>
                 <ReactTooltip id={ `owner_${owner.address}` }>
-                  <strong>{ owner.name } </strong><small> (owner)</small>
+                  <FormattedMessage
+                    id='accounts.tooltips.owner'
+                    defaultMessage='{name} (owner)'
+                    values={ {
+                      name: owner.name
+                    } }
+                  />
                 </ReactTooltip>
               </Link>
             );

js/src/views/Address/Delete/delete.js

@@ -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';
 
@@ -49,13 +50,21 @@ class Delete extends Component {
     return (
       <ConfirmDialog
         className={ styles.delete }
-        title='confirm removal'
+        title={
+          <FormattedMessage
+            id='address.delete.title'
+            defaultMessage='confirm removal'
+          />
+        }
         visible
         onDeny={ this.closeDeleteDialog }
         onConfirm={ this.onDeleteConfirmed }
       >
         <div className={ styles.hero }>
-          Are you sure you want to remove the following address from your addressbook?
+          <FormattedMessage
+            id='address.delete.confirmInfo'
+            defaultMessage='Are you sure you want to remove the following address from your addressbook?'
+          />
         </div>
         <div className={ styles.info }>
           <IdentityIcon
@@ -64,7 +73,10 @@ class Delete extends Component {
           />
           <div className={ styles.nameinfo }>
             <div className={ styles.header }>
-              <IdentityName address={ account.address } unknown />
+              <IdentityName
+                address={ account.address }
+                unknown
+              />
             </div>
             <div className={ styles.address }>
               { account.address }

js/src/views/Address/address.js

@@ -15,14 +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 { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import ActionDelete from 'material-ui/svg-icons/action/delete';
-import ContentCreate from 'material-ui/svg-icons/content/create';
-import ContentAdd from 'material-ui/svg-icons/content/add';
 
 import { EditMeta, AddAddress } from '~/modals';
 import { Actionbar, Button, Page } from '~/ui';
+import { AddIcon, DeleteIcon, EditIcon } from '~/ui/Icons';
 
 import Header from '../Account/Header';
 import Transactions from '../Account/Transactions';
@@ -146,14 +145,24 @@ class Address extends Component {
     const buttons = [
       <Button
         key='editmeta'
-        icon={ <ContentCreate /> }
+        icon={ <EditIcon /> }
-        label='edit'
+        label={
+          <FormattedMessage
+            id='address.buttons.edit'
+            defaultMessage='edit'
+          />
+        }
         onClick={ this.onEditClick }
       />,
       <Button
         key='delete'
-        icon={ <ActionDelete /> }
+        icon={ <DeleteIcon /> }
-        label='forget'
+        label={
+          <FormattedMessage
+            id='address.buttons.forget'
+            defaultMessage='forget'
+          />
+        }
         onClick={ this.showDeleteDialog }
       />
     ];
@@ -161,16 +170,30 @@ class Address extends Component {
     const addToBook = (
       <Button
         key='newAddress'
-        icon={ <ContentAdd /> }
+        icon={ <AddIcon /> }
-        label='save'
+        label={
+          <FormattedMessage
+            id='address.buttons.save'
+            defaultMessage='save'
+          />
+        }
         onClick={ this.onOpenAdd }
       />
     );
 
     return (
       <Actionbar
-        title='Address Information'
+        title={
-        buttons={ !contact ? [ addToBook ] : buttons }
+          <FormattedMessage
+            id='address.title'
+            defaultMessage='Address Information'
+          />
+        }
+        buttons={
+          !contact
+            ? [ addToBook ]
+            : buttons
+        }
       />
     );
   }

js/src/views/Addresses/addresses.js

@@ -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 ContentAdd from 'material-ui/svg-icons/content/add';
@@ -143,7 +144,12 @@ class Addresses extends Component {
       <Button
         key='newAddress'
         icon={ <ContentAdd /> }
-        label='address'
+        label={
+          <FormattedMessage
+            id='addresses.buttons.add'
+            defaultMessage='address'
+          />
+        }
         onClick={ this.onOpenAdd }
       />,
       <ActionbarExport
@@ -163,7 +169,12 @@ class Addresses extends Component {
     return (
       <Actionbar
         className={ styles.toolbar }
-        title='Saved Addresses'
+        title={
+          <FormattedMessage
+            id='addresses.title'
+            defaultMessage='Saved Addresses'
+          />
+        }
         buttons={ buttons }
       />
     );
@@ -187,7 +198,12 @@ class Addresses extends Component {
 
   renderValidation = (content) => {
     const error = {
-      error: 'The provided file is invalid...'
+      error: (
+        <FormattedMessage
+          id='addresses.errors.invalidFile'
+          defaultMessage='The provided file is invalid...'
+        />
+      )
     };
 
     try {
@@ -214,7 +230,9 @@ class Addresses extends Component {
           { body }
         </div>
       );
-    } catch (e) { return error; }
+    } catch (e) {
+      return error;
+    }
   }
 
   onImport = (content) => {

js/src/views/Application/FrameError/frameError.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import styles from './frameError.css';
 
@@ -22,7 +23,10 @@ export default class FrameError extends Component {
   render () {
     return (
       <div className={ styles.error }>
-        ERROR: This application cannot and should not be loaded in an embedded iFrame
+        <FormattedMessage
+          id='application.frame.error'
+          defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
+        />
       </div>
     );
   }

js/src/views/Contract/Events/Event/event.js

@@ -17,6 +17,7 @@
 import BigNumber from 'bignumber.js';
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { IdentityIcon, IdentityName, Input, InputAddress } from '~/ui';
 import ShortenedHash from '~/ui/ShortenedHash';
@@ -64,7 +65,12 @@ export default class Event extends Component {
         <td className={ styles.timestamp }>
           <div>{
             event.state === 'pending'
-              ? 'pending'
+              ? (
+                <FormattedMessage
+                  id='contract.events.eventPending'
+                  defaultMessage='pending'
+                />
+              )
               : this.formatBlockTimestamp(block)
           }</div>
           <div>{ this.formatNumber(transaction.blockNumber) }</div>
@@ -96,7 +102,11 @@ export default class Event extends Component {
           center
           inline
         />
-        { withName ? <IdentityName address={ address } /> : address }
+        {
+          withName
+            ? <IdentityName address={ address } />
+            : address
+        }
       </span>
     );
   }

js/src/views/Contract/Events/events.js

@@ -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 { uniq } from 'lodash';
 
 import { Container, Loading } from '~/ui';
@@ -22,6 +23,13 @@ import { Container, Loading } from '~/ui';
 import Event from './Event';
 import styles from '../contract.css';
 
+const TITLE = (
+  <FormattedMessage
+    id='contract.events.title'
+    defaultMessage='events'
+  />
+);
+
 export default class Events extends Component {
   static contextTypes = {
     api: PropTypes.object
@@ -43,7 +51,7 @@ export default class Events extends Component {
 
     if (isLoading) {
       return (
-        <Container title='events'>
+        <Container title={ TITLE }>
           <div>
             <Loading size={ 2 } />
           </div>
@@ -53,8 +61,13 @@ export default class Events extends Component {
 
     if (!events || !events.length) {
       return (
-        <Container title='events'>
+        <Container title={ TITLE }>
-          <p>No events has been sent from this contract.</p>
+          <p>
+            <FormattedMessage
+              id='contract.events.noEvents'
+              defaultMessage='No events has been sent from this contract.'
+            />
+          </p>
         </Container>
       );
     }
@@ -73,7 +86,7 @@ export default class Events extends Component {
     });
 
     return (
-      <Container title='events'>
+      <Container title={ TITLE }>
         <table className={ styles.events }>
           <thead>
             <tr>

js/src/views/Contract/Queries/inputQuery.js

@@ -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 LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 import { connect } from 'react-redux';
@@ -80,7 +81,12 @@ class InputQuery extends Component {
         </CardText>
         <CardActions>
           <Button
-            label='Query'
+            label={
+              <FormattedMessage
+                id='contract.queries.buttons.query'
+                defaultMessage='Query'
+              />
+            }
             disabled={ !isValid }
             onClick={ this.onClick }
           />
@@ -94,7 +100,9 @@ class InputQuery extends Component {
     const { accountsInfo, outputs } = this.props;
 
     if (isLoading) {
-      return (<LinearProgress mode='indeterminate' />);
+      return (
+        <LinearProgress mode='indeterminate' />
+      );
     }
 
     if (!results || results.length < 1) {

js/src/views/Contract/Queries/queries.js

@@ -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 { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
@@ -59,7 +60,14 @@ export default class Queries extends Component {
     }
 
     return (
-      <Container title='queries'>
+      <Container
+        title={
+          <FormattedMessage
+            id='contract.queries.title'
+            defaultMessage='queries'
+          />
+        }
+      >
         <div className={ styles.methods }>
           {
             noInputQueries.length > 0

js/src/views/Contract/contract.js

@@ -15,22 +15,16 @@
 // 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 { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
 
-import ActionDelete from 'material-ui/svg-icons/action/delete';
+import { EditMeta, ExecuteContract } from '~/modals';
-import AvPlayArrow from 'material-ui/svg-icons/av/play-arrow';
-import ContentCreate from 'material-ui/svg-icons/content/create';
-import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
-import ContentClear from 'material-ui/svg-icons/content/clear';
-
 import { newError } from '~/redux/actions';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
-
-import { EditMeta, ExecuteContract } from '~/modals';
 import { Actionbar, Button, Page, Portal } from '~/ui';
+import { CancelIcon, DeleteIcon, EditIcon, PlayIcon, VisibleIcon } from '~/ui/Icons';
 import Editor from '~/ui/Editor';
 
 import Header from '../Account/Header';
@@ -191,8 +185,13 @@ class Contract extends Component {
 
     const cancelBtn = (
       <Button
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
-        label='Close'
+        label={
+          <FormattedMessage
+            id='contract.buttons.close'
+            defaultMessage='Close'
+          />
+        }
         onClick={ this.closeDetailsDialog }
       />
     );
@@ -202,7 +201,12 @@ class Contract extends Component {
         buttons={ [ cancelBtn ] }
         onClose={ this.closeDetailsDialog }
         open
-        title={ 'contract details' }
+        title={
+          <FormattedMessage
+            id='contract.details.title'
+            defaultMessage='contract details'
+          />
+        }
       >
         <div className={ styles.details }>
           { this.renderSource(contract) }
@@ -243,33 +247,58 @@ class Contract extends Component {
     const buttons = [
       <Button
         key='execute'
-        icon={ <AvPlayArrow /> }
+        icon={ <PlayIcon /> }
-        label='execute'
+        label={
+          <FormattedMessage
+            id='contract.buttons.execute'
+            defaultMessage='execute'
+          />
+        }
         onClick={ this.showExecuteDialog }
       />,
       <Button
         key='editmeta'
-        icon={ <ContentCreate /> }
+        icon={ <EditIcon /> }
-        label='edit'
+        label={
+          <FormattedMessage
+            id='contract.buttons.edit'
+            defaultMessage='edit'
+          />
+        }
         onClick={ this.showEditDialog }
       />,
       <Button
         key='delete'
-        icon={ <ActionDelete /> }
+        icon={ <DeleteIcon /> }
-        label='forget'
+        label={
+          <FormattedMessage
+            id='contract.buttons.forget'
+            defaultMessage='forget'
+          />
+        }
         onClick={ this.showDeleteDialog }
       />,
       <Button
         key='viewDetails'
-        icon={ <EyeIcon /> }
+        icon={ <VisibleIcon /> }
-        label='details'
+        label={
+          <FormattedMessage
+            id='contract.buttons.details'
+            defaultMessage='details'
+          />
+        }
         onClick={ this.showDetailsDialog }
       />
     ];
 
     return (
       <Actionbar
-        title='Contract Information'
+        title={
+          <FormattedMessage
+            id='contract.title'
+            defaultMessage='Contract Information'
+          />
+        }
         buttons={ !account ? [] : buttons }
       />
     );

js/src/views/Contracts/contracts.js

@@ -15,19 +15,40 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import ContentAdd from 'material-ui/svg-icons/content/add';
-import FileIcon from 'material-ui/svg-icons/action/description';
 import { uniq, isEqual } from 'lodash';
 
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
 import { AddContract, DeployContract } from '~/modals';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
+import { AddIcon, DevelopIcon } from '~/ui/Icons';
 
 import List from '../Accounts/List';
 
+const META_SORT = [
+  {
+    key: 'timestamp',
+    label: (
+      <FormattedMessage
+        id='contracts.sortOrder.date'
+        defaultMessage='date'
+      />
+    )
+  },
+  {
+    key: 'blockNumber:-1',
+    label: (
+      <FormattedMessage
+        id='contracts.sortOrder.minedBlock'
+        defaultMessage='mined block'
+      />
+    )
+  }
+];
+
 class Contracts extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
@@ -109,10 +130,7 @@ class Contracts extends Component {
         key='sortAccounts'
         id='sortContracts'
         order={ this.state.sortOrder }
-        metas={ [
+        metas={ META_SORT }
-          { key: 'timestamp', label: 'date' },
-          { key: 'blockNumber:-1', label: 'mined block' }
-        ] }
         showDefault={ false }
         onChange={ onChange }
       />
@@ -137,14 +155,24 @@ class Contracts extends Component {
     const buttons = [
       <Button
         key='addContract'
-        icon={ <ContentAdd /> }
+        icon={ <AddIcon /> }
-        label='watch'
+        label={
+          <FormattedMessage
+            id='contracts.buttons.watch'
+            defaultMessage='watch'
+          />
+        }
         onClick={ this.onAddContract }
       />,
       <Button
         key='deployContract'
-        icon={ <ContentAdd /> }
+        icon={ <AddIcon /> }
-        label='deploy'
+        label={
+          <FormattedMessage
+            id='contracts.buttons.deploy'
+            defaultMessage='deploy'
+          />
+        }
         onClick={ this.onDeployContract }
       />,
       <Link
@@ -152,8 +180,13 @@ class Contracts extends Component {
         key='writeContract'
       >
         <Button
-          icon={ <FileIcon /> }
+          icon={ <DevelopIcon /> }
-          label='develop'
+          label={
+            <FormattedMessage
+              id='contracts.buttons.develop'
+              defaultMessage='develop'
+            />
+          }
         />
       </Link>,
 
@@ -163,7 +196,12 @@ class Contracts extends Component {
 
     return (
       <Actionbar
-        title='Contracts'
+        title={
+          <FormattedMessage
+            id='contracts.title'
+            defaultMessage='Contracts'
+          />
+        }
         buttons={ buttons }
       />
     );

js/src/views/Signer/components/RequestOrigin/requestOrigin.js

@@ -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 IdentityIcon from '~/ui/IdentityIcon';
 
@@ -45,16 +46,36 @@ export default class RequestOrigin extends Component {
   renderOrigin (origin) {
     if (origin.type === 'unknown') {
       return (
-        <span className={ styles.unknown }>via unknown interface</span>
+        <span className={ styles.unknown }>
+          <FormattedMessage
+            id='signer.requestOrigin.unknownInterface'
+            defaultMessage='via unknown interface'
+          />
+        </span>
       );
     }
 
     if (origin.type === 'dapp') {
       return (
         <span>
-          by a dapp at <span className={ styles.url }>
+          <FormattedMessage
-            { origin.details || 'unknown URL' }
+            id='signer.requestOrigin.dapp'
-          </span>
+            defaultMessage='by a dapp at {url}'
+            values={ {
+              url: (
+                <span className={ styles.url }>
+                  {
+                    origin.details || (
+                      <FormattedMessage
+                        id='signer.requestOrigin.unknownUrl'
+                        defaultMessage='unknown URL'
+                      />
+                    )
+                  }
+                </span>
+              )
+            } }
+          />
         </span>
       );
     }
@@ -62,9 +83,24 @@ export default class RequestOrigin extends Component {
     if (origin.type === 'rpc') {
       return (
         <span>
-          via RPC <span className={ styles.url }>
+          <FormattedMessage
-            ({ origin.details || 'unidentified' })
+            id='signer.requestOrigin.rpc'
-          </span>
+            defaultMessage='via RPC {rpc}'
+            values={ {
+              url: (
+                <span className={ styles.url }>
+                  ({
+                    origin.details || (
+                      <FormattedMessage
+                        id='signer.requestOrigin.unknownRpc'
+                        defaultMessage='unidentified'
+                      />
+                    )
+                  })
+                </span>
+              )
+            } }
+          />
         </span>
       );
     }
@@ -72,7 +108,10 @@ export default class RequestOrigin extends Component {
     if (origin.type === 'ipc') {
       return (
         <span>
-          via IPC session
+          <FormattedMessage
+            id='signer.requestOrigin.ipc'
+            defaultMessage='via IPC session'
+          />
           <span
             className={ styles.hash }
             title={ origin.details }
@@ -94,13 +133,21 @@ export default class RequestOrigin extends Component {
   renderSigner (session) {
     if (session.substr(2) === this.context.api.transport.sessionHash) {
       return (
-        <span title={ session }>via current tab</span>
+        <span title={ session }>
+          <FormattedMessage
+            id='signer.requestOrigin.signerCurrent'
+            defaultMessage='via current tab'
+          />
+        </span>
       );
     }
 
     return (
       <span>
-        via UI session
+        <FormattedMessage
+          id='signer.requestOrigin.signerUI'
+          defaultMessage='via UI session'
+        />
         <span
           className={ styles.hash }
           title={ `UI Session id: ${session}` }

js/src/views/Signer/components/RequestOrigin/requestOrigin.spec.js

@@ -34,39 +34,39 @@ describe('views/Signer/components/RequestOrigin', () => {
     expect(shallow(
       <RequestOrigin origin={ { type: 'unknown', details: '' } } />,
       context
-    ).text()).to.equal('Requested via unknown interface');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.unknownInterface');
   });
 
   it('renders dapps', () => {
     expect(shallow(
       <RequestOrigin origin={ { type: 'dapp', details: 'http://parity.io' } } />,
       context
-    ).text()).to.equal('Requested by a dapp at http://parity.io');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.dapp');
   });
 
   it('renders rpc', () => {
     expect(shallow(
       <RequestOrigin origin={ { type: 'rpc', details: '' } } />,
       context
-    ).text()).to.equal('Requested via RPC (unidentified)');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.rpc');
   });
 
   it('renders ipc', () => {
     expect(shallow(
       <RequestOrigin origin={ { type: 'ipc', details: '0x1234' } } />,
       context
-    ).text()).to.equal('Requested via IPC session<Connect(IdentityIcon) />');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.ipc');
   });
 
   it('renders signer', () => {
     expect(shallow(
       <RequestOrigin origin={ { type: 'signer', details: '0x12345' } } />,
       context
-    ).text()).to.equal('Requested via UI session<Connect(IdentityIcon) />');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.signerUI');
 
     expect(shallow(
       <RequestOrigin origin={ { type: 'signer', details: '0x1234' } } />,
       context
-    ).text()).to.equal('Requested via current tab');
+    ).find('FormattedMessage').props().id).to.equal('signer.requestOrigin.signerCurrent');
   });
 });

js/src/views/Signer/components/SignRequest/signRequest.js

@@ -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 Account from '../Account';
@@ -91,9 +92,16 @@ export default class SignRequest extends Component {
   }
 
   renderBinaryDetails (data) {
-    return (<div className={ styles.signData }>
+    return (
-      <p>(Unknown binary data)</p>
+      <div className={ styles.signData }>
-    </div>);
+        <p>
+          <FormattedMessage
+            id='signer.signRequest.unknownBinary'
+            defaultMessage='(Unknown binary data)'
+          />
+        </p>
+      </div>
+    );
   }
 
   renderDetails () {
@@ -119,13 +127,25 @@ export default class SignRequest extends Component {
           <RequestOrigin origin={ origin } />
         </div>
         <div className={ styles.info } title={ api.util.sha3(data) }>
-          <p>A request to sign data using your account:</p>
+          <p>
+            <FormattedMessage
+              id='signer.signRequest.request'
+              defaultMessage='A request to sign data using your account:'
+            />
+          </p>
           {
             isAscii(data)
               ? this.renderAsciiDetails(api.util.hexToAscii(data))
               : this.renderBinaryDetails(data)
           }
-          <p><strong>WARNING: This consequences of doing this may be grave. Confirm the request only if you are sure.</strong></p>
+          <p>
+            <strong>
+              <FormattedMessage
+                id='signer.signRequest.warning'
+                defaultMessage='WARNING: This consequences of doing this may be grave. Confirm the request only if you are sure.'
+              />
+            </strong>
+          </p>
         </div>
       </div>
     );
@@ -138,14 +158,24 @@ export default class SignRequest extends Component {
       if (status === 'confirmed') {
         return (
           <div className={ styles.actions }>
-            <span className={ styles.isConfirmed }>Confirmed</span>
+            <span className={ styles.isConfirmed }>
+              <FormattedMessage
+                id='signer.signRequest.state.confirmed'
+                defaultMessage='Confirmed'
+              />
+            </span>
           </div>
         );
       }
 
       return (
         <div className={ styles.actions }>
-          <span className={ styles.isRejected }>Rejected</span>
+          <span className={ styles.isRejected }>
+            <FormattedMessage
+              id='signer.signRequest.state.rejected'
+              defaultMessage='Rejected'
+            />
+          </span>
         </div>
       );
     }

js/src/views/Signer/components/TransactionMainDetails/transactionMainDetails.js

@@ -14,11 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import MapsLocalGasStation from 'material-ui/svg-icons/maps/local-gas-station';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
 import { Button, MethodDecoding } from '~/ui';
+import { GasIcon } from '~/ui/Icons';
 
 import * as tUtil from '../util/transaction';
 import Account from '../Account';
@@ -103,8 +104,13 @@ export default class TransactionMainDetails extends Component {
     return (
       <div className={ styles.editButtonRow }>
         <Button
-          icon={ <MapsLocalGasStation /> }
+          icon={ <GasIcon /> }
-          label='Edit conditions/gas/gasPrice'
+          label={
+            <FormattedMessage
+              id='signer.mainDetails.editTx'
+              defaultMessage='Edit conditions/gas/gasPrice'
+            />
+          }
           onClick={ this.toggleGasEditor }
         />
       </div>
@@ -128,8 +134,23 @@ export default class TransactionMainDetails extends Component {
           { totalValueDisplay } <small>ETH</small>
         </div>
         <ReactTooltip id={ labelId }>
-          The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
+          <FormattedMessage
-          (This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
+            id='signer.mainDetails.tooltips.total1'
+            defaultMessage='The value of the transaction including the mining fee is {total} {type}.'
+            values={ {
+              total: <strong>{ totalValueDisplayWei }</strong>,
+              type: <small>WEI</small>
+            } }
+          />
+          <br />
+          <FormattedMessage
+            id='signer.mainDetails.tooltips.total2'
+            defaultMessage='(This includes a mining fee of {fee} {token})'
+            values={ {
+              fee: <strong>{ feeEth }</strong>,
+              token: <small>ETH</small>
+            } }
+          />
         </ReactTooltip>
       </div>
     );
@@ -151,7 +172,11 @@ export default class TransactionMainDetails extends Component {
           <small>ETH</small>
         </div>
         <ReactTooltip id={ labelId }>
-          The value of the transaction.<br />
+          <FormattedMessage
+            id='signer.mainDetails.tooltips.value1'
+            defaultMessage='The value of the transaction.'
+          />
+          <br />
           <strong>{ valueDisplayWei }</strong> <small>WEI</small>
         </ReactTooltip>
       </div>

js/src/views/Signer/components/TransactionPending/transactionPending.js

@@ -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 { Button, GasPriceEditor } from '~/ui';
@@ -132,7 +133,12 @@ export default class TransactionPending extends Component {
       <div className={ `${styles.container} ${className}` }>
         <GasPriceEditor store={ this.gasStore }>
           <Button
-            label='view transaction'
+            label={
+              <FormattedMessage
+                id='signer.txPending.buttons.viewToggle'
+                defaultMessage='view transaction'
+              />
+            }
             onClick={ this.toggleGasEditor }
           />
         </GasPriceEditor>

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js

@@ -18,6 +18,7 @@ import keycode from 'keycode';
 import RaisedButton from 'material-ui/RaisedButton';
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 
@@ -98,7 +99,17 @@ class TransactionPendingFormConfirm extends Component {
 
     const passwordHintText = this.getPasswordHint();
     const passwordHint = passwordHintText
-      ? (<div><span>(hint) </span>{ passwordHintText }</div>)
+      ? (
+        <div>
+          <FormattedMessage
+            id='signer.txPendingConfirm.passwordHint'
+            defaultMessage='(hint) {hint}'
+            values={ {
+              hint: passwordHintText
+            } }
+          />
+        </div>
+      )
       : null;
 
     const isWalletOk = !isExternal || (walletError === null && wallet !== null);
@@ -113,13 +124,33 @@ class TransactionPendingFormConfirm extends Component {
           <Input
             hint={
               isExternal
-                ? 'decrypt the key'
+                ? (
-                : 'unlock the account'
+                  <FormattedMessage
+                    id='signer.txPendingConfirm.decryptKey.hint'
+                    defaultMessage='decrypt the key'
+                  />
+                )
+                : (
+                  <FormattedMessage
+                    id='signer.txPendingConfirm.unlockAccount.hint'
+                    defaultMessage='unlock the account'
+                  />
+                )
             }
             label={
               isExternal
-                ? 'Key Password'
+                ? (
-                : 'Account Password'
+                  <FormattedMessage
+                    id='signer.txPendingConfirm.decryptKey.label'
+                    defaultMessage='Key Password'
+                  />
+                )
+                : (
+                  <FormattedMessage
+                    id='signer.txPendingConfirm.unlockAccount.label'
+                    defaultMessage='Account Password'
+                  />
+                )
             }
             onChange={ this.onModifyPassword }
             onKeyDown={ this.onKeyDown }
@@ -149,8 +180,18 @@ class TransactionPendingFormConfirm extends Component {
               }
               label={
                 isSending
-                  ? 'Confirming...'
+                  ? (
-                  : 'Confirm Request'
+                    <FormattedMessage
+                      id='signer.txPendingConfirm.buttons.confirmBusy'
+                      defaultMessage='Confirming...'
+                    />
+                  )
+                  : (
+                    <FormattedMessage
+                      id='signer.txPendingConfirm.buttons.confirmRequest'
+                      defaultMessage='Confirm Request'
+                    />
+                  )
               }
               onTouchTap={ this.onConfirm }
               primary
@@ -169,7 +210,12 @@ class TransactionPendingFormConfirm extends Component {
       <Input
         className={ styles.fileInput }
         error={ walletError }
-        label='Select Local Key'
+        label={
+          <FormattedMessage
+            id='signer.txPendingConfirm.keySelect.label'
+            defaultMessage='Select Local Key'
+          />
+        }
         onChange={ this.onKeySelect }
         type='file'
       />
@@ -183,7 +229,10 @@ class TransactionPendingFormConfirm extends Component {
 
     return (
       <ReactTooltip id={ `transactionConfirmForm${this.id}` }>
-        Please provide a password for this account
+        <FormattedMessage
+          id='signer.txPendingConfirm.tooltips.password'
+          defaultMessage='Please provide a password for this account'
+        />
       </ReactTooltip>
     );
   }
@@ -216,7 +265,12 @@ class TransactionPendingFormConfirm extends Component {
       } catch (error) {
         this.setState({
           wallet: null,
-          walletError: 'Given wallet file is invalid.'
+          walletError: (
+            <FormattedMessage
+              id='signer.txPendingConfirm.errors.invalidWallet'
+              defaultMessage='Given wallet file is invalid.'
+            />
+          )
         });
       }
     };

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/transactionPendingFormReject.js

@@ -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 RaisedButton from 'material-ui/RaisedButton';
 
@@ -32,14 +33,28 @@ export default class TransactionPendingFormReject extends Component {
     return (
       <div>
         <div className={ styles.rejectText }>
-          Are you sure you want to reject request? <br />
+          <FormattedMessage
-          <strong>This cannot be undone</strong>
+            id='signer.txPendingReject.info'
+            defaultMessage='Are you sure you want to reject request?'
+          />
+          <br />
+          <strong>
+            <FormattedMessage
+              id='signer.txPendingReject.undone'
+              defaultMessage='This cannot be undone'
+            />
+          </strong>
         </div>
         <RaisedButton
           onTouchTap={ onReject }
           className={ styles.rejectButton }
           fullWidth
-          label={ 'Reject Request' }
+          label={
+            <FormattedMessage
+              id='signer.txPendingReject.buttons.reject'
+              defaultMessage='Reject Request'
+            />
+          }
         />
       </div>
     );

js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js

@@ -15,8 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import BackIcon from 'material-ui/svg-icons/navigation/arrow-back';
+import { PrevIcon } from '~/ui/Icons';
 
 import TransactionPendingFormConfirm from './TransactionPendingFormConfirm';
 import TransactionPendingFormReject from './TransactionPendingFormReject';
@@ -75,9 +76,24 @@ export default class TransactionPendingForm extends Component {
     let html;
 
     if (!isRejectOpen) {
-      html = <span>reject request</span>;
+      html = (
+        <span>
+          <FormattedMessage
+            id='signer.txPendingForm.reject'
+            defaultMessage='reject request'
+          />
+        </span>
+      );
     } else {
-      html = <span><BackIcon />{ "I've changed my mind" }</span>;
+      html = (
+        <span>
+          <PrevIcon />
+          <FormattedMessage
+            id='signer.txPendingForm.changedMind'
+            defaultMessage="I've changed my mind"
+          />
+        </span>
+      );
     }
 
     return (

js/src/views/Signer/signer.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Actionbar } from '~/ui';
 import RequestsPage from './containers/RequestsPage';
@@ -23,7 +24,14 @@ export default class Signer extends Component {
   render () {
     return (
       <div>
-        <Actionbar title='Trusted Signer' />
+        <Actionbar
+          title={
+            <FormattedMessage
+              id='signer.title'
+              defaultMessage='Trusted Signer'
+            />
+          }
+        />
         <RequestsPage />
       </div>
     );

js/src/views/Status/components/Calls/Calls.js

@@ -15,6 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+
 import Call from '../Call';
 import CallsToolbar from '../CallsToolbar';
 import styles from './Calls.css';
@@ -33,7 +35,12 @@ export default class Calls extends Component {
         { ...this._test('container') }
       >
         { this.renderClear() }
-        <h2 className={ styles.header }>History</h2>
+        <h2 className={ styles.header }>
+          <FormattedMessage
+            id='status.calls.title'
+            defaultMessage='History'
+          />
+        </h2>
         <div className={ `${styles.history} row` } ref={ this.setCallsHistory }>
           { this.renderNoCallsMsg() }
           { this.renderCalls() }
@@ -56,7 +63,12 @@ export default class Calls extends Component {
     return (
       <a
         { ...this._test('remove') }
-        title='Clear RPC calls history'
+        title={
+          <FormattedMessage
+            id='status.calls.clearHistory'
+            defaultMessage='Clear RPC calls history'
+          />
+        }
         onClick={ this.clearHistory }
         className={ styles.removeIcon }
       >
@@ -73,7 +85,10 @@ export default class Calls extends Component {
     return (
       <div { ...this._test('empty-wrapper') }>
         <h3 className={ styles.historyInfo } { ...this._test('empty') }>
-          Fire up some calls and the results will be here.
+          <FormattedMessage
+            id='status.calls.rpcResults'
+            defaultMessage='Fire up some calls and the results will be here.'
+          />
         </h3>
       </div>
     );

js/src/views/Status/components/CallsToolbar/CallsToolbar.js

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { FormattedMessage } from 'react-intl';
 import { sortBy, find, extend } from 'lodash';
 
 import IconButton from 'material-ui/IconButton';
@@ -58,7 +59,12 @@ export default class CallsToolbar extends Component {
           <IconButton
             className={ styles.callAction }
             onTouchTap={ this.setCall }
-            tooltip='Set'
+            tooltip={
+              <FormattedMessage
+                id='status.callsToolbar.tooltip.set'
+                defaultMessage='Set'
+              />
+            }
             tooltipPosition='top-left'
             { ...this._test('button-setCall') }
           >
@@ -67,7 +73,12 @@ export default class CallsToolbar extends Component {
           <IconButton
             className={ styles.callAction }
             onTouchTap={ this.makeCall }
-            tooltip='Fire again'
+            tooltip={
+              <FormattedMessage
+                id='status.callsToolbar.tooltip.fireAgain'
+                defaultMessage='Fire again'
+              />
+            }
             tooltipPosition='top-left'
             { ...this._test('button-makeCall') }
           >
@@ -79,7 +90,12 @@ export default class CallsToolbar extends Component {
           >
             <IconButton
               className={ styles.callAction }
-              tooltip='Copy to clipboard'
+              tooltip={
+                <FormattedMessage
+                  id='status.callsToolbar.tooltip.copy'
+                  defaultMessage='Copy to clipboard'
+                />
+              }
               tooltipPosition='top-left'
               { ...this._test('copyCallToClipboard') }
             >
@@ -112,7 +128,12 @@ export default class CallsToolbar extends Component {
   }
 
   copyToClipboard = () => {
-    this.props.actions.copyToClipboard('method copied to clipboard');
+    this.props.actions.copyToClipboard(
+      <FormattedMessage
+        id='status.callsToolbar.copied'
+        defaultMessage='method copied to clipboard'
+      />
+    );
   }
 
   hasScrollbar (el) {

js/src/views/Status/components/Debug/debug.js

@@ -15,12 +15,10 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import AvPause from 'material-ui/svg-icons/av/pause';
+import { FormattedMessage } from 'react-intl';
-import AvPlay from 'material-ui/svg-icons/av/play-arrow';
-import AvReplay from 'material-ui/svg-icons/av/replay';
-import ReorderIcon from 'material-ui/svg-icons/action/reorder';
 
 import { Container } from '~/ui';
+import { PauseIcon, PlayIcon, ReorderIcon, ReplayIcon } from '~/ui/Icons';
 
 import styles from './debug.css';
 
@@ -42,7 +40,14 @@ export default class Debug extends Component {
     const { devLogsLevels } = nodeStatus;
 
     return (
-      <Container title='Node Logs'>
+      <Container
+        title={
+          <FormattedMessage
+            id='status.debug.title'
+            defaultMessage='Node Logs'
+          />
+        }
+      >
         { this.renderActions() }
         <h2 className={ styles.subheader }>
           { devLogsLevels || '-' }
@@ -62,7 +67,10 @@ export default class Debug extends Component {
 
     return (
       <div className={ styles.stopped }>
-        Refresh and display of logs from Parity is currently stopped via the UI, start it to see the latest updates.
+        <FormattedMessage
+          id='status.debug.stopped'
+          defaultMessage='Refresh and display of logs from Parity is currently stopped via the UI, start it to see the latest updates.'
+        />
       </div>
     );
   }
@@ -112,14 +120,24 @@ export default class Debug extends Component {
   renderActions () {
     const { devLogsEnabled } = this.props.nodeStatus;
     const toggleButton = devLogsEnabled
-      ? <AvPause />
+      ? <PauseIcon />
-      : <AvPlay />;
+      : <PlayIcon />;
 
     return (
       <div className={ styles.actions }>
         <a onClick={ this.toggle }>{ toggleButton }</a>
-        <a onClick={ this.clear }><AvReplay /></a>
+        <a onClick={ this.clear }><ReplayIcon /></a>
-        <a onClick={ this.reverse } title='Reverse Order'><ReorderIcon /></a>
+        <a
+          onClick={ this.reverse }
+          title={
+            <FormattedMessage
+              id='status.debug.reverse'
+              defaultMessage='Reverse Order'
+            />
+          }
+        >
+          <ReorderIcon />
+        </a>
       </div>
     );
   }

js/src/views/Status/components/EditableValue/EditableValue.js

@@ -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 AutoComplete from 'material-ui/AutoComplete';
 
 import styles from './EditableValue.css';
@@ -133,10 +134,18 @@ export default class EditableValue extends Component {
 
     return (
       <a
-        key={ 'reset' }
+        key='reset'
         className={ `${styles.icon} ${styles.firstIcon}` }
         onClick={ this.onResetToDefault }
-        title={ `Reset to ${this.props.defaultValue}` }
+        title={
+          <FormattedMessage
+            id='status.editableValue.reset'
+            defaultMessage='Reset to {defaultVaule}'
+            values={ {
+              defaultVaule: this.props.defaultValue
+            } }
+          />
+        }
         { ...this._testInherit('reset') }
       >
         <i className='icon-anchor' />
@@ -148,7 +157,7 @@ export default class EditableValue extends Component {
     if (this.state.inEditMode) {
       return [
         <a
-          key={ 'submit' }
+          key='submit'
           className={ styles.iconSuccess }
           onClick={ this.onSubmit }
           { ...this._testInherit('submit') }
@@ -156,7 +165,7 @@ export default class EditableValue extends Component {
           <i className='icon-check' />
         </a>,
         <a
-          key={ 'cancel' }
+          key='cancel'
           className={ styles.icon }
           onClick={ this.onCancel }
           { ...this._testInherit('cancel') }
@@ -168,10 +177,15 @@ export default class EditableValue extends Component {
 
     return (
       <a
-        key={ 'edit' }
+        key='edit'
         className={ styles.icon }
         onClick={ this.onOpenEdit }
-        title='Edit'
+        title={
+          <FormattedMessage
+            id='status.editableValue.edit'
+            defaultMessage='Edit'
+          />
+        }
         { ...this._testInherit('edit') }
       >
         <i className='icon-pencil' />

js/src/views/Status/components/MiningSettings/miningSettings.js

@@ -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 formatNumber from 'format-number';
 
 import { ContainerTitle, Input } from '~/ui';
@@ -47,10 +48,27 @@ export default class MiningSettings extends Component {
 
     return (
       <div { ...this._testInherit() }>
-        <ContainerTitle title='mining settings' />
+        <ContainerTitle
+          title={
+            <FormattedMessage
+              id='status.miningSettings.title'
+              defaultMessage='mining settings'
+            />
+          }
+        />
         <Input
-          label='author'
+          label={
-          hint='the mining author'
+            <FormattedMessage
+              id='status.miningSettings.input.author.label'
+              defaultMessage='author'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='status.miningSettings.input.author.hint'
+              defaultMessage='the mining author'
+            />
+          }
           value={ coinbase }
           onSubmit={ this.onAuthorChange }
           allowCopy
@@ -59,8 +77,18 @@ export default class MiningSettings extends Component {
         />
 
         <Input
-          label='extradata'
+          label={
-          hint='extra data for mined blocks'
+            <FormattedMessage
+              id='status.miningSettings.input.extradata.label'
+              defaultMessage='extradata'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='status.miningSettings.input.extradata.hint'
+              defaultMessage='extra data for mined blocks'
+            />
+          }
           value={ extradata }
           onSubmit={ this.onExtraDataChange }
           defaultValue={ defaultExtradata }
@@ -70,8 +98,18 @@ export default class MiningSettings extends Component {
         />
 
         <Input
-          label='minimal gas price'
+          label={
-          hint='the minimum gas price for mining'
+            <FormattedMessage
+              id='status.miningSettings.input.gasPrice.label'
+              defaultMessage='minimal gas price'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='status.miningSettings.input.gasPrice.hint'
+              defaultMessage='the minimum gas price for mining'
+            />
+          }
           value={ toNiceNumber(minGasPrice) }
           onSubmit={ this.onMinGasPriceChange }
           allowCopy={ minGasPrice.toString() }
@@ -80,8 +118,18 @@ export default class MiningSettings extends Component {
         />
 
         <Input
-          label='gas floor target'
+          label={
-          hint='the gas floor target for mining'
+            <FormattedMessage
+              id='status.miningSettings.input.gasFloor.label'
+              defaultMessage='gas floor target'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='status.miningSettings.input.gasFloor.hint'
+              defaultMessage='the gas floor target for mining'
+            />
+          }
           value={ toNiceNumber(gasFloorTarget) }
           onSubmit={ this.onGasFloorTargetChange }
           allowCopy={ gasFloorTarget.toString() }

js/src/views/Status/components/RpcCalls/RpcCalls.js

@@ -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 _ from 'lodash';
 
 import Toggle from 'material-ui/Toggle/Toggle';
@@ -38,11 +39,11 @@ export default class RpcCalls extends Component {
     const { paramsValues, params } = nextProps.rpc.selectedMethod;
 
     if (paramsValues) {
-      params.map((p, idx) => {
+      params.map((p, index) => {
         // todo [adgo] 01.05.2016 - make sure this works
         // not sure idx is the same for paramsValues and params
         this.setState({
-          [this.paramKey(p)]: paramsValues[idx]
+          [this.paramKey(p)]: paramsValues[index]
         });
       });
 
@@ -59,7 +60,12 @@ export default class RpcCalls extends Component {
           <div className='dapp-container'>
             <div className='row'>
               <div className='col col-6'>
-                <h1><span>RPC</span> Requests</h1>
+                <h1>
+                  <FormattedMessage
+                    id='status.rpcCalls.requests'
+                    defaultMessage='RPC Requests'
+                  />
+                </h1>
               </div>
               <div className='col col-6'>
                 <RpcNav />
@@ -92,11 +98,19 @@ export default class RpcCalls extends Component {
         <Toggle
           className={ styles.jsonToggle }
           onToggle={ this.onJsonToggle }
-          label='JSON'
+          label={
+            <FormattedMessage
+              id='status.rpcCalls.json'
+              defaultMessage='JSON'
+            />
+          }
         />
         <h2 className={ styles.header }>
           <label htmlFor='selectedMethod'>
-            Call Method
+            <FormattedMessage
+              id='status.rpcCalls.callMethod'
+              defaultMessage='Call Method'
+            />
           </label>
         </h2>
         <AnimateChildren absolute>
@@ -117,9 +131,19 @@ export default class RpcCalls extends Component {
     return (
       <div className='row'>
         { this.renderMethodList() }
-        <h3>Parameters</h3>
+        <h3>
+          <FormattedMessage
+            id='status.rpcCalls.parameters'
+            defaultMessage='Parameters'
+          />
+        </h3>
         { this.renderInputs() }
-        <h3>Returns</h3>
+        <h3>
+          <FormattedMessage
+            id='status.rpcCalls.returns'
+            defaultMessage='Returns'
+          />
+        </h3>
         <Markdown val={ formatRpcMd(returns) } />
         { this.renderFormButton() }
       </div>
@@ -177,7 +201,10 @@ export default class RpcCalls extends Component {
 
     if (!params || !params.length) {
       return (
-        <span>none</span>
+        <FormattedMessage
+          id='status.rpcCalls.none'
+          defaultMessage='none'
+        />
       );
     }
 
@@ -284,7 +311,10 @@ export default class RpcCalls extends Component {
         disabled={ this.state.jsonEditorError }
         onClick={ this.onRpcFire }
       >
-        Fire!
+        <FormattedMessage
+          id='status.rpcCalls.fireButton'
+          defaultMessage='Fire'
+        />
       </button>
     );
   }

js/src/views/Status/components/RpcDocs/RpcDocs.js

@@ -16,6 +16,7 @@
 
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { FormattedMessage } from 'react-intl';
 import { sortBy } from 'lodash';
 import List from 'material-ui/List/List';
 import ListItem from 'material-ui/List/ListItem';
@@ -38,7 +39,12 @@ class RpcDocs extends Component {
           <div className='dapp-container'>
             <div className='row'>
               <div className='col col-6'>
-                <h1><span>RPC</span> Docs</h1>
+                <h1>
+                  <FormattedMessage
+                    id='status.rpcDocs.title'
+                    defaultMessage='RPC Docs'
+                  />
+                </h1>
               </div>
               <div className='col col-6'>
                 <RpcNav />
@@ -50,7 +56,12 @@ class RpcDocs extends Component {
             <div className='row'>
               <div className='col col-12'>
                 <AutoComplete
-                  floatingLabelText='Method name'
+                  floatingLabelText={
+                    <FormattedMessage
+                      id='status.rpcDocs.methodName'
+                      defaultMessage='Method name'
+                    />
+                  }
                   className={ styles.autocomplete }
                   dataSource={ rpcMethods.map(m => m.name) }
                   onNewRequest={ this.handleMethodChange }
@@ -78,9 +89,38 @@ class RpcDocs extends Component {
         >
           <h3 className={ styles.headline }>{ m.name }</h3>
           <Markdown val={ m.desc } />
-          <p><strong>Params</strong>{ !m.params.length ? ' - none' : '' }</p>
+          <p>
-          { m.params.map((p, idx) => <Markdown key={ `${m.name}-${idx}` } val={ formatRpcMd(p) } />) }
+            <FormattedMessage
-          <p className={ styles.returnsTitle }><strong>Returns</strong> - </p>
+              id='status.rpcDocs.params'
+              defaultMessage='Params {params}'
+              vaules={ {
+                params: !m.params.length
+                  ? (
+                    <FormattedMessage
+                      id='status.rpcDocs.paramsNone'
+                      defaultMessage=' - none'
+                    />
+                  )
+                  : ''
+              } }
+            />
+          </p>
+          {
+            m.params.map((p, idx) => {
+              return (
+                <Markdown
+                  key={ `${m.name}-${idx}` }
+                  val={ formatRpcMd(p) }
+                />
+              );
+            })
+          }
+          <p className={ styles.returnsTitle }>
+            <FormattedMessage
+              id='status.rpcDocs.returns'
+              defaultMessage='Returns - '
+            />
+          </p>
           <Markdown className={ styles.returnsDesc } val={ formatRpcMd(m.returns) } />
           { idx !== rpcMethods.length - 1 ? <hr /> : '' }
         </ListItem>

js/src/views/Status/components/Status/status.js

@@ -17,6 +17,7 @@
 import bytes from 'bytes';
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Container, ContainerTitle, Input } from '~/ui';
 
@@ -47,7 +48,14 @@ export default class Status extends Component {
           <div className={ styles.row }>
             <div className={ styles.col3 }>
               <div className={ `${styles.col12} ${styles.padBottom}` }>
-                <ContainerTitle title='best block' />
+                <ContainerTitle
+                  title={
+                    <FormattedMessage
+                      id='status.status.title.bestBlock'
+                      defaultMessage='best block'
+                    />
+                  }
+                />
                 <div { ...this._test('best-block') } className={ styles.blockInfo }>
                   #{ nodeStatus.blockNumber.toFormat() }
                 </div>
@@ -56,15 +64,35 @@ export default class Status extends Component {
                 </div>
               </div>
               <div className={ `${styles.col12} ${styles.padBottom}` }>
-                <ContainerTitle title='peers' />
+                <ContainerTitle
+                  title={
+                    <FormattedMessage
+                      id='status.status.title.peers'
+                      defaultMessage='peers'
+                    />
+                  }
+                />
                 <div { ...this._test('peers') } className={ styles.blockInfo }>
                   { peers }
                 </div>
               </div>
               <div className={ `${styles.col12} ${styles.padBottom}` }>
-                <ContainerTitle title='hash rate' />
+                <ContainerTitle
+                  title={
+                    <FormattedMessage
+                      id='status.status.title.hashRate'
+                      defaultMessage='hash rate'
+                    />
+                  }
+                />
                 <div { ...this._test('hashrate') } className={ styles.blockInfo }>
-                  { `${hashrate} H/s` }
+                  <FormattedMessage
+                    id='status.status.hashrate'
+                    defaultMessage='{hashrate} H/s'
+                    values={ {
+                      hashrate
+                    } }
+                  />
                 </div>
               </div>
             </div>
@@ -89,7 +117,12 @@ export default class Status extends Component {
 
     return (
       <span>
-        { nodeStatus.nodeName || 'Node' }
+        { nodeStatus.nodeName || (
+          <FormattedMessage
+            id='status.status.title.node'
+            defaultMessage='Node'
+          />)
+        }
       </span>
     );
   }
@@ -107,11 +140,23 @@ export default class Status extends Component {
 
     return (
       <div { ...this._test('settings') }>
-        <ContainerTitle title='network settings' />
+        <ContainerTitle
+          title={
+            <FormattedMessage
+              id='status.status.title.network'
+              defaultMessage='network settings'
+            />
+          }
+        />
         <Input
           allowCopy
           readOnly
-          label='chain'
+          label={
+            <FormattedMessage
+              id='status.status.input.chain'
+              defaultMessage='chain'
+            />
+          }
           value={ nodeStatus.netChain }
           { ...this._test('chain') }
         />
@@ -120,7 +165,12 @@ export default class Status extends Component {
             <Input
               allowCopy
               readOnly
-              label='peers'
+              label={
+                <FormattedMessage
+                  id='status.status.input.peers'
+                  defaultMessage='peers'
+                />
+              }
               value={ peers }
               { ...this._test('peers') }
             />
@@ -129,7 +179,12 @@ export default class Status extends Component {
             <Input
               allowCopy
               readOnly
-              label='network port'
+              label={
+                <FormattedMessage
+                  id='status.status.input.port'
+                  defaultMessage='network port'
+                />
+              }
               value={ netPort.toString() }
               { ...this._test('network-port') }
             />
@@ -139,11 +194,26 @@ export default class Status extends Component {
         <Input
           allowCopy
           readOnly
-          label='rpc enabled'
+          label={
+            <FormattedMessage
+              id='status.status.input.rpcEnabled'
+              defaultMessage='rpc enabled'
+            />
+          }
           value={
             rpcSettings.enabled
-              ? 'yes'
+              ? (
-              : 'no'
+                <FormattedMessage
+                  id='status.status.input.yes'
+                  defaultMessage='yes'
+                />
+              )
+              : (
+                <FormattedMessage
+                  id='status.status.input.no'
+                  defaultMessage='no'
+                />
+              )
           }
           { ...this._test('rpc-enabled') }
         />
@@ -152,7 +222,12 @@ export default class Status extends Component {
             <Input
               allowCopy
               readOnly
-              label='rpc interface'
+              label={
+                <FormattedMessage
+                  id='status.status.input.rpcInterface'
+                  defaultMessage='rpc interface'
+                />
+              }
               value={ rpcSettings.interface }
               { ...this._test('rpc-interface') }
             />
@@ -161,7 +236,12 @@ export default class Status extends Component {
             <Input
               allowCopy
               readOnly
-              label='rpc port'
+              label={
+                <FormattedMessage
+                  id='status.status.input.rpcPort'
+                  defaultMessage='rpc port'
+                />
+              }
               value={ rpcPort.toString() }
               { ...this._test('rpc-port') }
             />
@@ -173,7 +253,12 @@ export default class Status extends Component {
             <Input
               allowCopy
               readOnly
-              label='enode'
+              label={
+                <FormattedMessage
+                  id='status.status.input.enode'
+                  defaultMessage='enode'
+                />
+              }
               value={ nodeStatus.enode }
               { ...this._test('node-enode') }
             />

js/src/views/Status/status.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Page } from '~/ui';
 
@@ -23,7 +24,14 @@ import StatusPage from './containers/StatusPage';
 export default class Status extends Component {
   render () {
     return (
-      <Page title='status'>
+      <Page
+        title={
+          <FormattedMessage
+            id='status.title'
+            defaultMessage='Status'
+          />
+        }
+      >
         <StatusPage />
       </Page>
     );

js/src/views/Wallet/Confirmations/confirmations.js

@@ -14,8 +14,9 @@
 // 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, PropTypes } from 'react';
 import { LinearProgress, MenuItem, IconMenu } from 'material-ui';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -70,7 +71,12 @@ class WalletConfirmations extends Component {
     if (realConfirmations.length === 0) {
       return (
         <div>
-          <p>No transactions needs confirmation right now.</p>
+          <p>
+            <FormattedMessage
+              id='wallet.confirmations.none'
+              defaultMessage='No transactions needs confirmation right now.'
+            />
+          </p>
         </div>
       );
     }
@@ -217,7 +223,12 @@ class WalletConfirmation extends Component {
     const confirmButton = (
       <Button
         onClick={ this.handleOpenConfirm }
-        label='Confirm As...'
+        label={
+          <FormattedMessage
+            id='wallet.confirmations.buttons.confirmAs'
+            defaultMessage='Confirm As...'
+          />
+        }
         disabled={ pending || possibleConfirm.length === 0 }
       />
     );
@@ -225,13 +236,21 @@ class WalletConfirmation extends Component {
     const revokeButton = (
       <Button
         onClick={ this.handleOpenRevoke }
-        label='Revoke As...'
+        label={
+          <FormattedMessage
+            id='wallet.confirmations.buttons.revokeAs'
+            defaultMessage='Revoke As...'
+          />
+        }
         disabled={ pending || possibleRevoke.length === 0 }
       />
     );
 
     return (
-      <tr key={ `actions_${operation}` } className={ className }>
+      <tr
+        className={ className }
+        key={ `actions_${operation}` }
+      >
         <td />
         <td colSpan={ 3 }>
           <div className={ styles.actions }>
@@ -263,11 +282,15 @@ class WalletConfirmation extends Component {
     const account = this.props.accounts[address];
 
     return (
-      <MenuItem value={ address } key={ address }>
+      <MenuItem
+        key={ address }
+        value={ address }
+      >
         <div className={ styles.accountItem }>
           <IdentityIcon
-            inline center
             address={ address }
+            center
+            inline
           />
           <span>{ account.name.toUpperCase() || account.address }</span>
         </div>
@@ -283,7 +306,10 @@ class WalletConfirmation extends Component {
 
     return (
       <tr key={ `prog_${operation}` }>
-        <td colSpan={ 5 } style={ { padding: 0, paddingTop: '1em' } }>
+        <td
+          colSpan={ 5 }
+          style={ { padding: 0, paddingTop: '1em' } }
+        >
           <div
             data-tip
             data-for={ `tooltip_${operation}` }
@@ -312,7 +338,14 @@ class WalletConfirmation extends Component {
           </div>
 
           <ReactTooltip id={ `tooltip_${operation}` }>
-            Confirmed by { confirmedBy.length }/{ require.toNumber() } owners
+            <FormattedMessage
+              id='wallet.confirmations.tooltip.confirmed'
+              defaultMessage='Confirmed by {number}/{required} owners'
+              values={ {
+                required: require.toNumber(),
+                number: confirmedBy.length
+              } }
+            />
           </ReactTooltip>
         </td>
       </tr>
@@ -326,27 +359,27 @@ class WalletConfirmation extends Component {
     if (value && to && data) {
       return (
         <TxRow
+          address={ address }
           className={ className }
+          historic={ false }
+          isTest={ isTest }
           key={ operation }
           tx={ {
             hash: transactionHash,
-            blockNumber: blockNumber,
+            blockNumber,
             from: address,
-            to: to,
+            to,
-            value: value,
+            value,
             input: bytesToHex(data)
           } }
-          address={ address }
-          isTest={ isTest }
-          historic={ false }
         />
       );
     }
 
     return (
       <tr
-        key={ operation }
         className={ className }
+        key={ operation }
       >
         <td colSpan={ 5 }>
           <code>{ operation }</code>

js/src/views/Wallet/Details/details.js

@@ -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, InputAddress } from '~/ui';
 
@@ -40,7 +41,14 @@ export default class WalletDetails extends Component {
 
     return (
       <div className={ [ styles.details, className ].join(' ') }>
-        <Container title='Details'>
+        <Container
+          title={
+            <FormattedMessage
+              id='wallet.details.title'
+              defaultMessage='Details'
+            />
+          }
+        >
           { this.renderDetails() }
           { this.renderOwners() }
         </Container>
@@ -62,10 +70,10 @@ export default class WalletDetails extends Component {
 
       return (
         <InputAddress
-          key={ `${idx}_${address}` }
-          value={ address }
           disabled
+          key={ `${idx}_${address}` }
           text
+          value={ address }
         />
       );
     });
@@ -87,9 +95,24 @@ export default class WalletDetails extends Component {
     return (
       <div>
         <p>
-          <span>This wallet requires at least</span>
+          <FormattedMessage
-          <span className={ styles.detail }>{ require.toFormat() } owners</span>
+            id='wallet.details.requiredOwners'
-          <span>to validate any action (transactions, modifications).</span>
+            defaultMessage='This wallet requires at least {owners} to validate any action (transactions, modifications).'
+            values={ {
+              owners: (
+                <span className={ styles.detail }>
+                  <FormattedMessage
+                    id='wallet.details.requiredOwnersNumber'
+                    defaultMessage='{number} {numberValue, plural, one {owner} other {owners}}'
+                    values={ {
+                      number: require.toFormat(),
+                      numberValue: require.toNumber()
+                    } }
+                  />
+                </span>
+              )
+            } }
+          />
         </p>
       </div>
     );

js/src/views/Wallet/Transactions/transactions.js

@@ -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 { bytesToHex } from '~/api/util/format';
 import { Container } from '~/ui';
@@ -36,7 +37,14 @@ export default class WalletTransactions extends Component {
   render () {
     return (
       <div>
-        <Container title='Transactions'>
+        <Container
+          title={
+            <FormattedMessage
+              id='wallet.transactions.title'
+              defaultMessage='Transactions'
+            />
+          }
+        >
           { this.renderTransactions() }
         </Container>
       </div>
@@ -52,7 +60,12 @@ export default class WalletTransactions extends Component {
     if (transactions.length === 0) {
       return (
         <div>
-          <p>No transactions has been sent.</p>
+          <p>
+            <FormattedMessage
+              id='wallet.transactions.none'
+              defaultMessage='No transactions has been sent.'
+            />
+          </p>
         </div>
       );
     }
@@ -62,14 +75,17 @@ export default class WalletTransactions extends Component {
 
       return (
         <TxRow
-          key={ `${transactionHash}_${index}` }
-          tx={ {
-            hash: transactionHash,
-            input: data && bytesToHex(data) || '',
-            blockNumber, from, to, value
-          } }
           address={ address }
           isTest={ isTest }
+          key={ `${transactionHash}_${index}` }
+          tx={ {
+            blockNumber,
+            from,
+            hash: transactionHash,
+            input: data && bytesToHex(data) || '',
+            to,
+            value
+          } }
         />
       );
     });

js/src/views/Wallet/wallet.js

@@ -15,18 +15,15 @@
 // 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 moment from 'moment';
 
-import ContentCreate from 'material-ui/svg-icons/content/create';
-import ActionDelete from 'material-ui/svg-icons/action/delete';
-import ContentSend from 'material-ui/svg-icons/content/send';
-import SettingsIcon from 'material-ui/svg-icons/action/settings';
-
-import { nullableProptype } from '~/util/proptypes';
 import { EditMeta, Transfer, WalletSettings } from '~/modals';
 import { Actionbar, Button, Page, Loading } from '~/ui';
+import { DeleteIcon, EditIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
+import { nullableProptype } from '~/util/proptypes';
 
 import Delete from '../Address/Delete';
 import Header from '../Account/Header';
@@ -53,7 +50,10 @@ class WalletContainer extends Component {
     }
 
     return (
-      <Wallet isTest={ isTest } { ...others } />
+      <Wallet
+        isTest={ isTest }
+        { ...others }
+      />
     );
   }
 }
@@ -166,11 +166,15 @@ class Wallet extends Component {
       <div>
         <br />
         <p>
-          <span className={ styles.detail }>{ spent }<span className={ styles.eth } /></span>
+          <FormattedMessage
-          <span>has been spent today, out of</span>
+            id='wallet.details.spent'
-          <span className={ styles.detail }>{ limit }<span className={ styles.eth } /></span>
+            defaultMessage='{spent} has been spent today, out of {limit} set as the daily limit, which has been reset on {date}'
-          <span>set as the daily limit, which has been reset on</span>
+            values={ {
-          <span className={ styles.detail }>{ date.format('LL') }</span>
+              date: <span className={ styles.detail }>{ date.format('LL') }</span>,
+              limit: <span className={ styles.detail }>{ limit }<span className={ styles.eth } /></span>,
+              spent: <span className={ styles.detail }>{ spent }<span className={ styles.eth } /></span>
+            } }
+          />
         </p>
       </div>
     );
@@ -190,19 +194,19 @@ class Wallet extends Component {
 
     return [
       <WalletConfirmations
+        address={ address }
+        confirmations={ confirmations }
+        isTest={ isTest }
         key='confirmations'
         owners={ owners }
         require={ require }
-        confirmations={ confirmations }
-        isTest={ isTest }
-        address={ address }
       />,
 
       <WalletTransactions
-        key='transactions'
-        transactions={ transactions }
         address={ address }
         isTest={ isTest }
+        key='transactions'
+        transactions={ transactions }
       />
     ];
   }
@@ -216,10 +220,15 @@ class Wallet extends Component {
     if (owned) {
       buttons.push(
         <Button
-          key='transferFunds'
-          icon={ <ContentSend /> }
-          label='transfer'
           disabled={ !showTransferButton }
+          icon={ <SendIcon /> }
+          key='transferFunds'
+          label={
+            <FormattedMessage
+              id='wallet.buttons.transfer'
+              defaultMessage='transfer'
+            />
+          }
           onClick={ this.onTransferClick }
         />
       );
@@ -227,18 +236,28 @@ class Wallet extends Component {
 
     buttons.push(
       <Button
+        icon={ <DeleteIcon /> }
         key='delete'
-        icon={ <ActionDelete /> }
+        label={
-        label='delete'
+          <FormattedMessage
+            id='wallet.buttons.delete'
+            defaultMessage='delete'
+          />
+        }
         onClick={ this.showDeleteDialog }
       />
     );
 
     buttons.push(
       <Button
+        icon={ <EditIcon /> }
         key='editmeta'
-        icon={ <ContentCreate /> }
+        label={
-        label='edit'
+          <FormattedMessage
+            id='wallet.buttons.edit'
+            defaultMessage='edit'
+          />
+        }
         onClick={ this.onEditClick }
       />
     );
@@ -246,9 +265,14 @@ class Wallet extends Component {
     if (owned) {
       buttons.push(
         <Button
-          key='settings'
           icon={ <SettingsIcon /> }
-          label='settings'
+          key='settings'
+          label={
+            <FormattedMessage
+              id='wallet.buttons.settings'
+              defaultMessage='settings'
+            />
+          }
           onClick={ this.onSettingsClick }
         />
       );
@@ -256,8 +280,13 @@ class Wallet extends Component {
 
     return (
       <Actionbar
-        title='Wallet Management'
         buttons={ buttons }
+        title={
+          <FormattedMessage
+            id='wallet.title'
+            defaultMessage='Wallet Management'
+          />
+        }
       />
     );
   }

js/src/views/WriteContract/writeContract.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { PropTypes, Component } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { observer } from 'mobx-react';
 import { MenuItem, Toggle } from 'material-ui';
 import { connect } from 'react-redux';
@@ -22,13 +23,8 @@ import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import { throttle } from 'lodash';
 
-import ContentClear from 'material-ui/svg-icons/content/clear';
-import SaveIcon from 'material-ui/svg-icons/content/save';
-import ListIcon from 'material-ui/svg-icons/action/view-list';
-import SettingsIcon from 'material-ui/svg-icons/action/settings';
-import SendIcon from 'material-ui/svg-icons/content/send';
-
 import { Actionbar, ActionbarExport, ActionbarImport, Button, Page, Select, Input } from '~/ui';
+import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
 import Editor from '~/ui/Editor';
 import { DeployContract, SaveContract, LoadContract } from '~/modals';
 
@@ -97,7 +93,6 @@ class WriteContract extends Component {
         { this.renderDeployModal() }
         { this.renderSaveModal() }
         { this.renderLoadModal() }
-
         { this.renderActionBar() }
         <Page className={ styles.page }>
           <div
@@ -133,7 +128,12 @@ class WriteContract extends Component {
               className={ styles.parameters }
               style={ { flex: `${100 - size}%` } }
             >
-              <h2>Parameters</h2>
+              <h2>
+                <FormattedMessage
+                  id='writeContract.title.parameters'
+                  defaultMessage='Parameters'
+                />
+              </h2>
               { this.renderParameters() }
             </div>
           </div>
@@ -146,7 +146,12 @@ class WriteContract extends Component {
     const { selectedContract } = this.store;
 
     if (!selectedContract || !selectedContract.name) {
-      return 'New Solidity Contract';
+      return (
+        <FormattedMessage
+          id='writeContract.title.new'
+          defaultMessage='New Solidity Contract'
+        />
+      );
     }
 
     return (
@@ -154,9 +159,23 @@ class WriteContract extends Component {
         { selectedContract.name }
         <span
           className={ styles.timestamp }
-          title={ `saved @ ${(new Date(selectedContract.timestamp)).toISOString()}` }
+          title={
+            <FormattedMessage
+              id='writeContract.title.saved'
+              defaultMessage='saved @ {timestamp}'
+              vaules={ {
+                timestamp: (new Date(selectedContract.timestamp)).toISOString()
+              } }
+            />
+          }
         >
-          (saved { moment(selectedContract.timestamp).fromNow() })
+          <FormattedMessage
+            id='writeContract.details.saved'
+            defaultMessage='(saved {timestamp})'
+            values={ {
+              timestamp: moment(selectedContract.timestamp).fromNow()
+            } }
+          />
         </span>
       </span>
     );
@@ -176,20 +195,35 @@ class WriteContract extends Component {
 
     const buttons = [
       <Button
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
-        label='New'
+        label={
+          <FormattedMessage
+            id='writeContract.buttons.new'
+            defaultMessage='New'
+          />
+        }
         key='newContract'
         onClick={ this.store.handleNewContract }
       />,
       <Button
         icon={ <ListIcon /> }
-        label='Load'
+        label={
+          <FormattedMessage
+            id='writeContract.buttons.load'
+            defaultMessage='Load'
+          />
+        }
         key='loadContract'
         onClick={ this.store.handleOpenLoadModal }
       />,
       <Button
         icon={ <SaveIcon /> }
-        label='Save'
+        label={
+          <FormattedMessage
+            id='writeContract.buttons.save'
+            defaultMessage='Save'
+          />
+        }
         key='saveContract'
         onClick={ this.store.handleSaveContract }
       />,
@@ -200,7 +234,12 @@ class WriteContract extends Component {
       />,
       <ActionbarImport
         key='importSourcecode'
-        title='Import Solidity code'
+        title={
+          <FormattedMessage
+            id='writeContract.buttons.import'
+            defaultMessage='Import Solidity'
+          />
+        }
         onConfirm={ this.store.handleImport }
         renderValidation={ this.renderImportValidation }
       />
@@ -208,7 +247,12 @@ class WriteContract extends Component {
 
     return (
       <Actionbar
-        title='Write a Contract'
+        title={
+          <FormattedMessage
+            id='writeContract.title.main'
+            defaultMessage='Write a Contract'
+          />
+        }
         buttons={ buttons }
       />
     );
@@ -231,8 +275,15 @@ class WriteContract extends Component {
       return (
         <div className={ styles.panel }>
           <div className={ styles.centeredMessage }>
-            <p>Unfortuantely, an error occurred...</p>
+            <p>
-            <div className={ styles.error }>{ workerError.toString() }</div>
+              <FormattedMessage
+                id='writeContract.error.params'
+                defaultMessage='An error occurred with the following description'
+              />
+            </p>
+            <div className={ styles.error }>
+              { workerError.toString() }
+            </div>
           </div>
         </div>
       );
@@ -245,7 +296,12 @@ class WriteContract extends Component {
             size={ 80 }
             thickness={ 5 }
           />
-          <p>Loading...</p>
+          <p>
+            <FormattedMessage
+              id='writeContract.title.loading'
+              defaultMessage='Loading...'
+            />
+          </p>
         </div>
       );
     }
@@ -260,7 +316,15 @@ class WriteContract extends Component {
               size={ 80 }
               thickness={ 5 }
             />
-            <p>Loading Solidity { longVersion }</p>
+            <p>
+              <FormattedMessage
+                id='writeContract.title.solidity'
+                defaultMessage='Loading Solidity {version}'
+                values={ {
+                  version: longVersion
+                } }
+              />
+            </p>
           </div>
         </div>
       );
@@ -271,7 +335,12 @@ class WriteContract extends Component {
         <div>
           <Button
             icon={ <SettingsIcon /> }
-            label='Compile'
+            label={
+              <FormattedMessage
+                id='writeContract.buttons.compile'
+                defaultMessage='Compile'
+              />
+            }
             onClick={ this.store.handleCompile }
             primary={ false }
             disabled={ compiling }
@@ -281,7 +350,12 @@ class WriteContract extends Component {
               ? (
                 <Button
                   icon={ <SendIcon /> }
-                  label='Deploy'
+                  label={
+                    <FormattedMessage
+                      id='writeContract.buttons.deploy'
+                      defaultMessage='Deploy'
+                    />
+                  }
                   onClick={ this.store.handleOpenDeployModal }
                   primary={ false }
                 />
@@ -292,7 +366,12 @@ class WriteContract extends Component {
         <div className={ styles.toggles }>
           <div>
             <Toggle
-              label='Optimize'
+              label={
+                <FormattedMessage
+                  id='writeContract.buttons.optimise'
+                  defaultMessage='Optimise'
+                />
+              }
               labelPosition='right'
               onToggle={ this.store.handleOptimizeToggle }
               toggled={ this.store.optimize }
@@ -300,7 +379,12 @@ class WriteContract extends Component {
           </div>
           <div>
             <Toggle
-              label='Auto-Compile'
+              label={
+                <FormattedMessage
+                  id='writeContract.buttons.autoCompile'
+                  defaultMessage='Auto-Compile'
+                />
+              }
               labelPosition='right'
               onToggle={ this.store.handleAutocompileToggle }
               toggled={ this.store.autocompile }
@@ -324,7 +408,11 @@ class WriteContract extends Component {
       >
         {
           build.release
-            ? (<span className={ styles.big }>{ build.version }</span>)
+            ? (
+              <span className={ styles.big }>
+                { build.version }
+              </span>
+            )
             : build.longVersion
         }
       </MenuItem>
@@ -333,7 +421,12 @@ class WriteContract extends Component {
     return (
       <div>
         <Select
-          label='Select a Solidity version'
+          label={
+            <FormattedMessage
+              id='writeContract.title.selectSolidity'
+              defaultMessage='Select a Solidity version'
+            />
+          }
           value={ selectedBuild }
           onChange={ this.store.handleSelectBuild }
         >
@@ -406,7 +499,12 @@ class WriteContract extends Component {
             size={ 80 }
             thickness={ 5 }
           />
-          <p>Compiling...</p>
+          <p>
+            <FormattedMessage
+              id='writeContract.compiling.busy'
+              defaultMessage='Compiling...'
+            />
+          </p>
         </div>
       );
     }
@@ -414,7 +512,12 @@ class WriteContract extends Component {
     if (!compiled) {
       return (
         <div className={ styles.centeredMessage }>
-          <p>Please compile the source code.</p>
+          <p>
+            <FormattedMessage
+              id='writeContract.compiling.action'
+              defaultMessage='Please compile the source code.'
+            />
+          </p>
         </div>
       );
     }
@@ -428,7 +531,12 @@ class WriteContract extends Component {
     if (contractKeys.length === 0) {
       return (
         <div className={ styles.centeredMessage }>
-          <p>No contract has been found.</p>
+          <p>
+            <FormattedMessage
+              id='writeContract.error.noContract'
+              defaultMessage='No contract has been found.'
+            />
+          </p>
         </div>
       );
     }
@@ -446,15 +554,24 @@ class WriteContract extends Component {
     return (
       <div className={ styles.compilation }>
         <Select
-          label='Select a contract'
+          label={
+            <FormattedMessage
+              id='writeContract.title.contract'
+              defaultMessage='Select a contract'
+            />
+          }
           value={ contractIndex }
           onChange={ this.store.handleSelectContract }
         >
           { contractsList }
         </Select>
         { this.renderContract(contract) }
-
+        <h4 className={ styles.messagesHeader }>
-        <h4 className={ styles.messagesHeader }>Compiler messages</h4>
+          <FormattedMessage
+            id='writeContract.title.messages'
+            defaultMessage='Compiler messages'
+          />
+        </h4>
         { this.renderErrors() }
       </div>
     );
@@ -468,7 +585,12 @@ class WriteContract extends Component {
       ? (
         <Input
           allowCopy
-          label='Metadata'
+          label={
+            <FormattedMessage
+              id='writeContract.input.metadata'
+              defaultMessage='Metadata'
+            />
+          }
           readOnly
           value={ contract.metadata }
         />
@@ -479,14 +601,24 @@ class WriteContract extends Component {
       <div>
         <Input
           allowCopy
-          label='ABI Interface'
+          label={
+            <FormattedMessage
+              id='writeContract.input.abi'
+              defaultMessage='ABI Interface'
+            />
+          }
           readOnly
           value={ abi }
         />
 
         <Input
           allowCopy
-          label='Bytecode'
+          label={
+            <FormattedMessage
+              id='writeContract.input.code'
+              defaultMessage='Bytecode'
+            />
+          }
           readOnly
           value={ `0x${bytecode}` }
         />
@@ -516,7 +648,12 @@ class WriteContract extends Component {
     return (
       <Input
         allowCopy
-        label='Swarm Metadata Hash'
+        label={
+          <FormattedMessage
+            id='writeContract.input.swarm'
+            defaultMessage='Swarm Metadata Hash'
+          />
+        }
         readOnly
         value={ `${hash}` }
       />

js/src/views/WriteContract/writeContractStore.js

@@ -14,35 +14,62 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { action, observable, transaction } from 'mobx';
-import store from 'store';
 import { debounce } from 'lodash';
+import { action, observable, transaction } from 'mobx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import store from 'store';
 
 import { sha3 } from '~/api/util/sha3';
 import SolidityUtils from '~/util/solidity';
 
+const SOLIDITY_LIST_URL = 'https://raw.githubusercontent.com/ethereum/solc-bin/gh-pages/bin/list.json';
 const WRITE_CONTRACT_STORE_KEY = '_parity::writeContractStore';
 
 const SNIPPETS = {
   snippet0: {
     name: 'Token.sol',
-    description: 'Standard ERP20 Token Contract',
+    description: (
-    id: 'snippet0', sourcecode: require('raw-loader!../../contracts/snippets/token.sol')
+      <FormattedMessage
+        id='writeContract.type.standardErc20'
+        defaultMessage='Standard ERC20 Token Contract'
+      />
+    ),
+    id: 'snippet0',
+    sourcecode: require('raw-loader!../../contracts/snippets/token.sol')
   },
   snippet1: {
     name: 'StandardToken.sol',
-    description: 'Implementation of ERP20 Token Contract',
+    description: (
-    id: 'snippet1', sourcecode: require('raw-loader!../../contracts/snippets/standard-token.sol')
+      <FormattedMessage
+        id='writeContract.type.implementErc20'
+        defaultMessage='Implementation of ERC20 Token Contract'
+      />
+    ),
+    id: 'snippet1',
+    sourcecode: require('raw-loader!../../contracts/snippets/standard-token.sol')
   },
   snippet2: {
     name: 'HumanStandardToken.sol',
-    description: 'Implementation of the Human Token Contract',
+    description: (
-    id: 'snippet2', sourcecode: require('raw-loader!../../contracts/snippets/human-standard-token.sol')
+      <FormattedMessage
+        id='writeContract.type.humanErc20'
+        defaultMessage='Implementation of the Human Token Contract'
+      />
+    ),
+    id: 'snippet2',
+    sourcecode: require('raw-loader!../../contracts/snippets/human-standard-token.sol')
   },
   snippet3: {
     name: 'Wallet.sol',
-    description: 'Implementation of a multisig Wallet',
+    description: (
-    id: 'snippet3', sourcecode: require('raw-loader!../../contracts/snippets/wallet.sol')
+      <FormattedMessage
+        id='writeContract.type.multisig'
+        defaultMessage='Implementation of a multisig Wallet'
+      />
+    ),
+    id: 'snippet3',
+    sourcecode: require('raw-loader!../../contracts/snippets/wallet.sol')
   }
 };
 
@@ -118,8 +145,8 @@ export default class WriteContractStore {
   }
 
   fetchSolidityVersions () {
-    return fetch('https://raw.githubusercontent.com/ethereum/solc-bin/gh-pages/bin/list.json')
+    return fetch(SOLIDITY_LIST_URL)
-      .then((r) => r.json())
+      .then((response) => response.json())
       .then((data) => {
         const { builds, releases, latestRelease } = data;
         let latestIndex = -1;