add intl support for Send, Summary and other views

pull/402/head^2
slowbackspace 5 years ago
parent e6c67d0321
commit 85704377c6

@ -17,6 +17,7 @@ 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';
@ -133,7 +134,7 @@ const AccountMenu = (props: Props) => {
isSelected={urlAccountIndex === account.index}
borderTop={account.index === 0}
>
<FormattedMessage {...l10nMessages.TR_ACCOUNT_HASH} values={{ number: account.index + 1 }} />
<FormattedMessage {...l10nCommonMessages.TR_ACCOUNT_HASH} values={{ number: account.index + 1 }} />
{balance && <Text>{balance}</Text>}
{!balance && <Text><FormattedMessage {...l10nMessages.TR_LOADING_DOT_DOT_DOT} /></Text>}
</RowAccountWrapper>
@ -211,7 +212,7 @@ const AccountMenu = (props: Props) => {
<DiscoveryLoadingWrapper>
<Loader size={20} />
<DiscoveryLoadingText>
<FormattedMessage {...l10nMessages.TR_LOADING_DOT_DOT_DOT} />
<FormattedMessage {...l10nCommonMessages.TR_LOADING_DOT_DOT_DOT} />
</DiscoveryLoadingText>
</DiscoveryLoadingWrapper>
</Row>

@ -3,15 +3,6 @@ import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_ACCOUNT_HASH: {
id: 'TR_ACCOUNT_HASH',
defaultMessage: 'Account #{number}',
description: 'Used in auto-generated account label',
},
TR_LOADING_DOT_DOT_DOT: {
id: 'TR_LOADING_DOT_DOT_DOT',
defaultMessage: 'Loading...',
},
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.',

@ -23,7 +23,7 @@ import PendingTransactions from '../components/PendingTransactions';
import l10nMessages from './index.messages';
import l10nSendMessages from '../common.messages';
import l10nSendMessages from '../../common.messages';
import type { Props } from './Container';
// TODO: Decide on a small screen width for the whole app

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import colors from 'config/colors';
import l10nSendMessages from 'views/Wallet/views/Account/Send/common.messages';
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';

@ -19,7 +19,7 @@ import PendingTransactions from '../components/PendingTransactions';
import AdvancedForm from './components/AdvancedForm';
import l10nMessages from './index.messages';
import l10nSendMessages from '../common.messages';
import l10nSendMessages from '../../common.messages';
import type { Props } from './Container';

@ -0,0 +1,36 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_SEE_FULL_TRANSACTION_HISTORY: {
id: 'TR_SEE_FULL_TRANSACTION_HISTORY',
defaultMessage: 'See full transaction history',
},
TR_TOKENS: {
id: 'TR_TOKENS',
defaultMessage: 'Tokens',
},
TR_INSERT_TOKEN_NAME: {
id: 'TR_INSERT_TOKEN_NAME',
defaultMessage: 'Insert token name, symbol or address to be able to send it.',
},
TR_TYPE_IN_A_TOKEN_NAME: {
id: 'TR_TYPE_IN_A_TOKEN_NAME',
defaultMessage: 'Type in a token name or a token address.',
},
TR_TOKEN_NOT_FOUND: {
id: 'TR_TOKEN_NOT_FOUND',
defaultMessage: 'Token not found',
},
TR_ALREADY_USED: {
id: 'TR_ALREADY_USED',
defaultMessage: 'Already used',
},
TR_HISTORY: {
id: 'TR_HISTORY',
defaultMessage: 'History',
},
});
export default definedMessages;

@ -1,9 +1,11 @@
/* @flow */
import styled from 'styled-components';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
display: flex;
@ -54,8 +56,12 @@ const AddTokenMessage = () => (
</g>
</g>
</StyledSVG>
<H2>Add your tokens</H2>
<StyledP isSmaller>Search for the token or add them manually by pasting token address into search input.</StyledP>
<H2>
<FormattedMessage {...l10nMessages.TR_ADD_YOUR_TOKENS} />
</H2>
<StyledP isSmaller>
<FormattedMessage {...l10nMessages.TR_SEARCH_FOR_THE_TOKEN} />
</StyledP>
</Wrapper>
);
export default AddTokenMessage;

@ -0,0 +1,16 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_ADD_YOUR_TOKENS: {
id: 'TR_ADD_YOUR_TOKENS',
defaultMessage: 'Add your tokens',
},
TR_SEARCH_FOR_THE_TOKEN: {
id: 'TR_SEARCH_FOR_THE_TOKEN',
defaultMessage: 'Search for the token or add them manually by pasting token address into search input.',
},
});
export default definedMessages;

@ -1,13 +1,15 @@
/* @flow */
import React, { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import BigNumber from 'bignumber.js';
import styled from 'styled-components';
import Icon from 'components/Icon';
import colors from 'config/colors';
import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import type { Network, State as ReducersState } from 'flowtype';
import l10nMessages from './index.messages';
type Props = {
network: Network,
@ -131,7 +133,7 @@ class AccountBalance extends PureComponent<Props, State> {
{!this.state.isHidden && (
<React.Fragment>
<BalanceWrapper>
<Label>Balance</Label>
<Label><FormattedMessage {...l10nMessages.TR_BALANCE} /></Label>
{fiatRate && (
<FiatValue>${fiat}</FiatValue>
)}
@ -139,7 +141,7 @@ class AccountBalance extends PureComponent<Props, State> {
</BalanceWrapper>
{fiatRate && (
<BalanceRateWrapper>
<Label>Rate</Label>
<Label><FormattedMessage {...l10nMessages.TR_RATE} /></Label>
<FiatValueRate>${fiatRateValue}</FiatValueRate>
<CoinBalance>1.00 {network.symbol}</CoinBalance>
</BalanceRateWrapper>

@ -0,0 +1,16 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_BALANCE: {
id: 'TR_BALANCE',
defaultMessage: 'Balance',
},
TR_RATE: {
id: 'TR_RATE',
defaultMessage: 'Rate',
},
});
export default definedMessages;

@ -1,6 +1,7 @@
/* @flow */
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import * as TokenActions from 'actions/TokenActions';
@ -8,7 +9,9 @@ import * as TokenActions from 'actions/TokenActions';
import type { State, Dispatch } from 'flowtype';
import Summary from './index';
type OwnProps = { }
type OwnProps = {
intl: any,
}
type StateProps = {
selectedAccount: $ElementType<State, 'selectedAccount'>,
@ -25,7 +28,7 @@ type DispatchProps = {
removeToken: typeof TokenActions.remove,
}
export type Props = StateProps & DispatchProps;
export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@ -42,4 +45,4 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
removeToken: bindActionCreators(TokenActions.remove, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Summary);
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Summary));

@ -9,11 +9,14 @@ import ICONS from 'config/icons';
import colors from 'config/colors';
import Tooltip from 'components/Tooltip';
import Content from 'views/Wallet/components/Content';
import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils';
import Link from 'components/Link';
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
import l10nSummaryMessages from '../common.messages';
import AccountBalance from '../components/Balance';
import AddedToken from '../components/Token';
import AddTokenMessage from '../components/AddTokenMessage';
@ -90,9 +93,16 @@ const AccountSummary = (props: Props) => {
<AccountHeading>
<AccountName>
<CoinLogo network={account.network} />
<AccountTitle>Account #{parseInt(account.index, 10) + 1}</AccountTitle>
<AccountTitle>
<FormattedMessage
{...l10nCommonMessages.TR_ACCOUNT_HASH}
values={{ number: parseInt(account.index, 10) + 1 }}
/>
</AccountTitle>
</AccountName>
<Link href={explorerLink} isGray>See full transaction history</Link>
<Link href={explorerLink} isGray>
<FormattedMessage {...l10nSummaryMessages.TR_SEE_FULL_TRANSACTION_HISTORY} />
</Link>
</AccountHeading>
<AccountBalance
network={network}
@ -100,11 +110,13 @@ const AccountSummary = (props: Props) => {
fiat={props.fiat}
/>
<H2Wrapper>
<H2>Tokens</H2>
<H2>
<FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />
</H2>
<StyledTooltip
maxWidth={200}
placement="top"
content="Insert token name, symbol or address to be able to send it."
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
>
<StyledIcon
icon={ICONS.HELP}
@ -119,9 +131,9 @@ const AccountSummary = (props: Props) => {
defaultOptions
value={null}
isMulti={false}
placeholder="Type in a token name or a token address"
loadingMessage={() => 'Loading...'}
noOptionsMessage={() => 'Token not found'}
placeholder={props.intl.formatMessage(l10nSummaryMessages.TR_TYPE_IN_A_TOKEN_NAME)}
loadingMessage={() => props.intl.formatMessage(l10nCommonMessages.TR_LOADING_DOT_DOT_DOT)}
noOptionsMessage={() => props.intl.formatMessage(l10nSummaryMessages.TR_TOKEN_NOT_FOUND)}
onChange={(token) => {
if (token.name) {
const isAdded = tokens.find(t => t.symbol === token.symbol);
@ -134,7 +146,7 @@ const AccountSummary = (props: Props) => {
formatOptionLabel={(option) => {
const isAdded = tokens.find(t => t.symbol === option.symbol);
if (isAdded) {
return `${option.name} (Already added)`;
return `${option.name} (${props.intl.formatMessage(l10nSummaryMessages.TR_ALREADY_USED)})`;
}
return option.name;
}}

@ -3,16 +3,16 @@ import styled from 'styled-components';
import React from 'react';
import { H2 } from 'components/Heading';
import BigNumber from 'bignumber.js';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import colors from 'config/colors';
import Tooltip from 'components/Tooltip';
import Content from 'views/Wallet/components/Content';
import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils';
import Link from 'components/Link';
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
import l10nSummaryMessages from '../common.messages';
import AccountBalance from './components/Balance';
import type { Props } from './Container';
@ -30,11 +30,6 @@ const H2Wrapper = styled.div`
padding: 20px 0;
`;
const StyledTooltip = styled(Tooltip)`
position: relative;
top: 2px;
`;
const AccountName = styled.div`
display: flex;
justify-content: center;
@ -47,15 +42,6 @@ const AccountTitle = styled.div`
color: ${colors.WALLET_TITLE};
`;
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
&:hover {
cursor: pointer;
}
`;
const AccountSummary = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
@ -83,9 +69,18 @@ const AccountSummary = (props: Props) => {
<AccountHeading>
<AccountName>
<CoinLogo network={account.network} />
<AccountTitle>Account #{parseInt(account.index, 10) + 1}</AccountTitle>
<AccountTitle>
<FormattedMessage
{...l10nCommonMessages.TR_ACCOUNT_HASH}
values={{ number: parseInt(account.index, 10) + 1 }}
/>
</AccountTitle>
</AccountName>
{ !account.empty && <Link href={explorerLink} isGray>See full transaction history</Link> }
{ !account.empty && (
<Link href={explorerLink} isGray>
<FormattedMessage {...l10nSummaryMessages.TR_SEE_FULL_TRANSACTION_HISTORY} />
</Link>
) }
</AccountHeading>
<AccountBalance
network={network}
@ -95,18 +90,7 @@ const AccountSummary = (props: Props) => {
/>
{ TMP_SHOW_HISTORY && (
<H2Wrapper>
<H2>History</H2>
<StyledTooltip
maxWidth={200}
placement="top"
content="Insert token name, symbol or address to be able to send it."
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</StyledTooltip>
<H2><FormattedMessage {...l10nSummaryMessages.TR_HISTORY} /></H2>
</H2Wrapper>
)
}

@ -3,14 +3,17 @@ import React from 'react';
import styled from 'styled-components';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import colors from 'config/colors';
import Notification from 'components/Notification';
import * as TrezorConnectActions from 'actions/TrezorConnectActions';
import type { State, Dispatch } from 'flowtype';
import l10nMessages from './index.messages';
type Props = {
acquiring: boolean;
intl: any,
acquiring: boolean,
acquireDevice: typeof TrezorConnectActions.acquire
}
@ -24,15 +27,15 @@ const Wrapper = styled.div`
const Acquire = (props: Props) => (
<Wrapper>
<Notification
title="Device is used in other window"
message="Do you want to use your device in this window?"
title={props.intl.formatMessage(l10nMessages.TR_DEVICE_USED_IN_OTHER)}
message={props.intl.formatMessage(l10nMessages.TR_USE_YOUR_DEVICE_IN_THIS_WINDOW)}
type="info"
cancelable={false}
isActionInProgress={props.acquiring}
actions={
[
{
label: 'Acquire device',
label: props.intl.formatMessage(l10nMessages.TR_ACQUIRE_DEVICE),
callback: () => {
props.acquireDevice();
},
@ -43,11 +46,11 @@ const Acquire = (props: Props) => (
</Wrapper>
);
export default connect(
export default injectIntl(connect(
(state: State) => ({
acquiring: state.connect.acquiringDevice,
}),
(dispatch: Dispatch) => ({
acquireDevice: bindActionCreators(TrezorConnectActions.acquire, dispatch),
}),
)(Acquire);
)(Acquire));

@ -0,0 +1,20 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_DEVICE_USED_IN_OTHER: {
id: 'TR_DEVICE_USED_IN_OTHER',
defaultMessage: 'Device is used in other window',
},
TR_USE_YOUR_DEVICE_IN_THIS_WINDOW: {
id: 'TR_USE_YOUR_DEVICE_IN_THIS_WINDOW',
defaultMessage: 'Do you want to use your device in this window?',
},
TR_ACQUIRE_DEVICE: {
id: 'TR_ACQUIRE_DEVICE',
defaultMessage: 'Acquire device',
},
});
export default definedMessages;

@ -3,6 +3,9 @@ import styled from 'styled-components';
import { H1 } from 'components/Heading';
import P from 'components/Paragraph';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
display: flex;
@ -29,8 +32,8 @@ const StyledH1 = styled(H1)`
const Bootloader = () => (
<Wrapper>
<Row>
<StyledH1>Your device is in firmware update mode</StyledH1>
<StyledP>Please re-connect it</StyledP>
<StyledH1><FormattedMessage {...l10nMessages.TR_YOUR_DEVICE_IS_IN_FIRMWARE} /></StyledH1>
<StyledP><FormattedMessage {...l10nMessages.TR_PLEASE_RECONNECT_IT} /></StyledP>
</Row>
</Wrapper>
);

@ -0,0 +1,17 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_YOUR_DEVICE_IS_IN_FIRMWARE: {
id: 'TR_YOUR_DEVICE_IS_IN_FIRMWARE',
defaultMessage: 'Your device is in firmware update mode',
},
TR_PLEASE_RECONNECT_IT: {
id: 'TR_PLEASE_RECONNECT_IT',
defaultMessage: 'Please re-connect it',
description: 'Call to action to re-connect Trezor device',
},
});
export default definedMessages;

@ -11,7 +11,7 @@ import { H1 } from 'components/Heading';
import Paragraph from 'components/Paragraph';
import { FormattedMessage } from 'react-intl';
import messages from './index.messages';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
display: flex;
@ -54,8 +54,8 @@ const Dashboard = () => (
<Content>
<Wrapper>
<Row data-test="Dashboard__page__content">
<H1><FormattedMessage {...messages.title} /></H1>
<StyledP><FormattedMessage {...messages.body} /></StyledP>
<H1><FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} /></H1>
<StyledP><FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} /></StyledP>
<Overlay>
<Image src={EthIcon} width={20} />
<Image src={RippleIcon} width={25} />

@ -3,13 +3,13 @@ import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
title: {
id: 'dashboard.selectyourcoin.title',
TR_PLEASE_SELECT_YOUR: {
id: 'TR_PLEASE_SELECT_YOUR',
defaultMessage: 'Please select your coin',
description: 'Title of the dashboard component if coin was not selected',
},
body: {
id: 'dashboard.selectyourcoin.body',
TR_YOU_WILL_GAIN_ACCESS: {
id: 'TR_YOU_WILL_GAIN_ACCESS',
defaultMessage: 'You will gain access to receiving & sending selected coin',
description: 'Content of the dashboard component if coin was not selected',
},

@ -3,6 +3,7 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { H1 } from 'components/Heading';
@ -15,12 +16,14 @@ import { FONT_SIZE } from 'config/variables';
import * as deviceUtils from 'utils/device';
import * as RouterActions from 'actions/RouterActions';
import l10nCommonMessages from 'views/common.messages';
import type {
TrezorDevice,
State,
Dispatch,
} from 'flowtype';
import l10nMessages from './index.messages';
type Props = {
device: ?TrezorDevice;
@ -127,13 +130,19 @@ const FirmwareUpdate = (props: Props) => (
</g>
</svg>
</Image>
<H1>Its time to update your firmware</H1>
<StyledP>Please use Bitcoin wallet interface to update your firmware.</StyledP>
<H1>
<FormattedMessage {...l10nMessages.TR_ITS_TIME_TO_UPDATE_FIRMWARE} />
</H1>
<StyledP>
<FormattedMessage {...l10nMessages.TR_PLEASE_USE_OLD_WALLET} />
</StyledP>
<Link href="https://beta-wallet.trezor.io">
<Button>Take me to the Bitcoin wallet</Button>
<Button>
<FormattedMessage {...l10nCommonMessages.TR_TAKE_ME_TO_BITCOIN_WALLET} />
</Button>
</Link>
{deviceUtils.isDeviceAccessible(props.device) && (
<StyledNavLink to="/">Ill do that later.</StyledNavLink>
<StyledNavLink to="/"><FormattedMessage {...l10nMessages.TR_I_WILL_DO_THAT_LATER} /></StyledNavLink>
)}
</Wrapper>
);

@ -0,0 +1,20 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_ITS_TIME_TO_UPDATE_FIRMWARE: {
id: 'TR_ITS_TIME_TO_UPDATE_FIRMWARE',
defaultMessage: 'Its time to update your firmware',
},
TR_PLEASE_USE_OLD_WALLET: {
id: 'TR_PLEASE_USE_OLD_WALLET',
defaultMessage: 'Please use Bitcoin wallet interface to update your firmware.',
},
TR_I_WILL_DO_THAT_LATER: {
id: 'TR_I_WILL_DO_THAT_LATER',
defaultMessage: 'Ill do that later.',
},
});
export default definedMessages;

@ -4,6 +4,10 @@ import Button from 'components/Button';
import Paragraph from 'components/Paragraph';
import React from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
display: flex;
@ -28,10 +32,10 @@ const StyledParagraph = styled(Paragraph)`
const Initialize = () => (
<Wrapper data-test="Page__device__not__initialized">
<Row>
<H1>Your device is not initialized</H1>
<StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
<H1><FormattedMessage {...l10nMessages.TR_YOUR_DEVICE_IS_NOT_INITIALIZED} /></H1>
<StyledParagraph><FormattedMessage {...l10nMessages.TR_PLEASE_USE_TO_START_INITIALIZATION} /></StyledParagraph>
<A href="https://beta-wallet.trezor.io/">
<Button>Take me to the Bitcoin wallet</Button>
<Button><FormattedMessage {...l10nCommonMessages.TR_TAKE_ME_TO_BITCOIN_WALLET} /></Button>
</A>
</Row>
</Wrapper>

@ -0,0 +1,20 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_YOUR_DEVICE_IS_NOT_INITIALIZED: {
id: 'TR_YOUR_DEVICE_IS_NOT_INITIALIZED',
defaultMessage: 'Your device is not initialized',
},
TR_PLEASE_USE_TO_START_INITIALIZATION: {
id: 'TR_PLEASE_USE_TO_START_INITIALIZATION',
defaultMessage: 'Please use Bitcoin wallet interface to start initialization process',
},
TR_I_WILL_DO_THAT_LATER: {
id: 'TR_I_WILL_DO_THAT_LATER',
defaultMessage: 'Ill do that later.',
},
});
export default definedMessages;

@ -3,6 +3,9 @@ import { H1 } from 'components/Heading';
import Paragraph from 'components/Paragraph';
import React from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
@ -26,8 +29,8 @@ const StyledParagraph = styled(Paragraph)`
const Seedless = () => (
<Wrapper>
<Row>
<H1>Device is in seedless mode</H1>
<StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
<H1><FormattedMessage {...l10nMessages.TR_DEVICE_IS_IN_SEEDLESS} /></H1>
<StyledParagraph><FormattedMessage {...l10nMessages.TR_DEVICE_IS_INITIALIZED_IN_SEEDLESS_MODE} /></StyledParagraph>
</Row>
</Wrapper>
);

@ -0,0 +1,16 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_DEVICE_IS_INITIALIZED_IN_SEEDLESS_MODE: {
id: 'TR_DEVICE_IS_INITIALIZED_IN_SEEDLESS_MODE',
defaultMessage: 'Device is initialized in seedless mode and therefore not allowed to access wallet',
},
TR_DEVICE_IS_IN_SEEDLESS: {
id: 'TR_DEVICE_IS_IN_SEEDLESS',
defaultMessage: 'Device is in seedless mode',
},
});
export default definedMessages;

@ -3,18 +3,21 @@
import React from 'react';
import styled from 'styled-components';
import Notification from 'components/Notification';
import { injectIntl } from 'react-intl';
import l10nMessages from './index.messages';
const Wrapper = styled.div``;
const UnreadableDevice = () => (
const UnreadableDevice = ({ intl }: { intl: any }) => (
<Wrapper>
<Notification
title="Unreadable device"
message="Please install bridge"
title={intl.formatMessage(l10nMessages.TR_UNREADABLE_DEVICE)}
message={intl.formatMessage(l10nMessages.TR_PLEASE_INSTALL_TREZOR_BRIDGE)}
type="error"
cancelable={false}
/>
</Wrapper>
);
export default UnreadableDevice;
export default injectIntl(UnreadableDevice);

@ -0,0 +1,16 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_UNREADABLE_DEVICE: {
id: 'TR_UNREADABLE_DEVICE',
defaultMessage: 'Unreadable device',
},
TR_PLEASE_INSTALL_TREZOR_BRIDGE: {
id: 'TR_PLEASE_INSTALL_TREZOR_BRIDGE',
defaultMessage: 'Please install Trezor Bridge',
},
});
export default definedMessages;

@ -7,6 +7,11 @@ const definedMessages: Messages = defineMessages({
id: 'TR_DEVICE_SETTINGS',
defaultMessage: 'Device settings',
},
TR_ACCOUNT_HASH: {
id: 'TR_ACCOUNT_HASH',
defaultMessage: 'Account #{number}',
description: 'Used in auto-generated account label',
},
TR_CLEAR: {
id: 'TR_CLEAR',
defaultMessage: 'Clear',
@ -21,6 +26,14 @@ const definedMessages: Messages = defineMessages({
defaultMessage: 'Address',
description: 'Used as label for receive/send address input',
},
TR_LOADING_DOT_DOT_DOT: {
id: 'TR_LOADING_DOT_DOT_DOT',
defaultMessage: 'Loading...',
},
TR_TAKE_ME_TO_BITCOIN_WALLET: {
id: 'TR_TAKE_ME_TO_BITCOIN_WALLET',
defaultMessage: 'Take me to the Bitcoin wallet',
},
});
export default definedMessages;
Loading…
Cancel
Save