Find all strings for i18n - Closes #557

src/components/account/account.js

@@ -11,8 +11,9 @@ import { toRawLsk } from '../../utils/lsk';
  *
  * @param {object} props - include properties of component
  */
+
 const Account = ({
-  account, peers,
+  account, peers, t,
 }) => {
   const status = (peers.status && peers.status.online) ?
     <i className="material-icons online">check</i> :
@@ -21,13 +22,15 @@ const Account = ({
   return (
     <section className={`${grid.row} ${styles.wrapper}`}>
       <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
-        <Address {...account}></Address>
+        <Address t={t} {...account}></Address>
       </article>
       <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <div className="box">
           <div className={`${grid.row}`}>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
-              <h3 className={styles.title}>Peer</h3>
+              <h3 className={styles.title}>
+                {t('Peer')}
+              </h3>
             </div>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
               <div className={styles['value-wrapper']}>
@@ -50,7 +53,7 @@ const Account = ({
         <div className="box">
           <div className={`${grid.row}`}>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
-              <h3 className={styles.title}>Balance</h3>
+              <h3 className={styles.title}>{t('Balance')}</h3>
             </div>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
               <ClickToSend

src/components/account/account.test.js

@@ -13,6 +13,9 @@ describe('Account', () => {
 
   beforeEach(() => {
     props = {
+      t: key => key,
+      i18n: {},
+      store: {},
       onActivePeerUpdated: sinon.spy(),
       peers: {
         status: {

src/components/account/address.js

@@ -3,7 +3,7 @@ import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './account.css';
 
 const Address = (props) => {
-  const title = props.isDelegate ? 'Delegate' : 'Address';
+  const title = props.isDelegate ? props.t('Delegate') : props.t('Address');
   const content = props.isDelegate ?
     (<div>
       <p className="inner primary delegate-name">

src/components/account/address.test.js

@@ -8,6 +8,7 @@ describe('Address', () => {
     const inputValue = {
       isDelegate: false,
       address: '16313739661670634666L',
+      t: key => key,
     };
     const expectedHeaderValue = 'Address';
     const wrapper = shallow(<Address {...inputValue} />);
@@ -21,6 +22,7 @@ describe('Address', () => {
       delegate: {
         username: 'lisk-nano',
       },
+      t: key => key,
     };
     const expectedHeaderValue = 'Delegate';
     const wrapper = shallow(<Address {...inputValue} />);
@@ -34,6 +36,7 @@ describe('Address', () => {
       delegate: {
         username: 'lisk-nano',
       },
+      t: key => key,
     };
     const expectedValue = 'lisk-nano';
     const wrapper = shallow(<Address {...inputValue} />);

src/components/account/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
 import Account from './account';
 
 /**
@@ -11,4 +12,4 @@ const mapStateToProps = state => ({
 
 export default connect(
   mapStateToProps,
-)(Account);
+)(translate()(Account));

src/components/account/index.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import PropTypes from 'prop-types';
 import AccountHOC from './index';
+import i18n from '../../i18n';
 
 describe('Account HOC', () => {
   // Mocking store
@@ -32,8 +34,11 @@ describe('Account HOC', () => {
     }),
   };
   const options = {
-    context: { store },
-    // childContextTypes: { store: PropTypes.object.isRequired },
+    context: { i18n, store },
+    childContextTypes: {
+      i18n: PropTypes.object.isRequired,
+      store: PropTypes.object.isRequired,
+    },
   };
   let props;
 

src/components/forging/delegateStats.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import CircularProgressbar from 'react-circular-progressbar';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
+import { translate } from 'react-i18next';
 import style from './forging.css';
 
 const identity = x => (x);
@@ -34,7 +35,7 @@ const DelegateStats = props => (
           <CardText>
             <div className={grid['col-xs-12']}>
               <div className={`${grid.row}  ${grid['between-xs']}`}>
-                <div className={style.circularProgressTitle}> {cardItem.label} </div>
+                <div className={style.circularProgressTitle}> {props.t(cardItem.label)} </div>
                 <CircularProgressbar
                   percentage={cardItem.percentageTransform(props.delegate[cardItem.key])}
                   textForPercentage={
@@ -48,4 +49,4 @@ const DelegateStats = props => (
   </div>
 );
 
-export default DelegateStats;
+export default translate()(DelegateStats);

src/components/forging/delegateStats.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import DelegateStats from './delegateStats';
 
 
@@ -14,7 +16,9 @@ describe('DelegateStats', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<DelegateStats delegate={delegate} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <DelegateStats delegate={delegate} />
+      </I18nextProvider>);
   });
 
   it('should render 3 Card components', () => {

src/components/forging/forgedBlocks.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardTitle } from 'react-toolbox/lib/card';
 import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { TooltipTime } from '../timestamp';
 import LiskAmount from '../liskAmount';
@@ -17,11 +18,11 @@ const ForgedBlocks = props => (
       <div className={style.forgedBlocksTableWrapper}>
         <Table selectable={false}>
           <TableHead>
-            <TableCell>Block height</TableCell>
-            <TableCell>Block Id</TableCell>
-            <TableCell>Timestamp</TableCell>
-            <TableCell>Total fee</TableCell>
-            <TableCell>Reward</TableCell>
+            <TableCell>{props.t('Block height')}</TableCell>
+            <TableCell>{props.t('Block Id')}</TableCell>
+            <TableCell>{props.t('Timestamp')}</TableCell>
+            <TableCell>{props.t('Total fee')}</TableCell>
+            <TableCell>{props.t('Reward')}</TableCell>
           </TableHead>
           {props.forgedBlocks.map((block, idx) => (
             <TableRow key={idx}>
@@ -34,9 +35,9 @@ const ForgedBlocks = props => (
           ))}
         </Table>
       </div> :
-      <p className='hasPaddingRow empty-message'>You have not forged any blocks yet.</p>
+      <p className='hasPaddingRow empty-message'>{props.t('You have not forged any blocks yet')}.</p>
     }
   </Card>
 );
 
-export default ForgedBlocks;
+export default translate()(ForgedBlocks);

src/components/forging/forgedBlocks.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import ForgedBlocks from './forgedBlocks';
 
 
@@ -32,7 +34,9 @@ describe('ForgedBlocks', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<ForgedBlocks forgedBlocks={forgedBlocks} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <ForgedBlocks forgedBlocks={forgedBlocks} />
+      </I18nextProvider>);
   });
 
   it('should render 1 Table component', () => {

src/components/forging/forging.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import Forging from './forging';
 
 describe('Forging', () => {
@@ -26,7 +28,9 @@ describe('Forging', () => {
         isDelegate: true,
       };
 
-      wrapper = mount(<Forging {...props} account={account} />);
+      wrapper = mount(<I18nextProvider i18n={ i18n }>
+          <Forging {...props} account={account} />
+        </I18nextProvider>);
     });
 
     it('should render ForgingTitle', () => {

src/components/forging/forgingStats.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import moment from 'moment';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import LiskAmount from '../liskAmount';
 import style from './forging.css';
@@ -12,15 +13,15 @@ const statCardObjects = [
     startMoment: moment().subtract(1, 'days'),
   }, {
     key: 'last7d',
-    label: 'Last 7 days',
+    label: '7',
     startMoment: moment().subtract(7, 'days'),
   }, {
     key: 'last30d',
-    label: 'Last 30 days',
+    label: '30',
     startMoment: moment().subtract(30, 'days'),
   }, {
     key: 'last365d',
-    label: 'Last 365 days',
+    label: '365',
     startMoment: moment().subtract(365, 'days'),
   },
 ];
@@ -41,9 +42,13 @@ class ForgingStats extends React.Component {
               <CardText>
               <div className={grid['col-xs-12']}>
                 <div className={`${grid.row}  ${grid['between-xs']}`}>
-                  <span className='title'> {cardObj.label} </span>
+                  <span className='title'>
+                    { cardObj.label === 'Last 24 hours' ?
+                      this.props.t(cardObj.label) :
+                      this.props.t('Last x days', { day: cardObj.label }) }
+                  </span>
                   <span>
-                    <LiskAmount val={this.props.statistics[cardObj.key]}
+                   <LiskAmount val={this.props.statistics[cardObj.key]}
                       roundTo={2}
                       /> LSK
                   </span>
@@ -58,4 +63,4 @@ class ForgingStats extends React.Component {
   }
 }
 
-export default ForgingStats;
+export default translate()(ForgingStats);

src/components/forging/forgingStats.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import ForgingStats from './forgingStats';
 
 
@@ -23,29 +25,31 @@ describe('ForgingStats', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<ForgingStats
-      account={account}
-      statistics={statistics}
-      loadStats={loadStats} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <ForgingStats
+          account={account}
+          statistics={statistics}
+          loadStats={loadStats} />
+      </I18nextProvider>);
   });
 
   it('should render 4 Card components', () => {
     expect(wrapper.find('Card')).to.have.lengthOf(4);
   });
 
   it('should render Card component for Last 24 hours', () => {
-    expect(wrapper.find('Card').at(0).text().trim()).to.equal('Last 24 hours 0 LSK');
+    expect(wrapper.find('Card').at(0).text().trim()).to.equal('Last 24 hours0 LSK');
   });
 
   it('should render Card component for Last 7 days', () => {
-    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last 7 days 32.13 LSK');
+    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last x days32.13 LSK');
   });
 
   it('should render Card component for Last 30 days', () => {
-    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last 30 days 3,213.18 LSK');
+    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last x days3,213.18 LSK');
   });
 
   it('should render Card component for Last 365 days', () => {
-    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last 365 days 321,317.91 LSK');
+    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last x days321,317.91 LSK');
   });
 });

src/components/forging/forgingTitle.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import moment from 'moment';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import LiskAmount from '../liskAmount';
 import style from './forging.css';
@@ -21,7 +22,7 @@ class ForgingTitle extends React.Component {
               {this.props.account.delegate.username}
             </h2>
             <span>
-              <LiskAmount val={this.props.statistics.total} roundTo={2} /> LSK Earned
+              <LiskAmount val={this.props.statistics.total} roundTo={2} /> LSK {this.props.t('Earned')}
             </span>
           </div>
         </CardText>
@@ -30,4 +31,4 @@ class ForgingTitle extends React.Component {
   }
 }
 
-export default ForgingTitle;
+export default translate()(ForgingTitle);

src/components/forging/forgingTitle.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import ForgingTitle from './forgingTitle';
 
 
@@ -20,8 +22,10 @@ describe('ForgingTitle', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<ForgingTitle
-      account={account} statistics={statistics} loadStats={loadStats}/>);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <ForgingTitle
+          account={account} statistics={statistics} loadStats={loadStats}/>
+      </I18nextProvider>);
   });
 
   it('should render 1 Card component', () => {