l10n support for validation in eth send form

pull/539/head
slowbackspace 5 years ago
parent d84af20a73
commit 0c4d9d7311

@ -427,7 +427,8 @@ export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => (
} }
newGasPrice = feeLevel.gasPrice; newGasPrice = feeLevel.gasPrice;
} }
console.log('selected');
console.log(feeLevel);
dispatch({ dispatch({
type: SEND.CHANGE, type: SEND.CHANGE,
networkType: 'ethereum', networkType: 'ethereum',

@ -5,7 +5,6 @@ import EthereumjsUtil from 'ethereumjs-util';
import EthereumjsUnits from 'ethereumjs-units'; import EthereumjsUnits from 'ethereumjs-units';
import { findDevice, getPendingAmount, findToken } from 'reducers/utils'; import { findDevice, getPendingAmount, findToken } from 'reducers/utils';
import { toFiatCurrency } from 'utils/fiatConverter'; import { toFiatCurrency } from 'utils/fiatConverter';
import { IntlProvider } from 'react-intl';
import * as SEND from 'actions/constants/send'; import * as SEND from 'actions/constants/send';
import * as ethUtils from 'utils/ethUtils'; import * as ethUtils from 'utils/ethUtils';
import * as validators from 'utils/validators'; import * as validators from 'utils/validators';
@ -13,6 +12,8 @@ import * as validators from 'utils/validators';
import type { Dispatch, GetState, PayloadAction } from 'flowtype'; import type { Dispatch, GetState, PayloadAction } from 'flowtype';
import type { State, FeeLevel } from 'reducers/SendFormEthereumReducer'; import type { State, FeeLevel } from 'reducers/SendFormEthereumReducer';
import l10nMessages from 'views/Wallet/views/Account/Send/validation.messages'; import l10nMessages from 'views/Wallet/views/Account/Send/validation.messages';
import l10nCommonMessages from 'views/common.messages';
/* /*
* Called from SendFormActions.observe * Called from SendFormActions.observe
* Reaction for WEB3.GAS_PRICE_UPDATED action * Reaction for WEB3.GAS_PRICE_UPDATED action
@ -144,15 +145,7 @@ export const updateCustomFeeLabel = ($state: State): PayloadAction<State> => ():
/* /*
* Address value validation * Address value validation
*/ */
export const addressValidation = ($state: State): PayloadAction<State> => ( export const addressValidation = ($state: State): PayloadAction<State> => (): State => {
dispatch: Dispatch,
getState: GetState
): State => {
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
const state = { ...$state }; const state = { ...$state };
if (!state.touched.address) return state; if (!state.touched.address) return state;
@ -160,16 +153,16 @@ export const addressValidation = ($state: State): PayloadAction<State> => (
if (address.length < 1) { if (address.length < 1) {
// state.errors.address = 'Address is not set'; // state.errors.address = 'Address is not set';
state.errors.address = intl.formatMessage(l10nMessages.TR_ADDRESS_IS_NOT_SET); state.errors.address = l10nMessages.TR_ADDRESS_IS_NOT_SET;
} else if (!EthereumjsUtil.isValidAddress(address)) { } else if (!EthereumjsUtil.isValidAddress(address)) {
// state.errors.address = 'Address is not valid'; // state.errors.address = 'Address is not valid';
state.errors.address = intl.formatMessage(l10nMessages.TR_ADDRESS_IS_NOT_VALID); state.errors.address = l10nMessages.TR_ADDRESS_IS_NOT_VALID;
} else if ( } else if (
validators.hasUppercase(address) && validators.hasUppercase(address) &&
!EthereumjsUtil.isValidChecksumAddress(address) !EthereumjsUtil.isValidChecksumAddress(address)
) { ) {
// state.errors.address = 'Address is not a valid checksum'; // state.errors.address = 'Address is not a valid checksum';
state.errors.address = intl.formatMessage(l10nMessages.TR_ADDRESS_CHECKSUM_IS_NOT_VALID); state.errors.address = l10nMessages.TR_ADDRESS_CHECKSUM_IS_NOT_VALID;
} }
return state; return state;
}; };
@ -201,9 +194,13 @@ export const addressLabel = ($state: State): PayloadAction<State> => (
currentNetworkAccount.deviceState currentNetworkAccount.deviceState
); );
if (device) { if (device) {
state.infos.address = `${ state.infos.address = {
device.instanceLabel ...l10nCommonMessages.TR_DEVICE_LABEL_ACCOUNT_HASH,
} Account #${currentNetworkAccount.index + 1}`; values: {
deviceLabel: device.instanceLabel,
number: currentNetworkAccount.index + 1,
},
};
} }
} else { } else {
// corner-case: the same derivation path is used on different networks // corner-case: the same derivation path is used on different networks
@ -216,11 +213,14 @@ export const addressLabel = ($state: State): PayloadAction<State> => (
const { networks } = getState().localStorage.config; const { networks } = getState().localStorage.config;
const otherNetwork = networks.find(c => c.shortcut === otherNetworkAccount.network); const otherNetwork = networks.find(c => c.shortcut === otherNetworkAccount.network);
if (device && otherNetwork) { if (device && otherNetwork) {
state.warnings.address = `Looks like it's ${ state.warnings.address = {
device.instanceLabel ...l10nCommonMessages.TR_LOOKS_LIKE_IT_IS_DEVICE_LABEL,
} Account #${otherNetworkAccount.index + 1} address of ${ values: {
otherNetwork.name deviceLabel: device.instanceLabel,
} network`; number: otherNetworkAccount.index + 1,
network: otherNetwork.name,
},
};
} }
} }
} }
@ -241,18 +241,13 @@ export const amountValidation = ($state: State): PayloadAction<State> => (
const { account, tokens, pending } = getState().selectedAccount; const { account, tokens, pending } = getState().selectedAccount;
if (!account) return state; if (!account) return state;
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
const { amount } = state; const { amount } = state;
if (amount.length < 1) { if (amount.length < 1) {
// state.errors.amount = 'Amount is not set'; // state.errors.amount = 'Amount is not set';
state.errors.amount = intl.formatMessage(l10nMessages.TR_AMOUNT_IS_NOT_SET); state.errors.amount = l10nMessages.TR_AMOUNT_IS_NOT_SET;
} else if (amount.length > 0 && !validators.isNumber(amount)) { } else if (amount.length > 0 && !validators.isNumber(amount)) {
// state.errors.amount = 'Amount is not a number'; // state.errors.amount = 'Amount is not a number';
state.errors.amount = intl.formatMessage(l10nMessages.TR_AMOUNT_IS_NOT_A_NUMBER); state.errors.amount = l10nMessages.TR_AMOUNT_IS_NOT_A_NUMBER;
} else { } else {
const isToken: boolean = state.currency !== state.networkSymbol; const isToken: boolean = state.currency !== state.networkSymbol;
const pendingAmount: BigNumber = getPendingAmount(pending, state.currency, isToken); const pendingAmount: BigNumber = getPendingAmount(pending, state.currency, isToken);
@ -268,16 +263,17 @@ export const amountValidation = ($state: State): PayloadAction<State> => (
if (!validators.hasDecimals(state.amount, parseInt(token.decimals, 0))) { if (!validators.hasDecimals(state.amount, parseInt(token.decimals, 0))) {
// state.errors.amount = `Maximum ${token.decimals} decimals allowed`; // state.errors.amount = `Maximum ${token.decimals} decimals allowed`;
state.errors.amount = intl.formatMessage(l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED, { state.errors.amount = {
decimals: token.decimals, ...l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED,
}); values: { decimals: token.decimals },
};
} else if (new BigNumber(state.total).isGreaterThan(account.balance)) { } else if (new BigNumber(state.total).isGreaterThan(account.balance)) {
state.errors.amount = intl.formatMessage( state.errors.amount = {
l10nMessages.TR_NOT_ENOUGH_FUNDS_TO_COVER_TRANSACTION, ...l10nMessages.TR_NOT_ENOUGH_FUNDS_TO_COVER_TRANSACTION,
{ values: {
networkSymbol: state.networkSymbol, networkSymbol: state.networkSymbol,
} },
); };
// state.errors.amount = `Not enough ${state.networkSymbol} to cover transaction fee`; // state.errors.amount = `Not enough ${state.networkSymbol} to cover transaction fee`;
} else if ( } else if (
new BigNumber(state.amount).isGreaterThan( new BigNumber(state.amount).isGreaterThan(
@ -285,24 +281,27 @@ export const amountValidation = ($state: State): PayloadAction<State> => (
) )
) { ) {
// state.errors.amount = 'Not enough funds'; // state.errors.amount = 'Not enough funds';
state.errors.amount = intl.formatMessage(l10nMessages.TR_NOT_ENOUGH_FUNDS); state.errors.amount = l10nMessages.TR_NOT_ENOUGH_FUNDS;
} else if (new BigNumber(state.amount).isLessThanOrEqualTo('0')) { } else if (new BigNumber(state.amount).isLessThanOrEqualTo('0')) {
// TODO: this is never gonna happen! It will fail in second if condiftion (isNumber validation) // TODO: this is never gonna happen! It will fail in second if condiftion (isNumber validation)
// state.errors.amount = 'Amount is too low'; // state.errors.amount = 'Amount is too low';
state.errors.amount = intl.formatMessage(l10nMessages.TR_AMOUNT_IS_TOO_LOW); state.errors.amount = l10nMessages.TR_AMOUNT_IS_TOO_LOW;
} }
} else if (!validators.hasDecimals(state.amount, 18)) { } else if (!validators.hasDecimals(state.amount, 18)) {
// state.errors.amount = 'Maximum 18 decimals allowed'; // state.errors.amount = 'Maximum 18 decimals allowed';
state.errors.amount = intl.formatMessage(l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED, { state.errors.amount = {
decimals: 18, ...l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED,
}); values: {
decimals: 18,
},
};
} else if ( } else if (
new BigNumber(state.total).isGreaterThan( new BigNumber(state.total).isGreaterThan(
new BigNumber(account.balance).minus(pendingAmount) new BigNumber(account.balance).minus(pendingAmount)
) )
) { ) {
// state.errors.amount = 'Not enough funds'; // state.errors.amount = 'Not enough funds';
state.errors.amount = intl.formatMessage(l10nMessages.TR_NOT_ENOUGH_FUNDS); state.errors.amount = l10nMessages.TR_NOT_ENOUGH_FUNDS;
} }
} }
return state; return state;
@ -321,23 +320,18 @@ export const gasLimitValidation = ($state: State): PayloadAction<State> => (
const { network } = getState().selectedAccount; const { network } = getState().selectedAccount;
if (!network) return state; if (!network) return state;
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
const { gasLimit } = state; const { gasLimit } = state;
if (gasLimit.length < 1) { if (gasLimit.length < 1) {
// state.errors.gasLimit = 'Gas limit is not set'; // state.errors.gasLimit = 'Gas limit is not set';
state.errors.gasLimit = intl.formatMessage(l10nMessages.TR_GAS_LIMIT_IS_NOT_SET); state.errors.gasLimit = l10nMessages.TR_GAS_LIMIT_IS_NOT_SET;
} else if (gasLimit.length > 0 && !validators.isNumber(gasLimit)) { } else if (gasLimit.length > 0 && !validators.isNumber(gasLimit)) {
// state.errors.gasLimit = 'Gas limit is not a number'; // state.errors.gasLimit = 'Gas limit is not a number';
state.errors.gasLimit = intl.formatMessage(l10nMessages.TR_GAS_LIMIT_IS_NOT_A_NUMBER); state.errors.gasLimit = l10nMessages.TR_GAS_LIMIT_IS_NOT_A_NUMBER;
} else { } else {
const gl: BigNumber = new BigNumber(gasLimit); const gl: BigNumber = new BigNumber(gasLimit);
if (gl.isLessThan(1)) { if (gl.isLessThan(1)) {
// state.errors.gasLimit = 'Gas limit is too low'; // state.errors.gasLimit = 'Gas limit is too low';
state.errors.gasLimit = intl.formatMessage(l10nMessages.TR_GAS_LIMIT_IS_TOO_LOW); state.errors.gasLimit = l10nMessages.TR_GAS_LIMIT_IS_TOO_LOW;
} else if ( } else if (
gl.isLessThan( gl.isLessThan(
state.currency !== state.networkSymbol state.currency !== state.networkSymbol
@ -346,9 +340,7 @@ export const gasLimitValidation = ($state: State): PayloadAction<State> => (
) )
) { ) {
// state.warnings.gasLimit = 'Gas limit is below recommended'; // state.warnings.gasLimit = 'Gas limit is below recommended';
state.warnings.gasLimit = intl.formatMessage( state.warnings.gasLimit = l10nMessages.TR_GAS_LIMIT_IS_BELOW_RECOMMENDED;
l10nMessages.TR_GAS_LIMIT_IS_BELOW_RECOMMENDED
);
} }
} }
return state; return state;
@ -357,33 +349,25 @@ export const gasLimitValidation = ($state: State): PayloadAction<State> => (
/* /*
* Gas price value validation * Gas price value validation
*/ */
export const gasPriceValidation = ($state: State): PayloadAction<State> => ( export const gasPriceValidation = ($state: State): PayloadAction<State> => (): State => {
dispatch: Dispatch,
getState: GetState
): State => {
const state = { ...$state }; const state = { ...$state };
if (!state.touched.gasPrice) return state; if (!state.touched.gasPrice) return state;
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
const { gasPrice } = state; const { gasPrice } = state;
if (gasPrice.length < 1) { if (gasPrice.length < 1) {
// state.errors.gasPrice = 'Gas price is not set'; // state.errors.gasPrice = 'Gas price is not set';
state.errors.gasPrice = intl.formatMessage(l10nMessages.TR_GAS_PRICE_IS_NOT_SET); state.errors.gasPrice = l10nMessages.TR_GAS_PRICE_IS_NOT_SET;
} else if (gasPrice.length > 0 && !validators.isNumber(gasPrice)) { } else if (gasPrice.length > 0 && !validators.isNumber(gasPrice)) {
// state.errors.gasPrice = 'Gas price is not a number'; // state.errors.gasPrice = 'Gas price is not a number';
state.errors.gasPrice = intl.formatMessage(l10nMessages.TR_GAS_PRICE_IS_NOT_A_NUMBER); state.errors.gasPrice = l10nMessages.TR_GAS_PRICE_IS_NOT_A_NUMBER;
} else { } else {
const gp: BigNumber = new BigNumber(gasPrice); const gp: BigNumber = new BigNumber(gasPrice);
if (gp.isGreaterThan(1000)) { if (gp.isGreaterThan(1000)) {
// state.warnings.gasPrice = 'Gas price is too high'; // state.warnings.gasPrice = 'Gas price is too high';
state.warnings.gasPrice = intl.formatMessage(l10nMessages.TR_GAS_PRICE_IS_TOO_HIGH); state.warnings.gasPrice = l10nMessages.TR_GAS_PRICE_IS_TOO_HIGH;
} else if (gp.isLessThanOrEqualTo('0')) { } else if (gp.isLessThanOrEqualTo('0')) {
// state.errors.gasPrice = 'Gas price is too low'; // state.errors.gasPrice = 'Gas price is too low';
state.errors.gasPrice = intl.formatMessage(l10nMessages.TR_GAS_PRICE_IS_TOO_LOW); state.errors.gasPrice = l10nMessages.TR_GAS_PRICE_IS_TOO_LOW;
} }
} }
return state; return state;
@ -399,33 +383,24 @@ export const nonceValidation = ($state: State): PayloadAction<State> => (
const state = { ...$state }; const state = { ...$state };
if (!state.touched.nonce) return state; if (!state.touched.nonce) return state;
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
const { account } = getState().selectedAccount; const { account } = getState().selectedAccount;
if (!account || account.networkType !== 'ethereum') return state; if (!account || account.networkType !== 'ethereum') return state;
const { nonce } = state; const { nonce } = state;
if (nonce.length < 1) { if (nonce.length < 1) {
// state.errors.nonce = 'Nonce is not set'; // state.errors.nonce = 'Nonce is not set';
state.errors.nonce = intl.formatMessage(l10nMessages.TR_NONCE_IS_NOT_SET); state.errors.nonce = l10nMessages.TR_NONCE_IS_NOT_SET;
} else if (!validators.isAbs(nonce)) { } else if (!validators.isAbs(nonce)) {
// state.errors.nonce = 'Nonce is not a valid number'; // state.errors.nonce = 'Nonce is not a valid number';
state.errors.nonce = intl.formatMessage(l10nMessages.TR_NONCE_IS_NOT_A_NUMBER); state.errors.nonce = l10nMessages.TR_NONCE_IS_NOT_A_NUMBER;
} else { } else {
const n: BigNumber = new BigNumber(nonce); const n: BigNumber = new BigNumber(nonce);
if (n.isLessThan(account.nonce)) { if (n.isLessThan(account.nonce)) {
// state.warnings.nonce = 'Nonce is lower than recommended'; // state.warnings.nonce = 'Nonce is lower than recommended';
state.warnings.nonce = intl.formatMessage( state.warnings.nonce = l10nMessages.TR_NONCE_IS_LOWER_THAN_RECOMMENDED;
l10nMessages.TR_NONCE_IS_LOWER_THAN_RECOMMENDED
);
} else if (n.isGreaterThan(account.nonce)) { } else if (n.isGreaterThan(account.nonce)) {
// state.warnings.nonce = 'Nonce is greater than recommended'; // state.warnings.nonce = 'Nonce is greater than recommended';
state.warnings.nonce = intl.formatMessage( state.warnings.nonce = l10nMessages.TR_NONCE_IS_GREATER_THAN_RECOMMENDED;
l10nMessages.TR_NONCE_IS_GREATER_THAN_RECOMMENDED
);
} }
} }
return state; return state;
@ -434,21 +409,13 @@ export const nonceValidation = ($state: State): PayloadAction<State> => (
/* /*
* Data validation * Data validation
*/ */
export const dataValidation = ($state: State): PayloadAction<State> => ( export const dataValidation = ($state: State): PayloadAction<State> => (): State => {
dispatch: Dispatch,
getState: GetState
): State => {
const state = { ...$state }; const state = { ...$state };
if (!state.touched.data || state.data.length === 0) return state; if (!state.touched.data || state.data.length === 0) return state;
// get react-intl imperative api
const { language, messages } = getState().wallet;
const intlProvider = new IntlProvider({ language, messages });
const { intl } = intlProvider.getChildContext();
if (!ethUtils.isHex(state.data)) { if (!ethUtils.isHex(state.data)) {
// state.errors.data = 'Data is not valid hexadecimal'; // state.errors.data = 'Data is not valid hexadecimal';
state.errors.data = intl.formatMessage(l10nMessages.TR_DATA_IS_NOT_VALID_HEX); state.errors.data = l10nMessages.TR_DATA_IS_NOT_VALID_HEX;
} }
return state; return state;
}; };
@ -513,29 +480,38 @@ export const getFeeLevels = (
selected && selected.value === 'Custom' selected && selected.value === 'Custom'
? { ? {
value: 'Custom', value: 'Custom',
localizedValue: l10nCommonMessages.TR_CUSTOM_FEE,
gasPrice: selected.gasPrice, gasPrice: selected.gasPrice,
// label: `${ calculateFee(gasPrice, gasLimit) } ${ symbol }` // label: `${ calculateFee(gasPrice, gasLimit) } ${ symbol }`
label: `${calculateFee(selected.gasPrice, gasLimit)} ${symbol}`, label: `${calculateFee(selected.gasPrice, gasLimit)} ${symbol}`,
} }
: { : {
value: 'Custom', value: 'Custom',
localizedValue: l10nCommonMessages.TR_CUSTOM_FEE,
gasPrice: low, gasPrice: low,
label: '', label: '',
}; };
console.log(l10nCommonMessages.TR_LOW_FEE);
console.log(l10nCommonMessages.TR_NORMAL_FEE);
console.log(l10nCommonMessages.TR_HIGH_FEE);
console.log(l10nCommonMessages.TR_CUSTOM_FEE);
return [ return [
{ {
value: 'High', value: 'High',
localizedValue: l10nCommonMessages.TR_HIGH_FEE,
gasPrice: high, gasPrice: high,
label: `${calculateFee(high, gasLimit)} ${symbol}`, label: `${calculateFee(high, gasLimit)} ${symbol}`,
}, },
{ {
value: 'Normal', value: 'Normal',
localizedValue: l10nCommonMessages.TR_NORMAL_FEE,
gasPrice: gasPrice.toString(), gasPrice: gasPrice.toString(),
label: `${calculateFee(price.toFixed(), gasLimit)} ${symbol}`, label: `${calculateFee(price.toFixed(), gasLimit)} ${symbol}`,
}, },
{ {
value: 'Low', value: 'Low',
localizedValue: l10nCommonMessages.TR_LOW_FEE,
gasPrice: low, gasPrice: low,
label: `${calculateFee(low, gasLimit)} ${symbol}`, label: `${calculateFee(low, gasLimit)} ${symbol}`,
}, },

@ -110,6 +110,7 @@ export const init = (): AsyncAction => async (
const blockchainFeeLevels = dispatch(BlockchainActions.getFeeLevels(network)); const blockchainFeeLevels = dispatch(BlockchainActions.getFeeLevels(network));
const feeLevels = dispatch(ValidationActions.getFeeLevels(blockchainFeeLevels)); const feeLevels = dispatch(ValidationActions.getFeeLevels(blockchainFeeLevels));
console.log(feeLevels);
const selectedFeeLevel = ValidationActions.getSelectedFeeLevel( const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(
feeLevels, feeLevels,
initialState.selectedFeeLevel initialState.selectedFeeLevel

@ -3,7 +3,8 @@
import * as SEND from 'actions/constants/send'; import * as SEND from 'actions/constants/send';
import * as ACCOUNT from 'actions/constants/account'; import * as ACCOUNT from 'actions/constants/account';
import type { Action } from 'flowtype'; import type { Action, MessageDescriptor } from 'flowtype';
import l10nCommonMessages from 'views/common.messages';
export type FeeLevel = { export type FeeLevel = {
label: string, label: string,
@ -36,9 +37,9 @@ export type State = {
nonce: string, nonce: string,
total: string, total: string,
errors: { [k: string]: string }, errors: { [k: string]: MessageDescriptor },
warnings: { [k: string]: string }, warnings: { [k: string]: MessageDescriptor },
infos: { [k: string]: string }, infos: { [k: string]: MessageDescriptor },
sending: boolean, sending: boolean,
}; };
@ -62,6 +63,7 @@ export const initialState: State = {
label: 'Normal', label: 'Normal',
gasPrice: '0', gasPrice: '0',
value: 'Normal', value: 'Normal',
localizedValue: l10nCommonMessages.TR_NORMAL_FEE,
}, },
recommendedGasPrice: '0', recommendedGasPrice: '0',
gasPriceNeedsUpdate: false, gasPriceNeedsUpdate: false,

@ -63,7 +63,7 @@ export type MessageDescriptor = {
defaultMessage: string, defaultMessage: string,
// Context for the translator about how it's used in the UI // Context for the translator about how it's used in the UI
description?: string, description?: string,
values: { [key: string]: any }, values?: { [key: string]: any },
}; };
export type Messages = { export type Messages = {

@ -81,7 +81,7 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
justify-content: flex-end; justify-content: flex-end;
`; `;
const getGasLimitInputState = (gasLimitErrors: string, gasLimitWarnings: string): ?string => { const getGasLimitInputState = (gasLimitErrors: boolean, gasLimitWarnings: boolean): ?string => {
let state = null; let state = null;
if (gasLimitWarnings && !gasLimitErrors) { if (gasLimitWarnings && !gasLimitErrors) {
state = 'warning'; state = 'warning';
@ -92,7 +92,7 @@ const getGasLimitInputState = (gasLimitErrors: string, gasLimitWarnings: string)
return state; return state;
}; };
const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string): ?string => { const getGasPriceInputState = (gasPriceErrors: boolean, gasPriceWarnings: boolean): ?string => {
let state = null; let state = null;
if (gasPriceWarnings && !gasPriceErrors) { if (gasPriceWarnings && !gasPriceErrors) {
state = 'warning'; state = 'warning';
@ -103,7 +103,7 @@ const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string)
return state; return state;
}; };
const getDataTextareaState = (dataError: string, dataWarning: string): ?string => { const getDataTextareaState = (dataError: boolean, dataWarning: boolean): ?string => {
let state = null; let state = null;
if (dataWarning) { if (dataWarning) {
state = 'warning'; state = 'warning';
@ -177,7 +177,7 @@ const AdvancedForm = (props: Props) => {
<AdvancedSettingsWrapper> <AdvancedSettingsWrapper>
<GasInputRow> <GasInputRow>
<GasInput <GasInput
state={getGasLimitInputState(errors.gasLimit, warnings.gasLimit)} state={getGasLimitInputState(!!errors.gasLimit, !!warnings.gasLimit)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
@ -245,7 +245,7 @@ const AdvancedForm = (props: Props) => {
/> />
<GasInput <GasInput
state={getGasPriceInputState(errors.gasPrice, warnings.gasPrice)} state={getGasPriceInputState(!!errors.gasPrice, !!warnings.gasPrice)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
@ -322,7 +322,7 @@ const AdvancedForm = (props: Props) => {
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }
state={getDataTextareaState(errors.data, warnings.data)} state={getDataTextareaState(!!errors.data, !!warnings.data)}
bottomText={errors.data || warnings.data || infos.data} bottomText={errors.data || warnings.data || infos.data}
isDisabled={networkSymbol !== currency} isDisabled={networkSymbol !== currency}
value={networkSymbol !== currency ? '' : data} value={networkSymbol !== currency ? '' : data}

@ -204,8 +204,8 @@ const StyledIcon = styled(Icon)`
// render helpers // render helpers
const getAddressInputState = ( const getAddressInputState = (
address: string, address: string,
addressErrors: string, addressErrors: boolean,
addressWarnings: string addressWarnings: boolean
): ?string => { ): ?string => {
let state = null; let state = null;
if (address && !addressErrors) { if (address && !addressErrors) {
@ -220,7 +220,7 @@ const getAddressInputState = (
return state; return state;
}; };
const getAmountInputState = (amountErrors: string, amountWarnings: string): ?string => { const getAmountInputState = (amountErrors: boolean, amountWarnings: boolean): ?string => {
let state = null; let state = null;
if (amountWarnings && !amountErrors) { if (amountWarnings && !amountErrors) {
state = 'warning'; state = 'warning';
@ -347,13 +347,19 @@ const AccountSend = (props: Props) => {
</Title> </Title>
<InputRow> <InputRow>
<Input <Input
state={getAddressInputState(address, errors.address, warnings.address)} state={getAddressInputState(address, !!errors.address, !!warnings.address)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
spellCheck="false" spellCheck="false"
topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)} topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
bottomText={errors.address || warnings.address || infos.address} bottomText={
<>
{errors.address && <FormattedMessage {...errors.address} />}
{warnings.address && <FormattedMessage {...warnings.address} />}
{infos.address && <FormattedMessage {...infos.address} />}
</>
}
value={address} value={address}
onChange={event => onAddressChange(event.target.value)} onChange={event => onAddressChange(event.target.value)}
sideAddons={[ sideAddons={[
@ -365,7 +371,7 @@ const AccountSend = (props: Props) => {
</InputRow> </InputRow>
<AmountRow> <AmountRow>
<Input <Input
state={getAmountInputState(errors.amount, warnings.amount)} state={getAmountInputState(!!errors.amount, !!warnings.amount)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
@ -391,7 +397,13 @@ const AccountSend = (props: Props) => {
} }
value={amount} value={amount}
onChange={event => onAmountChange(event.target.value)} onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount} bottomText={
<>
{errors.amount && <FormattedMessage {...errors.amount} />}
{warnings.amount && <FormattedMessage {...warnings.amount} />}
{infos.amount && <FormattedMessage {...infos.amount} />}
</>
}
sideAddons={[ sideAddons={[
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isWhite={!setMax}> <SetMaxAmountButton key="icon" onClick={() => onSetMax()} isWhite={!setMax}>
{!setMax && ( {!setMax && (
@ -420,7 +432,7 @@ const AccountSend = (props: Props) => {
<LocalAmountWrapper> <LocalAmountWrapper>
<EqualsSign>=</EqualsSign> <EqualsSign>=</EqualsSign>
<LocalAmountInput <LocalAmountInput
state={getAmountInputState(errors.amount, warnings.amount)} state={getAmountInputState(!!errors.amount, !!warnings.amount)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
@ -468,7 +480,10 @@ const AccountSend = (props: Props) => {
options={feeLevels} options={feeLevels}
formatOptionLabel={option => ( formatOptionLabel={option => (
<FeeOptionWrapper> <FeeOptionWrapper>
<OptionValue>{option.value}</OptionValue> {console.log(option)}
<OptionValue>
<FormattedMessage {...option.localizedValue} />
</OptionValue>
<OptionLabel>{option.label}</OptionLabel> <OptionLabel>{option.label}</OptionLabel>
</FeeOptionWrapper> </FeeOptionWrapper>
)} )}

@ -11,26 +11,6 @@ const definedMessages: Messages = defineMessages({
id: 'YOU_HAVE_TOKEN_BALANCE', id: 'YOU_HAVE_TOKEN_BALANCE',
defaultMessage: 'You have: {tokenBalance}', defaultMessage: 'You have: {tokenBalance}',
}, },
TR_HIGH_FEE: {
id: 'TR_HIGH_FEE',
defaultMessage: 'High',
description: 'fee level',
},
TR_NORMAL_FEE: {
id: 'TR_NORMAL_FEE',
defaultMessage: 'Normal',
description: 'fee level',
},
TR_LOW_FEE: {
id: 'TR_LOW_FEE',
defaultMessage: 'Low',
description: 'fee level',
},
TR_CUSTOM_FEE: {
id: 'TR_CUSTOM_FEE',
defaultMessage: 'Custom',
description: 'fee level',
},
}); });
export default definedMessages; export default definedMessages;

@ -16,6 +16,16 @@ const definedMessages: Messages = defineMessages({
defaultMessage: 'Account #{number}', defaultMessage: 'Account #{number}',
description: 'Used in auto-generated account label', description: 'Used in auto-generated account label',
}, },
TR_DEVICE_LABEL_ACCOUNT_HASH: {
id: 'TR_DEVICE_LABEL_ACCOUNT_HASH',
defaultMessage: '{deviceLabel} Account #{number}',
description: 'Used in auto-generated account label',
},
TR_LOOKS_LIKE_IT_IS_DEVICE_LABEL: {
id: 'TR_LOOKS_LIKE_IT_IS_DEVICE_LABEL',
defaultMessage: 'Looks like it is {deviceLabel} Account #{number} of {network}',
description: 'Example: Looks like it is My Trezor Account #1 of ETH',
},
TR_IMPORTED_ACCOUNT_HASH: { TR_IMPORTED_ACCOUNT_HASH: {
id: 'TR_IMPORTED_ACCOUNT_HASH', id: 'TR_IMPORTED_ACCOUNT_HASH',
defaultMessage: 'Imported account #{number}', defaultMessage: 'Imported account #{number}',
@ -100,6 +110,26 @@ const definedMessages: Messages = defineMessages({
id: 'TR_SHOW_ADDRESS_I_WILL_TAKE_THE_RISK', id: 'TR_SHOW_ADDRESS_I_WILL_TAKE_THE_RISK',
defaultMessage: 'Show address, I will take the risk', defaultMessage: 'Show address, I will take the risk',
}, },
TR_HIGH_FEE: {
id: 'TR_HIGH_FEE',
defaultMessage: 'High',
description: 'fee level',
},
TR_NORMAL_FEE: {
id: 'TR_NORMAL_FEE',
defaultMessage: 'Normal',
description: 'fee level',
},
TR_LOW_FEE: {
id: 'TR_LOW_FEE',
defaultMessage: 'Low',
description: 'fee level',
},
TR_CUSTOM_FEE: {
id: 'TR_CUSTOM_FEE',
defaultMessage: 'Custom',
description: 'fee level',
},
}); });
export default definedMessages; export default definedMessages;

Loading…
Cancel
Save