lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

chore(i18n): i18n support for Home components

next
Tom Kirkpatrick 6 years ago
parent
c47d147ae7
commit
da52e4a817
No known key found for this signature in database GPG Key ID: 72203A8EC5967EA8
6 changed files with 89 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      app/components/Home/CreateWalletButton.js
  2. 12
      app/components/Home/WalletLauncher.js
  3. 46
      app/components/Home/WalletSettingsFormLocal.js
  4. 14
      app/components/Home/WalletUnlocker.js
  5. 14
      app/components/Home/WalletsMenu.js
  6. 26
      app/components/Home/messages.js

4
app/components/Home/CreateWalletButton.js
View File

@ -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>

12
app/components/Home/WalletLauncher.js
View File

@ -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>

46
app/components/Home/WalletSettingsFormLocal.js
View File

@ -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)

14
app/components/Home/WalletUnlocker.js
View File

@ -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))

14
app/components/Home/WalletsMenu.js
View File

@ -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)

26
app/components/Home/messages.js
View File

@ -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'
})
Write Preview
Loading…
Cancel
Save