From da52e4a81790b60ecc720819d4a57946ec31b91a Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Mon, 26 Nov 2018 15:38:41 +0100
Subject: [PATCH] chore(i18n): i18n support for Home components

---
 app/components/Home/CreateWalletButton.js     |  4 +-
 app/components/Home/WalletLauncher.js         | 12 +++--
 .../Home/WalletSettingsFormLocal.js           | 46 +++++++++++++------
 app/components/Home/WalletUnlocker.js         | 14 ++++--
 app/components/Home/WalletsMenu.js            | 14 ++++--
 app/components/Home/messages.js               | 26 +++++++++++
 6 files changed, 89 insertions(+), 27 deletions(-)
 create mode 100644 app/components/Home/messages.js

diff --git a/app/components/Home/CreateWalletButton.js b/app/components/Home/CreateWalletButton.js
index 76e07e2c..3145fca1 100644
--- a/app/components/Home/CreateWalletButton.js
+++ b/app/components/Home/CreateWalletButton.js
@@ -1,7 +1,9 @@
 import React from 'react'
+import { FormattedMessage } from 'react-intl'
 import { Flex } from 'rebass'
 import { Button, Text } from 'components/UI'
 import PlusCircle from 'components/Icon/PlusCircle'
+import messages from './messages'
 
 const CreateWalletButton = ({ ...rest }) => (
   <Button {...rest} variant="secondary">
@@ -10,7 +12,7 @@ const CreateWalletButton = ({ ...rest }) => (
         <PlusCircle width="22px" height="22px" />
       </Text>
       <Text lineHeight="22px" ml={2}>
-        Create new wallet
+        <FormattedMessage {...messages.create_wallet_button_text} />
       </Text>
     </Flex>
   </Button>
diff --git a/app/components/Home/WalletLauncher.js b/app/components/Home/WalletLauncher.js
index fa18f2ff..ecfd6142 100644
--- a/app/components/Home/WalletLauncher.js
+++ b/app/components/Home/WalletLauncher.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FormattedMessage } from 'react-intl'
 import { withRouter } from 'react-router-dom'
 import { Box, Flex } from 'rebass'
 import { Bar, Button, Heading, Text } from 'components/UI'
 import { WalletSettingsFormLocal, WalletSettingsFormRemote, WalletHeader } from '.'
+import messages from './messages'
 
 class WalletLauncher extends React.Component {
   static propTypes = {
@@ -68,14 +70,16 @@ class WalletLauncher extends React.Component {
           </Box>
           <Flex ml="auto" justifyContent="flex-end" flexDirection="column">
             <Button type="submit" size="small" form={`wallet-settings-form-${wallet.id}`} ml={2}>
-              Launch now
+              <FormattedMessage {...messages.launch_wallet_button_text} />
             </Button>
           </Flex>
         </Flex>
 
         {wallet.type === 'local' && (
           <>
-            <Heading.h1 mb={5}>Settings</Heading.h1>
+            <Heading.h1 mb={5}>
+              <FormattedMessage {...messages.settings_title} />
+            </Heading.h1>
 
             <WalletSettingsFormLocal
               key={wallet.id}
@@ -98,13 +102,13 @@ class WalletLauncher extends React.Component {
         )}
 
         <Text mt={4} fontWeight="normal">
-          Delete
+          <FormattedMessage {...messages.delete_title} />
         </Text>
         <Bar my={2} />
 
         <Flex justifyContent="center" my={4}>
           <Button size="small" onClick={this.handleDelete}>
-            Delete wallet
+            <FormattedMessage {...messages.delete_wallet_button_text} />
           </Button>
         </Flex>
       </React.Fragment>
diff --git a/app/components/Home/WalletSettingsFormLocal.js b/app/components/Home/WalletSettingsFormLocal.js
index 4579b0f7..1b278370 100644
--- a/app/components/Home/WalletSettingsFormLocal.js
+++ b/app/components/Home/WalletSettingsFormLocal.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Flex } from 'rebass'
 import { Bar, Button, DataRow, Form, Input, Label, Range, Text, Toggle } from 'components/UI'
 import * as yup from 'yup'
+import messages from './messages'
 
 class WalletSettingsFormLocal extends React.Component {
   static propTypes = {
@@ -47,7 +49,7 @@ class WalletSettingsFormLocal extends React.Component {
   }
 
   render() {
-    const { wallet, startLnd, ...rest } = this.props
+    const { intl, wallet, startLnd, ...rest } = this.props
 
     return (
       <Form
@@ -68,10 +70,10 @@ class WalletSettingsFormLocal extends React.Component {
               left={
                 <>
                   <Label htmlFor="name" mb={2}>
-                    Wallet name
+                    <FormattedMessage {...messages.wallet_settings_name_label} />
                   </Label>
                   <Text color="gray" fontWeight="light">
-                    The wallet name is only visible for you inside Zap.
+                    <FormattedMessage {...messages.wallet_settings_name_description} />
                   </Text>
                 </>
               }
@@ -80,7 +82,7 @@ class WalletSettingsFormLocal extends React.Component {
                   field="name"
                   id="name"
                   initialValue={wallet.name}
-                  placeholder="Enter name"
+                  placeholder={intl.formatMessage({ ...messages.wallet_settings_name_placeholder })}
                   width={1}
                   ml="auto"
                   justifyContent="right"
@@ -94,10 +96,10 @@ class WalletSettingsFormLocal extends React.Component {
               left={
                 <>
                   <Label htmlFor="alias" mb={2}>
-                    Alias
+                    <FormattedMessage {...messages.wallet_settings_alias_label} />
                   </Label>
                   <Text color="gray" fontWeight="light">
-                    The alias will be visible for others on the network.
+                    <FormattedMessage {...messages.wallet_settings_alias_description} />
                   </Text>
                 </>
               }
@@ -106,7 +108,9 @@ class WalletSettingsFormLocal extends React.Component {
                   field="alias"
                   id="alias"
                   initialValue={wallet.alias}
-                  placeholder="Enter alias"
+                  placeholder={intl.formatMessage({
+                    ...messages.wallet_settings_alias_placeholder
+                  })}
                   width={1}
                   ml="auto"
                   justifyContent="right"
@@ -128,7 +132,11 @@ class WalletSettingsFormLocal extends React.Component {
               <React.Fragment>
                 <DataRow
                   py={2}
-                  left={<Label htmlFor="autopilotAllocation">Percentage of Balance</Label>}
+                  left={
+                    <Label htmlFor="autopilotAllocation">
+                      <FormattedMessage {...messages.wallet_settings_autopilotAllocation_label} />
+                    </Label>
+                  }
                   right={
                     <Flex alignItems="center" justifyContent="flex-end">
                       <Range
@@ -159,7 +167,11 @@ class WalletSettingsFormLocal extends React.Component {
 
                 <DataRow
                   py={2}
-                  left={<Label htmlFor="autopilotMaxchannels">Number of Channels max</Label>}
+                  left={
+                    <Label htmlFor="autopilotMaxchannels">
+                      <FormattedMessage {...messages.wallet_settings_autopilotMaxchannels_label} />
+                    </Label>
+                  }
                   right={
                     <Input
                       field="autopilotMaxchannels"
@@ -178,7 +190,11 @@ class WalletSettingsFormLocal extends React.Component {
 
                 <DataRow
                   py={2}
-                  left={<Label htmlFor="autopilotMinchansize">Minimum channel size</Label>}
+                  left={
+                    <Label htmlFor="autopilotMinchansize">
+                      <FormattedMessage {...messages.wallet_settings_autopilotMinchansize_label} />
+                    </Label>
+                  }
                   right={
                     <Input
                       field="autopilotMinchansize"
@@ -198,7 +214,11 @@ class WalletSettingsFormLocal extends React.Component {
 
                 <DataRow
                   py={2}
-                  left={<Label htmlFor="autopilotMaxchansize">Maximum channel size</Label>}
+                  left={
+                    <Label htmlFor="autopilotMaxchansize">
+                      <FormattedMessage {...messages.wallet_settings_autopilotMaxchansize_label} />
+                    </Label>
+                  }
                   right={
                     <Input
                       field="autopilotMaxchansize"
@@ -218,7 +238,7 @@ class WalletSettingsFormLocal extends React.Component {
 
                 <Flex justifyContent="center" my={4}>
                   <Button type="button" size="small" onClick={this.resetAutopilotSettings}>
-                    Set Autopilot settings to default
+                    <FormattedMessage {...messages.wallet_settings_reset_autopilot_button_text} />
                   </Button>
                 </Flex>
               </React.Fragment>
@@ -230,4 +250,4 @@ class WalletSettingsFormLocal extends React.Component {
   }
 }
 
-export default WalletSettingsFormLocal
+export default injectIntl(WalletSettingsFormLocal)
diff --git a/app/components/Home/WalletUnlocker.js b/app/components/Home/WalletUnlocker.js
index b9ee6080..709bb985 100644
--- a/app/components/Home/WalletUnlocker.js
+++ b/app/components/Home/WalletUnlocker.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { withRouter } from 'react-router-dom'
 import { Form } from 'informed'
 import { Button, PasswordInput } from 'components/UI'
 import * as yup from 'yup'
 import { WalletHeader } from '.'
-
+import messages from './messages'
 /**
  * @render react
  * @name WalletUnlocker
@@ -94,7 +95,7 @@ class WalletUnlocker extends React.Component {
   }
 
   render = () => {
-    const { wallet } = this.props
+    const { intl, wallet } = this.props
     const walletName = this.walletName(wallet)
 
     return (
@@ -112,14 +113,17 @@ class WalletUnlocker extends React.Component {
             <PasswordInput
               field="password"
               id="password"
-              label="Enter Password"
+              label={<FormattedMessage {...messages.wallet_unlocker_password_label} />}
+              placeholder={intl.formatMessage({ ...messages.wallet_unlocker_password_placeholder })}
               my={3}
               validate={this.validatePassword}
               validateOnBlur
               validateOnChange={formState.invalid}
             />
 
-            <Button type="submit">Enter</Button>
+            <Button type="submit">
+              <FormattedMessage {...messages.wallet_unlocker_button_label} />
+            </Button>
           </React.Fragment>
         )}
       </Form>
@@ -127,4 +131,4 @@ class WalletUnlocker extends React.Component {
   }
 }
 
-export default withRouter(WalletUnlocker)
+export default withRouter(injectIntl(WalletUnlocker))
diff --git a/app/components/Home/WalletsMenu.js b/app/components/Home/WalletsMenu.js
index f5e0ce28..429d86f5 100644
--- a/app/components/Home/WalletsMenu.js
+++ b/app/components/Home/WalletsMenu.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { injectIntl } from 'react-intl'
 import { NavLink } from 'react-router-dom'
 import { Box } from 'rebass'
 import { Text, Truncate } from 'components/UI'
+import messages from './messages'
 
 const walletName = wallet => {
   if (wallet.type === 'local') {
@@ -47,24 +49,28 @@ class WalletsMenu extends React.Component {
   }
 
   render() {
-    const { setActiveWallet, wallets, ...rest } = this.props
+    const { intl, setActiveWallet, wallets, ...rest } = this.props
     const localWallets = wallets.filter(wallet => wallet.type === 'local')
     const otherWallets = wallets.filter(wallet => wallet.type !== 'local')
 
     return (
       <Box {...rest}>
         <WalletGroup
-          title="Your Wallets"
+          title={intl.formatMessage({ ...messages.wallets_menu_local_title })}
           wallets={localWallets}
           setActiveWallet={setActiveWallet}
           mb={5}
         />
         {otherWallets.length > 0 && (
-          <WalletGroup title="More" wallets={otherWallets} setActiveWallet={setActiveWallet} />
+          <WalletGroup
+            title={intl.formatMessage({ ...messages.wallets_menu_other_title })}
+            wallets={otherWallets}
+            setActiveWallet={setActiveWallet}
+          />
         )}
       </Box>
     )
   }
 }
 
-export default WalletsMenu
+export default injectIntl(WalletsMenu)
diff --git a/app/components/Home/messages.js b/app/components/Home/messages.js
new file mode 100644
index 00000000..8f8c6969
--- /dev/null
+++ b/app/components/Home/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from 'react-intl'
+
+/* eslint-disable max-len */
+export default defineMessages({
+  create_wallet_button_text: 'Create new wallet',
+  launch_wallet_button_text: 'Launch now',
+  settings_title: 'Settings',
+  delete_title: 'Delete',
+  delete_wallet_button_text: 'Delete wallet',
+  wallet_settings_name_label: 'Wallet name',
+  wallet_settings_name_description: 'The wallet name is only visible for you inside Zap.',
+  wallet_settings_name_placeholder: 'Enter name',
+  wallet_settings_alias_label: 'Alias',
+  wallet_settings_alias_description: 'The alias will be visible for others on the network.',
+  wallet_settings_alias_placeholder: 'Enter alias',
+  wallet_settings_autopilotAllocation_label: 'Percentage of Balance',
+  wallet_settings_autopilotMaxchannels_label: 'Number of Channels max',
+  wallet_settings_autopilotMinchansize_label: 'Minimum channel size',
+  wallet_settings_autopilotMaxchansize_label: 'Maximum channel size',
+  wallet_settings_reset_autopilot_button_text: 'Set Autopilot settings to default',
+  wallets_menu_local_title: 'Your wallets',
+  wallets_menu_other_title: 'More',
+  wallet_unlocker_password_label: 'Enter Password',
+  wallet_unlocker_password_placeholder: 'Enter your password',
+  wallet_unlocker_button_label: 'Enter'
+})