mirror of https://github.com/trezor/trezor-wallet
Vaclav Mlejnsky
6 years ago
committed by
GitHub
commit
1f7a4eca5e
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,413 @@
|
||||
/* @flow */
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import EthereumjsUtil from 'ethereumjs-util';
|
||||
import EthereumjsUnits from 'ethereumjs-units';
|
||||
import { findToken } from 'reducers/TokensReducer';
|
||||
import { findDevice, getPendingAmount } from 'reducers/utils';
|
||||
import * as SEND from 'actions/constants/send';
|
||||
|
||||
import type {
|
||||
Dispatch,
|
||||
GetState,
|
||||
PayloadAction,
|
||||
} from 'flowtype';
|
||||
import type { State, FeeLevel } from 'reducers/SendFormReducer';
|
||||
|
||||
// general regular expressions
|
||||
const NUMBER_RE: RegExp = new RegExp('^(0|0\\.([0-9]+)?|[1-9][0-9]*\\.?([0-9]+)?|\\.[0-9]+)$');
|
||||
const UPPERCASE_RE = new RegExp('^(.*[A-Z].*)$');
|
||||
const ABS_RE = new RegExp('^[0-9]+$');
|
||||
const ETH_18_RE = new RegExp('^(0|0\\.([0-9]{0,18})?|[1-9][0-9]*\\.?([0-9]{0,18})?|\\.[0-9]{0,18})$');
|
||||
const HEX_RE = new RegExp('^[0-9A-Fa-f]+$');
|
||||
const dynamicRegexp = (decimals: number): RegExp => {
|
||||
if (decimals > 0) {
|
||||
return new RegExp(`^(0|0\\.([0-9]{0,${decimals}})?|[1-9][0-9]*\\.?([0-9]{0,${decimals}})?|\\.[0-9]{1,${decimals}})$`);
|
||||
}
|
||||
return ABS_RE;
|
||||
};
|
||||
|
||||
/*
|
||||
* Called from SendFormActions.observe
|
||||
* Reaction for WEB3.GAS_PRICE_UPDATED action
|
||||
*/
|
||||
export const onGasPriceUpdated = (network: string, gasPrice: string): PayloadAction<void> => (dispatch: Dispatch, getState: GetState): void => {
|
||||
// testing random data
|
||||
// function getRandomInt(min, max) {
|
||||
// return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
// }
|
||||
// const newPrice = getRandomInt(10, 50).toString();
|
||||
|
||||
const state = getState().sendForm;
|
||||
if (network === state.networkSymbol) return;
|
||||
|
||||
// check if new price is different then currently recommended
|
||||
const newPrice: string = EthereumjsUnits.convert(gasPrice, 'wei', 'gwei');
|
||||
|
||||
if (newPrice !== state.recommendedGasPrice) {
|
||||
if (!state.untouched) {
|
||||
// if there is a transaction draft let the user know
|
||||
// and let him update manually
|
||||
dispatch({
|
||||
type: SEND.CHANGE,
|
||||
state: {
|
||||
...state,
|
||||
gasPriceNeedsUpdate: true,
|
||||
recommendedGasPrice: newPrice,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// automatically update feeLevels and gasPrice
|
||||
const feeLevels = getFeeLevels(state.networkSymbol, newPrice, state.gasLimit);
|
||||
const selectedFeeLevel = getSelectedFeeLevel(feeLevels, state.selectedFeeLevel);
|
||||
dispatch({
|
||||
type: SEND.CHANGE,
|
||||
state: {
|
||||
...state,
|
||||
gasPriceNeedsUpdate: false,
|
||||
recommendedGasPrice: newPrice,
|
||||
gasPrice: selectedFeeLevel.gasPrice,
|
||||
feeLevels,
|
||||
selectedFeeLevel,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Recalculate amount, total and fees
|
||||
*/
|
||||
export const validation = (): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
// clone deep nested object
|
||||
// to avoid overrides across state history
|
||||
let state: State = JSON.parse(JSON.stringify(getState().sendForm));
|
||||
// reset errors
|
||||
state.errors = {};
|
||||
state.warnings = {};
|
||||
state.infos = {};
|
||||
state = dispatch(recalculateTotalAmount(state));
|
||||
state = dispatch(updateCustomFeeLabel(state));
|
||||
state = dispatch(addressValidation(state));
|
||||
state = dispatch(addressLabel(state));
|
||||
state = dispatch(amountValidation(state));
|
||||
state = dispatch(gasLimitValidation(state));
|
||||
state = dispatch(gasPriceValidation(state));
|
||||
state = dispatch(nonceValidation(state));
|
||||
state = dispatch(dataValidation(state));
|
||||
return state;
|
||||
};
|
||||
|
||||
export const recalculateTotalAmount = ($state: State): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
const {
|
||||
account,
|
||||
tokens,
|
||||
pending,
|
||||
} = getState().selectedAccount;
|
||||
if (!account) return $state;
|
||||
|
||||
const state = { ...$state };
|
||||
const isToken = state.currency !== state.networkSymbol;
|
||||
|
||||
if (state.setMax) {
|
||||
const pendingAmount = getPendingAmount(pending, state.currency, isToken);
|
||||
if (isToken) {
|
||||
const token = findToken(tokens, account.address, state.currency, account.deviceState);
|
||||
if (token) {
|
||||
state.amount = new BigNumber(token.balance).minus(pendingAmount).toString(10);
|
||||
}
|
||||
} else {
|
||||
const b = new BigNumber(account.balance).minus(pendingAmount);
|
||||
state.amount = calculateMaxAmount(b, state.gasPrice, state.gasLimit);
|
||||
}
|
||||
}
|
||||
|
||||
state.total = calculateTotal(isToken ? '0' : state.amount, state.gasPrice, state.gasLimit);
|
||||
return state;
|
||||
};
|
||||
|
||||
export const updateCustomFeeLabel = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$state };
|
||||
if ($state.selectedFeeLevel.value === 'Custom') {
|
||||
state.selectedFeeLevel = {
|
||||
...state.selectedFeeLevel,
|
||||
gasPrice: state.gasPrice,
|
||||
label: `${calculateFee(state.gasPrice, state.gasLimit)} ${state.networkSymbol}`,
|
||||
};
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Address value validation
|
||||
*/
|
||||
export const addressValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.address) return state;
|
||||
|
||||
const { address } = state;
|
||||
|
||||
if (address.length < 1) {
|
||||
state.errors.address = 'Address is not set';
|
||||
} else if (!EthereumjsUtil.isValidAddress(address)) {
|
||||
state.errors.address = 'Address is not valid';
|
||||
} else if (address.match(UPPERCASE_RE) && !EthereumjsUtil.isValidChecksumAddress(address)) {
|
||||
state.errors.address = 'Address is not a valid checksum';
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Address label assignation
|
||||
*/
|
||||
export const addressLabel = ($state: State): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.address || state.errors.address) return state;
|
||||
|
||||
const {
|
||||
account,
|
||||
network,
|
||||
} = getState().selectedAccount;
|
||||
if (!account || !network) return state;
|
||||
const { address } = state;
|
||||
|
||||
const savedAccounts = getState().accounts.filter(a => a.address.toLowerCase() === address.toLowerCase());
|
||||
if (savedAccounts.length > 0) {
|
||||
// check if found account belongs to this network
|
||||
const currentNetworkAccount = savedAccounts.find(a => a.network === network.network);
|
||||
if (currentNetworkAccount) {
|
||||
const device = findDevice(getState().devices, currentNetworkAccount.deviceID, currentNetworkAccount.deviceState);
|
||||
if (device) {
|
||||
state.infos.address = `${device.instanceLabel} Account #${(currentNetworkAccount.index + 1)}`;
|
||||
}
|
||||
} else {
|
||||
// corner-case: the same derivation path is used on different networks
|
||||
const otherNetworkAccount = savedAccounts[0];
|
||||
const device = findDevice(getState().devices, otherNetworkAccount.deviceID, otherNetworkAccount.deviceState);
|
||||
const { coins } = getState().localStorage.config;
|
||||
const otherNetwork = coins.find(c => c.network === otherNetworkAccount.network);
|
||||
if (device && otherNetwork) {
|
||||
state.warnings.address = `Looks like it's ${device.instanceLabel} Account #${(otherNetworkAccount.index + 1)} address of ${otherNetwork.name} network`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Amount value validation
|
||||
*/
|
||||
export const amountValidation = ($state: State): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.amount) return state;
|
||||
|
||||
const {
|
||||
account,
|
||||
tokens,
|
||||
pending,
|
||||
} = getState().selectedAccount;
|
||||
if (!account) return state;
|
||||
|
||||
const { amount } = state;
|
||||
if (amount.length < 1) {
|
||||
state.errors.amount = 'Amount is not set';
|
||||
} else if (amount.length > 0 && !amount.match(NUMBER_RE)) {
|
||||
state.errors.amount = 'Amount is not a number';
|
||||
} else {
|
||||
const isToken: boolean = state.currency !== state.networkSymbol;
|
||||
const pendingAmount: BigNumber = getPendingAmount(pending, state.currency, isToken);
|
||||
|
||||
if (isToken) {
|
||||
const token = findToken(tokens, account.address, state.currency, account.deviceState);
|
||||
if (!token) return state;
|
||||
const decimalRegExp = dynamicRegexp(parseInt(token.decimals, 0));
|
||||
|
||||
if (!state.amount.match(decimalRegExp)) {
|
||||
state.errors.amount = `Maximum ${token.decimals} decimals allowed`;
|
||||
} else if (new BigNumber(state.total).greaterThan(account.balance)) {
|
||||
state.errors.amount = `Not enough ${state.networkSymbol} to cover transaction fee`;
|
||||
} else if (new BigNumber(state.amount).greaterThan(new BigNumber(token.balance).minus(pendingAmount))) {
|
||||
state.errors.amount = 'Not enough funds';
|
||||
} else if (new BigNumber(state.amount).lessThanOrEqualTo('0')) {
|
||||
state.errors.amount = 'Amount is too low';
|
||||
}
|
||||
} else if (!state.amount.match(ETH_18_RE)) {
|
||||
state.errors.amount = 'Maximum 18 decimals allowed';
|
||||
} else if (new BigNumber(state.total).greaterThan(new BigNumber(account.balance).minus(pendingAmount))) {
|
||||
state.errors.amount = 'Not enough funds';
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Gas limit value validation
|
||||
*/
|
||||
export const gasLimitValidation = ($state: State): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.gasLimit) return state;
|
||||
|
||||
const {
|
||||
network,
|
||||
} = getState().selectedAccount;
|
||||
if (!network) return state;
|
||||
|
||||
const { gasLimit } = state;
|
||||
if (gasLimit.length < 1) {
|
||||
state.errors.gasLimit = 'Gas limit is not set';
|
||||
} else if (gasLimit.length > 0 && !gasLimit.match(NUMBER_RE)) {
|
||||
state.errors.gasLimit = 'Gas limit is not a number';
|
||||
} else {
|
||||
const gl: BigNumber = new BigNumber(gasLimit);
|
||||
if (gl.lessThan(1)) {
|
||||
state.errors.gasLimit = 'Gas limit is too low';
|
||||
} else if (gl.lessThan(state.currency !== state.networkSymbol ? network.defaultGasLimitTokens : network.defaultGasLimit)) {
|
||||
state.warnings.gasLimit = 'Gas limit is below recommended';
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Gas price value validation
|
||||
*/
|
||||
export const gasPriceValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.gasPrice) return state;
|
||||
|
||||
const { gasPrice } = state;
|
||||
if (gasPrice.length < 1) {
|
||||
state.errors.gasPrice = 'Gas price is not set';
|
||||
} else if (gasPrice.length > 0 && !gasPrice.match(NUMBER_RE)) {
|
||||
state.errors.gasPrice = 'Gas price is not a number';
|
||||
} else {
|
||||
const gp: BigNumber = new BigNumber(gasPrice);
|
||||
if (gp.greaterThan(1000)) {
|
||||
state.warnings.gasPrice = 'Gas price is too high';
|
||||
} else if (gp.lessThanOrEqualTo('0')) {
|
||||
state.errors.gasPrice = 'Gas price is too low';
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Nonce value validation
|
||||
*/
|
||||
export const nonceValidation = ($state: State): PayloadAction<State> => (dispatch: Dispatch, getState: GetState): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.nonce) return state;
|
||||
|
||||
const {
|
||||
account,
|
||||
} = getState().selectedAccount;
|
||||
if (!account) return state;
|
||||
|
||||
const { nonce } = state;
|
||||
if (nonce.length < 1) {
|
||||
state.errors.nonce = 'Nonce is not set';
|
||||
} else if (!nonce.match(ABS_RE)) {
|
||||
state.errors.nonce = 'Nonce is not a valid number';
|
||||
} else {
|
||||
const n: BigNumber = new BigNumber(nonce);
|
||||
if (n.lessThan(account.nonce)) {
|
||||
state.warnings.nonce = 'Nonce is lower than recommended';
|
||||
} else if (n.greaterThan(account.nonce)) {
|
||||
state.warnings.nonce = 'Nonce is greater than recommended';
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* Gas price value validation
|
||||
*/
|
||||
export const dataValidation = ($state: State): PayloadAction<State> => (): State => {
|
||||
const state = { ...$state };
|
||||
if (!state.touched.data || state.data.length === 0) return state;
|
||||
if (!HEX_RE.test(state.data)) {
|
||||
state.errors.data = 'Data is not valid hexadecimal';
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
/*
|
||||
* UTILITIES
|
||||
*/
|
||||
|
||||
export const calculateFee = (gasPrice: string, gasLimit: string): string => {
|
||||
try {
|
||||
return EthereumjsUnits.convert(new BigNumber(gasPrice).times(gasLimit), 'gwei', 'ether');
|
||||
} catch (error) {
|
||||
return '0';
|
||||
}
|
||||
};
|
||||
|
||||
export const calculateTotal = (amount: string, gasPrice: string, gasLimit: string): string => {
|
||||
try {
|
||||
return new BigNumber(amount).plus(calculateFee(gasPrice, gasLimit)).toString(10);
|
||||
} catch (error) {
|
||||
return '0';
|
||||
}
|
||||
};
|
||||
|
||||
export const calculateMaxAmount = (balance: BigNumber, gasPrice: string, gasLimit: string): string => {
|
||||
try {
|
||||
// TODO - minus pendings
|
||||
const fee = calculateFee(gasPrice, gasLimit);
|
||||
const max = balance.minus(fee);
|
||||
if (max.lessThan(0)) return '0';
|
||||
return max.toString(10);
|
||||
} catch (error) {
|
||||
return '0';
|
||||
}
|
||||
};
|
||||
|
||||
export const getFeeLevels = (symbol: string, gasPrice: BigNumber | string, gasLimit: string, selected?: FeeLevel): Array<FeeLevel> => {
|
||||
const price: BigNumber = typeof gasPrice === 'string' ? new BigNumber(gasPrice) : gasPrice;
|
||||
const quarter: BigNumber = price.dividedBy(4);
|
||||
const high: string = price.plus(quarter.times(2)).toString(10);
|
||||
const low: string = price.minus(quarter.times(2)).toString(10);
|
||||
|
||||
const customLevel: FeeLevel = selected && selected.value === 'Custom' ? {
|
||||
value: 'Custom',
|
||||
gasPrice: selected.gasPrice,
|
||||
// label: `${ calculateFee(gasPrice, gasLimit) } ${ symbol }`
|
||||
label: `${calculateFee(selected.gasPrice, gasLimit)} ${symbol}`,
|
||||
} : {
|
||||
value: 'Custom',
|
||||
gasPrice: low,
|
||||
label: '',
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
value: 'High',
|
||||
gasPrice: high,
|
||||
label: `${calculateFee(high, gasLimit)} ${symbol}`,
|
||||
},
|
||||
{
|
||||
value: 'Normal',
|
||||
gasPrice: gasPrice.toString(),
|
||||
label: `${calculateFee(price.toString(10), gasLimit)} ${symbol}`,
|
||||
},
|
||||
{
|
||||
value: 'Low',
|
||||
gasPrice: low,
|
||||
label: `${calculateFee(low, gasLimit)} ${symbol}`,
|
||||
},
|
||||
customLevel,
|
||||
];
|
||||
};
|
||||
|
||||
export const getSelectedFeeLevel = (feeLevels: Array<FeeLevel>, selected: FeeLevel): FeeLevel => {
|
||||
const { value } = selected;
|
||||
let selectedFeeLevel: ?FeeLevel;
|
||||
selectedFeeLevel = feeLevels.find(f => f.value === value);
|
||||
if (!selectedFeeLevel) {
|
||||
// fallback to default
|
||||
selectedFeeLevel = feeLevels.find(f => f.value === 'Normal');
|
||||
}
|
||||
return selectedFeeLevel || selected;
|
||||
};
|
||||
@ -1,23 +1,9 @@
|
||||
/* @flow */
|
||||
|
||||
|
||||
export const INIT: 'send__init' = 'send__init';
|
||||
export const DISPOSE: 'send__dispose' = 'send__dispose';
|
||||
export const CHANGE: 'send__change' = 'send__change';
|
||||
export const VALIDATION: 'send__validation' = 'send__validation';
|
||||
export const ADDRESS_VALIDATION: 'send__address_validation' = 'send__address_validation';
|
||||
export const ADDRESS_CHANGE: 'send__address_change' = 'send__address_change';
|
||||
export const AMOUNT_CHANGE: 'send__amount_change' = 'send__amount_change';
|
||||
export const SET_MAX: 'send__set_max' = 'send__set_max';
|
||||
export const CURRENCY_CHANGE: 'send__currency_change' = 'send__currency_change';
|
||||
export const FEE_LEVEL_CHANGE: 'send__fee_level_change' = 'send__fee_level_change';
|
||||
export const GAS_PRICE_CHANGE: 'send__gas_price_change' = 'send__gas_price_change';
|
||||
export const GAS_LIMIT_CHANGE: 'send__gas_limit_change' = 'send__gas_limit_change';
|
||||
export const NONCE_CHANGE: 'send__nonce_change' = 'send__nonce_change';
|
||||
export const UPDATE_FEE_LEVELS: 'send__update_fee_levels' = 'send__update_fee_levels';
|
||||
export const DATA_CHANGE: 'send__data_change' = 'send__data_change';
|
||||
export const SEND: 'send__submit' = 'send__submit';
|
||||
export const TX_SENDING: 'send__tx_sending' = 'send__tx_sending';
|
||||
export const TX_COMPLETE: 'send__tx_complete' = 'send__tx_complete';
|
||||
export const TX_ERROR: 'send__tx_error' = 'send__tx_error';
|
||||
export const TOGGLE_ADVANCED: 'send__toggle_advanced' = 'send__toggle_advanced';
|
||||
|
||||
export const FROM_SESSION_STORAGE: 'send__from_session_storage' = 'send__from_session_storage';
|
||||
@ -0,0 +1,219 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
|
||||
import Input from 'components/inputs/Input';
|
||||
import Textarea from 'components/Textarea';
|
||||
import Tooltip from 'components/Tooltip';
|
||||
import Icon from 'components/Icon';
|
||||
import Link from 'components/Link';
|
||||
import ICONS from 'config/icons';
|
||||
|
||||
import type { Props } from '../../Container';
|
||||
|
||||
const InputRow = styled.div`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const InputLabelWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const GreenSpan = styled.span`
|
||||
color: ${colors.GREEN_PRIMARY};
|
||||
`;
|
||||
|
||||
const AdvancedSettingsWrapper = styled.div`
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
border-top: 1px solid ${colors.DIVIDER};
|
||||
`;
|
||||
|
||||
const GasInputRow = styled(InputRow)`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const GasInput = styled(Input)`
|
||||
&:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTextarea = styled(Textarea)`
|
||||
margin-bottom: 20px;
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
const AdvancedSettingsSendButtonWrapper = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const getGasLimitInputState = (gasLimitErrors: string, gasLimitWarnings: string): string => {
|
||||
let state = '';
|
||||
if (gasLimitWarnings && !gasLimitErrors) {
|
||||
state = 'warning';
|
||||
}
|
||||
if (gasLimitErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string): string => {
|
||||
let state = '';
|
||||
if (gasPriceWarnings && !gasPriceErrors) {
|
||||
state = 'warning';
|
||||
}
|
||||
if (gasPriceErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
// stateless component
|
||||
const AdvancedForm = (props: Props) => {
|
||||
const {
|
||||
network,
|
||||
} = props.selectedAccount;
|
||||
if (!network) return null;
|
||||
const {
|
||||
networkSymbol,
|
||||
currency,
|
||||
recommendedGasPrice,
|
||||
errors,
|
||||
warnings,
|
||||
infos,
|
||||
data,
|
||||
gasLimit,
|
||||
gasPrice,
|
||||
} = props.sendForm;
|
||||
const {
|
||||
onGasLimitChange,
|
||||
onGasPriceChange,
|
||||
onDataChange,
|
||||
} = props.sendFormActions;
|
||||
|
||||
let gasLimitTooltipCurrency: string;
|
||||
let gasLimitTooltipValue: string;
|
||||
if (networkSymbol !== currency) {
|
||||
gasLimitTooltipCurrency = 'tokens';
|
||||
gasLimitTooltipValue = network.defaultGasLimitTokens.toString(10);
|
||||
} else {
|
||||
gasLimitTooltipCurrency = networkSymbol;
|
||||
gasLimitTooltipValue = network.defaultGasLimit.toString(10);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdvancedSettingsWrapper>
|
||||
<GasInputRow>
|
||||
<GasInput
|
||||
state={getGasLimitInputState(errors.gasLimit, warnings.gasLimit)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel={(
|
||||
<InputLabelWrapper>
|
||||
Gas limit
|
||||
<Tooltip
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Gas limit is the amount of gas to send with your transaction.<br />
|
||||
<GreenSpan>TX fee = gas price * gas limit</GreenSpan> & is paid to miners for including your TX in a block.<br />
|
||||
Increasing this number will not get your TX mined faster.<br />
|
||||
Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>
|
||||
</React.Fragment>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</Tooltip>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit}
|
||||
value={gasLimit}
|
||||
isDisabled={networkSymbol === currency && data.length > 0}
|
||||
onChange={event => onGasLimitChange(event.target.value)}
|
||||
/>
|
||||
|
||||
<GasInput
|
||||
state={getGasPriceInputState(errors.gasPrice, warnings.gasPrice)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel={(
|
||||
<InputLabelWrapper>
|
||||
Gas price
|
||||
<Tooltip
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Gas Price is the amount you pay per unit of gas.<br />
|
||||
<GreenSpan>TX fee = gas price * gas limit</GreenSpan> & is paid to miners for including your TX in a block.<br />
|
||||
Higher the gas price = faster transaction, but more expensive. Recommended is <GreenSpan>{recommendedGasPrice} GWEI.</GreenSpan><br />
|
||||
<Link href="https://myetherwallet.github.io/knowledge-base/gas/what-is-gas-ethereum.html" target="_blank" rel="noreferrer noopener" isGreen>Read more</Link>
|
||||
</React.Fragment>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</Tooltip>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
|
||||
value={gasPrice}
|
||||
onChange={event => onGasPriceChange(event.target.value)}
|
||||
/>
|
||||
</GasInputRow>
|
||||
|
||||
<StyledTextarea
|
||||
topLabel={(
|
||||
<InputLabelWrapper>
|
||||
Data
|
||||
<Tooltip
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Data is usually used when you send transactions to contracts.
|
||||
</React.Fragment>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</Tooltip>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
bottomText={errors.data || warnings.data || infos.data}
|
||||
disabled={networkSymbol !== currency}
|
||||
value={networkSymbol !== currency ? '' : data}
|
||||
onChange={event => onDataChange(event.target.value)}
|
||||
/>
|
||||
|
||||
<AdvancedSettingsSendButtonWrapper>
|
||||
{ props.children }
|
||||
</AdvancedSettingsSendButtonWrapper>
|
||||
</AdvancedSettingsWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedForm;
|
||||
Loading…
Reference in new issue