Extract i18n strings in modals/* (#4706)

* DeployContract formatting

* PasswordManager i18n

* SaveContract i18n

* Transfer i18n

* Verification i18n

* Fix spacing on label

js/src/modals/DeployContract/deployContract.js

@@ -150,15 +150,20 @@ class DeployContract extends Component {
 
     const title = realSteps
       ? null
-      : (deployError
+      : (
-          ? <FormattedMessage
+        deployError
-            id='deployContract.title.failed'
+          ? (
-            defaultMessage='deployment failed'
+            <FormattedMessage
+              id='deployContract.title.failed'
+              defaultMessage='deployment failed'
             />
-          : <FormattedMessage
+          )
-            id='deployContract.title.rejected'
+          : (
-            defaultMessage='rejected'
+            <FormattedMessage
+              id='deployContract.title.rejected'
+              defaultMessage='rejected'
             />
+          )
       );
 
     const waiting = realSteps
@@ -195,9 +200,7 @@ class DeployContract extends Component {
     }
 
     return (
-      <Warning
+      <Warning warning={ errorEstimated } />
-        warning={ errorEstimated }
-      />
     );
   }
 

js/src/modals/PasswordManager/passwordManager.js

@@ -117,8 +117,15 @@ class PasswordManager extends Component {
             { address }
           </span>
           <span className={ styles.passwordHint }>
-            <span className={ styles.hintLabel }>Hint </span>
+            <span className={ styles.hintLabel }>
-            { passwordHint || '-' }
+              <FormattedMessage
+                id='passwordChange.passwordHint'
+                defaultMessage='Hint {hint}'
+                values={ {
+                  hint: passwordHint || '-'
+                } }
+              />
+            </span>
           </span>
         </div>
       </div>

js/src/modals/SaveContract/saveContract.js

@@ -15,12 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-
+import { FormattedMessage } from 'react-intl';
-import SaveIcon from 'material-ui/svg-icons/content/save';
-import ContentClear from 'material-ui/svg-icons/content/clear';
 
 import { Button, Form, Input, Portal } from '~/ui';
 import Editor from '~/ui/Editor';
+import { CancelIcon, SaveIcon } from '~/ui/Icons';
 import { ERRORS, validateName } from '~/util/validation';
 
 import styles from './saveContract.css';
@@ -46,13 +45,28 @@ export default class SaveContract extends Component {
         buttons={ this.renderDialogActions() }
         onClose={ this.onClose }
         open
-        title='save contract'
+        title={
+          <FormattedMessage
+            id='saveContract.title'
+            defaultMessage='save contract'
+          />
+        }
       >
         <div>
           <Form>
             <Input
-              label='contract name'
+              label={
-              hint='choose a name for this contract'
+                <FormattedMessage
+                  id='saveContract.name.label'
+                  defaultMessage='contract name'
+                />
+              }
+              hint={
+                <FormattedMessage
+                  id='saveContract.name.hint'
+                  defaultMessage='choose a name for this contract'
+                />
+              }
               value={ name }
               error={ nameError }
               onChange={ this.onChangeName }
@@ -72,9 +86,14 @@ export default class SaveContract extends Component {
   renderDialogActions () {
     const cancelBtn = (
       <Button
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
         key='cancel'
-        label='Cancel'
+        label={
+          <FormattedMessage
+            id='saveContract.buttons.cancel'
+            defaultMessage='Cancel'
+          />
+        }
         onClick={ this.onClose }
       />
     );
@@ -83,7 +102,12 @@ export default class SaveContract extends Component {
       <Button
         icon={ <SaveIcon /> }
         key='save'
-        label='Save'
+        label={
+          <FormattedMessage
+            id='saveContract.buttons.save'
+            defaultMessage='Save'
+          />
+        }
         disabled={ !!this.state.nameError }
         onClick={ this.onSave }
       />

js/src/modals/Transfer/Details/details.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 { Checkbox } from 'material-ui';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Form, { Input, InputAddressSelect, AddressSelect } from '~/ui/Form';
 import { nullableProptype } from '~/util/proptypes';
@@ -57,7 +58,15 @@ export default class Details extends Component {
 
   render () {
     const { all, extras, tag, total, totalError, value, valueError } = this.props;
-    const label = `amount to transfer (in ${tag})`;
+    const label = (
+      <FormattedMessage
+        id='transfer.details.amount.label'
+        defaultMessage='amount to transfer (in {tag})'
+        values={ {
+          tag
+        } }
+      />
+    );
 
     return (
       <Form>
@@ -69,7 +78,12 @@ export default class Details extends Component {
             <Input
               disabled={ all }
               label={ label }
-              hint='the amount to transfer to the recipient'
+              hint={
+                <FormattedMessage
+                  id='transfer.details.amount.hint'
+                  defaultMessage='the amount to transfer to the recipient'
+                />
+              }
               value={ value }
               error={ valueError }
               onChange={ this.onEditValue }
@@ -78,7 +92,12 @@ export default class Details extends Component {
           <div>
             <Checkbox
               checked={ all }
-              label='full account balance'
+              label={
+                <FormattedMessage
+                  id='transfer.details.fullBalance.label'
+                  defaultMessage='full account balance'
+                />
+              }
               onCheck={ this.onCheckAll }
               style={ CHECK_STYLE }
             />
@@ -88,7 +107,12 @@ export default class Details extends Component {
           <div>
             <Input
               disabled
-              label='total transaction amount'
+              label={
+                <FormattedMessage
+                  id='transfer.details.total.label'
+                  defaultMessage='total transaction amount'
+                />
+              }
               error={ totalError }
             >
               <div className={ styles.inputoverride }>
@@ -100,7 +124,12 @@ export default class Details extends Component {
           <div>
             <Checkbox
               checked={ extras }
-              label='advanced sending options'
+              label={
+                <FormattedMessage
+                  id='transfer.details.advanced.label'
+                  defaultMessage='advanced sending options'
+                />
+              }
               onCheck={ this.onCheckExtras }
               style={ CHECK_STYLE }
             />
@@ -122,8 +151,18 @@ export default class Details extends Component {
         <AddressSelect
           accounts={ senders }
           error={ senderError }
-          label='sender address'
+          label={
-          hint='the sender address'
+            <FormattedMessage
+              id='transfer.details.sender.label'
+              defaultMessage='sender address'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='transfer.details.sender.hint'
+              defaultMessage='the sender address'
+            />
+          }
           value={ sender }
           onChange={ this.onEditSender }
           balances={ sendersBalances }
@@ -138,8 +177,18 @@ export default class Details extends Component {
     return (
       <div className={ styles.address }>
         <InputAddressSelect
-          label='recipient address'
+          label={
-          hint='the recipient address'
+            <FormattedMessage
+              id='transfer.details.recipient.label'
+              defaultMessage='recipient address'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='transfer.details.recipient.hint'
+              defaultMessage='the recipient address'
+            />
+          }
           error={ recipientError }
           value={ recipient }
           onChange={ this.onEditRecipient }

js/src/modals/Transfer/transfer.js

@@ -181,11 +181,21 @@ class Transfer extends Component {
             <div>
               <br />
               <div>
-                <p>This transaction needs confirmation from other owners.</p>
+                <p>
+                  <FormattedMessage
+                    id='transfer.wallet.confirmation'
+                    defaultMessage='This transaction needs confirmation from other owners.'
+                  />
+                </p>
                 <Input
                   style={ { width: '50%', margin: '0 auto' } }
                   value={ this.store.operation }
-                  label='operation hash'
+                  label={
+                    <FormattedMessage
+                      id='transfer.wallet.operationHash'
+                      defaultMessage='operation hash'
+                    />
+                  }
                   readOnly
                   allowCopy
                 />
@@ -254,7 +264,12 @@ class Transfer extends Component {
       <Button
         icon={ <CancelIcon /> }
         key='cancel'
-        label='Cancel'
+        label={
+          <FormattedMessage
+            id='transfer.buttons.cancel'
+            defaultMessage='Cancel'
+          />
+        }
         onClick={ this.handleClose }
       />
     );
@@ -263,7 +278,12 @@ class Transfer extends Component {
         disabled={ !this.store.isValid }
         icon={ <NextIcon /> }
         key='next'
-        label='Next'
+        label={
+          <FormattedMessage
+            id='transfer.buttons.next'
+            defaultMessage='Next'
+          />
+        }
         onClick={ this.store.onNext }
       />
     );
@@ -271,16 +291,31 @@ class Transfer extends Component {
       <Button
         icon={ <PrevIcon /> }
         key='back'
-        label='Back'
+        label={
+          <FormattedMessage
+            id='transfer.buttons.back'
+            defaultMessage='Back'
+          />
+        }
         onClick={ this.store.onPrev }
       />
     );
     const sendBtn = (
       <Button
         disabled={ !this.store.isValid || sending }
-        icon={ <IdentityIcon address={ account.address } button /> }
+        icon={
+          <IdentityIcon
+            address={ account.address }
+            button
+          />
+        }
         key='send'
-        label='Send'
+        label={
+          <FormattedMessage
+            id='transfer.buttons.send'
+            defaultMessage='Send'
+          />
+        }
         onClick={ this.store.onSend }
       />
     );
@@ -288,7 +323,12 @@ class Transfer extends Component {
       <Button
         icon={ <DoneIcon /> }
         key='close'
-        label='Close'
+        label={
+          <FormattedMessage
+            id='transfer.buttons.close'
+            defaultMessage='Close'
+          />
+        }
         onClick={ this.handleClose }
       />
     );

js/src/modals/Verification/Done/done.js

@@ -15,7 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
-import SuccessIcon from 'material-ui/svg-icons/navigation/check';
+import { FormattedMessage } from 'react-intl';
+
+import { DoneIcon } from '~/ui/Icons';
 
 import styles from './done.css';
 
@@ -23,8 +25,13 @@ export default class Done extends Component {
   render () {
     return (
       <div className={ styles.container }>
-        <SuccessIcon />
+        <DoneIcon />
-        <p className={ styles.message }>Congratulations, your account is verified!</p>
+        <p className={ styles.message }>
+          <FormattedMessage
+            id='verification.done.message'
+            defaultMessage='Congratulations, your account is verified!'
+          />
+        </p>
       </div>
     );
   }

js/src/modals/Verification/GatherData/gatherData.js

@@ -18,12 +18,10 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
 import { Checkbox } from 'material-ui';
-import InfoIcon from 'material-ui/svg-icons/action/info-outline';
-import SuccessIcon from 'material-ui/svg-icons/navigation/check';
-import ErrorIcon from 'material-ui/svg-icons/navigation/close';
 
 import { fromWei } from '~/api/util/wei';
 import { Form, Input } from '~/ui';
+import { DoneIcon, ErrorIcon, InfoIcon } from '~/ui/Icons';
 import { nullableProptype } from '~/util/proptypes';
 
 import smsTermsOfService from '~/3rdparty/sms-verification/terms-of-service';
@@ -81,7 +79,7 @@ export default class GatherData extends Component {
     if (isServerRunning) {
       return (
         <div className={ styles.container }>
-          <SuccessIcon />
+          <DoneIcon />
           <p className={ styles.message }>
             <FormattedMessage
               id='ui.verification.gatherData.isServerRunning.true'
@@ -166,7 +164,7 @@ export default class GatherData extends Component {
     } else if (accountIsVerified === false) {
       return (
         <div className={ styles.container }>
-          <SuccessIcon />
+          <DoneIcon />
           <p className={ styles.message }>
             <FormattedMessage
               id='ui.verification.gatherData.accountIsVerified.false'
@@ -209,7 +207,7 @@ export default class GatherData extends Component {
     } else if (accountHasRequested === false) {
       return (
         <div className={ styles.container }>
-          <SuccessIcon />
+          <DoneIcon />
           <p className={ styles.message }>
             <FormattedMessage
               id='ui.verification.gatherData.accountHasRequested.false'

js/src/modals/Verification/QueryCode/queryCode.js

@@ -42,7 +42,15 @@ export default class QueryCode extends Component {
 
     return (
       <Form>
-        <p>The verification code has been sent to { receiver }.</p>
+        <p>
+          <FormattedMessage
+            id='verification.code.sent'
+            defaultMessage='The verification code has been sent to {receiver}.'
+            values={ {
+              receiver
+            } }
+          />
+        </p>
         <Input
           autoFocus
           label={

js/src/modals/Verification/SendConfirmation/sendConfirmation.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 { nullableProptype } from '~/util/proptypes';
 import TxHash from '~/ui/TxHash';
@@ -34,14 +35,28 @@ export default class SendConfirmation extends Component {
     const { step, tx } = this.props;
 
     if (step === POSTING_CONFIRMATION) {
-      return (<p>The verification code will be sent to the contract. Please authorize this using the Parity Signer.</p>);
+      return (
+        <p>
+          <FormattedMessage
+            id='verification.confirmation.authorise'
+            defaultMessage='The verification code will be sent to the contract. Please authorize this using the Parity Signer.'
+          />
+        </p>);
     }
 
     if (step === POSTED_CONFIRMATION) {
       return (
         <div className={ styles.centered }>
-          <TxHash hash={ tx } maxConfirmations={ 2 } />
+          <TxHash
-          <p>Please keep this window open.</p>
+            hash={ tx }
+            maxConfirmations={ 2 }
+          />
+          <p>
+            <FormattedMessage
+              id='verification.confirmation.windowOpen'
+              defaultMessage='Please keep this window open.'
+            />
+          </p>
         </div>
       );
     }

js/src/modals/Verification/SendRequest/sendRequest.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 { nullableProptype } from '~/util/proptypes';
 import TxHash from '~/ui/TxHash';
@@ -35,19 +36,39 @@ export default class SendRequest extends Component {
 
     switch (step) {
       case POSTING_REQUEST:
-        return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
+        return (
+          <p>
+            <FormattedMessage
+              id='verification.request.authorise'
+              defaultMessage='A verification request will be sent to the contract. Please authorize this using the Parity Signer.'
+            />
+          </p>
+        );
 
       case POSTED_REQUEST:
         return (
           <div className={ styles.centered }>
-            <TxHash hash={ tx } maxConfirmations={ 1 } />
+            <TxHash
-            <p>Please keep this window open.</p>
+              hash={ tx }
+              maxConfirmations={ 1 }
+            />
+            <p>
+              <FormattedMessage
+                id='verification.request.windowOpen'
+                defaultMessage='Please keep this window open.'
+              />
+            </p>
           </div>
         );
 
       case REQUESTING_CODE:
         return (
-          <p>Requesting a code from the Parity server and waiting for the puzzle to be put into the contract.</p>
+          <p>
+            <FormattedMessage
+              id='verification.request.requesting'
+              defaultMessage='Requesting a code from the Parity server and waiting for the puzzle to be put into the contract.'
+            />
+          </p>
         );
 
       default:

js/src/modals/Verification/verification.js

@@ -19,11 +19,10 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import DoneIcon from 'material-ui/svg-icons/action/done-all';
-import CancelIcon from 'material-ui/svg-icons/content/clear';
 
 import { Button, IdentityIcon, Portal } from '~/ui';
 import RadioButtons from '~/ui/Form/RadioButtons';
+import { CancelIcon, DoneIcon } from '~/ui/Icons';
 
 import SMSVerificationStore from './sms-store';
 import EmailVerificationStore from './email-store';

js/src/ui/Icons/index.js

@@ -37,6 +37,7 @@ 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 InfoIcon from 'material-ui/svg-icons/action/info-outline';
 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';