diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index d0d0e03b..93edaebe 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -1,3 +1,4 @@ +// TODO: l10n for device status import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 7dfd026c..f802fb20 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -7,10 +7,13 @@ import Link from 'components/Link'; import { getYear } from 'date-fns'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import { FormattedMessage } from 'react-intl'; + import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables'; import * as LogActions from 'actions/LogActions'; +import l10nMessages from './index.messages'; type Props = { opened: boolean, @@ -60,12 +63,17 @@ const Footer = ({ opened, toggle, isLanding }: Props) => ( © {getYear(new Date())} SatoshiLabs - Terms + + + { opened ? 'Hide Log' : 'Show Log' } {!isLanding && ( - Exchange rates by Coingecko + Coingecko }} + /> )} diff --git a/src/components/Footer/index.messages.js b/src/components/Footer/index.messages.js new file mode 100644 index 00000000..cd41c958 --- /dev/null +++ b/src/components/Footer/index.messages.js @@ -0,0 +1,17 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_TERMS: { + id: 'TR_TERMS', + defaultMessage: 'Terms', + description: 'As in Terms and Conditions, In the bottom footer', + }, + TR_EXCHANGE_RATES_BY: { + id: 'TR_EXCHANGE_RATES_BY', + defaultMessage: 'Exchange rates by {service}', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 26283f19..52ad246d 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -7,8 +7,11 @@ import colors from 'config/colors'; import { SCREEN_SIZE } from 'config/variables'; import Icon from 'components/Icon'; import icons from 'config/icons'; +import { FormattedMessage } from 'react-intl'; import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions'; +import l10nMessages from './index.messages'; + import LanguagePicker from './components/LanguagePicker/Container'; const Wrapper = styled.header` @@ -144,7 +147,9 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( color={colors.WHITE} icon={icons.CLOSE} /> - Close + + + ) : ( <> @@ -153,7 +158,9 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( size={24} icon={icons.MENU} /> - Menu + + + )} @@ -174,10 +181,10 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( - Trezor - Wiki - Blog - Support + + + + diff --git a/src/components/Header/index.messages.js b/src/components/Header/index.messages.js new file mode 100644 index 00000000..7c809494 --- /dev/null +++ b/src/components/Header/index.messages.js @@ -0,0 +1,38 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_MENU: { + id: 'TR_MENU', + defaultMessage: 'Menu', + description: 'Mobile sidebar toggler', + }, + TR_MENU_CLOSE: { + id: 'TR_MENU_CLOSE', + defaultMessage: 'Close', + description: 'Used on button for closing sidebar menu', + }, + TR_TREZOR: { + id: 'TR_TREZOR', + defaultMessage: 'Trezor', + description: 'Link in header navigation', + }, + TR_WIKI: { + id: 'TR_WIKI', + defaultMessage: 'Wiki', + description: 'Link in header navigation', + }, + TR_BLOG: { + id: 'TR_BLOG', + defaultMessage: 'Blog', + description: 'Link in header navigation', + }, + TR_SUPPORT: { + id: 'TR_SUPPORT', + defaultMessage: 'Support', + description: 'Link in header navigation', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/Log/index.js b/src/components/Log/index.js index f39442eb..1b3c4125 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -8,10 +8,13 @@ import { H2 } from 'components/Heading'; import ReactJson from 'react-json-view'; import Icon from 'components/Icon'; import P from 'components/Paragraph'; +import { FormattedMessage } from 'react-intl'; + import * as LogActions from 'actions/LogActions'; import icons from 'config/icons'; import type { State, Dispatch } from 'flowtype'; +import l10nMessages from './index.messages'; type Props = { log: $ElementType, @@ -64,8 +67,12 @@ const Log = (props: Props): ?React$Element => { -

Log

- Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history. +

+ +

+ + + diff --git a/src/components/Log/index.messages.js b/src/components/Log/index.messages.js new file mode 100644 index 00000000..f0dd2940 --- /dev/null +++ b/src/components/Log/index.messages.js @@ -0,0 +1,17 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_ATTENTION_COLON_THE_LOG_CONTAINS: { + id: 'TR_ATTENTION_COLON_THE_LOG_CONTAINS', + defaultMessage: 'Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.', + }, + TR_LOG: { + id: 'TR_LOG', + defaultMessage: 'Log', + description: 'application event and error', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/confirm/Action/index.js b/src/components/modals/confirm/Action/index.js index ea510457..a20f26b3 100644 --- a/src/components/modals/confirm/Action/index.js +++ b/src/components/modals/confirm/Action/index.js @@ -6,6 +6,9 @@ import styled from 'styled-components'; import { H3 } from 'components/Heading'; import DeviceIcon from 'components/images/DeviceIcon'; import type { TrezorDevice } from 'flowtype'; +import { FormattedMessage } from 'react-intl'; + +import l10nMessages from './index.messages'; type Props = { device: TrezorDevice; @@ -21,7 +24,9 @@ const ConfirmAction = (props: Props) => (
-

Confirm action on your Trezor

+

+ +

); diff --git a/src/components/modals/confirm/Action/index.messages.js b/src/components/modals/confirm/Action/index.messages.js new file mode 100644 index 00000000..a0f83cce --- /dev/null +++ b/src/components/modals/confirm/Action/index.messages.js @@ -0,0 +1,12 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_CONFIRM_ACTION_ON_YOUR: { + id: 'TR_CONFIRM_ADDRESS_ON_TREZOR', + defaultMessage: 'Confirm action on your Trezor', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index 568784cf..d56ffb90 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -9,6 +9,11 @@ import { FONT_SIZE } from 'config/variables'; import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; +import { FormattedMessage } from 'react-intl'; + +import l10nCommonMessages from 'views/common.messages'; + +import l10nMessages from './index.messages'; import type { Props } from '../../Container'; @@ -41,12 +46,18 @@ const ConfirmAddress = (props: Props) => { return (
-

Confirm address on Trezor

-

Please compare your address on device with address shown bellow.

+

+ +

+

+ +

{ account.descriptor }

- +
); diff --git a/src/components/modals/confirm/Address/index.messages.js b/src/components/modals/confirm/Address/index.messages.js new file mode 100644 index 00000000..1c16ede4 --- /dev/null +++ b/src/components/modals/confirm/Address/index.messages.js @@ -0,0 +1,16 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_CONFIRM_ADDRESS_ON_TREZOR: { + id: 'TR_CONFIRM_ADDRESS_ON_TREZOR', + defaultMessage: 'Confirm address on Trezor', + }, + TR_PLEASE_COMPARE_YOUR_ADDRESS: { + id: 'TR_PLEASE_COMPARE_YOUR_ADDRESS', + defaultMessage: 'Please compare your address on device with address shown bellow', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index f9443f3b..1823d07d 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -10,8 +10,12 @@ import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import P from 'components/Paragraph'; import DeviceIcon from 'components/images/DeviceIcon'; import { H3 } from 'components/Heading'; +import { FormattedMessage } from 'react-intl'; +import l10nCommonMessages from 'views/common.messages'; import type { TrezorDevice, State } from 'flowtype'; +import l10nMessages from './index.messages'; + type Props = { device: TrezorDevice; @@ -71,15 +75,25 @@ const ConfirmSignTx = (props: Props) => {
-

Confirm transaction on { props.device.label } device

-

Details are shown on display

+

+ +

+

+ +

- + {`${amount} ${currency}` } - +
{ address }
- + {selectedFeeLevel.value} { selectedFeeLevel.label }
diff --git a/src/components/modals/confirm/SignTx/index.messages.js b/src/components/modals/confirm/SignTx/index.messages.js new file mode 100644 index 00000000..3ebd513a --- /dev/null +++ b/src/components/modals/confirm/SignTx/index.messages.js @@ -0,0 +1,31 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_CONFIRM_TRANSACTION_ON: { + id: 'TR_CONFIRM_TRANSACTION_ON', + defaultMessage: 'Confirm transaction on {deviceLabel} device', + }, + TR_DETAILS_ARE_SHOWN_ON: { + id: 'TR_DETAILS_ARE_SHOWN_ON', + defaultMessage: 'Details are shown on display', + }, + TR_TO_LABEL: { + id: 'TR_TO_LABEL', + defaultMessage: 'To', + description: 'Label for recepeint\'s address', + }, + TR_SEND_LABEL: { + id: 'TR_SEND_LABEL', + defaultMessage: 'Send', + description: 'Label for amount to be send', + }, + TR_FEE_LABEL: { + id: 'TR_FEE_LABEL', + defaultMessage: 'Fee', + description: 'Label above the fee used for transaction', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index e6f26592..b8cc0afc 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -11,8 +11,11 @@ import P from 'components/Paragraph'; import Icon from 'components/Icon'; import Button from 'components/Button'; import Link from 'components/Link'; +import { FormattedMessage } from 'react-intl'; import type { TrezorDevice } from 'flowtype'; +import l10nMessages from './index.messages'; + import type { Props as BaseProps } from '../../Container'; type Props = { @@ -82,17 +85,19 @@ class ConfirmUnverifiedAddress extends PureComponent { render() { const { device, account, onCancel } = this.props; - let deviceStatus: string; - let claim: string; + let deviceStatus; + let claim; if (!device.connected) { - deviceStatus = `${device.label} is not connected`; - claim = 'Please connect your device'; + deviceStatus = ; + claim = ; } else { // corner-case where device is connected but it is unavailable because it was created with different "passphrase_protection" settings - const enable: string = device.features && device.features.passphrase_protection ? 'enable' : 'disable'; - deviceStatus = `${device.label} is unavailable`; - claim = `Please ${enable} passphrase settings`; + const enable: boolean = !!(device.features && device.features.passphrase_protection); + deviceStatus = ; + claim = enable + ? + : ; } return ( @@ -101,10 +106,15 @@ class ConfirmUnverifiedAddress extends PureComponent {

{ deviceStatus }

- To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process. + + + - - + +
); diff --git a/src/components/modals/confirm/UnverifiedAddress/index.messages.js b/src/components/modals/confirm/UnverifiedAddress/index.messages.js new file mode 100644 index 00000000..b9d4150b --- /dev/null +++ b/src/components/modals/confirm/UnverifiedAddress/index.messages.js @@ -0,0 +1,45 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_DEVICE_LABEL_IS_NOT_CONNECTED: { + id: 'TR_DEVICE_LABEL_IS_NOT_CONNECTED', + defaultMessage: '{deviceLabel} is not connected', + }, + TR_DEVICE_LABEL_IS_UNAVAILABLE: { + id: 'TR_DEVICE_LABEL_IS_UNAVAILABLE', + defaultMessage: '{deviceLabel} is unavailable', + }, + TR_PLEASE_CONNECT_YOUR_DEVICE: { + id: 'TR_PLEASE_CONNECT_YOUR_DEVICE', + defaultMessage: 'Please connect your devicet', + }, + TR_PLEASE_ENABLE_PASSPHRASE: { + id: 'TR_PLEASE_ENABLE_PASSPHRASE', + defaultMessage: 'Please enable passphrase settings', + }, + TR_PLEASE_DISABLE_PASSPHRASE: { + id: 'TR_PLEASE_DISABLE_PASSPHRASE', + defaultMessage: 'Please disable passphrase settings', + }, + TR_SHOW_UNVERIFIED_ADDRESS: { + id: 'TR_SHOW_UNVERIFIED_ADDRESS', + defaultMessage: 'Show unverified address', + }, + TR_TRY_AGAIN: { + id: 'TR_TRY_AGAIN', + defaultMessage: 'Try again', + description: 'Try to verify the address again', + }, + TR_TO_PREVENT_PHISHING_ATTACKS_COMMA: { + id: 'TR_TO_PREVENT_PHISHING_ATTACKS_COMMA', + defaultMessage: 'To prevent phishing attacks, you should verify the address on your Trezor first. {claim} to continue with the verification process.', + }, + TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM: { + id: 'TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM', + defaultMessage: 'Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again.', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index 89c904a7..25e905a6 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -7,8 +7,12 @@ import styled from 'styled-components'; import { H2 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/Button'; +import { FormattedMessage } from 'react-intl'; import type { TrezorDevice } from 'flowtype'; +import l10nDeviceMessages from '../common.messages'; +import l10nMessages from './index.messages'; + import type { Props as BaseProps } from '../../Container'; type Props = { @@ -61,11 +65,20 @@ class ForgetDevice extends PureComponent { render() { return ( -

Forget { this.props.device.instanceLabel }?

- Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again. +

+ +

+ + + - - + +
); diff --git a/src/components/modals/device/Forget/index.messages.js b/src/components/modals/device/Forget/index.messages.js new file mode 100644 index 00000000..19f62c08 --- /dev/null +++ b/src/components/modals/device/Forget/index.messages.js @@ -0,0 +1,21 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_WOULD_YOU_LIKE_TREZOR_WALLET_TO: { + id: 'TR_WOULD_YOU_LIKE_TREZOR_WALLET_TO', + defaultMessage: 'Would you like Trezor Wallet to forget your {deviceCount, plural, one {device} other {devices}} or to remember {deviceCount, plural, one {it} other {them}}, so that it is still visible even while disconnected?', + }, + TR_DONT_FORGET: { + id: 'TR_DONT_FORGET', + defaultMessage: 'Don\'t forget', + description: 'Button in remember/forget dialog', + }, + TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM: { + id: 'TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM', + defaultMessage: 'Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again.', + }, +}); + +export default definedMessages; \ No newline at end of file diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js index 135b4d25..6988cc1c 100644 --- a/src/components/modals/device/Remember/index.js +++ b/src/components/modals/device/Remember/index.js @@ -10,6 +10,7 @@ import Button from 'components/Button'; import { FormattedMessage } from 'react-intl'; import type { TrezorDevice } from 'flowtype'; +import l10nDeviceMessages from '../common.messages'; import l10nMessages from './index.messages'; import type { Props as BaseProps } from '../../Container'; @@ -118,19 +119,13 @@ class RememberDevice extends PureComponent { let { label } = device; const deviceCount = instances ? instances.length : 0; if (instances && instances.length > 0) { - label = instances.map((instance, index) => { - let comma: string = ''; - if (index > 0) comma = ', '; - return ( - { comma }{ instance.instanceLabel } - ); - }); + label = instances.map(instance => (instance.instanceLabel)).join(','); } return (

{