Updated stale translations

src/components/MainSideBar/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { compose } from 'redux'
 import { withRouter } from 'react-router'
@@ -87,13 +87,6 @@ class MainSideBar extends PureComponent<Props> {
     push(to)
   }
 
-  ADD_ACCOUNT_EMPTY_STATE = (
-    <Box relative pr={3}>
-      <img style={{ position: 'absolute', top: -10, right: 5 }} alt="" src={i('arrow-add.svg')} />
-      {this.props.t('emptyState.sidebar.text')}
-    </Box>
-  )
-
   handleClickDashboard = () => this.push('/')
   handleOpenSendModal = () => this.props.openModal(MODAL_SEND)
   handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE)
@@ -110,6 +103,13 @@ class MainSideBar extends PureComponent<Props> {
       <AddAccountButton tooltipText={t('addAccounts.title')} onClick={this.handleOpenImportModal} />
     )
 
+    const emptyState = (
+      <Box relative pr={3}>
+        <img style={{ position: 'absolute', top: -10, right: 5 }} alt="" src={i('arrow-add.svg')} />
+        <Trans i18nKey="emptyState.sidebar.text" />
+      </Box>
+    )
+
     return (
       <Box relative bg="white" style={{ width: 230 }}>
         <TopGradient />
@@ -168,7 +168,7 @@ class MainSideBar extends PureComponent<Props> {
           <SideBarList
             title={t('sidebar.accounts', { count: accounts.length })}
             titleRight={addAccountButton}
-            emptyState={this.ADD_ACCOUNT_EMPTY_STATE}
+            emptyState={emptyState}
           >
             {accounts.map(account => (
               <AccountListItem

src/components/PillsDaysCount.js

@@ -10,7 +10,7 @@ import Track from 'analytics/Track'
 
 type Props = {
   selected: string,
-  onChange: ({ key: string, value: *, label: string }) => *,
+  onChange: ({ key: string, value: *, label: React$Node }) => *,
   t: T,
 }
 

src/components/SettingsPage/index.js

@@ -3,7 +3,7 @@
 import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { Trans, translate } from 'react-i18next'
 import type { T } from 'types/common'
 import { Switch, Route } from 'react-router'
 import type { RouterHistory, Match, Location } from 'react-router'
@@ -40,22 +40,22 @@ class SettingsPage extends PureComponent<Props, State> {
     this._items = [
       {
         key: 'display',
-        label: props.t('settings.tabs.display'),
+        label: <Trans i18nKey="settings.tabs.display" />,
         value: SectionDisplay,
       },
       {
         key: 'currencies',
-        label: props.t('settings.tabs.currencies'),
+        label: <Trans i18nKey="settings.tabs.currencies" />,
         value: SectionCurrencies,
       },
       {
         key: 'about',
-        label: props.t('settings.tabs.about'),
+        label: <Trans i18nKey="settings.tabs.about" />,
         value: SectionAbout,
       },
       {
         key: 'help',
-        label: props.t('settings.tabs.help'),
+        label: <Trans i18nKey="settings.tabs.help" />,
         value: SectionHelp,
       },
     ]

src/components/base/Pills/index.js

@@ -8,7 +8,7 @@ import Box, { Tabbable } from 'components/base/Box'
 import BoldToggle from 'components/base/BoldToggle'
 
 type Item = {
-  label: string,
+  label: React$Node,
   key: string,
   value?: any,
 }

src/components/modals/AddAccounts/index.js

@@ -3,7 +3,7 @@
 import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { Trans, translate } from 'react-i18next'
 import { createStructuredSelector } from 'reselect'
 
 import Track from 'analytics/Track'
@@ -30,7 +30,7 @@ import StepConnectDevice, { StepConnectDeviceFooter } from './steps/02-step-conn
 import StepImport, { StepImportFooter } from './steps/03-step-import'
 import StepFinish, { StepFinishFooter } from './steps/04-step-finish'
 
-const createSteps = ({ t }: { t: T }) => {
+const createSteps = () => {
   const onBack = ({ transitionTo, resetScanState }: StepProps) => {
     resetScanState()
     transitionTo('chooseCurrency')
@@ -38,7 +38,7 @@ const createSteps = ({ t }: { t: T }) => {
   return [
     {
       id: 'chooseCurrency',
-      label: t('addAccounts.breadcrumb.informations'),
+      label: <Trans i18nKey="addAccounts.breadcrumb.informations" />,
       component: StepChooseCurrency,
       footer: StepChooseCurrencyFooter,
       onBack: null,
@@ -46,7 +46,7 @@ const createSteps = ({ t }: { t: T }) => {
     },
     {
       id: 'connectDevice',
-      label: t('addAccounts.breadcrumb.connectDevice'),
+      label: <Trans i18nKey="addAccounts.breadcrumb.connectDevice" />,
       component: StepConnectDevice,
       footer: StepConnectDeviceFooter,
       onBack,
@@ -54,7 +54,7 @@ const createSteps = ({ t }: { t: T }) => {
     },
     {
       id: 'import',
-      label: t('addAccounts.breadcrumb.import'),
+      label: <Trans i18nKey="addAccounts.breadcrumb.import" />,
       component: StepImport,
       footer: StepImportFooter,
       onBack,
@@ -62,7 +62,7 @@ const createSteps = ({ t }: { t: T }) => {
     },
     {
       id: 'finish',
-      label: t('addAccounts.breadcrumb.finish'),
+      label: <Trans i18nKey="addAccounts.breadcrumb.finish" />,
       component: StepFinish,
       footer: StepFinishFooter,
       onBack: null,
@@ -72,7 +72,6 @@ const createSteps = ({ t }: { t: T }) => {
 }
 
 type Props = {
-  t: T,
   device: ?Device,
   existingAccounts: Account[],
   closeModal: string => void,
@@ -143,7 +142,7 @@ const INITIAL_STATE = {
 
 class AddAccounts extends PureComponent<Props, State> {
   state = INITIAL_STATE
-  STEPS = createSteps({ t: this.props.t })
+  STEPS = createSteps()
 
   handleClickAdd = async () => {
     const { addAccount } = this.props
@@ -205,7 +204,7 @@ class AddAccounts extends PureComponent<Props, State> {
   }
 
   render() {
-    const { t, device, existingAccounts } = this.props
+    const { device, existingAccounts } = this.props
     const {
       stepId,
       currency,
@@ -238,6 +237,7 @@ class AddAccounts extends PureComponent<Props, State> {
       onGoStep1: this.onGoStep1,
       editedNames,
     }
+    const title = <Trans i18nKey="addAccounts.title" />
 
     return (
       <Modal
@@ -247,7 +247,7 @@ class AddAccounts extends PureComponent<Props, State> {
         render={({ onClose }) => (
           <Stepper
             key={reset} // THIS IS A HACK because stepper is not controllable. FIXME
-            title={t('addAccounts.title')}
+            title={title}
             initialStepId="chooseCurrency"
             onStepChange={this.handleStepChange}
             onClose={onClose}

src/components/modals/Receive/index.js

@@ -3,7 +3,7 @@
 import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { Trans, translate } from 'react-i18next'
 import { createStructuredSelector } from 'reselect'
 
 import SyncSkipUnderPriority from 'components/SyncSkipUnderPriority'
@@ -58,23 +58,23 @@ export type StepProps = DefaultStepProps & {
   onChangeAddressVerified: (?boolean, ?Error) => void,
 }
 
-const createSteps = ({ t }: { t: T }) => [
+const createSteps = () => [
   {
     id: 'account',
-    label: t('receive.steps.chooseAccount.title'),
+    label: <Trans i18nKey="receive.steps.chooseAccount.title" />,
     component: StepAccount,
     footer: StepAccountFooter,
   },
   {
     id: 'device',
-    label: t('receive.steps.connectDevice.title'),
+    label: <Trans i18nKey="receive.steps.connectDevice.title" />,
     component: StepConnectDevice,
     footer: StepConnectDeviceFooter,
     onBack: ({ transitionTo }: StepProps) => transitionTo('account'),
   },
   {
     id: 'confirm',
-    label: t('receive.steps.confirmAddress.title'),
+    label: <Trans i18nKey="receive.steps.confirmAddress.title" />,
     footer: StepConfirmAddressFooter,
     component: StepConfirmAddress,
     onBack: ({ transitionTo }: StepProps) => transitionTo('device'),
@@ -82,7 +82,7 @@ const createSteps = ({ t }: { t: T }) => [
   },
   {
     id: 'receive',
-    label: t('receive.steps.receiveFunds.title'),
+    label: <Trans i18nKey="receive.steps.receiveFunds.title" />,
     component: StepReceiveFunds,
     shouldPreventClose: ({ isAddressVerified }: StepProps) => isAddressVerified === null,
   },
@@ -108,7 +108,7 @@ const INITIAL_STATE = {
 
 class ReceiveModal extends PureComponent<Props, State> {
   state = INITIAL_STATE
-  STEPS = createSteps({ t: this.props.t })
+  STEPS = createSteps()
 
   handleBeforeOpenModal = ({ data }) => {
     const { account } = this.state

src/components/modals/Receive/steps/01-step-account.js

@@ -9,6 +9,7 @@ import Button from 'components/base/Button'
 import SelectAccount from 'components/SelectAccount'
 import CurrencyDownStatusAlert from 'components/CurrencyDownStatusAlert'
 
+import { Trans } from 'react-i18next'
 import type { StepProps } from '../index'
 
 export default function StepAccount({ t, account, onChangeAccount }: StepProps) {
@@ -23,10 +24,10 @@ export default function StepAccount({ t, account, onChangeAccount }: StepProps)
   )
 }
 
-export function StepAccountFooter({ t, transitionTo, account }: StepProps) {
+export function StepAccountFooter({ transitionTo, account }: StepProps) {
   return (
     <Button disabled={!account} primary onClick={() => transitionTo('device')}>
-      {t('common.continue')}
+      <Trans i18nKey="common.continue" />
     </Button>
   )
 }

src/components/modals/Receive/steps/02-step-connect-device.js

@@ -9,6 +9,7 @@ import CurrencyDownStatusAlert from 'components/CurrencyDownStatusAlert'
 import TrackPage from 'analytics/TrackPage'
 
 import type { StepProps } from '../index'
+import { Trans } from 'react-i18next'
 
 export default function StepConnectDevice({ account, onChangeAppOpened }: StepProps) {
   return (
@@ -42,7 +43,7 @@ export function StepConnectDeviceFooter({
         {t('receive.steps.connectDevice.withoutDevice')}
       </Button>
       <Button disabled={!isAppOpened} primary onClick={() => transitionTo('confirm')}>
-        {t('common.continue')}
+        <Trans i18nKey="common.continue" />
       </Button>
     </Box>
   )

src/components/modals/Send/index.js

@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'
 import invariant from 'invariant'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import {Trans, translate} from 'react-i18next'
 import { createStructuredSelector } from 'reselect'
 import type { Account, Operation } from '@ledgerhq/live-common/lib/types'
 
@@ -72,29 +72,29 @@ export type StepProps<Transaction> = DefaultStepProps & {
   signTransaction: ({ transitionTo: string => void }) => void,
 }
 
-const createSteps = ({ t }: { t: T }) => [
+const createSteps = () => [
   {
     id: 'amount',
-    label: t('send.steps.amount.title'),
+    label: <Trans i18nKey='send.steps.amount.title'/>,
     component: StepAmount,
     footer: StepAmountFooter,
   },
   {
     id: 'device',
-    label: t('send.steps.connectDevice.title'),
+    label: <Trans i18nKey='send.steps.connectDevice.title'/>,
     component: StepConnectDevice,
     footer: StepConnectDeviceFooter,
     onBack: ({ transitionTo }) => transitionTo('amount'),
   },
   {
     id: 'verification',
-    label: t('send.steps.verification.title'),
+    label: <Trans i18nKey='send.steps.verification.title'/>,
     component: StepVerification,
     shouldPreventClose: true,
   },
   {
     id: 'confirmation',
-    label: t('send.steps.confirmation.title'),
+    label: <Trans i18nKey='send.steps.confirmation.title'/>,
     component: StepConfirmation,
     footer: StepConfirmationFooter,
     onBack: ({ transitionTo, onRetry }) => {
@@ -136,7 +136,7 @@ class SendModal extends PureComponent<Props, State<*>> {
     }
   }
 
-  STEPS = createSteps({ t: this.props.t })
+  STEPS = createSteps()
   _signTransactionSub = null
   _isUnmounted = false