Merge pull request #568 from MortalKastor/i18n-eslint

`react/jsx-no-literals` eslint rule

.eslintrc

@@ -54,6 +54,7 @@
     "react/jsx-curly-brace-presence": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-no-target-blank": 0,
+    "react/jsx-no-literals": [1, {"noStrings": false}],
     "react/prefer-stateless-function": 0,
     "react/require-default-props": 0,
     "react/sort-comp": [1, {
@@ -73,4 +74,10 @@
       "onlyFilesWithFlowAnnotation": true,
     }
   },
+  "overrides": [{
+    "files": [ "*stories.js" ],
+    "rules": {
+      "react/jsx-no-literals": 0
+    }
+  }]
 }

src/components/CurrentAddress/index.js

@@ -183,7 +183,8 @@ class CurrentAddress extends PureComponent<Props> {
           <Box>
             {accountName ? (
               <Trans i18nKey="app:currentAddress.for" parent="div">
-                Address for <strong>{accountName}</strong>
+                {'Address for '}
+                <strong>{accountName}</strong>
               </Trans>
             ) : (
               t('app:currentAddress.title')

src/components/DeviceConnect/index.js

@@ -200,6 +200,7 @@ class DeviceConnect extends PureComponent<Props> {
     const hasDevice = devices.length > 0
     const hasMultipleDevices = devices.length > 1
 
+    /* eslint-disable react/jsx-no-literals */
     return (
       <Box flow={4} ff="Open Sans">
         <Step validated={hasDevice}>

src/components/FeesField/BitcoinKind.js

@@ -3,6 +3,9 @@
 import React, { Component } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import styled from 'styled-components'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
 
 import InputCurrency from 'components/base/InputCurrency'
 import Select from 'components/base/Select'
@@ -15,6 +18,7 @@ type Props = {
   account: Account,
   feePerByte: number,
   onChange: number => void,
+  t: T,
 }
 
 type FeeItem = {
@@ -104,14 +108,14 @@ class FeesField extends Component<
   }
 
   render() {
-    const { account, feePerByte, error, onChange } = this.props
+    const { account, feePerByte, error, onChange, t } = this.props
     const { items, selectedItem } = this.state
     const { units } = account.currency
 
     const satoshi = units[units.length - 1]
 
     return (
-      <GenericContainer error={error} help="fee per byte">
+      <GenericContainer error={error} help={t('app:send.steps.amount.unitPerByte')}>
         <Select width={156} options={items} value={selectedItem} onChange={this.onSelectChange} />
         <InputCurrency
           defaultUnit={satoshi}
@@ -120,18 +124,22 @@ class FeesField extends Component<
           value={feePerByte}
           onChange={onChange}
           onChangeFocus={this.onChangeFocus}
-          renderRight={<InputRight>{satoshi.code} per Byte</InputRight>}
+          renderRight={
+            <InputRight>
+              {t('app:send.steps.amount.unitPerByte', { unit: satoshi.code })}
+            </InputRight>
+          }
         />
       </GenericContainer>
     )
   }
 }
 
-export default (props: Props) => (
+export default translate()((props: Props) => (
   <WithFeesAPI
     currency={props.account.currency}
     renderError={error => <FeesField {...props} error={error} />}
     renderLoading={() => <FeesField {...props} />}
     render={fees => <FeesField {...props} fees={fees} />}
   />
-)
+))

src/components/MainSideBar/index.js

@@ -92,7 +92,7 @@ class MainSideBar extends PureComponent<Props> {
             <SideBarListItem
               label={t('app:dashboard.title')}
               icon={IconPieChart}
-              iconActiveColor={'wallet'}
+              iconActiveColor="wallet"
               onClick={this.handleClickDashboard}
               isActive={pathname === '/'}
               hasNotif={updateStatus === 'downloaded'}
@@ -100,28 +100,28 @@ class MainSideBar extends PureComponent<Props> {
             <SideBarListItem
               label={t('app:send.title')}
               icon={IconSend}
-              iconActiveColor={'wallet'}
+              iconActiveColor="wallet"
               onClick={this.handleOpenSendModal}
               disabled={accounts.length === 0}
             />
             <SideBarListItem
               label={t('app:receive.title')}
               icon={IconReceive}
-              iconActiveColor={'wallet'}
+              iconActiveColor="wallet"
               onClick={this.handleOpenReceiveModal}
               disabled={accounts.length === 0}
             />
             <SideBarListItem
               label={t('app:sidebar.manager')}
               icon={IconManager}
-              iconActiveColor={'wallet'}
+              iconActiveColor="wallet"
               onClick={this.handleClickManager}
               isActive={pathname === '/manager'}
             />
             <SideBarListItem
               label={t('app:sidebar.exchange')}
               icon={IconExchange}
-              iconActiveColor={'wallet'}
+              iconActiveColor="wallet"
               onClick={this.handleClickExchange}
               isActive={pathname === '/exchange'}
             />

src/components/ManagerPage/AppsList.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
 
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'

src/components/ManagerPage/FirmwareUpdate.js

@@ -1,4 +1,6 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
+
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import isEqual from 'lodash/isEqual'

src/components/ManagerPage/PlugYourDevice.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
 
 import React from 'react'
 import { translate } from 'react-i18next'

src/components/ManagerPage/WorkflowDefault.js

@@ -1,4 +1,6 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
+
 import React from 'react'
 import { Trans, translate } from 'react-i18next'
 import styled from 'styled-components'

src/components/ManagerPage/index.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
 
 import React from 'react'
 

src/components/Onboarding/helperComponents.js

@@ -57,7 +57,7 @@ type StepType = {
 export function OptionRow({ step }: { step: StepType }) {
   const { icon, desc } = step
   return (
-    <Box horizontal m={'7px'} style={{ minWidth: 420 }}>
+    <Box horizontal m="7px" style={{ minWidth: 420 }}>
       <Box justify="center">{icon}</Box>
       <Box justify="center" shrink>
         <OptionRowDesc>{desc}</OptionRowDesc>

src/components/Onboarding/steps/GenuineCheck.js

@@ -134,7 +134,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
             <CardWrapper>
               <Box justify="center">
                 <Box horizontal>
-                  <IconOptionRow>1.</IconOptionRow>
+                  <IconOptionRow>{'1.'}</IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
                 </Box>
               </Box>
@@ -151,7 +151,9 @@ class GenuineCheck extends PureComponent<StepProps, State> {
             <CardWrapper isDisabled={!genuine.pinStepPass}>
               <Box justify="center">
                 <Box horizontal>
-                  <IconOptionRow color={!genuine.pinStepPass ? 'grey' : 'wallet'}>2.</IconOptionRow>
+                  <IconOptionRow color={!genuine.pinStepPass ? 'grey' : 'wallet'}>
+                    {'2.'}
+                  </IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
                 </Box>
               </Box>
@@ -171,7 +173,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
               <Box justify="center">
                 <Box horizontal>
                   <IconOptionRow color={!genuine.recoveryStepPass ? 'grey' : 'wallet'}>
-                    3.
+                    {'3.'}
                   </IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
                 </Box>

src/components/Onboarding/steps/SelectPIN/SelectPINblue.js

@@ -23,17 +23,17 @@ class SelectPIN extends PureComponent<Props, *> {
     const stepsLedgerBlue = [
       {
         key: 'step1',
-        icon: <IconOptionRow>1.</IconOptionRow>,
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'),
       },
       {
         key: 'step2',
-        icon: <IconOptionRow>2.</IconOptionRow>,
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'),
       },
       {
         key: 'step3',
-        icon: <IconOptionRow>3.</IconOptionRow>,
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'),
       },
     ]

src/components/Onboarding/steps/SelectPIN/SelectPINnano.js

@@ -23,22 +23,22 @@ class SelectPINnano extends PureComponent<Props, *> {
     const stepsLedgerNano = [
       {
         key: 'step1',
-        icon: <IconOptionRow>1.</IconOptionRow>,
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'),
       },
       {
         key: 'step2',
-        icon: <IconOptionRow>2.</IconOptionRow>,
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'),
       },
       {
         key: 'step3',
-        icon: <IconOptionRow>3.</IconOptionRow>,
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'),
       },
       {
         key: 'step4',
-        icon: <IconOptionRow>4.</IconOptionRow>,
+        icon: <IconOptionRow>{'4.'}</IconOptionRow>,
         desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'),
       },
     ]

src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js

@@ -29,17 +29,17 @@ class WriteSeedBlue extends PureComponent<Props, *> {
     const steps = [
       {
         key: 'step1',
-        icon: <IconOptionRow>1.</IconOptionRow>,
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.blue.step1'),
       },
       {
         key: 'step2',
-        icon: <IconOptionRow>2.</IconOptionRow>,
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.blue.step2'),
       },
       {
         key: 'step3',
-        icon: <IconOptionRow>3.</IconOptionRow>,
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.blue.step3'),
       },
     ]

src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js

@@ -29,17 +29,17 @@ class WriteSeedNano extends PureComponent<Props, *> {
     const steps = [
       {
         key: 'step1',
-        icon: <IconOptionRow>1.</IconOptionRow>,
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.nano.step1'),
       },
       {
         key: 'step2',
-        icon: <IconOptionRow>2.</IconOptionRow>,
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.nano.step2'),
       },
       {
         key: 'step3',
-        icon: <IconOptionRow>3.</IconOptionRow>,
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.nano.step3'),
       },
     ]

src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js

@@ -30,22 +30,22 @@ class WriteSeedRestore extends PureComponent<Props, *> {
     const steps = [
       {
         key: 'step1',
-        icon: <IconOptionRow>1.</IconOptionRow>,
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.restore.step1'),
       },
       {
         key: 'step2',
-        icon: <IconOptionRow>2.</IconOptionRow>,
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.restore.step2'),
       },
       {
         key: 'step3',
-        icon: <IconOptionRow>3.</IconOptionRow>,
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.restore.step3'),
       },
       {
         key: 'step4',
-        icon: <IconOptionRow>4.</IconOptionRow>,
+        icon: <IconOptionRow>{'4.'}</IconOptionRow>,
         desc: t('onboarding:writeSeed.restore.step4'),
       },
     ]

src/components/RequestAmount/index.js

@@ -155,7 +155,7 @@ export class RequestAmount extends PureComponent<Props> {
           onChange={this.onLeftChange}
           renderRight={<InputRight>{account.unit.code}</InputRight>}
         />
-        <InputCenter>=</InputCenter>
+        <InputCenter>{'='}</InputCenter>
         <InputCurrency
           containerProps={containerProps}
           defaultUnit={rightUnit}

src/components/SettingsPage/sections/Tools.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */ // FIXME
 
 import React, { PureComponent } from 'react'
 

src/components/ThrowBlock.js

@@ -5,10 +5,13 @@ import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import { shell, remote } from 'electron'
 import qs from 'querystring'
+import { translate } from 'react-i18next'
 
 import { rgba } from 'styles/helpers'
 import db from 'helpers/db'
 
+import type { T } from 'types/common'
+
 import ExportLogsBtn from 'components/ExportLogsBtn'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
@@ -16,6 +19,7 @@ import TranslatedError from './TranslatedError'
 
 type Props = {
   children: any,
+  t: T,
 }
 
 type State = {
@@ -79,6 +83,7 @@ ${error.stack}
 
   render() {
     const { error } = this.state
+    const { t } = this.props
     if (error) {
       return (
         <Container>
@@ -87,14 +92,14 @@ ${error.stack}
           </Inner>
           <Box horizontal flow={2}>
             <Button primary onClick={this.handleRestart}>
-              {'Restart app'}
+              {t('app:crash.restart')}
             </Button>
             <Button danger onClick={this.handleReset}>
-              {'Reset app files'}
+              {t('app:crash.reset')}
             </Button>
             <ExportLogsBtn />
             <Button primary onClick={this.handleCreateIssue}>
-              {'Create ticket'}
+              {t('app:crash.createTicket')}
             </Button>
           </Box>
         </Container>
@@ -104,4 +109,4 @@ ${error.stack}
   }
 }
 
-export default ThrowBlock
+export default translate()(ThrowBlock)

src/components/base/AccountsList/AccountRow.js

@@ -13,6 +13,7 @@ import FormattedVal from 'components/base/FormattedVal'
 import Input from 'components/base/Input'
 import IconEdit from 'icons/Edit'
 import IconCheck from 'icons/Check'
+import type { T } from 'types/common'
 
 type Props = {
   account: Account,
@@ -20,6 +21,7 @@ type Props = {
   isDisabled?: boolean,
   onClick: Account => void,
   onAccountUpdate: Account => void,
+  t: T,
 }
 
 type State = {
@@ -71,7 +73,7 @@ export default class AccountRow extends PureComponent<Props, State> {
   _input = null
 
   render() {
-    const { account, isChecked, onClick, isDisabled } = this.props
+    const { account, isChecked, onClick, isDisabled, t } = this.props
     const { isEditing, accountNameCopy } = this.state
 
     return (
@@ -100,7 +102,7 @@ export default class AccountRow extends PureComponent<Props, State> {
         {!isEditing && (
           <Edit onClick={this.handleEditClick}>
             <IconEdit size={13} />
-            <span>{'edit name'}</span>
+            <span>{t('app:addAccounts.editName')}</span>
           </Edit>
         )}
         <FormattedVal

src/components/base/AccountsList/index.js

@@ -67,6 +67,7 @@ const AccountsList = ({
               isChecked={checkedIds.find(id => id === account.id) !== undefined}
               onClick={onToggleAccount}
               onAccountUpdate={onUpdateAccount}
+              t={t}
             />
           ))}
           {isLoading && (

src/components/base/LegacySelect/index.js

@@ -4,6 +4,9 @@ import React, { PureComponent } from 'react'
 import Downshift from 'downshift'
 import styled from 'styled-components'
 import { space } from 'styled-system'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
@@ -33,6 +36,7 @@ type Props = {
   value?: *,
   disabled: boolean,
   small?: boolean,
+  t: T,
 }
 
 const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
@@ -163,7 +167,7 @@ class LegacySelect extends PureComponent<Props> {
   _children = {}
 
   renderItems = (items: Array<Object>, selectedItem: any, downshiftProps: Object) => {
-    const { renderItem, maxHeight, keyProp } = this.props
+    const { renderItem, maxHeight, keyProp, t } = this.props
     const { getItemProps, highlightedIndex } = downshiftProps
 
     const selectedItemIndex = items.indexOf(selectedItem)
@@ -228,7 +232,7 @@ class LegacySelect extends PureComponent<Props> {
           </GrowScroll>
         ) : (
           <Box>
-            <Item>{'No results'}</Item>
+            <Item>{t('app:error.noResults')}</Item>
           </Box>
         )}
       </Dropdown>
@@ -340,4 +344,4 @@ class LegacySelect extends PureComponent<Props> {
   }
 }
 
-export default LegacySelect
+export default translate()(LegacySelect)

src/components/base/StepperNumber/index.js

@@ -143,11 +143,11 @@ class StepperNumber extends PureComponent<Props, State> {
     return (
       <Container>
         <Btn onMouseDown={!isMin ? this.handleMouseDown('decrement') : undefined} disabled={isMin}>
-          -
+          {'-'}
         </Btn>
         <Num>{value}</Num>
         <Btn onMouseDown={!isMax ? this.handleMouseDown('increment') : undefined} disabled={isMax}>
-          +
+          {'+'}
         </Btn>
       </Container>
     )

src/components/modals/AddAccounts/index.js

@@ -211,7 +211,7 @@ class AddAccounts extends PureComponent<Props, State> {
             </ModalContent>
             {!hideFooter && (
               <ModalFooter horizontal align="center" justify="flex-end" style={{ height: 80 }}>
-                {StepFooter ? <StepFooter {...stepProps} /> : <Box>footer</Box>}
+                {StepFooter ? <StepFooter {...stepProps} /> : <Box />}
               </ModalFooter>
             )}
           </ModalBody>

src/components/modals/AddAccounts/steps/04-step-finish.js

@@ -8,15 +8,15 @@ import IconCheckCircle from 'icons/CheckCircle'
 
 import type { StepProps } from '../index'
 
-function StepFinish({ onCloseModal }: StepProps) {
+function StepFinish({ onCloseModal, t }: StepProps) {
   return (
     <Box align="center" py={6}>
       <Box color="positiveGreen" mb={4}>
         <IconCheckCircle size={40} />
       </Box>
-      <Box mb={4}>{'Great success!'}</Box>
+      <Box mb={4}>{t('app:addAccounts.success')}</Box>
       <Button primary onClick={onCloseModal}>
-        {'Close'}
+        {t('app:common.close')}
       </Button>
     </Box>
   )

src/components/modals/Debug.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable react/jsx-no-literals */
 import { getCryptoCurrencyById } from '@ledgerhq/live-common/lib/helpers/currencies'
 import last from 'lodash/last'
 import React, { Component } from 'react'

src/components/modals/Send/Footer.js

@@ -76,7 +76,7 @@ class Footer extends PureComponent<
                 />
                 <Box horizontal align="center">
                   <Text ff="Rubik" fontSize={3}>
-                    {'('}
+                    {'(' /* eslint-disable-line react/jsx-no-literals */}
                   </Text>
                   <CounterValue
                     currency={account.currency}
@@ -88,7 +88,7 @@ class Footer extends PureComponent<
                     alwaysShowSign={false}
                   />
                   <Text ff="Rubik" fontSize={3}>
-                    {')'}
+                    {')' /* eslint-disable-line react/jsx-no-literals */}
                   </Text>
                 </Box>
               </Box>

static/i18n/en/app.yml

@@ -38,6 +38,7 @@ common:
     refresh: Refresh
   error:
     load: Unable to load
+    noResults: No results
 operation:
   type:
     IN: Receive funds
@@ -128,7 +129,11 @@ addAccounts:
   accountToImportSubtitle_plural: 'Accounts to import ({{count}})'
   selectAll: Select all
   unselectAll: Unselect all
-  createNewAccount: Create new account
+  editName: Edit name
+  success: Great success!
+  createNewAccount:
+    title: Create new account
+    noOperationOnLastAccount: You cannot create a new account because your last account has no operations
   retrySync: Retry sync
   cta:
     create: 'Create account'
@@ -212,6 +217,8 @@ send:
       message: Leave a message (140)
       rippleTag: Tag
       ethereumGasLimit: Gas limit
+      unitPerByte: '{{unit}} per byte'
+      feePerByte: Fee per byte
     connectDevice:
       title: Connect device
     verification:
@@ -345,3 +352,7 @@ password:
 update:
   newVersionReady: A new update is available.
   relaunch: Update now
+crash:
+  restart: Restart app
+  reset: Reset app files
+  createTicket: Create ticket