mirror of
https://github.com/trezor/trezor-wallet
synced 2025-01-07 14:50:52 +00:00
add even more intl support
This commit is contained in:
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>© {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>
|
||||
|
17
src/components/Footer/index.messages.js
Normal file
17
src/components/Footer/index.messages.js
Normal file
@ -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>
|
||||
|
38
src/components/Header/index.messages.js
Normal file
38
src/components/Header/index.messages.js
Normal file
@ -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>
|
||||
|
17
src/components/Log/index.messages.js
Normal file
17
src/components/Log/index.messages.js
Normal file
@ -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>
|
||||
);
|
||||
|
12
src/components/modals/confirm/Action/index.messages.js
Normal file
12
src/components/modals/confirm/Action/index.messages.js
Normal file
@ -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>
|
||||
);
|
||||
|
16
src/components/modals/confirm/Address/index.messages.js
Normal file
16
src/components/modals/confirm/Address/index.messages.js
Normal file
@ -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>
|
||||
|
31
src/components/modals/confirm/SignTx/index.messages.js
Normal file
31
src/components/modals/confirm/SignTx/index.messages.js
Normal file
@ -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'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>
|
||||
);
|
||||
|
21
src/components/modals/device/Forget/index.messages.js
Normal file
21
src/components/modals/device/Forget/index.messages.js
Normal file
@ -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',
|
||||
|
17
src/components/modals/device/common.messages.js
Normal file
17
src/components/modals/device/common.messages.js
Normal file
@ -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…
Reference in New Issue
Block a user