mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-27 10:48:22 +00:00
l10n support for validation in eth send form
This commit is contained in:
parent
d84af20a73
commit
0c4d9d7311
@ -427,7 +427,8 @@ export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => (
|
||||
}
|
||||
newGasPrice = feeLevel.gasPrice;
|
||||
}
|
||||
|
||||
console.log('selected');
|
||||
console.log(feeLevel);
|
||||
dispatch({
|
||||
type: SEND.CHANGE,
|
||||
networkType: 'ethereum',
|
||||
|
@ -5,7 +5,6 @@ import EthereumjsUtil from 'ethereumjs-util';
|
||||
import EthereumjsUnits from 'ethereumjs-units';
|
||||
import { findDevice, getPendingAmount, findToken } from 'reducers/utils';
|
||||
import { toFiatCurrency } from 'utils/fiatConverter';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import * as SEND from 'actions/constants/send';
|
||||
import * as ethUtils from 'utils/ethUtils';
|
||||
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 { State, FeeLevel } from 'reducers/SendFormEthereumReducer';
|
||||
import l10nMessages from 'views/Wallet/views/Account/Send/validation.messages';
|
||||
import l10nCommonMessages from 'views/common.messages';
|
||||
|
||||
/*
|
||||
* Called from SendFormActions.observe
|
||||
* Reaction for WEB3.GAS_PRICE_UPDATED action
|
||||
@ -144,15 +145,7 @@ export const updateCustomFeeLabel = ($state: State): PayloadAction<State> => ():
|
||||
/*
|
||||
* Address value validation
|
||||
*/
|
||||
export const addressValidation = ($state: State): PayloadAction<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();
|
||||
|
||||
export const addressValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.address) return state;
|
||||
|
||||
@ -160,16 +153,16 @@ export const addressValidation = ($state: State): PayloadAction<State> => (
|
||||
|
||||
if (address.length < 1) {
|
||||
// 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)) {
|
||||
// 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 (
|
||||
validators.hasUppercase(address) &&
|
||||
!EthereumjsUtil.isValidChecksumAddress(address)
|
||||
) {
|
||||
// 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;
|
||||
};
|
||||
@ -201,9 +194,13 @@ export const addressLabel = ($state: State): PayloadAction<State> => (
|
||||
currentNetworkAccount.deviceState
|
||||
);
|
||||
if (device) {
|
||||
state.infos.address = `${
|
||||
device.instanceLabel
|
||||
} Account #${currentNetworkAccount.index + 1}`;
|
||||
state.infos.address = {
|
||||
...l10nCommonMessages.TR_DEVICE_LABEL_ACCOUNT_HASH,
|
||||
values: {
|
||||
deviceLabel: device.instanceLabel,
|
||||
number: currentNetworkAccount.index + 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
} else {
|
||||
// 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 otherNetwork = networks.find(c => c.shortcut === otherNetworkAccount.network);
|
||||
if (device && otherNetwork) {
|
||||
state.warnings.address = `Looks like it's ${
|
||||
device.instanceLabel
|
||||
} Account #${otherNetworkAccount.index + 1} address of ${
|
||||
otherNetwork.name
|
||||
} network`;
|
||||
state.warnings.address = {
|
||||
...l10nCommonMessages.TR_LOOKS_LIKE_IT_IS_DEVICE_LABEL,
|
||||
values: {
|
||||
deviceLabel: device.instanceLabel,
|
||||
number: otherNetworkAccount.index + 1,
|
||||
network: otherNetwork.name,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -241,18 +241,13 @@ export const amountValidation = ($state: State): PayloadAction<State> => (
|
||||
const { account, tokens, pending } = getState().selectedAccount;
|
||||
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;
|
||||
if (amount.length < 1) {
|
||||
// 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)) {
|
||||
// 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 {
|
||||
const isToken: boolean = state.currency !== state.networkSymbol;
|
||||
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))) {
|
||||
// state.errors.amount = `Maximum ${token.decimals} decimals allowed`;
|
||||
state.errors.amount = intl.formatMessage(l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED, {
|
||||
decimals: token.decimals,
|
||||
});
|
||||
state.errors.amount = {
|
||||
...l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED,
|
||||
values: { decimals: token.decimals },
|
||||
};
|
||||
} else if (new BigNumber(state.total).isGreaterThan(account.balance)) {
|
||||
state.errors.amount = intl.formatMessage(
|
||||
l10nMessages.TR_NOT_ENOUGH_FUNDS_TO_COVER_TRANSACTION,
|
||||
{
|
||||
state.errors.amount = {
|
||||
...l10nMessages.TR_NOT_ENOUGH_FUNDS_TO_COVER_TRANSACTION,
|
||||
values: {
|
||||
networkSymbol: state.networkSymbol,
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
// state.errors.amount = `Not enough ${state.networkSymbol} to cover transaction fee`;
|
||||
} else if (
|
||||
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 = intl.formatMessage(l10nMessages.TR_NOT_ENOUGH_FUNDS);
|
||||
state.errors.amount = l10nMessages.TR_NOT_ENOUGH_FUNDS;
|
||||
} else if (new BigNumber(state.amount).isLessThanOrEqualTo('0')) {
|
||||
// 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 = intl.formatMessage(l10nMessages.TR_AMOUNT_IS_TOO_LOW);
|
||||
state.errors.amount = l10nMessages.TR_AMOUNT_IS_TOO_LOW;
|
||||
}
|
||||
} else if (!validators.hasDecimals(state.amount, 18)) {
|
||||
// state.errors.amount = 'Maximum 18 decimals allowed';
|
||||
state.errors.amount = intl.formatMessage(l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED, {
|
||||
decimals: 18,
|
||||
});
|
||||
state.errors.amount = {
|
||||
...l10nMessages.TR_MAXIMUM_DECIMALS_ALLOWED,
|
||||
values: {
|
||||
decimals: 18,
|
||||
},
|
||||
};
|
||||
} else if (
|
||||
new BigNumber(state.total).isGreaterThan(
|
||||
new BigNumber(account.balance).minus(pendingAmount)
|
||||
)
|
||||
) {
|
||||
// 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;
|
||||
@ -321,23 +320,18 @@ export const gasLimitValidation = ($state: State): PayloadAction<State> => (
|
||||
const { network } = getState().selectedAccount;
|
||||
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;
|
||||
if (gasLimit.length < 1) {
|
||||
// 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)) {
|
||||
// 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 {
|
||||
const gl: BigNumber = new BigNumber(gasLimit);
|
||||
if (gl.isLessThan(1)) {
|
||||
// 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 (
|
||||
gl.isLessThan(
|
||||
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 = intl.formatMessage(
|
||||
l10nMessages.TR_GAS_LIMIT_IS_BELOW_RECOMMENDED
|
||||
);
|
||||
state.warnings.gasLimit = l10nMessages.TR_GAS_LIMIT_IS_BELOW_RECOMMENDED;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
@ -357,33 +349,25 @@ export const gasLimitValidation = ($state: State): PayloadAction<State> => (
|
||||
/*
|
||||
* Gas price value validation
|
||||
*/
|
||||
export const gasPriceValidation = ($state: State): PayloadAction<State> => (
|
||||
dispatch: Dispatch,
|
||||
getState: GetState
|
||||
): State => {
|
||||
export const gasPriceValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$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;
|
||||
if (gasPrice.length < 1) {
|
||||
// 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)) {
|
||||
// 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 {
|
||||
const gp: BigNumber = new BigNumber(gasPrice);
|
||||
if (gp.isGreaterThan(1000)) {
|
||||
// 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')) {
|
||||
// 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;
|
||||
@ -399,33 +383,24 @@ export const nonceValidation = ($state: State): PayloadAction<State> => (
|
||||
const state = { ...$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;
|
||||
if (!account || account.networkType !== 'ethereum') return state;
|
||||
|
||||
const { nonce } = state;
|
||||
if (nonce.length < 1) {
|
||||
// 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)) {
|
||||
// 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 {
|
||||
const n: BigNumber = new BigNumber(nonce);
|
||||
if (n.isLessThan(account.nonce)) {
|
||||
// state.warnings.nonce = 'Nonce is lower than recommended';
|
||||
state.warnings.nonce = intl.formatMessage(
|
||||
l10nMessages.TR_NONCE_IS_LOWER_THAN_RECOMMENDED
|
||||
);
|
||||
state.warnings.nonce = l10nMessages.TR_NONCE_IS_LOWER_THAN_RECOMMENDED;
|
||||
} else if (n.isGreaterThan(account.nonce)) {
|
||||
// state.warnings.nonce = 'Nonce is greater than recommended';
|
||||
state.warnings.nonce = intl.formatMessage(
|
||||
l10nMessages.TR_NONCE_IS_GREATER_THAN_RECOMMENDED
|
||||
);
|
||||
state.warnings.nonce = l10nMessages.TR_NONCE_IS_GREATER_THAN_RECOMMENDED;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
@ -434,21 +409,13 @@ export const nonceValidation = ($state: State): PayloadAction<State> => (
|
||||
/*
|
||||
* Data validation
|
||||
*/
|
||||
export const dataValidation = ($state: State): PayloadAction<State> => (
|
||||
dispatch: Dispatch,
|
||||
getState: GetState
|
||||
): State => {
|
||||
export const dataValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$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)) {
|
||||
// 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;
|
||||
};
|
||||
@ -513,29 +480,38 @@ export const getFeeLevels = (
|
||||
selected && selected.value === 'Custom'
|
||||
? {
|
||||
value: 'Custom',
|
||||
localizedValue: l10nCommonMessages.TR_CUSTOM_FEE,
|
||||
gasPrice: selected.gasPrice,
|
||||
// label: `${ calculateFee(gasPrice, gasLimit) } ${ symbol }`
|
||||
label: `${calculateFee(selected.gasPrice, gasLimit)} ${symbol}`,
|
||||
}
|
||||
: {
|
||||
value: 'Custom',
|
||||
localizedValue: l10nCommonMessages.TR_CUSTOM_FEE,
|
||||
gasPrice: low,
|
||||
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 [
|
||||
{
|
||||
value: 'High',
|
||||
localizedValue: l10nCommonMessages.TR_HIGH_FEE,
|
||||
gasPrice: high,
|
||||
label: `${calculateFee(high, gasLimit)} ${symbol}`,
|
||||
},
|
||||
{
|
||||
value: 'Normal',
|
||||
localizedValue: l10nCommonMessages.TR_NORMAL_FEE,
|
||||
gasPrice: gasPrice.toString(),
|
||||
label: `${calculateFee(price.toFixed(), gasLimit)} ${symbol}`,
|
||||
},
|
||||
{
|
||||
value: 'Low',
|
||||
localizedValue: l10nCommonMessages.TR_LOW_FEE,
|
||||
gasPrice: low,
|
||||
label: `${calculateFee(low, gasLimit)} ${symbol}`,
|
||||
},
|
||||
|
@ -110,6 +110,7 @@ export const init = (): AsyncAction => async (
|
||||
|
||||
const blockchainFeeLevels = dispatch(BlockchainActions.getFeeLevels(network));
|
||||
const feeLevels = dispatch(ValidationActions.getFeeLevels(blockchainFeeLevels));
|
||||
console.log(feeLevels);
|
||||
const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(
|
||||
feeLevels,
|
||||
initialState.selectedFeeLevel
|
||||
|
@ -3,7 +3,8 @@
|
||||
import * as SEND from 'actions/constants/send';
|
||||
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 = {
|
||||
label: string,
|
||||
@ -36,9 +37,9 @@ export type State = {
|
||||
nonce: string,
|
||||
total: string,
|
||||
|
||||
errors: { [k: string]: string },
|
||||
warnings: { [k: string]: string },
|
||||
infos: { [k: string]: string },
|
||||
errors: { [k: string]: MessageDescriptor },
|
||||
warnings: { [k: string]: MessageDescriptor },
|
||||
infos: { [k: string]: MessageDescriptor },
|
||||
|
||||
sending: boolean,
|
||||
};
|
||||
@ -62,6 +63,7 @@ export const initialState: State = {
|
||||
label: 'Normal',
|
||||
gasPrice: '0',
|
||||
value: 'Normal',
|
||||
localizedValue: l10nCommonMessages.TR_NORMAL_FEE,
|
||||
},
|
||||
recommendedGasPrice: '0',
|
||||
gasPriceNeedsUpdate: false,
|
||||
|
@ -63,7 +63,7 @@ export type MessageDescriptor = {
|
||||
defaultMessage: string,
|
||||
// Context for the translator about how it's used in the UI
|
||||
description?: string,
|
||||
values: { [key: string]: any },
|
||||
values?: { [key: string]: any },
|
||||
};
|
||||
|
||||
export type Messages = {
|
||||
|
@ -81,7 +81,7 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const getGasLimitInputState = (gasLimitErrors: string, gasLimitWarnings: string): ?string => {
|
||||
const getGasLimitInputState = (gasLimitErrors: boolean, gasLimitWarnings: boolean): ?string => {
|
||||
let state = null;
|
||||
if (gasLimitWarnings && !gasLimitErrors) {
|
||||
state = 'warning';
|
||||
@ -92,7 +92,7 @@ const getGasLimitInputState = (gasLimitErrors: string, gasLimitWarnings: string)
|
||||
return state;
|
||||
};
|
||||
|
||||
const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string): ?string => {
|
||||
const getGasPriceInputState = (gasPriceErrors: boolean, gasPriceWarnings: boolean): ?string => {
|
||||
let state = null;
|
||||
if (gasPriceWarnings && !gasPriceErrors) {
|
||||
state = 'warning';
|
||||
@ -103,7 +103,7 @@ const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string)
|
||||
return state;
|
||||
};
|
||||
|
||||
const getDataTextareaState = (dataError: string, dataWarning: string): ?string => {
|
||||
const getDataTextareaState = (dataError: boolean, dataWarning: boolean): ?string => {
|
||||
let state = null;
|
||||
if (dataWarning) {
|
||||
state = 'warning';
|
||||
@ -177,7 +177,7 @@ const AdvancedForm = (props: Props) => {
|
||||
<AdvancedSettingsWrapper>
|
||||
<GasInputRow>
|
||||
<GasInput
|
||||
state={getGasLimitInputState(errors.gasLimit, warnings.gasLimit)}
|
||||
state={getGasLimitInputState(!!errors.gasLimit, !!warnings.gasLimit)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
@ -245,7 +245,7 @@ const AdvancedForm = (props: Props) => {
|
||||
/>
|
||||
|
||||
<GasInput
|
||||
state={getGasPriceInputState(errors.gasPrice, warnings.gasPrice)}
|
||||
state={getGasPriceInputState(!!errors.gasPrice, !!warnings.gasPrice)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
@ -322,7 +322,7 @@ const AdvancedForm = (props: Props) => {
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
}
|
||||
state={getDataTextareaState(errors.data, warnings.data)}
|
||||
state={getDataTextareaState(!!errors.data, !!warnings.data)}
|
||||
bottomText={errors.data || warnings.data || infos.data}
|
||||
isDisabled={networkSymbol !== currency}
|
||||
value={networkSymbol !== currency ? '' : data}
|
||||
|
@ -204,8 +204,8 @@ const StyledIcon = styled(Icon)`
|
||||
// render helpers
|
||||
const getAddressInputState = (
|
||||
address: string,
|
||||
addressErrors: string,
|
||||
addressWarnings: string
|
||||
addressErrors: boolean,
|
||||
addressWarnings: boolean
|
||||
): ?string => {
|
||||
let state = null;
|
||||
if (address && !addressErrors) {
|
||||
@ -220,7 +220,7 @@ const getAddressInputState = (
|
||||
return state;
|
||||
};
|
||||
|
||||
const getAmountInputState = (amountErrors: string, amountWarnings: string): ?string => {
|
||||
const getAmountInputState = (amountErrors: boolean, amountWarnings: boolean): ?string => {
|
||||
let state = null;
|
||||
if (amountWarnings && !amountErrors) {
|
||||
state = 'warning';
|
||||
@ -347,13 +347,19 @@ const AccountSend = (props: Props) => {
|
||||
</Title>
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||
state={getAddressInputState(address, !!errors.address, !!warnings.address)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
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}
|
||||
onChange={event => onAddressChange(event.target.value)}
|
||||
sideAddons={[
|
||||
@ -365,7 +371,7 @@ const AccountSend = (props: Props) => {
|
||||
</InputRow>
|
||||
<AmountRow>
|
||||
<Input
|
||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||
state={getAmountInputState(!!errors.amount, !!warnings.amount)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
@ -391,7 +397,13 @@ const AccountSend = (props: Props) => {
|
||||
}
|
||||
value={amount}
|
||||
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={[
|
||||
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isWhite={!setMax}>
|
||||
{!setMax && (
|
||||
@ -420,7 +432,7 @@ const AccountSend = (props: Props) => {
|
||||
<LocalAmountWrapper>
|
||||
<EqualsSign>=</EqualsSign>
|
||||
<LocalAmountInput
|
||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||
state={getAmountInputState(!!errors.amount, !!warnings.amount)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
@ -468,7 +480,10 @@ const AccountSend = (props: Props) => {
|
||||
options={feeLevels}
|
||||
formatOptionLabel={option => (
|
||||
<FeeOptionWrapper>
|
||||
<OptionValue>{option.value}</OptionValue>
|
||||
{console.log(option)}
|
||||
<OptionValue>
|
||||
<FormattedMessage {...option.localizedValue} />
|
||||
</OptionValue>
|
||||
<OptionLabel>{option.label}</OptionLabel>
|
||||
</FeeOptionWrapper>
|
||||
)}
|
||||
|
@ -11,26 +11,6 @@ const definedMessages: Messages = defineMessages({
|
||||
id: 'YOU_HAVE_TOKEN_BALANCE',
|
||||
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;
|
||||
|
@ -16,6 +16,16 @@ const definedMessages: Messages = defineMessages({
|
||||
defaultMessage: 'Account #{number}',
|
||||
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: {
|
||||
id: 'TR_IMPORTED_ACCOUNT_HASH',
|
||||
defaultMessage: 'Imported account #{number}',
|
||||
@ -100,6 +110,26 @@ const definedMessages: Messages = defineMessages({
|
||||
id: 'TR_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;
|
||||
|
Loading…
Reference in New Issue
Block a user