add even more intl support

pull/402/head^2
slowbackspace 5 years ago
parent b219cd5012
commit 115107233e

@ -1,3 +1,4 @@
// TODO: l10n for device status
import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';

@ -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) => (
<Left>
<Copy>&copy; {getYear(new Date())}</Copy>
<StyledLink href="http://satoshilabs.com" isGreen>SatoshiLabs</StyledLink>
<StyledLink href="./assets/tos.pdf" isGreen>Terms</StyledLink>
<StyledLink href="./assets/tos.pdf" isGreen>
<FormattedMessage {...l10nMessages.TR_TERMS} />
</StyledLink>
<StyledLink onClick={toggle} isGreen>{ opened ? 'Hide Log' : 'Show Log' }</StyledLink>
</Left>
{!isLanding && (
<Right>
Exchange rates by <Link href="https://www.coingecko.com" isGreen>Coingecko</Link>
<FormattedMessage
{...l10nMessages.TR_EXCHANGE_RATES_BY}
values={{ service: <Link href="https://www.coingecko.com" isGreen>Coingecko</Link> }}
/>
</Right>
)}
</Wrapper>

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

@ -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}
/>
<TogglerText>Close</TogglerText>
<TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />
</TogglerText>
</>
) : (
<>
@ -153,7 +158,9 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
size={24}
icon={icons.MENU}
/>
<TogglerText>Menu</TogglerText>
<TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU} />
</TogglerText>
</>
)}
</MenuToggler>
@ -174,10 +181,10 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
</Logo>
<MenuLinks>
<Projects>
<A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">Trezor</A>
<A href="https://wiki.trezor.io/" target="_blank" rel="noreferrer noopener">Wiki</A>
<A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
<A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
<A href="https://trezor.io/" target="_blank" rel="noreferrer noopener"><FormattedMessage {...l10nMessages.TR_TREZOR} /></A>
<A href="https://wiki.trezor.io/" target="_blank" rel="noreferrer noopener"><FormattedMessage {...l10nMessages.TR_WIKI} /></A>
<A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener"><FormattedMessage {...l10nMessages.TR_BLOG} /></A>
<A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener"><FormattedMessage {...l10nMessages.TR_SUPPORT} /></A>
</Projects>
<LanguagePicker />
</MenuLinks>

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

@ -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<State, 'log'>,
@ -64,8 +67,12 @@ const Log = (props: Props): ?React$Element<string> => {
<Click onClick={props.toggle}>
<Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
</Click>
<H2>Log</H2>
<StyledParagraph isSmaller>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</StyledParagraph>
<H2>
<FormattedMessage {...l10nMessages.TR_LOG} />
</H2>
<StyledParagraph isSmaller>
<FormattedMessage {...l10nMessages.TR_ATTENTION_COLON_THE_LOG_CONTAINS} />
</StyledParagraph>
<LogWrapper>
<ReactJson src={props.log.entries} />
</LogWrapper>

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

@ -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) => (
<Wrapper>
<Header>
<DeviceIcon device={props.device} size={100} />
<H3>Confirm action on your Trezor</H3>
<H3>
<FormattedMessage {...l10nMessages.TR_CONFIRM_ACTION_ON_YOUR} />
</H3>
</Header>
</Wrapper>
);

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

@ -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 (
<Wrapper>
<Header>
<H3>Confirm address on Trezor</H3>
<P>Please compare your address on device with address shown bellow.</P>
<H3>
<FormattedMessage {...l10nMessages.TR_CONFIRM_ADDRESS_ON_TREZOR} />
</H3>
<P>
<FormattedMessage {...l10nMessages.TR_PLEASE_COMPARE_YOUR_ADDRESS} />
</P>
</Header>
<Content>
<P>{ account.descriptor }</P>
<Label>{ network.symbol } account #{ (account.index + 1) }</Label>
<Label>{ network.symbol }
<FormattedMessage {...l10nCommonMessages.TR_ACCOUNT_HASH} values={{ number: account.index + 1 }} />
</Label>
</Content>
</Wrapper>
);

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

@ -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) => {
<Wrapper>
<Header>
<DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
<H3>Confirm transaction on { props.device.label } device</H3>
<P isSmaller>Details are shown on display</P>
<H3>
<FormattedMessage {...l10nMessages.TR_CONFIRM_TRANSACTION_ON} values={{ deviceLabel: props.device.label }} />
</H3>
<P isSmaller>
<FormattedMessage {...l10nMessages.TR_DETAILS_ARE_SHOWN_ON} />
</P>
</Header>
<Content>
<Label>Send</Label>
<Label>
<FormattedMessage {...l10nMessages.TR_SEND_LABEL} />
</Label>
<StyledP>{`${amount} ${currency}` }</StyledP>
<Label>To</Label>
<Label>
<FormattedMessage {...l10nMessages.TR_TO_LABEL} />
</Label>
<Address>{ address }</Address>
<Label>Fee</Label>
<Label>
<FormattedMessage {...l10nMessages.TR_FEE_LABEL} />
</Label>
<FeeLevelName>{selectedFeeLevel.value}</FeeLevelName>
<StyledP>{ selectedFeeLevel.label }</StyledP>
</Content>

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

@ -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<Props> {
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 = <FormattedMessage {...l10nMessages.TR_DEVICE_LABEL_IS_NOT_CONNECTED} values={{ deviceLabel: device.label }} />;
claim = <FormattedMessage {...l10nMessages.TR_PLEASE_CONNECT_YOUR_DEVICE} />;
} 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 = <FormattedMessage {...l10nMessages.TR_DEVICE_LABEL_IS_UNAVAILABLE} values={{ deviceLabel: device.label }} />;
claim = enable
? <FormattedMessage {...l10nMessages.TR_PLEASE_ENABLE_PASSPHRASE} />
: <FormattedMessage {...l10nMessages.TR_PLEASE_DISABLE_PASSPHRASE} />;
}
return (
@ -101,10 +106,15 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
<H2>{ deviceStatus }</H2>
<StyledP isSmaller>To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process.</StyledP>
<StyledP isSmaller>
<FormattedMessage
{...l10nMessages.TR_TO_PREVENT_PHISHING_ATTACKS_COMMA}
values={{ claim }}
/>
</StyledP>
<Row>
<Button onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</Button>
<Button isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</Button>
<Button onClick={() => (!account ? this.verifyAddress() : 'false')}><FormattedMessage {...l10nMessages.TR_TRY_AGAIN} /></Button>
<Button isWhite onClick={() => this.showUnverifiedAddress()}><FormattedMessage {...l10nMessages.TR_SHOW_UNVERIFIED_ADDRESS} /></Button>
</Row>
</Wrapper>
);

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

@ -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<Props> {
render() {
return (
<Wrapper>
<H2>Forget { this.props.device.instanceLabel }?</H2>
<StyledP isSmaller>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.</StyledP>
<H2>
<FormattedMessage
{...l10nDeviceMessages.TR_FORGET_LABEL}
values={{
deviceLabel: this.props.device.instanceLabel,
}}
/>
</H2>
<StyledP isSmaller>
<FormattedMessage {...l10nMessages.TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM} />
</StyledP>
<Row>
<Button onClick={() => this.forget()}>Forget</Button>
<Button isWhite onClick={this.props.onCancel}>Don&apos;t forget</Button>
<Button onClick={() => this.forget()}><FormattedMessage {...l10nDeviceMessages.TR_FORGET} /></Button>
<Button isWhite onClick={this.props.onCancel}><FormattedMessage {...l10nMessages.TR_DONT_FORGET} /></Button>
</Row>
</Wrapper>
);

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

@ -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<Props, State> {
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 (
<span key={instance.instanceLabel}>{ comma }{ instance.instanceLabel }</span>
);
});
label = instances.map(instance => (instance.instanceLabel)).join(',');
}
return (
<Wrapper>
<H3>
<FormattedMessage
{...l10nMessages.TR_FORGET_LABEL}
{...l10nDeviceMessages.TR_FORGET_LABEL}
values={{
deviceLabel: label,
}}
@ -148,7 +143,7 @@ class RememberDevice extends PureComponent<Props, State> {
<Button onClick={() => this.forget()}>
<ButtonContent>
<Text>
<FormattedMessage {...l10nMessages.TR_FORGET} />
<FormattedMessage {...l10nDeviceMessages.TR_FORGET} />
</Text>
<StyledLoader
isSmallText

@ -3,18 +3,10 @@ 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}?',
},
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_FORGET: {
id: 'TR_FORGET',
defaultMessage: 'Forget',
},
TR_REMEMBER: {
id: 'TR_REMEMBER',
defaultMessage: 'Remember',

@ -0,0 +1,17 @@
/* @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}?',
},
TR_FORGET: {
id: 'TR_FORGET',
defaultMessage: 'Forget',
description: 'Button in remember/forget dialog',
},
});
export default definedMessages;

@ -37,7 +37,7 @@ const definedMessages: Messages = defineMessages({
},
TR_DEVICE_IS_UNAVAILABLE: {
id: 'TR_DEVICE_IS_UNAVAILABLE',
defaultMessage: 'Device is not unavailable',
defaultMessage: 'Device is unavailable',
},
TR_LOADING_ACCOUNTS: {
id: 'TR_LOADING_ACCOUNTS',

Loading…
Cancel
Save