arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Merge pull request #77 from satoshilabs/fix/sendform

Browse Source 
Fix/sendform
This commit is contained in:
Vaclav Mlejnsky 2018-09-24 10:13:44 +02:00 committed by GitHub
commit 1f7a4eca5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1371 additions and 1375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/actions/BlockchainActions.js
View File

@ -1,42 +1,26 @@
/* @flow */
import Web3 from 'web3';
import HDKey from 'hdkey';
import EthereumjsUtil from 'ethereumjs-util';
import EthereumjsUnits from 'ethereumjs-units';
import EthereumjsTx from 'ethereumjs-tx';
import TrezorConnect from 'trezor-connect';
import BigNumber from 'bignumber.js';
import type { EstimateGasOptions } from 'web3';
import type { TransactionStatus, TransactionReceipt } from 'web3';
import { strip } from 'utils/ethUtils';
import * as BLOCKCHAIN from 'actions/constants/blockchain';
import * as WEB3 from 'actions/constants/web3';
import * as PENDING from 'actions/constants/pendingTx';
import * as AccountsActions from './AccountsActions';
import * as Web3Actions from './Web3Actions';
import type {
TrezorDevice,
Dispatch,
GetState,
Action,
AsyncAction,
PromiseAction,
ThunkAction,
} from 'flowtype';
import type { EthereumAccount } from 'trezor-connect';
import type { Token } from 'reducers/TokensReducer';
import type { NetworkToken } from 'reducers/LocalStorageReducer';
import * as Web3Actions from './Web3Actions';
import * as AccountsActions from './AccountsActions';
export type BlockchainAction = {
type: typeof BLOCKCHAIN.READY,
}
export const discoverAccount = (device: TrezorDevice, address: string, network: string): PromiseAction<EthereumAccount> => async (dispatch: Dispatch, getState: GetState): Promise<EthereumAccount> => {
export const discoverAccount = (device: TrezorDevice, address: string, network: string): PromiseAction<EthereumAccount> => async (dispatch: Dispatch): Promise<EthereumAccount> => {
// get data from connect
// Temporary disabled, enable after trezor-connect@5.0.32 release
const txs = await TrezorConnect.ethereumGetAccountInfo({
@ -44,8 +28,8 @@ export const discoverAccount = (device: TrezorDevice, address: string, network:
address,
block: 0,
transactions: 0,
balance: "0",
nonce: 0
balance: '0',
nonce: 0,
},
coin: network,
});
@ -55,7 +39,7 @@ export const discoverAccount = (device: TrezorDevice, address: string, network:
}
// blockbook web3 fallback
const web3account = await dispatch( Web3Actions.discoverAccount(address, network) );
const web3account = await dispatch(Web3Actions.discoverAccount(address, network));
// return { transactions: txs.payload, ...web3account };
return {
address,
@ -66,35 +50,53 @@ export const discoverAccount = (device: TrezorDevice, address: string, network:
};
};
export const getTokenInfo = (input: string, network: string): PromiseAction<NetworkToken> => async (dispatch: Dispatch, getState: GetState): Promise<NetworkToken> => {
return await dispatch( Web3Actions.getTokenInfo(input, network) );
}
export const getTokenInfo = (input: string, network: string): PromiseAction<NetworkToken> => async (dispatch: Dispatch): Promise<NetworkToken> => dispatch(Web3Actions.getTokenInfo(input, network));
export const getTokenBalance = (token: Token): PromiseAction<string> => async (dispatch: Dispatch, getState: GetState): Promise<string> => {
return await dispatch( Web3Actions.getTokenBalance(token) );
}
export const getTokenBalance = (token: Token): PromiseAction<string> => async (dispatch: Dispatch): Promise<string> => dispatch(Web3Actions.getTokenBalance(token));
export const getGasPrice = (network: string, defaultGasPrice: number): PromiseAction<BigNumber> => async (dispatch: Dispatch, getState: GetState): Promise<BigNumber> => {
export const getGasPrice = (network: string, defaultGasPrice: number): PromiseAction<BigNumber> => async (dispatch: Dispatch): Promise<BigNumber> => {
try {
const gasPrice = await dispatch( Web3Actions.getCurrentGasPrice(network) );
const gasPrice = await dispatch(Web3Actions.getCurrentGasPrice(network));
return new BigNumber(gasPrice);
} catch (error) {
return new BigNumber(defaultGasPrice);
}
}
};
export const estimateGasLimit = (network: string, data: string, value: string, gasPrice: string): PromiseAction<number> => async (dispatch: Dispatch, getState: GetState): Promise<number> => {
return await dispatch( Web3Actions.estimateGasLimit(network, { to: '', data, value, gasPrice }) );
}
const estimateProxy: Array<Promise<string>> = [];
export const estimateGasLimit = (network: string, data: string, value: string, gasPrice: string): PromiseAction<string> => async (dispatch: Dispatch): Promise<string> => {
// Since this method could be called multiple times in short period of time
// check for pending calls in proxy and if there more than two (first is current running and the second is waiting for result of first)
// TODO: should reject second call immediately?
if (estimateProxy.length > 0) {
// wait for proxy result (but do not process it)
await estimateProxy[0];
}
const call = dispatch(Web3Actions.estimateGasLimit(network, {
to: '',
data,
value,
gasPrice,
}));
// add current call to proxy
estimateProxy.push(call);
// wait for result
const result = await call;
// remove current call from proxy
estimateProxy.splice(0, 1);
// return result
return result;
};
export const onBlockMined = (coinInfo: any): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
// incoming "coinInfo" from TrezorConnect is CoinInfo | EthereumNetwork type
const network: string = coinInfo.shortcut.toLowerCase();
// try to resolve pending transactions
await dispatch( Web3Actions.resolvePendingTransactions(network) );
await dispatch(Web3Actions.resolvePendingTransactions(network));
await dispatch( Web3Actions.updateGasPrice(network) );
await dispatch(Web3Actions.updateGasPrice(network));
const accounts: Array<any> = getState().accounts.filter(a => a.network === network);
if (accounts.length > 0) {
@ -108,34 +110,32 @@ export const onBlockMined = (coinInfo: any): PromiseAction<void> => async (dispa
response.payload.forEach((a, i) => {
if (a.transactions > 0) {
// load additional data from Web3 (balance, nonce, tokens)
dispatch( Web3Actions.updateAccount(accounts[i], a, network) )
dispatch(Web3Actions.updateAccount(accounts[i], a, network));
} else {
// there are no new txs, just update block
dispatch( AccountsActions.update( { ...accounts[i], block: a.block }) );
dispatch(AccountsActions.update({ ...accounts[i], block: a.block }));
// HACK: since blockbook can't work with smart contracts for now
// try to update tokens balances added to this account using Web3
dispatch( Web3Actions.updateAccountTokens(accounts[i]) );
dispatch(Web3Actions.updateAccountTokens(accounts[i]));
}
});
}
}
}
};
// not used for now, waiting for fix in blockbook
/*
export const onNotification = (payload: any): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
// this event can be triggered multiple times
// 1. check if pair [txid + address] is already in reducer
const network: string = payload.coin.shortcut.toLowerCase();
const address: string = EthereumjsUtil.toChecksumAddress(payload.tx.address);
const txInfo = await dispatch( Web3Actions.getPendingInfo(network, payload.tx.txid) );
const txInfo = await dispatch(Web3Actions.getPendingInfo(network, payload.tx.txid));
// const exists = getState().pending.filter(p => p.id === payload.tx.txid && p.address === address);
const exists = getState().pending.filter(p => {
return p.address === address;
});
const exists = getState().pending.filter(p => p.address === address);
if (exists.length < 1) {
if (txInfo) {
dispatch({
@ -144,14 +144,14 @@ export const onNotification = (payload: any): PromiseAction<void> => async (disp
type: 'send',
id: payload.tx.txid,
network,
currency: "tETH",
currency: 'tETH',
amount: txInfo.value,
total: "0",
total: '0',
tx: {},
nonce: txInfo.nonce,
address,
rejected: false
}
rejected: false,
},
});
} else {
// tx info not found (yet?)
@ -164,18 +164,18 @@ export const onNotification = (payload: any): PromiseAction<void> => async (disp
// });
}
}
}
};
*/
export const subscribe = (network: string): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const addresses: Array<string> = getState().accounts.filter(a => a.network === network).map(a => a.address);
// $FlowIssue: trezor-connect@5.0.32
return await TrezorConnect.blockchainSubscribe({
const addresses: Array<string> = getState().accounts.filter(a => a.network === network).map(a => a.address); // eslint-disable-line no-unused-vars
await TrezorConnect.blockchainSubscribe({
// accounts: addresses,
accounts: [],
coin: network
coin: network,
});
}
};
// Conditionally subscribe to blockchain backend
// called after TrezorConnect.init successfully emits TRANSPORT.START event
@ -185,26 +185,26 @@ export const init = (): PromiseAction<void> => async (dispatch: Dispatch, getSta
if (getState().discovery.length > 0) {
// get unique networks
const networks: Array<string> = [];
getState().discovery.forEach(discovery => {
getState().discovery.forEach((discovery) => {
if (networks.indexOf(discovery.network) < 0) {
networks.push(discovery.network);
}
});
// subscribe
for (let i = 0; i < networks.length; i++) {
await dispatch( subscribe(networks[i]) );
}
const results = networks.map(n => dispatch(subscribe(n)));
// wait for all subscriptions
await Promise.all(results);
}
// continue wallet initialization
dispatch({
type: BLOCKCHAIN.READY
type: BLOCKCHAIN.READY,
});
}
};
// Handle BLOCKCHAIN.ERROR event from TrezorConnect
// disconnect and remove Web3 webscocket instance if exists
export const error = (payload: any): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
dispatch( Web3Actions.disconnect(payload.coin) );
}
export const error = (payload: any): PromiseAction<void> => async (dispatch: Dispatch): Promise<void> => {
dispatch(Web3Actions.disconnect(payload.coin));
};

20
src/actions/SelectedAccountActions.js
View File

@ -3,13 +3,9 @@
import { LOCATION_CHANGE } from 'react-router-redux';
import * as ACCOUNT from 'actions/constants/account';
import * as SEND from 'actions/constants/send';
import * as NOTIFICATION from 'actions/constants/notification';
import * as PENDING from 'actions/constants/pendingTx';
import * as SendFormActions from 'actions/SendFormActions';
import * as SessionStorageActions from 'actions/SessionStorageActions';
import * as stateUtils from 'reducers/utils';
import type {
@ -36,17 +32,6 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
const state: State = getState();
const { location } = state.router;
// reset form to default
if (action.type === SEND.TX_COMPLETE) {
// dispatch( SendFormActions.init() );
// linear action
// SessionStorageActions.clear(location.pathname);
}
if (prevState.sendForm !== state.sendForm) {
dispatch(SessionStorageActions.save());
}
// handle devices state change (from trezor-connect events or location change)
if (locationChange
|| prevState.accounts !== state.accounts
@ -85,11 +70,6 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
payload,
});
// initialize SendFormReducer
if (location.state.send && getState().sendForm.currency === '') {
dispatch(SendFormActions.init());
}
if (location.state.send) {
const rejectedTxs = pending.filter(tx => tx.rejected);
rejectedTxs.forEach((tx) => {

877
src/actions/SendFormActions.js
View File

File diff suppressed because it is too large Load Diff

413
src/actions/SendFormValidationActions.js Normal file
View File

@ -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;
};

43
src/actions/SessionStorageActions.js
View File

@ -4,47 +4,56 @@
import type { State as SendFormState } from 'reducers/SendFormReducer';
import type {
ThunkAction,
PayloadAction,
GetState,
Dispatch,
} from 'flowtype';
const PREFIX: string = 'trezor:draft-tx:';
const TX_PREFIX: string = 'trezor:draft-tx:';
export const save = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
export const saveDraftTransaction = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
if (typeof window.localStorage === 'undefined') return;
const location = getState().router.location.pathname;
const state = getState().sendForm;
if (!state.untouched) {
try {
window.sessionStorage.setItem(`${PREFIX}${location}`, JSON.stringify(state));
} catch (error) {
console.error(`Saving sessionStorage error: ${error}`);
}
if (state.untouched) return;
const location = getState().router.location.pathname;
try {
// save state as it is
// "loadDraftTransaction" will do the validation
window.sessionStorage.setItem(`${TX_PREFIX}${location}`, JSON.stringify(state));
} catch (error) {
console.error(`Saving sessionStorage error: ${error}`);
}
};
export const load = (location: string): ?SendFormState => {
if (typeof window.localStorage === 'undefined') return;
export const loadDraftTransaction = (): PayloadAction<?SendFormState> => (dispatch: Dispatch, getState: GetState): ?SendFormState => {
if (typeof window.localStorage === 'undefined') return null;
try {
const value: string = window.sessionStorage.getItem(`${PREFIX}${location}`);
const location = getState().router.location.pathname;
const value: string = window.sessionStorage.getItem(`${TX_PREFIX}${location}`);
const state: ?SendFormState = JSON.parse(value);
if (state && state.address === '' && (state.amount === '' || state.amount === '0')) {
window.sessionStorage.removeItem(`${PREFIX}${location}`);
return;
if (state) {
// decide if draft is valid and should be returned
// ignore this draft if has any error
if (Object.keys(state.errors).length > 0) {
window.sessionStorage.removeItem(`${TX_PREFIX}${location}`);
return null;
}
return state;
}
return state;
} catch (error) {
console.error(`Loading sessionStorage error: ${error}`);
}
return null;
};
export const clear = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
if (typeof window.localStorage === 'undefined') return;
const location = getState().router.location.pathname;
try {
window.sessionStorage.removeItem(`${PREFIX}${location}`);
window.sessionStorage.removeItem(`${TX_PREFIX}${location}`);
} catch (error) {
console.error(`Clearing sessionStorage error: ${error}`);
}

239
src/actions/Web3Actions.js
View File

@ -1,15 +1,10 @@
/* @flow */
import Web3 from 'web3';
import HDKey from 'hdkey';
import BigNumber from 'bignumber.js';
import EthereumjsUtil from 'ethereumjs-util';
import EthereumjsUnits from 'ethereumjs-units';
import EthereumjsTx from 'ethereumjs-tx';
// import InputDataDecoder from 'ethereum-input-data-decoder';
import TrezorConnect from 'trezor-connect';
import type { EstimateGasOptions, TransactionStatus, TransactionReceipt } from 'web3';
import { strip } from 'utils/ethUtils';
import type { EstimateGasOptions } from 'web3';
import * as WEB3 from 'actions/constants/web3';
import * as PENDING from 'actions/constants/pendingTx';
@ -17,13 +12,11 @@ import type {
Dispatch,
GetState,
ThunkAction,
AsyncAction,
PromiseAction,
} from 'flowtype';
import type { EthereumAccount } from 'trezor-connect';
import type { Account } from 'reducers/AccountsReducer';
import type { PendingTx } from 'reducers/PendingTxReducer';
import type { Web3Instance } from 'reducers/Web3Reducer';
import type { Token } from 'reducers/TokensReducer';
import type { NetworkToken } from 'reducers/LocalStorageReducer';
@ -52,86 +45,82 @@ export type Web3Action = {
} | Web3UpdateBlockAction
| Web3UpdateGasPriceAction;
export const initWeb3 = (network: string, urlIndex: number = 0): PromiseAction<Web3Instance> => async (dispatch: Dispatch, getState: GetState): Promise<Web3Instance> => {
return new Promise(async (resolve, reject) => {
// check if requested web was initialized before
const instance = getState().web3.find(w3 => w3.network === network);
if (instance && instance.web3.currentProvider.connected) {
resolve(instance);
return;
}
export const initWeb3 = (network: string, urlIndex: number = 0): PromiseAction<Web3Instance> => async (dispatch: Dispatch, getState: GetState): Promise<Web3Instance> => new Promise(async (resolve, reject) => {
// check if requested web was initialized before
const instance = getState().web3.find(w3 => w3.network === network);
if (instance && instance.web3.currentProvider.connected) {
resolve(instance);
return;
}
// requested web3 wasn't initialized or is disconnected
// initialize again
const { config, ERC20Abi } = getState().localStorage;
const coin = config.coins.find(c => c.network === network);
if (!coin) {
// coin not found
reject(new Error(`Network ${ network} not found in application config.`));
return;
}
// requested web3 wasn't initialized or is disconnected
// initialize again
const { config, ERC20Abi } = getState().localStorage;
const coin = config.coins.find(c => c.network === network);
if (!coin) {
// coin not found
reject(new Error(`Network ${network} not found in application config.`));
return;
}
// get first url
const url = coin.web3[ urlIndex ];
if (!url) {
reject(new Error('Web3 backend is not responding'));
return;
}
// get first url
const url = coin.web3[urlIndex];
if (!url) {
reject(new Error('Web3 backend is not responding'));
return;
}
const web3 = new Web3( new Web3.providers.WebsocketProvider(url) );
const web3 = new Web3(new Web3.providers.WebsocketProvider(url));
const onConnect = async () => {
const onConnect = async () => {
const latestBlock = await web3.eth.getBlockNumber();
const gasPrice = await web3.eth.getGasPrice();
const latestBlock = await web3.eth.getBlockNumber();
const gasPrice = await web3.eth.getGasPrice();
const newInstance = {
network,
web3,
chainId: coin.chainId,
erc20: new web3.eth.Contract(ERC20Abi),
latestBlock,
gasPrice,
};
const instance = {
network,
web3,
chainId: coin.chainId,
erc20: new web3.eth.Contract(ERC20Abi),
latestBlock,
gasPrice,
}
dispatch({
type: WEB3.CREATE,
instance: newInstance,
});
dispatch({
type: WEB3.CREATE,
instance,
});
resolve(newInstance);
};
resolve(instance);
}
const onEnd = async () => {
web3.currentProvider.reset();
const oldInstance = getState().web3.find(w3 => w3.network === network);
const onEnd = async () => {
web3.currentProvider.reset();
const instance = getState().web3.find(w3 => w3.network === network);
if (instance && instance.web3.currentProvider.connected) {
// backend disconnects
// dispatch({
// type: 'WEB3.DISCONNECT',
// network
// });
} else {
// backend initialization error for given url, try next one
try {
const web3 = await dispatch( initWeb3(network, urlIndex + 1) );
resolve(web3);
} catch (error) {
reject(error);
}
if (oldInstance && oldInstance.web3.currentProvider.connected) {
// backend disconnects
// dispatch({
// type: 'WEB3.DISCONNECT',
// network
// });
} else {
// backend initialization error for given url, try next one
try {
const otherWeb3 = await dispatch(initWeb3(network, urlIndex + 1));
resolve(otherWeb3);
} catch (error) {
reject(error);
}
}
};
web3.currentProvider.on('connect', onConnect);
web3.currentProvider.on('end', onEnd);
web3.currentProvider.on('error', onEnd);
});
}
web3.currentProvider.on('connect', onConnect);
web3.currentProvider.on('end', onEnd);
web3.currentProvider.on('error', onEnd);
});
export const discoverAccount = (address: string, network: string): PromiseAction<EthereumAccount> => async (dispatch: Dispatch, getState: GetState): Promise<EthereumAccount> => {
const instance: Web3Instance = await dispatch( initWeb3(network) );
export const discoverAccount = (address: string, network: string): PromiseAction<EthereumAccount> => async (dispatch: Dispatch): Promise<EthereumAccount> => {
const instance: Web3Instance = await dispatch(initWeb3(network));
const balance = await instance.web3.eth.getBalance(address);
const nonce = await instance.web3.eth.getTransactionCount(address);
return {
@ -139,14 +128,14 @@ export const discoverAccount = (address: string, network: string): PromiseAction
transactions: 0,
block: 0,
balance: EthereumjsUnits.convert(balance, 'wei', 'ether'),
nonce
nonce,
};
}
};
export const resolvePendingTransactions = (network: string): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const instance: Web3Instance = await dispatch( initWeb3(network) );
const instance: Web3Instance = await dispatch(initWeb3(network));
const pending = getState().pending.filter(p => p.network === network);
for (const tx of pending) {
pending.forEach(async (tx) => {
const status = await instance.web3.eth.getTransaction(tx.id);
if (!status) {
dispatch({
@ -169,14 +158,15 @@ export const resolvePendingTransactions = (network: string): PromiseAction<void>
});
}
}
}
}
});
};
export const getPendingInfo = (network: string, txid: string): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const instance: Web3Instance = await dispatch( initWeb3(network) );
/*
export const getPendingInfo = (network: string, txid: string): PromiseAction<void> => async (dispatch: Dispatch): Promise<void> => {
const instance: Web3Instance = await dispatch(initWeb3(network));
const tx = await instance.web3.eth.getTransaction(txid);
/*
if (tx.input !== "0x") {
// find token:
// tx.to <= smart contract address
@ -190,31 +180,33 @@ export const getPendingInfo = (network: string, txid: string): PromiseAction<voi
}
*/
// return tx;
}
export const getTxInput = (): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const instance: Web3Instance = await dispatch( initWeb3("ropsten") );
// return tx;
};
export const getTxInput = (): PromiseAction<void> => async (dispatch: Dispatch): Promise<void> => {
const instance: Web3Instance = await dispatch(initWeb3('ropsten'));
// const inputData = instance.web3.utils.hexToAscii("0xa9059cbb00000000000000000000000073d0385f4d8e00c5e6504c6030f47bf6212736a80000000000000000000000000000000000000000000000000000000000000001");
// console.warn("input data!", inputData);
}
};
*/
export const updateAccount = (account: Account, newAccount: EthereumAccount, network: string): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const instance: Web3Instance = await dispatch( initWeb3(network) );
export const updateAccount = (account: Account, newAccount: EthereumAccount, network: string): PromiseAction<void> => async (dispatch: Dispatch): Promise<void> => {
const instance: Web3Instance = await dispatch(initWeb3(network));
const balance = await instance.web3.eth.getBalance(account.address);
const nonce = await instance.web3.eth.getTransactionCount(account.address);
dispatch( AccountsActions.update( { ...account, ...newAccount, balance: EthereumjsUnits.convert(balance, 'wei', 'ether'), nonce }) );
dispatch(AccountsActions.update({
...account, ...newAccount, balance: EthereumjsUnits.convert(balance, 'wei', 'ether'), nonce,
}));
// update tokens for this account
dispatch( updateAccountTokens(account) );
}
dispatch(updateAccountTokens(account));
};
export const updateAccountTokens = (account: Account): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
const tokens = getState().tokens.filter(t => t.network === account.network && t.ethAddress === account.address);
for (const token of tokens) {
const balance = await dispatch( getTokenBalance(token) );
tokens.forEach(async (token) => {
const balance = await dispatch(getTokenBalance(token));
// const newBalance: string = balance.dividedBy(Math.pow(10, token.decimals)).toString(10);
if (balance !== token.balance) {
dispatch(TokenActions.setBalance(
@ -223,11 +215,11 @@ export const updateAccountTokens = (account: Account): PromiseAction<void> => as
balance,
));
}
}
}
});
};
export const getTokenInfo = (address: string, network: string): PromiseAction<NetworkToken> => async (dispatch: Dispatch, getState: GetState): Promise<NetworkToken> => {
const instance: Web3Instance = await dispatch( initWeb3(network) );
export const getTokenInfo = (address: string, network: string): PromiseAction<NetworkToken> => async (dispatch: Dispatch): Promise<NetworkToken> => {
const instance: Web3Instance = await dispatch(initWeb3(network));
const contract = instance.erc20.clone();
contract.options.address = address;
@ -243,57 +235,60 @@ export const getTokenInfo = (address: string, network: string): PromiseAction<Ne
};
};
export const getTokenBalance = (token: Token): PromiseAction<string> => async (dispatch: Dispatch, getState: GetState): Promise<string> => {
const instance = await dispatch( initWeb3(token.network) );
export const getTokenBalance = (token: Token): PromiseAction<string> => async (dispatch: Dispatch): Promise<string> => {
const instance = await dispatch(initWeb3(token.network));
const contract = instance.erc20.clone();
contract.options.address = token.address;
const balance = await contract.methods.balanceOf(token.ethAddress).call();
return new BigNumber(balance).dividedBy(Math.pow(10, token.decimals)).toString(10);
return new BigNumber(balance).dividedBy(10 ** token.decimals).toString(10);
};
export const getCurrentGasPrice = (network: string): PromiseAction<string> => async (dispatch: Dispatch, getState: GetState): Promise<string> => {
const instance = getState().web3.find(w3 => w3.network === network);
if (instance) {
return EthereumjsUnits.convert(instance.gasPrice, 'wei', 'gwei');
} else {
throw "0";
}
}
return '0';
};
export const updateGasPrice = (network: string): PromiseAction<void> => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
export const updateGasPrice = (network: string): PromiseAction<void> => async (dispatch: Dispatch): Promise<void> => {
try {
const instance = await dispatch( initWeb3(network) );
const instance = await dispatch(initWeb3(network));
const gasPrice = await instance.web3.eth.getGasPrice();
if (instance.gasPrice !== gasPrice) {
dispatch({
type: WEB3.GAS_PRICE_UPDATED,
network,
gasPrice
gasPrice,
});
}
} catch (e) {
// silent action
// nothing happens if this fails
}
}
};
export const estimateGasLimit = (network: string, options: EstimateGasOptions): PromiseAction<number> => async (dispatch: Dispatch, getState: GetState): Promise<number> => {
const instance = await dispatch( initWeb3(network) );
export const estimateGasLimit = (network: string, $options: EstimateGasOptions): PromiseAction<string> => async (dispatch: Dispatch): Promise<string> => {
const instance = await dispatch(initWeb3(network));
// TODO: allow data starting with 0x ...
options.to = '0x0000000000000000000000000000000000000000';
options.data = `0x${options.data.length % 2 === 0 ? options.data : `0${options.data}`}`;
options.value = instance.web3.utils.toHex( EthereumjsUnits.convert(options.value || '0', 'ether', 'wei') );
options.gasPrice = instance.web3.utils.toHex( EthereumjsUnits.convert(options.gasPrice, 'gwei', 'wei') );
const data = `0x${$options.data.length % 2 === 0 ? $options.data : `0${$options.data}`}`;
const options = {
...$options,
to: '0x0000000000000000000000000000000000000000',
data,
value: instance.web3.utils.toHex(EthereumjsUnits.convert($options.value || '0', 'ether', 'wei')),
gasPrice: instance.web3.utils.toHex(EthereumjsUnits.convert($options.gasPrice, 'gwei', 'wei')),
};
const limit = await instance.web3.eth.estimateGas(options);
return limit;
return limit.toString();
};
export const disconnect = (coinInfo: any): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
// incoming "coinInfo" from TrezorConnect is CoinInfo | EthereumNetwork type
const network: string = coinInfo.shortcut.toLowerCase();
// incoming "coinInfo" from TrezorConnect is CoinInfo | EthereumNetwork type
const network: string = coinInfo.shortcut.toLowerCase();
// check if Web3 was already initialized
const instance = getState().web3.find(w3 => w3.network === network);
if (instance) {
@ -304,7 +299,7 @@ export const disconnect = (coinInfo: any): ThunkAction => (dispatch: Dispatch, g
// remove instance from reducer
dispatch({
type: WEB3.DISCONNECT,
instance
instance,
});
}
};

18
src/actions/constants/send.js
View File

@ -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';

85
src/reducers/SendFormReducer.js
View File

@ -1,17 +1,9 @@
/* @flow */
import EthereumjsUnits from 'ethereumjs-units';
import * as SEND from 'actions/constants/send';
import * as WEB3 from 'actions/constants/web3';
import * as ACCOUNT from 'actions/constants/account';
import { getFeeLevels } from 'actions/SendFormActions';
import type { Action } from 'flowtype';
import type {
Web3UpdateGasPriceAction,
} from 'actions/Web3Actions';
export type FeeLevel = {
label: string;
@ -82,46 +74,16 @@ export const initialState: State = {
infos: {},
};
const onGasPriceUpdated = (state: State, action: Web3UpdateGasPriceAction): State => {
// function getRandomInt(min, max) {
// return Math.floor(Math.random() * (max - min + 1)) + min;
// }
// const newPrice = getRandomInt(10, 50).toString();
const newPrice: string = EthereumjsUnits.convert(action.gasPrice, 'wei', 'gwei');
if (action.network === state.networkName && newPrice !== state.recommendedGasPrice) {
const newState: State = { ...state };
if (!state.untouched) {
newState.gasPriceNeedsUpdate = true;
newState.recommendedGasPrice = newPrice;
} else {
const newFeeLevels = getFeeLevels(state.networkSymbol, newPrice, state.gasLimit);
const selectedFeeLevel: ?FeeLevel = newFeeLevels.find(f => f.value === 'Normal');
if (!selectedFeeLevel) return state;
newState.recommendedGasPrice = newPrice;
newState.feeLevels = newFeeLevels;
newState.selectedFeeLevel = selectedFeeLevel;
newState.gasPrice = selectedFeeLevel.gasPrice;
}
return newState;
}
return state;
};
export default (state: State = initialState, action: Action): State => {
switch (action.type) {
case SEND.INIT:
case SEND.CHANGE:
case SEND.VALIDATION:
return action.state;
case ACCOUNT.DISPOSE:
return initialState;
// this will be called right after Web3 instance initialization before any view is shown
// and async during app live time
case WEB3.GAS_PRICE_UPDATED:
return onGasPriceUpdated(state, action);
case SEND.TOGGLE_ADVANCED:
return {
@ -129,22 +91,7 @@ export default (state: State = initialState, action: Action): State => {
advanced: !state.advanced,
};
// user actions
case SEND.ADDRESS_CHANGE:
case SEND.ADDRESS_VALIDATION:
case SEND.AMOUNT_CHANGE:
case SEND.SET_MAX:
case SEND.CURRENCY_CHANGE:
case SEND.FEE_LEVEL_CHANGE:
case SEND.UPDATE_FEE_LEVELS:
case SEND.GAS_PRICE_CHANGE:
case SEND.GAS_LIMIT_CHANGE:
case SEND.NONCE_CHANGE:
case SEND.DATA_CHANGE:
return action.state;
case SEND.SEND:
case SEND.TX_SENDING:
return {
...state,
sending: true,
@ -156,32 +103,6 @@ export default (state: State = initialState, action: Action): State => {
sending: false,
};
case SEND.VALIDATION:
return {
...state,
errors: action.errors,
warnings: action.warnings,
infos: action.infos,
};
case SEND.FROM_SESSION_STORAGE:
return {
...state,
address: action.address,
amount: action.amount,
setMax: action.setMax,
selectedCurrency: action.selectedCurrency,
selectedFeeLevel: action.selectedFeeLevel,
advanced: action.advanced,
gasLimit: action.gasLimit,
gasPrice: action.gasPrice,
data: action.data,
nonce: action.nonce,
untouched: false,
touched: action.touched,
};
default:
return state;
}

19
src/reducers/utils/index.js
View File

@ -115,3 +115,22 @@ export const getWeb3 = (state: State): ?Web3Instance => {
if (!locationState.network) return null;
return state.web3.find(w3 => w3.network === locationState.network);
};
export const observeChanges = (prev: ?(Object | Array<any>), current: ?(Object | Array<any>), fields?: Array<string>): boolean => {
if (prev !== current) {
// 1. one of the objects is null/undefined
if (!prev || !current) return true;
// 2. object are Arrays and they have different length
if (Array.isArray(prev) && Array.isArray(current)) return prev.length !== current.length;
// 3. no nested field to check
if (!Array.isArray(fields)) return true;
// 4. validate nested field
if (prev instanceof Object && current instanceof Object) {
for (let i = 0; i < fields.length; i++) {
const key = fields[i];
if (prev[key] !== current[key]) return true;
}
}
}
return false;
};

3
src/services/WalletService.js
View File

@ -10,6 +10,7 @@ import * as NotificationActions from 'actions/NotificationActions';
import * as LocalStorageActions from 'actions/LocalStorageActions';
import * as TrezorConnectActions from 'actions/TrezorConnectActions';
import * as SelectedAccountActions from 'actions/SelectedAccountActions';
import * as SendFormActionActions from 'actions/SendFormActions';
import type {
Middleware,
@ -91,6 +92,8 @@ const WalletService: Middleware = (api: MiddlewareAPI) => (next: MiddlewareDispa
api.dispatch(NotificationActions.clear(prevLocation.state, currentLocation.state));
}
// observe send form props changes
api.dispatch(SendFormActionActions.observe(prevState, action));
// update common values in WallerReducer
api.dispatch(WalletActions.updateSelectedValues(prevState, action));

219
src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js Normal file
View File

@ -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> &amp; 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> &amp; 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;

672
src/views/Wallet/views/AccountSend/index.js
View File

@ -1,6 +1,6 @@
/* @flow */
import React, { Component } from 'react';
import React from 'react';
import styled, { css } from 'styled-components';
import { Select } from 'components/Select';
import Button from 'components/Button';
@ -12,11 +12,9 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
import colors from 'config/colors';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import Textarea from 'components/Textarea';
import Tooltip from 'components/Tooltip';
import { calculate, validation } from 'actions/SendFormActions';
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
import type { Token } from 'flowtype';
import AdvancedForm from './components/Advanced';
import PendingTransactions from './components/PendingTransactions';
import type { Props } from './Container';
@ -25,11 +23,6 @@ import type { Props } from './Container';
// and put it inside config/variables.js
const SmallScreenWidth = '850px';
type State = {
isAdvancedSettingsHidden: boolean,
shouldAnimateAdvancedSettingsToggle: boolean,
};
const Wrapper = styled.section`
padding: 0 48px;
`;
@ -143,453 +136,250 @@ const SendButton = styled(Button)`
}
`;
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 AdvancedSettingsSendButtonWrapper = styled.div`
width: 100%;
display: flex;
justify-content: flex-end;
`;
const StyledTextarea = styled(Textarea)`
margin-bottom: 20px;
height: 80px;
`;
const AdvancedSettingsIcon = styled(Icon)`
margin-left: 10px;
`;
const GreenSpan = styled.span`
color: ${colors.GREEN_PRIMARY};
`;
// render helpers
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
let state = '';
if (address && !addressErrors) {
state = 'success';
}
if (addressWarnings && !addressErrors) {
state = 'warning';
}
if (addressErrors) {
state = 'error';
}
return state;
};
const InputLabelWrapper = styled.div`
display: flex;
align-items: center;
`;
const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
let state = '';
if (amountWarnings && !amountErrors) {
state = 'warning';
}
if (amountErrors) {
state = 'error';
}
return state;
};
class AccountSend extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
isAdvancedSettingsHidden: true,
shouldAnimateAdvancedSettingsToggle: false,
};
const getTokensSelectData = (tokens: Array<Token>, accountNetwork: any): Array<{ value: string, label: string }> => {
const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
return tokensSelectData;
};
// stateless component
const AccountSend = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
account,
network,
discovery,
tokens,
} = props.selectedAccount;
const {
address,
amount,
setMax,
networkSymbol,
currency,
feeLevels,
selectedFeeLevel,
gasPriceNeedsUpdate,
total,
errors,
warnings,
infos,
sending,
advanced,
} = props.sendForm;
const {
toggleAdvanced,
onAddressChange,
onAmountChange,
onSetMax,
onCurrencyChange,
onFeeLevelChange,
updateFeeLevels,
onSend,
} = props.sendFormActions;
if (!device || !account || !discovery || !network) return null;
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
let sendButtonText: string = 'Send';
if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
} else if (networkSymbol === currency && total !== '0') {
sendButtonText += ` ${total} ${network.symbol}`;
}
componentWillReceiveProps(newProps: Props) {
calculate(this.props, newProps);
validation(newProps);
if (!device.connected) {
sendButtonText = 'Device is not connected';
isSendButtonDisabled = true;
} else if (!device.available) {
sendButtonText = 'Device is unavailable';
isSendButtonDisabled = true;
} else if (!discovery.completed) {
sendButtonText = 'Loading accounts';
isSendButtonDisabled = true;
}
getAddressInputState(address: string, addressErrors: string, addressWarnings: string) {
let state = '';
if (address && !addressErrors) {
state = 'success';
}
if (addressWarnings && !addressErrors) {
state = 'warning';
}
if (addressErrors) {
state = 'error';
}
return state;
}
const tokensSelectData = getTokensSelectData(tokens, network);
const isAdvancedSettingsHidden = !advanced;
getAmountInputState(amountErrors: string, amountWarnings: string) {
let state = '';
if (amountWarnings && !amountErrors) {
state = 'warning';
}
if (amountErrors) {
state = 'error';
}
return state;
}
return (
<SelectedAccount {...props}>
<Wrapper>
<StyledH2>Send Ethereum or tokens</StyledH2>
<InputRow>
<Input
state={getAddressInputState(address, errors.address, warnings.address)}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
topLabel="Address"
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
/>
</InputRow>
getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) {
let state = '';
if (gasLimitWarnings && !gasLimitErrors) {
state = 'warning';
}
if (gasLimitErrors) {
state = 'error';
}
return state;
}
getGasPriceInputState(gasPriceErrors: string, gasPriceWarnings: string) {
let state = '';
if (gasPriceWarnings && !gasPriceErrors) {
state = 'warning';
}
if (gasPriceErrors) {
state = 'error';
}
return state;
}
getTokensSelectData(tokens: Array<Token>, accountNetwork: any) {
const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
return tokensSelectData;
}
handleToggleAdvancedSettingsButton() {
this.toggleAdvancedSettings();
}
toggleAdvancedSettings() {
this.setState(previousState => ({
isAdvancedSettingsHidden: !previousState.isAdvancedSettingsHidden,
shouldAnimateAdvancedSettingsToggle: true,
}));
}
render() {
const device = this.props.wallet.selectedDevice;
const {
account,
network,
discovery,
tokens,
} = this.props.selectedAccount;
const {
address,
amount,
setMax,
networkSymbol,
currency,
feeLevels,
selectedFeeLevel,
recommendedGasPrice,
gasPriceNeedsUpdate,
total,
errors,
warnings,
infos,
data,
sending,
gasLimit,
gasPrice,
} = this.props.sendForm;
const {
onAddressChange,
onAmountChange,
onSetMax,
onCurrencyChange,
onFeeLevelChange,
updateFeeLevels,
onSend,
onGasLimitChange,
onGasPriceChange,
onDataChange,
} = this.props.sendFormActions;
if (!device || !account || !discovery || !network) return null;
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
let sendButtonText: string = 'Send';
if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
} else if (networkSymbol === currency && total !== '0') {
sendButtonText += ` ${total} ${network.symbol}`;
}
if (!device.connected) {
sendButtonText = 'Device is not connected';
isSendButtonDisabled = true;
} else if (!device.available) {
sendButtonText = 'Device is unavailable';
isSendButtonDisabled = true;
} else if (!discovery.completed) {
sendButtonText = 'Loading accounts';
isSendButtonDisabled = true;
}
const tokensSelectData = this.getTokensSelectData(tokens, network);
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 (
<SelectedAccount {...this.props}>
<Wrapper>
<StyledH2>Send Ethereum or tokens</StyledH2>
<InputRow>
<Input
state={this.getAddressInputState(address, errors.address, warnings.address)}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
topLabel="Address"
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
/>
</InputRow>
<InputRow>
<Input
state={this.getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
topLabel="Amount"
value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
<InputRow>
<FeeLabelWrapper>
<FeeLabel>Fee</FeeLabel>
{gasPriceNeedsUpdate && (
<UpdateFeeWrapper>
<Icon
icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY}
size={20}
/>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper>
)}
</FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={(option) => {
if (option.value === 'Custom') {
this.toggleAdvancedSettings();
}
onFeeLevelChange(option);
}}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
<ToggleAdvancedSettingsWrapper
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
>
<ToggleAdvancedSettingsButton
isTransparent
onClick={() => this.handleToggleAdvancedSettingsButton()}
>
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={this.state.isAdvancedSettingsHidden}
canAnimate={this.state.shouldAnimateAdvancedSettingsToggle}
/>
</ToggleAdvancedSettingsButton>
{this.state.isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)}
</ToggleAdvancedSettingsWrapper>
{!this.state.isAdvancedSettingsHidden && (
<AdvancedSettingsWrapper>
<GasInputRow>
<GasInput
state={this.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> &amp; 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={this.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> &amp; 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>
)}
disabled={networkSymbol !== currency}
value={networkSymbol !== currency ? '' : data}
onChange={event => onDataChange(event.target.value)}
/>
<AdvancedSettingsSendButtonWrapper>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
<InputRow>
<Input
state={getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
topLabel="Amount"
value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{sendButtonText}
</SendButton>
</AdvancedSettingsSendButtonWrapper>
</AdvancedSettingsWrapper>
)}
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
{this.props.selectedAccount.pending.length > 0 && (
<PendingTransactions
pending={this.props.selectedAccount.pending}
tokens={this.props.selectedAccount.tokens}
network={network}
<InputRow>
<FeeLabelWrapper>
<FeeLabel>Fee</FeeLabel>
{gasPriceNeedsUpdate && (
<UpdateFeeWrapper>
<Icon
icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY}
size={20}
/>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper>
)}
</FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={onFeeLevelChange}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
<ToggleAdvancedSettingsWrapper
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
>
<ToggleAdvancedSettingsButton
isTransparent
onClick={toggleAdvanced}
>
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={advanced}
canAnimate
/>
)}
</Wrapper>
</SelectedAccount>
);
}
}
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)}
</ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</AdvancedForm>
)}
{props.selectedAccount.pending.length > 0 && (
<PendingTransactions
pending={props.selectedAccount.pending}
tokens={props.selectedAccount.tokens}
network={network}
/>
)}
</Wrapper>
</SelectedAccount>
);
};
export default AccountSend;