Merge pull request #70 from meriadec/master

Adjustments on translations & modals

package.json

@@ -69,7 +69,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-i18next": "^7.3.4",
-    "react-mortal": "^3.0.1",
+    "react-mortal": "^3.1.0",
     "react-motion": "^0.5.2",
     "react-qr-reader": "^2.0.1",
     "react-redux": "^5.0.6",

src/components/AccountPage.js

@@ -82,18 +82,23 @@ class AccountPage extends PureComponent<Props> {
           <Fragment>
             <Box horizontal flow={3}>
               <Box grow>
-                <Card title="Balance" style={{ height: 435 }} align="center" justify="center">
+                <Card
+                  title={t('AccountPage.balance')}
+                  style={{ height: 435 }}
+                  align="center"
+                  justify="center"
+                >
                   <Text fontSize={5}>{formatBTC(accountData.balance)}</Text>
                 </Card>
               </Box>
 
               <Box style={{ width: 300 }}>
-                <Card title="Receive" flow={3}>
+                <Card title={t('AccountPage.receive')} flow={3}>
                   <ReceiveBox address={accountData.address} />
                 </Card>
               </Box>
             </Box>
-            <Card title="Last operations">
+            <Card title={t('AccountPage.lastOperations')}>
               <TransactionsList transactions={accountData.transactions} />
             </Card>
           </Fragment>

src/components/IsUnlocked/index.js

@@ -2,10 +2,12 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import { compose } from 'redux'
+import { translate } from 'react-i18next'
 import bcrypt from 'bcryptjs'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Settings, Accounts } from 'types/common'
+import type { Settings, Accounts, T } from 'types/common'
 
 import get from 'lodash/get'
 
@@ -24,6 +26,7 @@ type InputValue = {
 }
 
 type Props = {
+  t: T,
   accounts: Accounts,
   fetchAccounts: Function,
   isLocked: boolean,
@@ -108,7 +111,7 @@ class IsUnlocked extends PureComponent<Props, State> {
 
   render() {
     const { inputValue } = this.state
-    const { isLocked, render } = this.props
+    const { isLocked, render, t } = this.props
 
     if (isLocked) {
       return (
@@ -118,7 +121,7 @@ class IsUnlocked extends PureComponent<Props, State> {
               <Input
                 autoFocus
                 innerRef={(n: any) => (this._input = n)}
-                placeholder="Password"
+                placeholder={t('IsUnlocked.password')}
                 type="password"
                 onChange={this.handleChangeInput('password')}
                 value={inputValue.password}
@@ -133,6 +136,9 @@ class IsUnlocked extends PureComponent<Props, State> {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(IsUnlocked)
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps, null, {
+    pure: false,
+  }),
+  translate(),
+)(IsUnlocked)

src/components/UpdateNotifier.js

@@ -1,6 +1,8 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import { compose } from 'redux'
 import { Motion, spring } from 'react-motion'
 import { connect } from 'react-redux'
 import type { MapStateToProps } from 'react-redux'
@@ -14,7 +16,10 @@ import type { UpdateStatus } from 'reducers/update'
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
+import type { T } from 'types/common'
+
 type Props = {
+  t: T,
   updateStatus: UpdateStatus,
 }
 
@@ -40,7 +45,7 @@ const Container = styled(Box).attrs({
 
 class UpdateNotifier extends PureComponent<Props> {
   renderStatus() {
-    const { updateStatus } = this.props
+    const { updateStatus, t } = this.props
     switch (updateStatus) {
       case 'idle':
       case 'checking':
@@ -52,12 +57,12 @@ class UpdateNotifier extends PureComponent<Props> {
       case 'downloaded':
         return (
           <Box horizontal flow={2}>
-            <Text fontWeight="bold">{'A new version is ready to be installed.'}</Text>
+            <Text fontWeight="bold">{t('update.newVersionReady')}</Text>
             <Text
               style={{ cursor: 'pointer' }}
               onClick={() => sendEvent('msg', 'updater.quitAndInstall')}
             >
-              {'Re-launch app now'}
+              {t('update.relaunch')}
             </Text>
           </Box>
         )
@@ -82,4 +87,4 @@ class UpdateNotifier extends PureComponent<Props> {
   }
 }
 
-export default connect(mapStateToProps, null)(UpdateNotifier)
+export default compose(connect(mapStateToProps, null), translate())(UpdateNotifier)

src/components/Wrapper.js

@@ -36,7 +36,7 @@ class Wrapper extends Component<{}> {
 
                 <Box shrink grow bg="cream" color="grey" relative>
                   <TopBar />
-                  {__PROD__ && <UpdateNotifier />}
+                  <UpdateNotifier />
                   <GrowScroll p={3} style={{ paddingTop: 80 }}>
                     <Route path="/" exact component={DashboardPage} />
                     <Route path="/settings" component={SettingsPage} />

src/components/base/Modal/index.js

@@ -20,6 +20,7 @@ import Icon from 'components/base/Icon'
 type Props = {
   isOpened?: boolean,
   onClose: Function,
+  onHide?: Function,
   preventBackdropClick?: boolean,
   render: Function,
   data?: any,
@@ -109,11 +110,12 @@ export class Modal extends PureComponent<Props> {
   }
 
   render() {
-    const { preventBackdropClick, isOpened, onClose, render, data } = this.props
+    const { preventBackdropClick, isOpened, onClose, onHide, render, data } = this.props
     return (
       <Mortal
         isOpened={isOpened}
         onClose={onClose}
+        onHide={onHide}
         motionStyle={(spring, isVisible) => ({
           opacity: spring(isVisible ? 1 : 0, springConfig),
           y: spring(isVisible ? 0 : 20, springConfig),

src/components/modals/AddAccount/index.js

@@ -2,12 +2,14 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import { compose } from 'redux'
+import { translate } from 'react-i18next'
 import { ipcRenderer } from 'electron'
 
 import { MODAL_ADD_ACCOUNT } from 'constants'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Accounts, Device } from 'types/common'
+import type { Accounts, Device, T } from 'types/common'
 
 import { closeModal } from 'reducers/modals'
 import { canCreateAccount, getAccounts } from 'reducers/accounts'
@@ -38,9 +40,9 @@ const Steps = {
     <form onSubmit={props.onSubmit}>
       <Box flow={3}>
         <Box flow={1}>
-          <Label>Currency</Label>
+          <Label>{props.t('common.currency')}</Label>
           <Select
-            placeholder="Choose a wallet..."
+            placeholder={props.t('common.chooseWalletPlaceholder')}
             onChange={item => props.onChangeInput('wallet')(item.key)}
             renderSelected={item => item.name}
             items={currencies}
@@ -49,7 +51,7 @@ const Steps = {
         </Box>
         <Box horizontal justify="flex-end">
           <Button primary type="submit">
-            Add account
+            {props.t('addAccount.title')}
           </Button>
         </Box>
       </Box>
@@ -97,12 +99,14 @@ type InputValue = {
 type Step = 'chooseWallet' | 'connectDevice' | 'inProgress' | 'listAccounts'
 
 type Props = {
+  t: T,
   accounts: Accounts,
   addAccount: Function,
   canCreateAccount: boolean,
   closeModal: Function,
   currentDevice: Device | null,
 }
+
 type State = {
   inputValue: InputValue,
   step: Step,
@@ -184,25 +188,29 @@ class AddAccountModal extends PureComponent<Props, State> {
   }
 
   getStepProps() {
-    const { currentDevice, canCreateAccount } = this.props
+    const { currentDevice, canCreateAccount, t } = this.props
     const { inputValue, step, progress, accounts } = this.state
 
     const props = (predicate, props) => (predicate ? props : {})
 
     return {
       ...props(step === 'chooseWallet', {
+        t,
         value: inputValue,
         onSubmit: this.handleSubmit,
         onChangeInput: this.handleChangeInput,
       }),
       ...props(step === 'connectDevice', {
+        t,
         connected: currentDevice !== null,
         wallet: inputValue.wallet,
       }),
       ...props(step === 'inProgress', {
+        t,
         progress,
       }),
       ...props(step === 'listAccounts', {
+        t,
         accounts,
         canCreateAccount,
         onAddAccount: this.handleAddAccount,
@@ -257,12 +265,12 @@ class AddAccountModal extends PureComponent<Props, State> {
     })
   }
 
-  handleClose = () => {
-    clearTimeout(this._timeout)
+  handleClose = () => clearTimeout(this._timeout)
+
+  handleHide = () =>
     this.setState({
       ...defaultState,
     })
-  }
 
   addAccount = ({ id, name, ...data }) => {
     const { inputValue } = this.state
@@ -280,6 +288,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
   render() {
     const { step } = this.state
+    const { t } = this.props
 
     const Step = Steps[step]
 
@@ -288,10 +297,11 @@ class AddAccountModal extends PureComponent<Props, State> {
         name={MODAL_ADD_ACCOUNT}
         preventBackdropClick={step !== 'chooseWallet'}
         onClose={this.handleClose}
+        onHide={this.handleHide}
         render={({ onClose }) => (
           <ModalBody onClose={onClose} flow={3}>
             <Text fontSize={4} color="steel">
-              {'Add account'}
+              {t('addAccount.title')}
             </Text>
             <Step {...this.getStepProps()} />
           </ModalBody>
@@ -301,4 +311,4 @@ class AddAccountModal extends PureComponent<Props, State> {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddAccountModal)
+export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(AddAccountModal)

src/components/modals/Receive.js

@@ -47,7 +47,7 @@ class ReceiveModal extends PureComponent<Props, State> {
       [key]: value,
     })
 
-  handleClose = () =>
+  handleHide = () =>
     this.setState({
       ...defaultState,
     })
@@ -59,7 +59,7 @@ class ReceiveModal extends PureComponent<Props, State> {
     return (
       <Modal
         name={MODAL_RECEIVE}
-        onClose={this.handleClose}
+        onHide={this.handleHide}
         render={({ data, onClose }) => {
           const account = this.getAccount(data)
           return (

src/components/modals/Send.js

@@ -140,7 +140,7 @@ class Send extends PureComponent<Props, State> {
       step,
     })
 
-  handleClose = () =>
+  handleHide = () =>
     this.setState({
       ...defaultState,
     })
@@ -153,7 +153,7 @@ class Send extends PureComponent<Props, State> {
     return (
       <Modal
         name={MODAL_SEND}
-        onClose={this.handleClose}
+        onHide={this.handleHide}
         render={({ data, onClose }) => (
           <Fragment>
             <ModalBody p={2}>

src/components/modals/SettingsAccount.js

@@ -113,7 +113,7 @@ class SettingsAccount extends PureComponent<Props, State> {
     push('/')
   }
 
-  handleClose = () =>
+  handleHide = () =>
     this.setState({
       ...defaultState,
     })
@@ -124,7 +124,7 @@ class SettingsAccount extends PureComponent<Props, State> {
     return (
       <Modal
         name={MODAL_SETTINGS_ACCOUNT}
-        onClose={this.handleClose}
+        onHide={this.handleHide}
         render={({ data, onClose }) => {
           const account = this.getAccount(data)
           return (

static/i18n/en/translation.yml

@@ -1,6 +1,8 @@
 common:
   ok: Okay
   cancel: Cancel
+  chooseWalletPlaceholder: Choose a wallet...
+  currency: Currency
 
 language:
   en: English
@@ -46,3 +48,15 @@ settings:
 
 SelectAccount:
   placeholder: Select a account
+
+AccountPage:
+  balance: Balance
+  receive: Receive
+  lastOperations: Last operations
+
+update:
+  newVersionReady: A new version is ready to be installed.
+  relaunch: Re-launch app now
+
+IsUnlocked:
+  password: Password

static/i18n/fr/translation.yml

@@ -1,6 +1,8 @@
 common:
   ok: Okay
   cancel: Annuler
+  chooseWalletPlaceholder: Choisir un portefeuille...
+  currency: Monnaie
 
 language:
   en: Anglais
@@ -46,3 +48,15 @@ settings:
 
 SelectAccount:
   placeholder: Sélectionner un compte
+
+AccountPage:
+  balance: Balance
+  receive: Recevoir
+  lastOperations: Dernières opérations
+
+update:
+  newVersionReady: Une nouvelle version est prête à être installée
+  relaunch: Redémarrer l'application maintenant
+
+IsUnlocked:
+  password: Mot de passe

yarn.lock

@@ -7430,14 +7430,14 @@ react-modal@^3.1.10:
     prop-types "^15.5.10"
     warning "^3.0.0"
 
-react-mortal@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/react-mortal/-/react-mortal-3.0.1.tgz#be8477513deb08ceb22ba8ae4b52220dc5c741ff"
+react-mortal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-mortal/-/react-mortal-3.1.0.tgz#8dc4eaa0cf267a3614a07e8cef5e130840942fb3"
   dependencies:
     prop-types "^15.6.0"
-    react "^16.1.1"
+    react "^16.2.0"
     react-motion "^0.5.0"
-    react-portal "^4.0.0"
+    react-portal "^4.1.2"
 
 react-motion@^0.5.0, react-motion@^0.5.2:
   version "0.5.2"
@@ -7451,7 +7451,7 @@ react-onclickoutside@^6.5.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
 
-react-portal@^4.0.0:
+react-portal@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
   dependencies:
@@ -7560,7 +7560,7 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.0.0, react@^16.1.1, react@^16.2.0:
+react@^16.0.0, react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies: