You will be asked to enter your passphrase to unlock your hidden wallet.
- onWalletTypeRequest(true)}>Go to your hidden wallet
+
+
+
+ onWalletTypeRequest(true)}>
+
+
);
@@ -154,4 +178,4 @@ WalletType.propTypes = {
onCancel: PropTypes.func.isRequired,
};
-export default WalletType;
\ No newline at end of file
+export default injectIntl(WalletType);
\ No newline at end of file
diff --git a/src/components/modals/device/WalletType/index.messages.js b/src/components/modals/device/WalletType/index.messages.js
new file mode 100644
index 00000000..3102c074
--- /dev/null
+++ b/src/components/modals/device/WalletType/index.messages.js
@@ -0,0 +1,36 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_SELECT_WALLET_TYPE_FOR: {
+ id: 'TR_SELECT_WALLET_TYPE_FOR',
+ defaultMessage: 'Select wallet type for {deviceLabel}',
+ },
+ TR_CHANGE_WALLET_TYPE_FOR: {
+ id: 'TR_CHANGE_WALLET_TYPE_FOR',
+ defaultMessage: 'Select wallet type for {deviceLabel}',
+ },
+ TR_STANDARD_WALLET: {
+ id: 'TR_STANDARD_WALLET',
+ defaultMessage: 'Standard wallet',
+ },
+ TR_HIDDEN_WALLET: {
+ id: 'TR_HIDDEN_WALLET',
+ defaultMessage: 'Hidden wallet',
+ },
+ TR_CONTINUE_TO_ACCESS_STANDARD_WALLET: {
+ id: 'TR_CONTINUE_TO_ACCESS_STANDARD_WALLET',
+ defaultMessage: 'Continue to access your standard wallet.',
+ },
+ TR_PASSPHRASE_IS_OPTIONAL_FEATURE: {
+ id: 'TR_PASSPHRASE_IS_OPTIONAL_FEATURE',
+ defaultMessage: 'Passphrase is an optional feature of the Trezor device that is recommended for advanced users only. It is a word or a sentence of your choice. Its main purpose is to access a hidden wallet.',
+ },
+ TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK: {
+ id: 'TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK',
+ defaultMessage: 'You will be asked to enter your passphrase to unlock your hidden wallet.',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/device/common.messages.js b/src/components/modals/device/common.messages.js
new file mode 100644
index 00000000..8f8c026a
--- /dev/null
+++ b/src/components/modals/device/common.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_FORGET_LABEL: {
+ id: 'TR_FORGET_LABEL',
+ defaultMessage: 'Forget {deviceLabel}?',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js
index 645be885..043a191d 100644
--- a/src/components/modals/external/Cardano/index.js
+++ b/src/components/modals/external/Cardano/index.js
@@ -11,6 +11,10 @@ import Button from 'components/Button';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import coins from 'constants/coins';
+import { FormattedMessage } from 'react-intl';
+
+import l10nCommonMessages from '../common.messages';
+import l10nMessages from './index.messages';
import CardanoImage from './images/cardano.png';
import type { Props as BaseProps } from '../../Container';
@@ -54,11 +58,17 @@ const CardanoWallet = (props: Props) => (
/>
-
Cardano wallet
-
You will be redirected to external wallet
+
+
+
+
+
+
i.id === 'ada').url}>
- Go to external wallet
+
+
+
);
diff --git a/src/components/modals/external/Cardano/index.messages.js b/src/components/modals/external/Cardano/index.messages.js
new file mode 100644
index 00000000..dfac0b56
--- /dev/null
+++ b/src/components/modals/external/Cardano/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_CARDANO_WALLET: {
+ id: 'TR_CARDANO_WALLET',
+ defaultMessage: 'Cardano wallet',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/external/Nem/index.js b/src/components/modals/external/Nem/index.js
index 993e097f..aa026df5 100644
--- a/src/components/modals/external/Nem/index.js
+++ b/src/components/modals/external/Nem/index.js
@@ -8,10 +8,12 @@ import icons from 'config/icons';
import Icon from 'components/Icon';
import Link from 'components/Link';
import Button from 'components/Button';
-import { H3, H4 } from 'components/Heading';
+import { H2, H4 } from 'components/Heading';
import P from 'components/Paragraph';
import coins from 'constants/coins';
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
import NemImage from './images/nem-download.png';
import type { Props as BaseProps } from '../../Container';
@@ -51,12 +53,20 @@ const NemWallet = (props: Props) => (
icon={icons.CLOSE}
/>
-
NEM Wallet
-
We have partnered up with the NEM Foundation to provide you with a full-fledged NEM Wallet.
-
Make sure you download the Universal Client for Trezor support.
+
+
+
+
+
+
+
+
+
i.id === 'xem').url}>
- Go to nem.io
+
+
+
);
diff --git a/src/components/modals/external/Nem/index.messages.js b/src/components/modals/external/Nem/index.messages.js
new file mode 100644
index 00000000..dfc3bdcf
--- /dev/null
+++ b/src/components/modals/external/Nem/index.messages.js
@@ -0,0 +1,24 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_NEM_WALLET: {
+ id: 'TR_NEM_WALLET',
+ defaultMessage: 'NEM wallet',
+ },
+ TR_WE_HAVE_PARTNERED_UP_WITH_THE_NEM: {
+ id: 'TR_WE_HAVE_PARTNERED_UP_WITH_THE_NEM',
+ defaultMessage: 'We have partnered up with the NEM Foundation to provide you with a full-fledged NEM Wallet.',
+ },
+ TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL: {
+ id: 'TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL',
+ defaultMessage: 'Make sure you download the Universal Client for Trezor support.',
+ },
+ TR_GO_TO_NEM_DOT_IO: {
+ id: 'TR_GO_TO_NEM_DOT_IO',
+ defaultMessage: 'Go to nem.io',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js
index 2ba4a863..3555b5bf 100644
--- a/src/components/modals/external/Stellar/index.js
+++ b/src/components/modals/external/Stellar/index.js
@@ -11,6 +11,10 @@ import Button from 'components/Button';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import coins from 'constants/coins';
+import { FormattedMessage } from 'react-intl';
+
+import l10nCommonMessages from '../common.messages';
+import l10nMessages from './index.messages';
import StellarImage from './images/xlm.png';
import type { Props as BaseProps } from '../../Container';
@@ -54,11 +58,17 @@ const StellarWallet = (props: Props) => (
/>
-
Stellar wallet
-
You will be redirected to external wallet
+
+
+
+
+
+
i.id === 'xlm').url}>
- Go to external wallet
+
+
+
);
diff --git a/src/components/modals/external/Stellar/index.messages.js b/src/components/modals/external/Stellar/index.messages.js
new file mode 100644
index 00000000..6dfa0064
--- /dev/null
+++ b/src/components/modals/external/Stellar/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_STELLAR_WALLET: {
+ id: 'TR_STELLAR_WALLET',
+ defaultMessage: 'Stellar wallet',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/external/common.messages.js b/src/components/modals/external/common.messages.js
new file mode 100644
index 00000000..cdb2713f
--- /dev/null
+++ b/src/components/modals/external/common.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_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL: {
+ id: 'TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL',
+ defaultMessage: 'You will be redirected to external wallet',
+ },
+ TR_GO_TO_EXTERNAL_WALLET: {
+ id: 'TR_GO_TO_EXTERNAL_WALLET',
+ defaultMessage: 'Go to external wallet',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js
index 553be60e..937a6307 100644
--- a/src/components/modals/passphrase/Passphrase/index.js
+++ b/src/components/modals/passphrase/Passphrase/index.js
@@ -2,6 +2,8 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION } from 'config/variables';
@@ -13,6 +15,8 @@ import Button from 'components/Button';
import Input from 'components/inputs/Input';
import type { TrezorDevice } from 'flowtype';
+import l10nCommonMessages from 'views/common.messages';
+import l10nMessages from './index.messages';
import type { Props as BaseProps } from '../../Container';
type Props = {
@@ -202,10 +206,23 @@ class Passphrase extends PureComponent {
render() {
return (
-
Enter {this.state.deviceLabel} passphrase
-
Note that passphrase is case-sensitive. If you enter a wrong passphrase, you will not unlock the desired hidden wallet.
+
+
+
+
+
+ {' '}
+
+
-
+
{ this.passphraseInput = input; }}
name="passphraseInputValue"
@@ -219,7 +236,9 @@ class Passphrase extends PureComponent {
{!this.state.shouldShowSingleInput && (
-
+
{
)}
{!this.state.doPassphraseInputsMatch && (
- Passphrases do not match
+
+
+
)}
this.handleCheckboxClick()}
>
- Show passphrase
+
diff --git a/src/components/modals/passphrase/Passphrase/index.messages.js b/src/components/modals/passphrase/Passphrase/index.messages.js
new file mode 100644
index 00000000..ad6b996b
--- /dev/null
+++ b/src/components/modals/passphrase/Passphrase/index.messages.js
@@ -0,0 +1,46 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_ENTER_DEVICE_PASSPHRASE: {
+ id: 'TR_ENTER_DEVICE_PASSPHRASE',
+ defaultMessage: 'Enter {deviceLabel} passphrase',
+ },
+ TR_NOTE_COLON_PASSPHRASE: {
+ id: 'TR_NOTE_COLON_PASSPHRASE',
+ defaultMessage: 'Note: Passphrase is case-sensitive.',
+ },
+ TR_IF_YOU_FORGET_YOUR_PASSPHRASE_COMMA: {
+ id: 'TR_IF_YOU_FORGET_YOUR_PASSPHRASE_COMMA',
+ defaultMessage: 'If you forget your passphrase, your wallet is lost for good. There is no way to recover your funds.',
+ },
+ TR_CONFIRM_PASSPHRASE: {
+ id: 'TR_CONFIRM_PASSPHRASE',
+ defaultMessage: 'Confirm Passphrase',
+ },
+ TR_PASSPHRASES_DO_NOT_MATCH: {
+ id: 'TR_PASSPHRASES_DO_NOT_MATCH',
+ defaultMessage: 'Passphrases do not match!',
+ },
+ TR_SHOW_PASSPHRASE: {
+ id: 'TR_SHOW_PASSPHRASE',
+ defaultMessage: 'Show passphrase',
+ description: 'This is on a passphrase button',
+ },
+ TR_ENTER: {
+ id: 'TR_ENTER',
+ defaultMessage: 'Enter',
+ },
+ TR_PASSPHRASE: {
+ id: 'TR_PASSPHRASE',
+ defaultMessage: 'Passphrase',
+ description: 'Label above input',
+ },
+ TR_CHANGED_YOUR_MIND: {
+ id: 'TR_CHANGED_YOUR_MIND',
+ defaultMessage: 'Changed your mind? {TR_GO_TO_STANDARD_WALLET}',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/pin/Invalid/index.js b/src/components/modals/pin/Invalid/index.js
index a69bbd64..4aac6fee 100644
--- a/src/components/modals/pin/Invalid/index.js
+++ b/src/components/modals/pin/Invalid/index.js
@@ -3,11 +3,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import type { TrezorDevice } from 'flowtype';
+import l10nMessages from './index.messages';
type Props = {
device: TrezorDevice;
@@ -19,8 +21,15 @@ const Wrapper = styled.div`
const InvalidPin = (props: Props) => (
-
Entered PIN for { props.device.label } is not correct
-
Retrying...
+
+
+
+
+
+
);
diff --git a/src/components/modals/pin/Invalid/index.messages.js b/src/components/modals/pin/Invalid/index.messages.js
new file mode 100644
index 00000000..809d1cf8
--- /dev/null
+++ b/src/components/modals/pin/Invalid/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_ENTERED_PIN_NOT_CORRECT: {
+ id: 'TR_ENTERED_PIN_NOT_CORRECT',
+ defaultMessage: 'Entered PIN for {deviceLabel} is not correct',
+ },
+ TR_RETRYING_DOT_DOT: {
+ id: 'TR_RETRYING_DOT_DOT',
+ defaultMessage: 'Retrying...',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js
index 31cf42d3..db8d656e 100644
--- a/src/components/modals/pin/Pin/index.js
+++ b/src/components/modals/pin/Pin/index.js
@@ -7,8 +7,11 @@ import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import Link from 'components/Link';
import Button from 'components/Button';
+import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
import type { TrezorDevice } from 'flowtype';
+import l10nMessages from './index.messages';
import PinButton from './components/Button';
import PinInput from './components/Input';
@@ -146,8 +149,13 @@ class Pin extends PureComponent {
const { pin } = this.state;
return (
-
Enter { device.label } PIN
-
The PIN layout is displayed on your Trezor.
+
+
+
+
this.onPinBackspace()} />
@@ -167,13 +175,23 @@ class Pin extends PureComponent {
this.onPinAdd(3)}>•
diff --git a/src/components/modals/pin/Pin/index.messages.js b/src/components/modals/pin/Pin/index.messages.js
new file mode 100644
index 00000000..c51f876b
--- /dev/null
+++ b/src/components/modals/pin/Pin/index.messages.js
@@ -0,0 +1,24 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_THE_PIN_LAYOUT_IS_DISPLAYED_ON: {
+ id: 'TR_THE_PIN_LAYOUT_IS_DISPLAYED_ON',
+ defaultMessage: 'The PIN layout is displayed on your Trezor.',
+ },
+ TR_ENTER_DEVICE_PIN: {
+ id: 'TR_ENTER_DEVICE_PIN',
+ defaultMessage: 'Enter {deviceLabel} PIN',
+ },
+ TR_ENTER_PIN: {
+ id: 'TR_ENTER_PIN',
+ defaultMessage: 'Enter PIN',
+ },
+ TR_NOT_SURE_HOW_PIN_WORKS: {
+ id: 'TR_NOT_SURE_HOW_PIN_WORKS',
+ defaultMessage: 'Not sure how PIN works? {TR_LEARN_MORE}',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/notifications/App/components/OnlineStatus/index.js b/src/components/notifications/App/components/OnlineStatus/index.js
index d5acc265..0a2b3486 100644
--- a/src/components/notifications/App/components/OnlineStatus/index.js
+++ b/src/components/notifications/App/components/OnlineStatus/index.js
@@ -3,9 +3,17 @@ import * as React from 'react';
import Notification from 'components/Notification';
import type { Props } from '../../index';
+import l10nMessages from './index.messages';
export default (props: Props) => {
const { online } = props.wallet;
if (online) return null;
- return ();
+ return (
+
+ );
};
\ No newline at end of file
diff --git a/src/components/notifications/App/components/OnlineStatus/index.messages.js b/src/components/notifications/App/components/OnlineStatus/index.messages.js
new file mode 100644
index 00000000..7e555483
--- /dev/null
+++ b/src/components/notifications/App/components/OnlineStatus/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_YOU_WERE_DISCONNECTED_DOT: {
+ id: 'TR_YOU_WERE_DISCONNECTED_DOT',
+ defaultMessage: 'You were disconnected.',
+ },
+ TR_PLEASE_RELOAD_THE_PAGE_DOT: {
+ id: 'TR_PLEASE_RELOAD_THE_PAGE_DOT',
+ defaultMessage: 'Please check your Internet connection and reload the page.',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/notifications/App/components/UpdateBridge/index.js b/src/components/notifications/App/components/UpdateBridge/index.js
index 071dddde..f1fc6fc2 100644
--- a/src/components/notifications/App/components/UpdateBridge/index.js
+++ b/src/components/notifications/App/components/UpdateBridge/index.js
@@ -2,7 +2,9 @@
import * as React from 'react';
import Notification from 'components/Notification';
+import l10nCommonMessages from 'views/common.messages';
import type { Props } from '../../index';
+import l10nMessages from './index.messages';
export default (props: Props) => {
if (props.connect.transport && props.connect.transport.outdated) {
@@ -10,10 +12,11 @@ export default (props: Props) => {
{
const { selectedDevice } = props.wallet;
const outdated = selectedDevice && selectedDevice.features && selectedDevice.firmware === 'outdated';
@@ -12,10 +14,11 @@ export default (props: Props) => {
(
@@ -48,4 +51,4 @@ const mapDispatchToProps: MapDispatchToProps
routerActions: bindActionCreators(RouterActions, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Notifications);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Notifications));
\ No newline at end of file
diff --git a/src/components/notifications/Context/components/Account/index.js b/src/components/notifications/Context/components/Account/index.js
index 59d87299..a914caa9 100644
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/src/components/notifications/Context/components/Account/index.js
@@ -1,6 +1,7 @@
/* @flow */
import * as React from 'react';
import Notification from 'components/Notification';
+import l10nMessages from './index.messages';
import type { Props } from '../../index';
@@ -21,7 +22,7 @@ export default (props: Props) => {
isActionInProgress={blockchain && blockchain.connecting}
actions={
[{
- label: 'Connect',
+ label: props.intl.formatMessage(l10nMessages.TR_CONNECT_TO_BACKEND),
callback: async () => {
await props.blockchainReconnect(network.shortcut);
},
diff --git a/src/components/notifications/Context/components/Account/index.messages.js b/src/components/notifications/Context/components/Account/index.messages.js
new file mode 100644
index 00000000..37eda94d
--- /dev/null
+++ b/src/components/notifications/Context/components/Account/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_CONNECT_TO_BACKEND: {
+ id: 'TR_CONNECT_TO_BACKEND',
+ defaultMessage: 'Connect',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/notifications/Context/components/Static/index.js b/src/components/notifications/Context/components/Static/index.js
index c225a19e..76612fec 100644
--- a/src/components/notifications/Context/components/Static/index.js
+++ b/src/components/notifications/Context/components/Static/index.js
@@ -4,6 +4,9 @@ import * as React from 'react';
import Notification from 'components/Notification';
import Bignumber from 'bignumber.js';
import Link from 'components/Link';
+import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
+import l10nMessages from './index.messages';
import type { Props } from '../../index';
export default (props: Props) => {
@@ -24,11 +27,22 @@ export default (props: Props) => {
+ )}
message={(
<>
- {`Ripple addresses require a minimum balance of ${bigReserve.toString()} XRP to activate and maintain the account. `}
- Learn more
+
+
+
+ ),
+ }}
+ />
)}
/>,
diff --git a/src/components/notifications/Context/components/Static/index.messages.js b/src/components/notifications/Context/components/Static/index.messages.js
new file mode 100644
index 00000000..1c9c4a52
--- /dev/null
+++ b/src/components/notifications/Context/components/Static/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_MINIMUM_ACCOUNT_RESERVE_REQUIRED: {
+ id: 'TR_MINIMUM_ACCOUNT_RESERVE_REQUIRED',
+ defaultMessage: 'Minimum account reserve required',
+ },
+ TR_RIPPLE_ADDRESSES_REQUIRE_MINIMUM_BALANCE: {
+ id: 'TR_RIPPLE_ADDRESSES_REQUIRE_MINIMUM_BALANCE',
+ defaultMessage: 'Ripple addresses require a minimum balance of {minBalance} XRP to activate and maintain the account. {TR_LEARN_MORE}',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/components/notifications/Context/index.js b/src/components/notifications/Context/index.js
index e28bba0b..bd4caa32 100644
--- a/src/components/notifications/Context/index.js
+++ b/src/components/notifications/Context/index.js
@@ -2,6 +2,7 @@
import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
@@ -26,10 +27,12 @@ export type DispatchProps = {
close: typeof NotificationActions.close;
blockchainReconnect: typeof reconnect;
}
+type OwnProps = {
+ intl: any
+};
-export type Props = StateProps & DispatchProps;
+export type Props = OwnProps & StateProps & DispatchProps;
-type OwnProps = {};
const Notifications = (props: Props) => (
@@ -52,4 +55,4 @@ const mapDispatchToProps: MapDispatchToProps
blockchainReconnect: bindActionCreators(reconnect, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Notifications);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Notifications));
\ No newline at end of file
diff --git a/src/config/colors.js b/src/config/colors.js
index 23140583..139efa59 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -6,6 +6,7 @@ export default {
WALLET_VIEW_TITLE: '#505050',
HEADER: '#1A1A1A',
+ HEADER_DIVIDER: '#424242',
BODY: '#E3E3E3',
MAIN: '#FBFBFB',
LANDING: '#F9F9F9',
diff --git a/src/config/variables.js b/src/config/variables.js
index 48a7f1a3..d5b166db 100644
--- a/src/config/variables.js
+++ b/src/config/variables.js
@@ -78,3 +78,23 @@ export const LINE_HEIGHT = {
BASE: '1.8',
TREZOR_ACTION: '37px',
};
+
+export const LANGUAGE = [
+ { code: 'en', name: 'English', en: 'English' },
+ { code: 'bn', name: 'Bengali', en: 'Bengali' },
+ { code: 'cs', name: 'Česky', en: 'Czech' },
+ { code: 'de', name: 'Deutsch', en: 'German' },
+ { code: 'el', name: 'Ελληνικά', en: 'Greek' },
+ { code: 'es', name: 'Español', en: 'Spanish' },
+ { code: 'fr', name: 'Français', en: 'French' },
+ { code: 'id', name: 'Bahasa Indonesia', en: 'Indonesian' },
+ { code: 'it', name: 'Italiano', en: 'Italian' },
+ { code: 'ja', name: '日本語', en: 'Japanese' },
+ { code: 'nl', name: 'Nederlands', en: 'Dutch' },
+ { code: 'pl', name: 'Polski', en: 'Polish' },
+ { code: 'pt', name: 'Português', en: 'Portuguese' },
+ { code: 'ru', name: 'Русский', en: 'Russian' },
+ { code: 'uk', name: 'Український', en: 'Ukrainian' },
+ { code: 'zh', name: '中文(简体)', en: 'Chinese Simplified' },
+ { code: 'zh_TW', name: '中文(台灣)', en: 'Chinese Traditional' },
+];
\ No newline at end of file
diff --git a/src/flowtype/npm/react-intl.js b/src/flowtype/npm/react-intl.js
new file mode 100644
index 00000000..85b77ec3
--- /dev/null
+++ b/src/flowtype/npm/react-intl.js
@@ -0,0 +1,14 @@
+export type MessageDescriptor = {
+ // A unique, stable identifier for the message
+ id: string,
+
+ // The default message (probably in English)
+ defaultMessage: string,
+
+ // Context for the translator about how it's used in the UI
+ description?: string | object,
+};
+
+export type Messages = {
+ [key: string]: MessageDescriptor
+};
\ No newline at end of file
diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js
index 0277ee4d..a90a2f75 100644
--- a/src/reducers/WalletReducer.js
+++ b/src/reducers/WalletReducer.js
@@ -13,6 +13,8 @@ import type { Action, RouterLocationState, TrezorDevice } from 'flowtype';
type State = {
ready: boolean;
online: boolean;
+ language: string;
+ messages: { [string]: string };
dropdownOpened: boolean;
showBetaDisclaimer: boolean;
showSidebar: ?boolean;
@@ -26,6 +28,8 @@ type State = {
const initialState: State = {
ready: false,
online: navigator.onLine,
+ language: 'en',
+ messages: {},
dropdownOpened: false,
firstLocationChange: true,
showBetaDisclaimer: false,
@@ -119,6 +123,13 @@ export default function wallet(state: State = initialState, action: Action): Sta
showBetaDisclaimer: false,
};
+ case WALLET.SET_LANGUAGE:
+ return {
+ ...state,
+ language: action.locale,
+ messages: action.messages ? action.messages : state.messages,
+ };
+
default:
return state;
}
diff --git a/src/services/LocalStorageService.js b/src/services/LocalStorageService.js
index 7719120e..98d8852b 100644
--- a/src/services/LocalStorageService.js
+++ b/src/services/LocalStorageService.js
@@ -25,6 +25,10 @@ const LocalStorageService: Middleware = (api: MiddlewareAPI) => (next: Middlewar
case WALLET.HIDE_BETA_DISCLAIMER:
api.dispatch(LocalStorageActions.hideBetaDisclaimer());
break;
+
+ case WALLET.SET_LANGUAGE:
+ api.dispatch(LocalStorageActions.setLanguage());
+ break;
// first time saving
case CONNECT.REMEMBER:
api.dispatch(LocalStorageActions.save());
diff --git a/src/support/ConnectedIntlProvider.js b/src/support/ConnectedIntlProvider.js
new file mode 100644
index 00000000..89200afe
--- /dev/null
+++ b/src/support/ConnectedIntlProvider.js
@@ -0,0 +1,55 @@
+/* @flow */
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import type { MapStateToProps } from 'react-redux';
+import type { State } from 'flowtype';
+
+import { IntlProvider, addLocaleData } from 'react-intl';
+
+import en from 'react-intl/locale-data/en';
+import cs from 'react-intl/locale-data/cs';
+import bn from 'react-intl/locale-data/bn';
+import de from 'react-intl/locale-data/de';
+import el from 'react-intl/locale-data/el';
+import es from 'react-intl/locale-data/es';
+import fr from 'react-intl/locale-data/fr';
+import id from 'react-intl/locale-data/id';
+import it from 'react-intl/locale-data/it';
+import ja from 'react-intl/locale-data/ja';
+import nl from 'react-intl/locale-data/nl';
+import pl from 'react-intl/locale-data/pl';
+import pt from 'react-intl/locale-data/pt';
+import ru from 'react-intl/locale-data/ru';
+import uk from 'react-intl/locale-data/uk';
+import zh from 'react-intl/locale-data/zh';
+
+addLocaleData([...en, ...cs, ...bn, ...de, ...el, ...es, ...fr, ...id, ...it, ...ja, ...nl, ...pl, ...pt, ...ru, ...uk, ...zh]);
+
+type OwnProps = {
+ children: React.Node
+}
+
+type StateProps = {
+ locale: string,
+ messages: { [string]: string }
+}
+
+type Props = StateProps & OwnProps;
+
+const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
+ locale: state.wallet.language,
+ messages: state.wallet.messages,
+});
+
+const ReactIntlProvider = ({ children, locale, messages }: Props) => (
+
+ {children}
+
+);
+
+export default connect(mapStateToProps, null)(ReactIntlProvider);
\ No newline at end of file
diff --git a/src/utils/l10n.js b/src/utils/l10n.js
new file mode 100644
index 00000000..6e60550c
--- /dev/null
+++ b/src/utils/l10n.js
@@ -0,0 +1,11 @@
+import { LANGUAGE } from 'config/variables';
+
+export const getInitialLocale = (defaultLocale = 'en') => {
+ const browserLocale = navigator.language.split('-')[0];
+ if (LANGUAGE.some(e => e.code === browserLocale)) {
+ // Array of supported languages contains the locale we're looking for
+ return browserLocale;
+ }
+ // if browser lang is not supported return en as default locale
+ return defaultLocale;
+};
\ No newline at end of file
diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js
index 6c983e4c..ed876ae4 100644
--- a/src/views/Landing/components/BetaDisclaimer/index.js
+++ b/src/views/Landing/components/BetaDisclaimer/index.js
@@ -4,6 +4,7 @@ import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
+import { FormattedMessage } from 'react-intl';
import colors from 'config/colors';
import icons from 'config/icons';
@@ -14,6 +15,7 @@ import Button from 'components/Button';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import * as WalletActions from 'actions/WalletActions';
+import l10nMessages from './index.messages';
const Wrapper = styled.div`
width: 100%;
@@ -57,18 +59,38 @@ const StyledIcon = styled(Icon)`
const BetaDisclaimer = (props: { close: () => void }) => (
-
You are opening Trezor Beta Wallet
- Trezor Beta Wallet is a public feature-testing version of the Trezor Wallet, offering the newest features before they are available to the general public.
- In contrast, Trezor Wallet is feature-conservative, making sure that its functionality is maximally reliable and dependable for the general public.
+
+ ,
+ TR_TREZOR_BETA_WALLET: ,
+ }}
+ />
+
+ ,
+ TR_TREZOR_BETA_WALLET: ,
+ }}
+ />
+
- Please note that the Trezor Beta Wallet might be collecting anonymized usage data, especially error logs, for development purposes. The Trezor Wallet does not log any data.
+ ,
+ TR_TREZOR_BETA_WALLET: ,
+ }}
+ />
- OK, I understand
+
);
diff --git a/src/views/Landing/components/BetaDisclaimer/index.messages.js b/src/views/Landing/components/BetaDisclaimer/index.messages.js
new file mode 100644
index 00000000..ad70f587
--- /dev/null
+++ b/src/views/Landing/components/BetaDisclaimer/index.messages.js
@@ -0,0 +1,36 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_YOU_ARE_OPENING_TREZOR_BETA_WALLET: {
+ id: 'TR_YOU_ARE_OPENING_TREZOR_BETA_WALLET',
+ defaultMessage: 'You are opening Trezor Beta Wallet',
+ },
+ TR_TREZOR_BETA_WALLET_IS: {
+ id: 'TR_TREZOR_BETA_WALLET_IS',
+ defaultMessage: '{TR_TREZOR_BETA_WALLET} is a public feature-testing version of the {TR_TREZOR_WALLET}, offering the newest features before they are available to the general public.',
+ },
+ TR_IN_CONTRAST_COMMA_TREZOR: {
+ id: 'TR_IN_CONTRAST_COMMA_TREZOR',
+ defaultMessage: 'In contrast, {TR_TREZOR_WALLET} is feature-conservative, making sure that its functionality is maximally reliable and dependable for the general public.',
+ },
+ TR_PLEASE_NOTE_THAT_THE_TREZOR: {
+ id: 'TR_PLEASE_NOTE_THAT_THE_TREZOR',
+ defaultMessage: 'Please note that the {TR_TREZOR_BETA_WALLET} might be collecting anonymized usage data, especially error logs, for development purposes. The {TR_TREZOR_WALLET} does not log any data.',
+ },
+ TR_OK_COMMA_I_UNDERSTAND: {
+ id: 'TR_OK_COMMA_I_UNDERSTAND',
+ defaultMessage: 'OK, I understand',
+ },
+ TR_TREZOR_WALLET: {
+ id: 'TR_TREZOR_WALLET',
+ defaultMessage: 'Trezor Wallet',
+ },
+ TR_TREZOR_BETA_WALLET: {
+ id: 'TR_TREZOR_BETA_WALLET',
+ defaultMessage: 'Trezor Beta Wallet',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Landing/components/BrowserNotSupported/index.js b/src/views/Landing/components/BrowserNotSupported/index.js
index 5ba7904a..f4499dd3 100644
--- a/src/views/Landing/components/BrowserNotSupported/index.js
+++ b/src/views/Landing/components/BrowserNotSupported/index.js
@@ -4,9 +4,11 @@ import Link from 'components/Link';
import Button from 'components/Button';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
+import { FormattedMessage } from 'react-intl';
import ChromeImage from 'images/browser-chrome.png';
import FirefoxImage from 'images/browser-firefox.png';
+import l10nMessages from './index.messages';
const Wrapper = styled.div`
padding: 24px 0px;
@@ -32,21 +34,21 @@ const Browser = styled.div`
const BrowserNotSupported = () => (
-
Your browser is not supported
-
Please choose one of the supported browsers
+
+
Google Chrome
-
+
Mozzila Firefox
-
+
diff --git a/src/views/Landing/components/BrowserNotSupported/index.messages.js b/src/views/Landing/components/BrowserNotSupported/index.messages.js
new file mode 100644
index 00000000..4f42bce2
--- /dev/null
+++ b/src/views/Landing/components/BrowserNotSupported/index.messages.js
@@ -0,0 +1,24 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_YOUR_BROWSER_IS_NOT_SUPPORTED: {
+ id: 'TR_YOUR_BROWSER_IS_NOT_SUPPORTED',
+ defaultMessage: 'Your browser is not supported',
+ },
+ TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED: {
+ id: 'TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED',
+ defaultMessage: 'Please choose one of the supported browsers',
+ },
+ TR_GET_CHROME: {
+ id: 'TR_GET_CHROME',
+ defaultMessage: 'Get Chrome',
+ },
+ TR_GET_FIREFOX: {
+ id: 'TR_GET_FIREFOX',
+ defaultMessage: 'Get Firefox',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js
index 0e417cff..4748d7fc 100644
--- a/src/views/Landing/components/ConnectDevice/index.js
+++ b/src/views/Landing/components/ConnectDevice/index.js
@@ -3,6 +3,7 @@
import React, { PureComponent } from 'react';
import styled, { keyframes } from 'styled-components';
import TrezorConnect from 'trezor-connect';
+import l10nCommonMessages from 'views/common.messages';
import P from 'components/Paragraph';
import Button from 'components/Button';
import { H2 } from 'components/Heading';
@@ -12,6 +13,9 @@ import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
import CaseImage from 'images/macbook.png';
import Link from 'components/Link';
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
+
type Props = {
deviceLabel: string,
showWebUsb: boolean,
@@ -24,6 +28,8 @@ const StyledConnectDevice = styled.div`
const Title = styled.div`
margin-top: 60px;
+ max-width: 800px;
+ text-align: center;
`;
const Wrapper = styled.div`
@@ -60,7 +66,7 @@ const StyledButton = styled(Button)`
const Image = styled.img`
width: 100%;
- max-width: 777px;
+ max-width: 850px;
height: auto;
margin: auto;
background-repeat: no-repeat;
@@ -126,9 +132,8 @@ class ConnectDevice extends PureComponent {
return (
- <H2 claim>The private bank in your hands.</H2>
- <P>Trezor Wallet is an easy-to-use interface for your Trezor.</P>
- <P>Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>
+ <H2 claim><FormattedMessage {...l10nMessages.TR_THE_PRIVATE_BANK_IN_YOUR_HANDS} /></H2>
+ <P><FormattedMessage {...l10nMessages.TR_TREZOR_WALLET_IS_AN_EASY_DASH} /></P>
@@ -137,15 +142,15 @@ class ConnectDevice extends PureComponent {
{!this.props.showDisconnect && (
{this.getTrezorDeviceImage()}
- Connect Trezor
+
)}
{this.props.showWebUsb && !this.props.showDisconnect && (
- and
+
- Check for devices
+
)}
@@ -156,23 +161,37 @@ class ConnectDevice extends PureComponent {
diff --git a/src/views/Landing/components/ConnectDevice/index.messages.js b/src/views/Landing/components/ConnectDevice/index.messages.js
new file mode 100644
index 00000000..0e7e80ab
--- /dev/null
+++ b/src/views/Landing/components/ConnectDevice/index.messages.js
@@ -0,0 +1,37 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_TREZOR_WALLET_IS_AN_EASY_DASH: {
+ id: 'TR_TREZOR_WALLET_IS_AN_EASY_DASH',
+ defaultMessage: 'Trezor Wallet is an easy-to-use interface for your Trezor. Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.',
+ },
+ TR_THE_PRIVATE_BANK_IN_YOUR_HANDS: {
+ id: 'TR_THE_PRIVATE_BANK_IN_YOUR_HANDS',
+ defaultMessage: 'The private bank in your hands.',
+ },
+ TR_CONNECT_TREZOR_TO_CONTINUE: {
+ id: 'TR_CONNECT_TREZOR_TO_CONTINUE',
+ defaultMessage: 'Connect Trezor to continue',
+ },
+ TR_AND: {
+ id: 'TR_AND',
+ defaultMessage: 'and',
+ },
+ TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING: {
+ id: 'TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING',
+ defaultMessage: 'Device not recognized? Try installing the {link}.',
+ },
+ TR_DONT_HAVE_A_TREZOR: {
+ id: 'TR_DONT_HAVE_A_TREZOR_GET',
+ defaultMessage: 'Don\'t have a Trezor? {getOne}',
+ },
+ TR_GET_ONE: {
+ id: 'TR_GET_ONE',
+ description: 'Part of the sentence: Dont have a Trezor? Get one',
+ defaultMessage: 'Get one',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Landing/views/InstallBridge/index.js b/src/views/Landing/views/InstallBridge/index.js
index 3eb65953..237dab70 100644
--- a/src/views/Landing/views/InstallBridge/index.js
+++ b/src/views/Landing/views/InstallBridge/index.js
@@ -6,7 +6,7 @@ import colors from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { Select } from 'components/Select';
import Link from 'components/Link';
-import { H1, H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
import Button from 'components/Button';
import P from 'components/Paragraph';
import Icon from 'components/Icon';
@@ -14,7 +14,9 @@ import ICONS from 'config/icons';
import LandingWrapper from 'views/Landing/components/LandingWrapper';
import * as RouterActions from 'actions/RouterActions';
+import { FormattedMessage } from 'react-intl';
import type { State as TrezorConnectState } from 'reducers/TrezorConnectReducer';
+import l10nMessages from './index.messages';
type InstallTarget = {
value: string;
@@ -112,17 +114,17 @@ const GoBack = styled.span`
}
`;
-const Ol = styled.ul`
- margin: 0 auto;
- color: ${colors.TEXT_SECONDARY};
- font-size: ${FONT_SIZE.BIG};
- padding: 0px 0 15px 25px;
- text-align: left;
-`;
+// const Ol = styled.ul`
+// margin: 0 auto;
+// color: ${colors.TEXT_SECONDARY};
+// font-size: ${FONT_SIZE.BIG};
+// padding: 0px 0 15px 25px;
+// text-align: left;
+// `;
-const Li = styled.li`
- text-align: justify;
-`;
+// const Li = styled.li`
+// text-align: justify;
+// `;
class InstallBridge extends PureComponent {
constructor(props: Props) {
@@ -161,7 +163,7 @@ class InstallBridge extends PureComponent {
Trezor Bridge{this.state.currentVersion}
-
New communication tool to facilitate the connection between your Trezor and your internet browser.
- No, i dont want to upgrade Bridge now
- Take me this.props.selectFirstAvailableDevice()}>back to the wallet
+
+ this.props.selectFirstAvailableDevice()}>
)}
diff --git a/src/views/Landing/views/InstallBridge/index.messages.js b/src/views/Landing/views/InstallBridge/index.messages.js
new file mode 100644
index 00000000..5ea6518d
--- /dev/null
+++ b/src/views/Landing/views/InstallBridge/index.messages.js
@@ -0,0 +1,37 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_NEW_COMMUNICATION_TOOL: {
+ id: 'TR_NEW_COMMUNICATION_TOOL',
+ defaultMessage: 'New communication tool to facilitate the connection between your Trezor and your internet browser.',
+ },
+ TR_DOWNLOAD_LATEST_BRIDGE: {
+ id: 'TR_DOWNLOAD_LATEST_BRIDGE',
+ defaultMessage: 'Download latest Bridge {version}',
+ },
+ TR_LEARN_MORE_ABOUT_LATEST_VERSION: {
+ id: 'TR_LEARN_MORE_ABOUT_LATEST_VERSION',
+ defaultMessage: 'Learn more about latest version in {TR_CHANGELOG}.',
+ },
+ TR_CHANGELOG: {
+ id: 'TR_CHANGELOG',
+ defaultMessage: 'Changelog',
+ description: 'Part of the sentence: Learn more about latest version in {TR_CHANGELOG}.',
+ },
+ TR_CHECK_PGP_SIGNATURE: {
+ id: 'TR_CHECK_PGP_SIGNATURE',
+ defaultMessage: 'Check PGP signature',
+ },
+ TR_DONT_UPGRADE_BRIDGE: {
+ id: 'TR_DONT_UPGRADE_BRIDGE',
+ defaultMessage: 'No, I don\'t want to upgrade Bridge now',
+ },
+ TR_TAKE_ME_BACK_TO_WALLET: {
+ id: 'TR_TAKE_ME_BACK_TO_WALLET',
+ defaultMessage: 'Take me back to the wallet',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
index 9d7afdbc..115af1fc 100644
--- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@@ -9,6 +9,10 @@ import Button from 'components/Button';
import Link from 'components/Link';
import CoinLogo from 'components/images/CoinLogo';
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
+
+
const getInfoUrl = (networkShortcut: ?string) => {
const urls = {
default: 'https://wiki.trezor.io',
@@ -54,13 +58,14 @@ const Message = styled(Paragraph)`
`;
const FirmwareUnsupported = (props: Props) => (
+ //TODO: localization
{props.networkShortcut && }
{props.title}
{props.message}
-
+
diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.messages.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.messages.js
new file mode 100644
index 00000000..d574bee4
--- /dev/null
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/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_FIND_OUT_MORE_INFO: {
+ id: 'TR_FIND_OUT_MORE_INFO',
+ defaultMessage: 'Find out more info',
+ },
+ TR_MODEL_DOES_NOT_SUPPORT_COIN: {
+ id: 'TR_MODEL_DOES_NOT_SUPPORT_COIN',
+ defaultMessage: 'The coin {coin} is not supported by your Trezor model.',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index 3cfbd133..1c2b3c25 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -12,8 +12,11 @@ import colors from 'config/colors';
import type { State } from 'flowtype';
import FirmwareUpdate from 'views/Wallet/views/FirmwareUpdate';
+import { FormattedMessage } from 'react-intl';
import FirmwareUnsupported from './components/FirmwareUnsupported';
+import l10nMessages from './index.messages';
+
type Props = {
children?: React.Node,
isLoading?: boolean,
@@ -81,7 +84,7 @@ const Content = ({
{loader.type === 'progress' && }
- {loader.title || 'Initializing accounts'}
+ {loader.title || <FormattedMessage {...l10nMessages.TR_INITIALIZING_ACCOUNTS} />}
{loader.message && {loader.message}}
diff --git a/src/views/Wallet/components/Content/index.messages.js b/src/views/Wallet/components/Content/index.messages.js
new file mode 100644
index 00000000..cc0691a9
--- /dev/null
+++ b/src/views/Wallet/components/Content/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_INITIALIZING_ACCOUNTS: {
+ id: 'TR_INITIALIZING_ACCOUNTS',
+ defaultMessage: 'Initializing accounts',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
index a89f980a..832fdaa8 100644
--- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
@@ -8,6 +8,7 @@ import styled, { css } from 'styled-components';
import * as stateUtils from 'reducers/utils';
import Tooltip from 'components/Tooltip';
import ICONS from 'config/icons';
+import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
@@ -16,9 +17,12 @@ import {
} from 'config/variables';
import type { Accounts } from 'flowtype';
+import l10nCommonMessages from 'views/common.messages';
import type { Props } from '../common';
import Row from '../Row';
import RowCoin from '../RowCoin';
+import l10nMessages from './index.messages';
+
const Wrapper = styled.div``;
@@ -105,7 +109,7 @@ const AccountMenu = (props: Props) => {
// const url: string = `${baseUrl}/network/${location.state.network}/account/${i}`;
const url: string = location.pathname.replace(/account+\/([0-9]*)/, `account/${i}`);
- let balance: string = 'Loading...';
+ let balance: ?string = null;
if (account.balance !== '') {
const pending = stateUtils.getAccountPendingTx(props.pending, account);
const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
@@ -130,9 +134,9 @@ const AccountMenu = (props: Props) => {
isSelected={urlAccountIndex === account.index}
borderTop={account.index === 0}
>
- Account #{account.index + 1}
+
{balance && {balance}}
- {!balance && Loading...}
+ {!balance && }
@@ -148,7 +152,7 @@ const AccountMenu = (props: Props) => {
discoveryStatus = (
}
placement="bottom"
>
@@ -160,7 +164,7 @@ const AccountMenu = (props: Props) => {
color={colors.TEXT_SECONDARY}
/>
- Add account
+
@@ -176,7 +180,7 @@ const AccountMenu = (props: Props) => {
color={colors.TEXT_SECONDARY}
/>
- Add account
+
);
@@ -184,7 +188,7 @@ const AccountMenu = (props: Props) => {
discoveryStatus = (
}
placement="bottom"
>
@@ -196,7 +200,7 @@ const AccountMenu = (props: Props) => {
color={colors.TEXT_SECONDARY}
/>
- Add account
+
@@ -208,7 +212,7 @@ const AccountMenu = (props: Props) => {
- Loading...
+
diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js
new file mode 100644
index 00000000..4e94aa04
--- /dev/null
+++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.messages.js
@@ -0,0 +1,20 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_TO_ADD_A_NEW_ACCOUNT_LAST: {
+ id: 'TR_TO_ADD_A_NEW_ACCOUNT_LAST',
+ defaultMessage: 'To add a new account, last account must have some transactions.',
+ },
+ TR_TO_ADD_ACCOUNTS: {
+ id: 'TR_TO_ADD_ACCOUNTS',
+ defaultMessage: 'To add accounts, make sure your device is connected.',
+ },
+ TR_ADD_ACCOUNT: {
+ id: 'TR_ADD_ACCOUNT',
+ defaultMessage: 'Add account',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
index 194932e7..dbfbad14 100644
--- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
@@ -8,9 +8,12 @@ import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { NavLink } from 'react-router-dom';
import Link from 'components/Link';
+import { FormattedMessage } from 'react-intl';
import Divider from '../Divider';
import RowCoin from '../RowCoin';
+import l10nMessages from './index.messages';
+
import type { Props } from '../common';
const Wrapper = styled.div``;
@@ -73,8 +76,8 @@ class CoinMenu extends PureComponent {
))}
}
+ textRight={}
hasBorder
/>
{this.getOtherCoins()}
diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js
new file mode 100644
index 00000000..e0a09530
--- /dev/null
+++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/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_OTHER_COINS: {
+ id: 'TR_OTHER_COINS',
+ defaultMessage: 'Other coins',
+ },
+ TR_YOU_WILL_BE_REDIRECTED: {
+ id: 'TR_YOU_WILL_BE_REDIRECTED',
+ defaultMessage: '(You will be redirected)',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
index b3f42a41..ae1e2ff6 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
@@ -3,11 +3,15 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'components/Icon';
import DeviceIcon from 'components/images/DeviceIcon';
+import { FormattedMessage } from 'react-intl';
import icons from 'config/icons';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
+import l10nCommonMessages from 'views/common.messages';
+import l10nMessages from './index.messages';
+
const Wrapper = styled.div`
background: ${colors.WHITE};
`;
@@ -58,7 +62,7 @@ class MenuItems extends PureComponent {
size={25}
color={colors.TEXT_SECONDARY}
/>
-
+
*/}
{this.showClone() && (
this.props.duplicateDevice(device)}>
@@ -67,7 +71,7 @@ class MenuItems extends PureComponent {
size={25}
color={colors.TEXT_SECONDARY}
/>
-
+
)}
{this.showRenewSession() && (
@@ -75,7 +79,7 @@ class MenuItems extends PureComponent {
onClick={() => this.props.acquireDevice()}
>
-
+
)}
this.props.forgetDevice(device)}>
@@ -84,7 +88,7 @@ class MenuItems extends PureComponent {
size={25}
color={colors.TEXT_SECONDARY}
/>
-
+
);
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.messages.js
new file mode 100644
index 00000000..f7db0b18
--- /dev/null
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/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_CHANGE_WALLET_TYPE: {
+ id: 'TR_CHANGE_WALLET_TYPE',
+ defaultMessage: 'Change wallet type',
+ },
+ TR_RENEW_SESSION: {
+ id: 'TR_RENEW_SESSION',
+ defaultMessage: 'Renew session',
+ description: 'TODO',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
index 0d0b4cc5..29c027ea 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@@ -2,6 +2,7 @@
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import TrezorConnect from 'trezor-connect';
+import { FormattedMessage } from 'react-intl';
import COLORS from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -9,6 +10,7 @@ import { SLIDE_DOWN } from 'config/animations';
import Button from 'components/Button';
import * as deviceUtils from 'utils/device';
+import l10nCommonMessages from 'views/common.messages';
import MenuItems from './components/MenuItems';
import DeviceList from './components/DeviceList';
@@ -124,7 +126,9 @@ class DeviceMenu extends PureComponent {
/>
{deviceUtils.isWebUSB(transport) && (
- Check for devices
+
+
+
)}
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.messages.js
new file mode 100644
index 00000000..7f59eeb4
--- /dev/null
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.messages.js
@@ -0,0 +1,9 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js
index b848e4bd..4eba6caa 100644
--- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js
@@ -37,8 +37,8 @@ const Divider = ({
Divider.propTypes = {
className: PropTypes.string,
- textLeft: PropTypes.string,
- textRight: PropTypes.string,
+ textLeft: PropTypes.node,
+ textRight: PropTypes.node,
hasBorder: PropTypes.bool,
testId: PropTypes.string,
};
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index 459e1055..30e85b35 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -13,12 +13,14 @@ import DeviceHeader from 'components/DeviceHeader';
import * as deviceUtils from 'utils/device';
import Tooltip from 'components/Tooltip';
+import { FormattedMessage } from 'react-intl';
import AccountMenu from './components/AccountMenu';
import CoinMenu from './components/CoinMenu';
import DeviceMenu from './components/DeviceMenu';
import Sidebar from './components/Sidebar';
import type { Props } from './components/common';
+import l10nMessages from './index.messages';
const Header = styled(DeviceHeader)`
border-right: 1px solid ${colors.BACKGROUND};
@@ -115,6 +117,26 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element
);
+const WalletTooltipMsg = ({ walletType, isDeviceReady }: { walletType: string, isDeviceReady: ?boolean}): any => {
+ let secondPart = '';
+ if (isDeviceReady) {
+ secondPart = walletType === 'standard'
+ ?
+ : ;
+ } else {
+ secondPart = ;
+ }
+ return (
+ <>
+ {walletType === 'standard'
+ ?
+ : }
+ {' '}{secondPart}
+
+ );
+};
+
+
type State = {
animationType: ?string;
clicked: boolean;
@@ -211,14 +233,6 @@ class LeftNavigation extends React.PureComponent {
const showWalletType = selectedDevice && selectedDevice.features && selectedDevice.features.passphrase_protection;
const isDeviceReady = selectedDevice && selectedDevice.connected && selectedDevice.available;
- let walletTooltipMsg = `You are in your ${walletType} wallet.`;
- if (isDeviceReady) {
- walletTooltipMsg = walletType === 'standard'
- ? `${walletTooltipMsg} Click here to access your hidden wallet.`
- : `${walletTooltipMsg} Click here to access your standard or another hidden wallet`;
- } else {
- walletTooltipMsg = `${walletTooltipMsg} To access other wallets please connect your device.`;
- }
return (
@@ -238,7 +252,7 @@ class LeftNavigation extends React.PureComponent {
{showWalletType && (
}
maxWidth={200}
placement="bottom"
enterDelayMs={0.5}
@@ -262,7 +276,7 @@ class LeftNavigation extends React.PureComponent {
}
{this.props.devices.length > 1 && (
}
maxWidth={200}
placement="bottom"
enterDelayMs={0.5}
@@ -292,7 +306,7 @@ class LeftNavigation extends React.PureComponent {
target="_blank"
rel="noreferrer noopener"
>
- Need help?
+
diff --git a/src/views/Wallet/components/LeftNavigation/index.messages.js b/src/views/Wallet/components/LeftNavigation/index.messages.js
new file mode 100644
index 00000000..f613fc8a
--- /dev/null
+++ b/src/views/Wallet/components/LeftNavigation/index.messages.js
@@ -0,0 +1,36 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_YOU_ARE_IN_YOUR_STANDARD_WALLET: {
+ id: 'TR_YOU_ARE_IN_YOUR_STANDARD_WALLET',
+ defaultMessage: 'You are in your standard wallet.',
+ },
+ TR_YOU_ARE_IN_YOUR_HIDDEN_WALLET: {
+ id: 'TR_YOU_ARE_IN_YOUR_WALLET',
+ defaultMessage: 'You are in your hidden wallet.',
+ },
+ TR_CLICK_HERE_TO_ACCESS_YOUR_HIDDEN: {
+ id: 'TR_CLICK_HERE_TO_ACCESS_YOUR_HIDDEN',
+ defaultMessage: 'Click here to access your hidden wallet.',
+ },
+ TR_CLICK_HERE_TO_ACCESS_YOUR_STANDARD: {
+ id: 'TR_CLICK_HERE_TO_ACCESS_YOUR_STANDARD',
+ defaultMessage: 'Click here to access your standard or another hidden wallet.',
+ },
+ TR_TO_ACCESS_OTHER_WALLETS: {
+ id: 'TR_TO_ACCESS_OTHER_WALLETS',
+ defaultMessage: 'To access other wallets please connect your device.',
+ },
+ TR_NEED_HELP: {
+ id: 'TR_NEED_HELP',
+ defaultMessage: 'Need help?',
+ },
+ TR_NUMBER_OF_DEVICES: {
+ id: 'TR_NUMBER_OF_DEVICES',
+ defaultMessage: 'Number of devices',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/Title/index.js b/src/views/Wallet/components/Title/index.js
index edc7b1f4..e72bf32a 100644
--- a/src/views/Wallet/components/Title/index.js
+++ b/src/views/Wallet/components/Title/index.js
@@ -20,7 +20,7 @@ const Title = ({
);
Title.propTypes = {
- children: PropTypes.string,
+ children: PropTypes.node,
};
export default Title;
diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js
index 192c1164..97ffa864 100644
--- a/src/views/Wallet/components/TopNavigationAccount/index.js
+++ b/src/views/Wallet/components/TopNavigationAccount/index.js
@@ -7,7 +7,9 @@ import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import colors from 'config/colors';
import type { State } from 'flowtype';
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
import Indicator from './components/Indicator';
type Props = {
@@ -95,11 +97,11 @@ class TopNavigationAccount extends React.PureComponent {
return (
- Summary
- Receive
- Send
+
+
+
{network.type === 'ethereum'
- && Sign & Verify
+ &&
}
this.state.wrapper} />
diff --git a/src/views/Wallet/components/TopNavigationAccount/index.messages.js b/src/views/Wallet/components/TopNavigationAccount/index.messages.js
new file mode 100644
index 00000000..7d5f930b
--- /dev/null
+++ b/src/views/Wallet/components/TopNavigationAccount/index.messages.js
@@ -0,0 +1,24 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_NAV_SUMMARY: {
+ id: 'TR_NAV_SUMMARY',
+ defaultMessage: 'Summary',
+ },
+ TR_NAV_RECEIVE: {
+ id: 'TR_NAV_RECEIVE',
+ defaultMessage: 'Receive',
+ },
+ TR_NAV_SEND: {
+ id: 'TR_NAV_SEND',
+ defaultMessage: 'Send',
+ },
+ TR_NAV_SIGN_AND_VERIFY: {
+ id: 'TR_NAV_SIGN_AND_VERIFY',
+ defaultMessage: 'Sign & Verify',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/components/TopNavigationDeviceSettings/index.js b/src/views/Wallet/components/TopNavigationDeviceSettings/index.js
index d721c6f3..cb37524e 100644
--- a/src/views/Wallet/components/TopNavigationDeviceSettings/index.js
+++ b/src/views/Wallet/components/TopNavigationDeviceSettings/index.js
@@ -1,11 +1,13 @@
import styled from 'styled-components';
import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
const Wrapper = styled.div``;
const AccountTabs = () => (
- Device settings
+
);
diff --git a/src/views/Wallet/views/Account/Receive/common.messages.js b/src/views/Wallet/views/Account/Receive/common.messages.js
new file mode 100644
index 00000000..c941ade3
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/common.messages.js
@@ -0,0 +1,20 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_CHECK_ADDRESS_ON_TREZOR: {
+ id: 'TR_CHECK_ADDRESS_ON_TREZOR',
+ defaultMessage: 'Check address on Trezor',
+ },
+ TR_SHOW_FULL_ADDRESS: {
+ id: 'TR_SHOW_FULL_ADDRESS',
+ defaultMessage: 'Show full address',
+ },
+ TR_QR_CODE: {
+ id: 'TR_QR_CODE',
+ defaultMessage: 'QR Code',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js
index b1db5630..08ccbb56 100644
--- a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js
+++ b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js
@@ -1,6 +1,9 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
+
const Wrapper = styled.div``;
const Content = styled.div``;
@@ -9,12 +12,16 @@ const VerifyAddressTooltip = ({ isConnected, isAvailable, addressUnverified }) =
{addressUnverified && (
- Unverified address. {isConnected && isAvailable ? 'Show on Trezor' : 'Connect your Trezor to verify it.'}
+ {isConnected && isAvailable
+ ?
+ : }
)}
{!addressUnverified && (
- {isConnected ? 'Show on Trezor' : 'Connect your Trezor to verify address.'}
+ {isConnected
+ ?
+ : }
)}
diff --git a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.messages.js b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.messages.js
new file mode 100644
index 00000000..628ce4cc
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.messages.js
@@ -0,0 +1,24 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_UNVERIFIED_ADDRESS_COMMA_CONNECT: {
+ id: 'TR_UNVERIFIED_ADDRESS_COMMA_CONNECT',
+ defaultMessage: 'Unverified address, connect your Trezor to verify it',
+ },
+ TR_UNVERIFIED_ADDRESS_COMMA_SHOW: {
+ id: 'TR_UNVERIFIED_ADDRESS_COMMA_SHOW',
+ defaultMessage: 'Unverified address, show on Trezor.',
+ },
+ TR_SHOW_ON_TREZOR: {
+ id: 'TR_SHOW_ON_TREZOR',
+ defaultMessage: 'Show on Trezor',
+ },
+ TR_CONNECT_YOUR_TREZOR_TO_CHECK: {
+ id: 'TR_CONNECT_YOUR_TREZOR_TO_CHECK',
+ defaultMessage: 'Connect your Trezor to verify this address',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/ethereum/Container.js b/src/views/Wallet/views/Account/Receive/ethereum/Container.js
index 27212056..5aaabfbd 100644
--- a/src/views/Wallet/views/Account/Receive/ethereum/Container.js
+++ b/src/views/Wallet/views/Account/Receive/ethereum/Container.js
@@ -1,13 +1,16 @@
/* @flow */
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
import { showAddress } from 'actions/ReceiveActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import Receive from './index';
-type OwnProps = { }
+type OwnProps = {
+ intl: any,
+}
type StateProps = {
selectedAccount: $ElementType,
@@ -20,7 +23,7 @@ type DispatchProps = {
showAddress: typeof showAddress
};
-export type Props = StateProps & DispatchProps;
+export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@@ -33,4 +36,4 @@ const mapDispatchToProps: MapDispatchToProps
showAddress: bindActionCreators(showAddress, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Receive);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Receive));
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js
index f700b1a9..b32049a7 100644
--- a/src/views/Wallet/views/Account/Receive/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js
@@ -2,6 +2,7 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
@@ -15,8 +16,12 @@ import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content';
+import l10nCommonMessages from 'views/common.messages';
import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
+import l10nMessages from './index.messages';
+import l10nReceiveMessages from '../common.messages';
+
import type { Props } from './Container';
const Label = styled.div`
@@ -120,20 +125,20 @@ const AccountReceive = (props: Props) => {
return (
- Receive Ethereum or tokens
+ <FormattedMessage {...l10nMessages.TR_RECEIVE_ETHEREUM_OR_TOKENS} />
- Check address on your Trezor
+
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
@@ -158,13 +163,13 @@ const AccountReceive = (props: Props) => {
/>
{!(addressVerified || addressUnverified) && (
props.showAddress(account.accountPath)} isDisabled={device.connected && !discovery.completed}>
- Show full address
+
)}
{(addressVerified || addressUnverified) && !isAddressVerifying && (
-
+
,
@@ -20,7 +23,7 @@ type DispatchProps = {
showAddress: typeof showAddress
};
-export type Props = StateProps & DispatchProps;
+export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@@ -33,4 +36,4 @@ const mapDispatchToProps: MapDispatchToProps
showAddress: bindActionCreators(showAddress, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Receive);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Receive));
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js
index dd59de81..a533c9c1 100644
--- a/src/views/Wallet/views/Account/Receive/ripple/index.js
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@@ -2,6 +2,7 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
@@ -15,8 +16,12 @@ import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content';
+import l10nCommonMessages from 'views/common.messages';
import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
+import l10nMessages from './index.messages';
+import l10nReceiveMessages from '../common.messages';
+
import type { Props } from './Container';
const Label = styled.div`
@@ -120,20 +125,20 @@ const AccountReceive = (props: Props) => {
return (
- Receive Ripple
+ <FormattedMessage {...l10nMessages.TR_RECEIVE_RIPPLE} />
- Check address on your Trezor
+
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
@@ -158,13 +163,13 @@ const AccountReceive = (props: Props) => {
/>
{!(addressVerified || addressUnverified) && (
props.showAddress(account.accountPath)} isDisabled={device.connected && !discovery.completed}>
- Show full address
+
)}
{(addressVerified || addressUnverified) && !isAddressVerifying && (
-
+
,
@@ -24,7 +27,7 @@ export type DispatchProps = {
openQrModal: typeof openQrModal,
}
-export type Props = StateProps & DispatchProps;
+export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@@ -40,4 +43,4 @@ const mapDispatchToProps: MapDispatchToProps
});
-export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AccountSend));
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
index 7a4391a8..c8b4cafc 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
@@ -3,6 +3,7 @@
import * as React from 'react';
import styled from 'styled-components';
import colors from 'config/colors';
+import { FormattedMessage, injectIntl } from 'react-intl';
import Link from 'components/Link';
import Input from 'components/inputs/Input';
@@ -12,9 +13,12 @@ import Icon from 'components/Icon';
import ICONS from 'config/icons';
import { FONT_SIZE } from 'config/variables';
+import l10nMessages from './index.messages';
+
import type { Props as BaseProps } from '../../Container';
type Props = BaseProps & {
+ intl: any,
children: React.Node,
}
@@ -177,14 +181,17 @@ const AdvancedForm = (props: Props) => {
topLabel={(
- Gas limit
+
- Gas limit refers to the maximum amount of gas user is willing to spendon a particular transaction.{' '}
- Transaction fee = gas limit * gas price.{' '}Increasing the gas limit will not get the transaction confirmed sooner.
- Default value for sending {gasLimitTooltipCurrency} is {gasLimitTooltipValue}.
-
+ ,
+ gasLimitTooltipValue: {gasLimitTooltipValue},
+ gasLimitTooltipCurrency,
+ }}
+ />
)}
maxWidth={410}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
@@ -199,14 +206,14 @@ const AdvancedForm = (props: Props) => {
{ showDefaultGasLimitButton && (
- Set default
+
)
}
)}
bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit}
- value={calculatingGasLimit ? 'Calculating...' : gasLimit}
+ value={calculatingGasLimit ? props.intl.formatMessage(l10nMessages.TR_CALCULATING_DOT_DOT) : gasLimit} // TODO: figure out translations in inputs
isDisabled={networkSymbol === currency && data.length > 0}
onChange={event => onGasLimitChange(event.target.value)}
/>
@@ -220,14 +227,17 @@ const AdvancedForm = (props: Props) => {
topLabel={(
- Gas price
+
- Gas price refers to the amount of ether you are willing to pay for every
- unit of gas, and is usually measured in “Gwei”. Transaction fee = gas limit * gas price. Increasing the gas price will get the transaction confirmed sooner but
- makes it more expensive. The recommended gas price is {recommendedGasPrice} GWEI.
-
+ ,
+ recommendedGasPrice: {recommendedGasPrice},
+ }}
+
+ />
)}
maxWidth={400}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
@@ -252,13 +262,9 @@ const AdvancedForm = (props: Props) => {
topLabel={(
- Data
+
- Data is usually used when you send transactions to contracts.
-
- )}
+ content={}
placement="top"
>
{
);
};
-export default AdvancedForm;
\ No newline at end of file
+export default injectIntl(AdvancedForm);
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.messages.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.messages.js
new file mode 100644
index 00000000..170815fb
--- /dev/null
+++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.messages.js
@@ -0,0 +1,49 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_GAS_LIMIT: {
+ id: 'TR_GAS_LIMIT',
+ defaultMessage: 'Gas limit',
+ },
+ TR_GAS_LIMIT_REFERS_TO: {
+ id: 'TR_GAS_LIMIT_REFERS_TO',
+ defaultMessage: 'Gas limit refers to the maximum amount of gas user is willing to spendon a particular transaction. {TR_GAS_QUOTATION}. Increasing the gas limit will not get the transaction confirmed sooner. Default value for sending {gasLimitTooltipCurrency} is {gasLimitTooltipValue}.',
+ },
+ TR_GAS_QUOTATION: {
+ id: 'TR_GAS_QUOTATION',
+ defaultMessage: 'Transaction fee = gas limit * gas price',
+ },
+ TR_SET_DEFAULT: {
+ id: 'TR_SET_DEFAULT',
+ defaultMessage: 'Set default',
+ },
+ TR_CALCULATING_DOT_DOT: {
+ id: 'TR_CALCULATING_DOT_DOT',
+ defaultMessage: 'Calculating...',
+ description: 'Used when calculating gas limit based on data input in ethereum advanced send form',
+ },
+ TR_GAS_PRICE: {
+ id: 'TR_GAS_PRICE',
+ defaultMessage: 'Gas price',
+ },
+ TR_GAS_PRICE_REFERS_TO: {
+ id: 'TR_GAS_PRICE_REFERS_TO',
+ defaultMessage: 'Gas price refers to the amount of ether you are willing to pay for every unit of gas, and is usually measured in “Gwei”. {TR_GAS_PRICE_QUOTATION}. Increasing the gas price will get the transaction confirmed sooner but makes it more expensive. The recommended gas price is {recommendedGasPrice} GWEI.',
+ },
+ TR_GAS_PRICE_QUOTATION: {
+ id: 'TR_GAS_PRICE_QUOTATION',
+ defaultMessage: 'Transaction fee = gas limit * gas price',
+ },
+ TR_DATA: {
+ id: 'TR_DATA',
+ defaultMessage: 'Data',
+ },
+ TR_DATA_IS_USUALLY_USED: {
+ id: 'TR_DATA_IS_USUALLY_USED',
+ defaultMessage: 'Data is usually used when you send transactions to contracts.',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index 22c09268..095d93eb 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@@ -16,9 +16,14 @@ import P from 'components/Paragraph';
import Content from 'views/Wallet/components/Content';
import * as stateUtils from 'reducers/utils';
import type { Token } from 'flowtype';
+import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
import AdvancedForm from './components/AdvancedForm';
import PendingTransactions from '../components/PendingTransactions';
+
+import l10nMessages from './index.messages';
+import l10nSendMessages from '../../common.messages';
import type { Props } from './Container';
// TODO: Decide on a small screen width for the whole app
@@ -270,21 +275,22 @@ const AccountSend = (props: Props) => {
}
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
- let sendButtonText: string = 'Send';
+ let amountText = '';
if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
- sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
+ amountText = `${amount} ${currency.toUpperCase()}`;
} else if (networkSymbol === currency && total !== '0') {
- sendButtonText += ` ${total} ${network.symbol}`;
+ amountText = `${total} ${network.symbol}`;
}
+ let sendButtonText = ;
if (!device.connected) {
- sendButtonText = 'Device is not connected';
+ sendButtonText = ;
isSendButtonDisabled = true;
} else if (!device.available) {
- sendButtonText = 'Device is unavailable';
+ sendButtonText = ;
isSendButtonDisabled = true;
} else if (!discovery.completed) {
- sendButtonText = 'Loading accounts';
+ sendButtonText = ;
isSendButtonDisabled = true;
}
@@ -294,7 +300,7 @@ const AccountSend = (props: Props) => {
return (
- Send Ethereum or tokens
+ <FormattedMessage {...l10nMessages.TR_SEND_ETHEREUM_OR_TOKENS} />
{
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
- topLabel="Address"
+ topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
@@ -330,9 +336,14 @@ const AccountSend = (props: Props) => {
spellCheck="false"
topLabel={(
- Amount
+
{(isCurrentCurrencyToken && selectedToken) && (
- You have: {selectedTokenBalance} {selectedToken.symbol}
+
+
+
)}
)}
@@ -360,7 +371,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE}
/>
)}
- Set max
+
),
(
@@ -380,7 +391,9 @@ const AccountSend = (props: Props) => {
- Fee
+
+
+
{gasPriceNeedsUpdate && (
{
color={colors.WARNING_PRIMARY}
size={20}
/>
- Recommended fees updated. Click here to use them
+
)}
@@ -414,7 +427,7 @@ const AccountSend = (props: Props) => {
isTransparent
onClick={toggleAdvanced}
>
- Advanced settings
+ {
isWhite
onClick={() => onClear()}
>
- Clear
+ {
isWhite
onClick={() => onClear()}
>
- Clear
+ ,
@@ -24,7 +27,7 @@ export type DispatchProps = {
openQrModal: typeof openQrModal,
}
-export type Props = StateProps & DispatchProps;
+export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@@ -39,4 +42,4 @@ const mapDispatchToProps: MapDispatchToProps
openQrModal: bindActionCreators(openQrModal, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AccountSend));
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
index 873f9b2b..8b62a5ad 100644
--- a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
@@ -1,13 +1,16 @@
/* @flow */
import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import colors from 'config/colors';
+import l10nSendMessages from 'views/Wallet/views/Account/common.messages';
import Input from 'components/inputs/Input';
import Tooltip from 'components/Tooltip';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
+import l10nMessages from './index.messages';
import type { Props as BaseProps } from '../../Container';
@@ -125,13 +128,9 @@ const AdvancedForm = (props: Props) => {
topLabel={(
- Fee
+
- Transfer cost in XRP drops
-
- )}
+ content={}
maxWidth={100}
readMoreLink="https://developers.ripple.com/transaction-cost.html"
placement="top"
@@ -161,13 +160,9 @@ const AdvancedForm = (props: Props) => {
topLabel={(
- Destination tag
+
- Destination tag is an arbitrary number which serves as a unique identifier of your transaction. Some services may require this to process your transaction.
-
- )}
+ content={}
maxWidth={200}
readMoreLink="https://wiki.trezor.io/Ripple_(XRP)"
placement="top"
diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.messages.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.messages.js
new file mode 100644
index 00000000..89cb089c
--- /dev/null
+++ b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.messages.js
@@ -0,0 +1,20 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+ TR_XRP_TRANSFER_COST: {
+ id: 'TR_XRP_TRANSFER_COST',
+ defaultMessage: 'Transfer cost in XRP drops',
+ },
+ TR_XRP_DESTINATION_TAG: {
+ id: 'TR_XRP_DESTINATION_TAG',
+ defaultMessage: 'Destination tag',
+ },
+ TR_XRP_DESTINATION_TAG_EXPLAINED: {
+ id: 'TR_XRP_DESTINATION_TAG_EXPLAINED',
+ defaultMessage: 'Destination tag is an arbitrary number which serves as a unique identifier of your transaction. Some services may require this to process your transaction.',
+ },
+});
+
+export default definedMessages;
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index ce761231..dfb3921b 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/index.js
@@ -3,6 +3,7 @@
import React from 'react';
import styled, { css } from 'styled-components';
import { Select } from 'components/Select';
+import { FormattedMessage } from 'react-intl';
import Button from 'components/Button';
import Input from 'components/inputs/Input';
import Icon from 'components/Icon';
@@ -12,10 +13,14 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
import colors from 'config/colors';
import Title from 'views/Wallet/components/Title';
import P from 'components/Paragraph';
+import l10nCommonMessages from 'views/common.messages';
import Content from 'views/Wallet/components/Content';
import PendingTransactions from '../components/PendingTransactions';
import AdvancedForm from './components/AdvancedForm';
+import l10nMessages from './index.messages';
+import l10nSendMessages from '../../common.messages';
+
import type { Props } from './Container';
// TODO: Decide on a small screen width for the whole app
@@ -248,19 +253,18 @@ const AccountSend = (props: Props) => {
}
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
- let sendButtonText: string = 'Send';
+ let sendButtonText = ;
if (total !== '0') {
- sendButtonText = `${sendButtonText} ${total} ${network.symbol}`;
+ sendButtonText = ;
}
-
if (!device.connected) {
- sendButtonText = 'Device is not connected';
+ sendButtonText = ;
isSendButtonDisabled = true;
} else if (!device.available) {
- sendButtonText = 'Device is unavailable';
+ sendButtonText = ;
isSendButtonDisabled = true;
} else if (!discovery.completed) {
- sendButtonText = 'Loading accounts';
+ sendButtonText = ;
isSendButtonDisabled = true;
}
@@ -271,7 +275,7 @@ const AccountSend = (props: Props) => {
return (
- Send Ripple
+ <FormattedMessage {...l10nMessages.TR_SEND_RIPPLE} />
{
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
- topLabel="Address"
+ topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
@@ -307,9 +311,14 @@ const AccountSend = (props: Props) => {
spellCheck="false"
topLabel={(
- Amount
+
{accountReserve && (
- Reserve: {accountReserve} {network.symbol}
+
+
+
)}
)}
@@ -337,7 +346,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE}
/>
)}
- Set max
+
),
(
@@ -356,7 +365,7 @@ const AccountSend = (props: Props) => {
- Fee
+
{feeNeedsUpdate && (
{
color={colors.WARNING_PRIMARY}
size={20}
/>
- Recommended fees updated. Click here to use them
+
)}
@@ -390,7 +399,7 @@ const AccountSend = (props: Props) => {
isTransparent
onClick={toggleAdvanced}
>
- Advanced settings
+ {
isWhite
onClick={() => onClear()}
>
- Clear
+ {
isWhite
onClick={() => onClear()}
>
- Clear
+ = (state: State): StateProps => ({
wallet: state.wallet,
@@ -37,4 +40,4 @@ const mapDispatchToProps: MapDispatchToProps
signVerifyActions: bindActionCreators(SignVerifyActions, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Component);
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Component));
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index dccccaf6..ada61e99 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/src/views/Wallet/views/Account/SignVerify/index.js
@@ -8,7 +8,10 @@ import Button from 'components/Button';
import Content from 'views/Wallet/components/Content';
import colors from 'config/colors';
import { SCREEN_SIZE } from 'config/variables';
+import { FormattedMessage } from 'react-intl';
+import l10nCommonMessages from 'views/common.messages';
+import l10nMessages from './index.messages';
import type { Props } from './Container';
@@ -99,10 +102,10 @@ class SignVerify extends Component {
- Sign Message
+ <FormattedMessage {...l10nMessages.TR_SIGN_MESSAGE} />
{