add intl support for Send and Sign n Verify components

pull/402/head^2
slowbackspace 5 years ago
parent 2111f86077
commit 8a904b4e06

@ -31,6 +31,22 @@ const definedMessages: Messages = defineMessages({
defaultMessage: 'Advanced settings',
description: 'Shows advanced sending form',
},
TR_DEVICE_IS_NOT_CONNECTED: {
id: 'TR_DEVICE_IS_NOT_CONNECTED',
defaultMessage: 'Device is not connected',
},
TR_DEVICE_IS_UNAVAILABLE: {
id: 'TR_DEVICE_IS_UNAVAILABLE',
defaultMessage: 'Device is not unavailable',
},
TR_LOADING_ACCOUNTS: {
id: 'TR_LOADING_ACCOUNTS',
defaultMessage: 'Loading accounts',
},
TR_SEND: {
id: 'TR_SEND',
defaultMessage: 'Send {amount}',
},
});
export default definedMessages;

@ -3,13 +3,16 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import SendFormActions from 'actions/ethereum/SendFormActions';
import { openQrModal } from 'actions/ModalActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import AccountSend from './index';
type OwnProps = {}
type OwnProps = {
intl: any
}
export type StateProps = {
selectedAccount: $ElementType<State, 'selectedAccount'>,
@ -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, OwnProps, StateProps> = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@ -40,4 +43,4 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
});
export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AccountSend));

@ -21,6 +21,7 @@ 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';
@ -274,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 = <FormattedMessage {...l10nSendMessages.TR_SEND} values={{ amount: amountText }} />;
if (!device.connected) {
sendButtonText = 'Device is not connected';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_DEVICE_IS_NOT_CONNECTED} />;
isSendButtonDisabled = true;
} else if (!device.available) {
sendButtonText = 'Device is unavailable';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_DEVICE_IS_UNAVAILABLE} />;
isSendButtonDisabled = true;
} else if (!discovery.completed) {
sendButtonText = 'Loading accounts';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_LOADING_ACCOUNTS} />;
isSendButtonDisabled = true;
}
@ -306,7 +308,7 @@ const AccountSend = (props: Props) => {
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)}

@ -2,6 +2,7 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import SendFormActions from 'actions/ripple/SendFormActions';
import { openQrModal } from 'actions/ModalActions';
@ -9,7 +10,9 @@ import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import AccountSend from './index';
type OwnProps = {}
type OwnProps = {
intl: any
}
export type StateProps = {
selectedAccount: $ElementType<State, 'selectedAccount'>,
@ -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, OwnProps, StateProps> = (state: State): StateProps => ({
selectedAccount: state.selectedAccount,
@ -39,4 +42,4 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
openQrModal: bindActionCreators(openQrModal, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AccountSend));

@ -253,16 +253,15 @@ const AccountSend = (props: Props) => {
}
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
let sendButtonText: string = ` ${total} ${network.symbol}`;
let sendButtonText = <FormattedMessage {...l10nSendMessages.TR_SEND} values={{ amount: `${total} ${network.symbol}` }} />;
if (!device.connected) {
sendButtonText = 'Device is not connected';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_DEVICE_IS_NOT_CONNECTED} />;
isSendButtonDisabled = true;
} else if (!device.available) {
sendButtonText = 'Device is unavailable';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_DEVICE_IS_UNAVAILABLE} />;
isSendButtonDisabled = true;
} else if (!discovery.completed) {
sendButtonText = 'Loading accounts';
sendButtonText = <FormattedMessage {...l10nSendMessages.TR_LOADING_ACCOUNTS} />;
isSendButtonDisabled = true;
}
@ -281,7 +280,7 @@ const AccountSend = (props: Props) => {
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)}

@ -2,13 +2,16 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import SignVerifyActions from 'actions/SignVerifyActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import Component from './index';
type OwnProps = {}
type OwnProps = {
intl: any,
}
export type Error = {
inputName: string,
@ -25,7 +28,7 @@ export type DispatchProps = {
signVerifyActions: typeof SignVerifyActions,
}
export type Props = StateProps & DispatchProps;
export type Props = OwnProps & StateProps & DispatchProps;
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
wallet: state.wallet,
@ -37,4 +40,4 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
signVerifyActions: bindActionCreators(SignVerifyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Component);
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Component));

@ -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';
@ -110,10 +113,10 @@ class SignVerify extends Component <Props> {
<Content>
<Wrapper>
<Sign>
<Title>Sign Message</Title>
<Title><FormattedMessage {...l10nMessages.TR_SIGN_MESSAGE} /></Title>
<Row>
<Input
topLabel="Address"
topLabel={this.props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
name="signAddress"
value={account.descriptor}
type="text"
@ -123,7 +126,7 @@ class SignVerify extends Component <Props> {
</Row>
<Row>
<Textarea
topLabel="Message"
topLabel={this.props.intl.formatMessage(l10nMessages.TR_MESSAGE)}
name="signMessage"
value={signMessage}
onChange={this.handleInputChange}
@ -134,7 +137,7 @@ class SignVerify extends Component <Props> {
</Row>
<Row>
<Textarea
topLabel="Signature"
topLabel={this.props.intl.formatMessage(l10nMessages.TR_SIGNATURE)}
name="signSignature"
value={signSignature}
rows={4}
@ -148,19 +151,20 @@ class SignVerify extends Component <Props> {
<StyledButton
onClick={this.props.signVerifyActions.clearSign}
isWhite
>Clear
>
<FormattedMessage {...l10nCommonMessages.TR_CLEAR} />
</StyledButton>
<StyledButton
onClick={() => signVerifyActions.sign(account.accountPath, signMessage)}
>Sign
><FormattedMessage {...l10nMessages.TR_SIGN} />
</StyledButton>
</RowButtons>
</Sign>
<Verify>
<Title>Verify message</Title>
<Title><FormattedMessage {...l10nMessages.TR_VERIFY_MESSAGE} /></Title>
<Row>
<Input
topLabel="Address"
topLabel={this.props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
autoSelect
name="verifyAddress"
value={verifyAddress}
@ -172,7 +176,7 @@ class SignVerify extends Component <Props> {
</Row>
<Row>
<Textarea
topLabel="Message"
topLabel={this.props.intl.formatMessage(l10nMessages.TR_MESSAGE)}
name="verifyMessage"
value={verifyMessage}
onChange={this.handleInputChange}
@ -183,7 +187,7 @@ class SignVerify extends Component <Props> {
</Row>
<Row>
<Textarea
topLabel="Signature"
topLabel={this.props.intl.formatMessage(l10nMessages.TR_SIGNATURE)}
autoSelect
name="verifySignature"
value={verifySignature}
@ -197,7 +201,8 @@ class SignVerify extends Component <Props> {
<StyledButton
onClick={signVerifyActions.clearVerify}
isWhite
>Clear
>
<FormattedMessage {...l10nCommonMessages.TR_CLEAR} />
</StyledButton>
<StyledButton
onClick={
@ -211,7 +216,8 @@ class SignVerify extends Component <Props> {
}
}
}
>Verify
>
<FormattedMessage {...l10nMessages.TR_VERIFY} />
</StyledButton>
</RowButtons>
</Verify>

@ -0,0 +1,38 @@
/* @flow */
import { defineMessages } from 'react-intl';
import type { Messages } from 'flowtype/npm/react-intl';
const definedMessages: Messages = defineMessages({
TR_MESSAGE: {
id: 'TR_MESSAGE',
defaultMessage: 'Message',
description: 'Used as a label for message input field in Sign and Verify form',
},
TR_SIGNATURE: {
id: 'TR_SIGNATURE',
defaultMessage: 'Signature',
description: 'Used as a label for signature input field in Sign and Verify form',
},
TR_SIGN: {
id: 'TR_SIGN',
defaultMessage: 'Sign',
description: 'Sign button in Sign and Verify form',
},
TR_VERIFY: {
id: 'TR_VERIFY',
defaultMessage: 'Verify',
description: 'Verify button in Sign and Verify form',
},
TR_VERIFY_MESSAGE: {
id: 'TR_VERIFY_MESSAGE',
defaultMessage: 'Verify Message',
description: 'Header for the Sign and Verify form',
},
TR_SIGN_MESSAGE: {
id: 'TR_SIGN_MESSAGE',
defaultMessage: 'Sign Message',
description: 'Header for the Sign and Verify form',
},
});
export default definedMessages;

@ -16,6 +16,11 @@ const definedMessages: Messages = defineMessages({
id: 'TR_CHECK_FOR_DEVICES',
defaultMessage: 'Check for devices',
},
TR_ADDRESS: {
id: 'TR_ADDRESS',
defaultMessage: 'Address',
description: 'Used as label for receive/send address input',
},
});
export default definedMessages;
Loading…
Cancel
Save