mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-02 21:28:12 +00:00
making sendform component a stateless + spliting advanced to a separate component
This commit is contained in:
Szymon Lesisz
parent
9f98e7dd7e
commit
91f731c34e
221
src/views/Wallet/views/AccountSend/components/Advanced/index.js
Normal file
221
src/views/Wallet/views/AccountSend/components/Advanced/index.js
Normal file
@ -0,0 +1,221 @@
|
|||||||
|
/* @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';
|
||||||
|
|
||||||
|
// duplicates from ../../Container
|
||||||
|
const InputRow = styled.div`
|
||||||
|
margin-bottom: 20px;
|
||||||
|
`;
|
||||||
|
// duplicates end
|
||||||
|
|
||||||
|
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;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
/* @flow */
|
/* @flow */
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { Select } from 'components/Select';
|
import { Select } from 'components/Select';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/Button';
|
||||||
@ -12,11 +12,9 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
|||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import { H2 } from 'components/Heading';
|
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 SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||||
import type { Token } from 'flowtype';
|
import type { Token } from 'flowtype';
|
||||||
|
import AdvancedForm from './components/Advanced';
|
||||||
import PendingTransactions from './components/PendingTransactions';
|
import PendingTransactions from './components/PendingTransactions';
|
||||||
|
|
||||||
import type { Props } from './Container';
|
import type { Props } from './Container';
|
||||||
@ -25,11 +23,6 @@ import type { Props } from './Container';
|
|||||||
// and put it inside config/variables.js
|
// and put it inside config/variables.js
|
||||||
const SmallScreenWidth = '850px';
|
const SmallScreenWidth = '850px';
|
||||||
|
|
||||||
type State = {
|
|
||||||
isAdvancedSettingsHidden: boolean,
|
|
||||||
shouldAnimateAdvancedSettingsToggle: boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
const Wrapper = styled.section`
|
const Wrapper = styled.section`
|
||||||
padding: 0 48px;
|
padding: 0 48px;
|
||||||
`;
|
`;
|
||||||
@ -143,453 +136,255 @@ 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)`
|
const AdvancedSettingsIcon = styled(Icon)`
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const GreenSpan = styled.span`
|
// render helpers
|
||||||
color: ${colors.GREEN_PRIMARY};
|
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`
|
const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
|
||||||
display: flex;
|
let state = '';
|
||||||
align-items: center;
|
if (amountWarnings && !amountErrors) {
|
||||||
`;
|
state = 'warning';
|
||||||
|
}
|
||||||
|
if (amountErrors) {
|
||||||
|
state = 'error';
|
||||||
|
}
|
||||||
|
return state;
|
||||||
|
};
|
||||||
|
|
||||||
class AccountSend extends Component<Props, State> {
|
const getTokensSelectData = (tokens: Array<Token>, accountNetwork: any): Array<{ value: string, label: string }> => {
|
||||||
constructor(props: Props) {
|
const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
|
||||||
super(props);
|
tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
|
||||||
this.state = {
|
|
||||||
isAdvancedSettingsHidden: true,
|
return tokensSelectData;
|
||||||
shouldAnimateAdvancedSettingsToggle: false,
|
};
|
||||||
};
|
|
||||||
|
// 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,
|
||||||
|
data,
|
||||||
|
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) {
|
if (!device.connected) {
|
||||||
calculate(this.props, newProps);
|
sendButtonText = 'Device is not connected';
|
||||||
validation(newProps);
|
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) {
|
const tokensSelectData = getTokensSelectData(tokens, network);
|
||||||
let state = '';
|
const isAdvancedSettingsHidden = !advanced;
|
||||||
if (address && !addressErrors) {
|
// eslint workaround (is this some bug?)
|
||||||
state = 'success';
|
// if i put {true} directly to "AdvancedSettingsIcon" component
|
||||||
}
|
// i get eslint error
|
||||||
if (addressWarnings && !addressErrors) {
|
const advancedButtonCanAnimate = true;
|
||||||
state = 'warning';
|
|
||||||
}
|
|
||||||
if (addressErrors) {
|
|
||||||
state = 'error';
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
getAmountInputState(amountErrors: string, amountWarnings: string) {
|
return (
|
||||||
let state = '';
|
<SelectedAccount {...props}>
|
||||||
if (amountWarnings && !amountErrors) {
|
<Wrapper>
|
||||||
state = 'warning';
|
<StyledH2>Send Ethereum or tokens</StyledH2>
|
||||||
}
|
<InputRow>
|
||||||
if (amountErrors) {
|
<Input
|
||||||
state = 'error';
|
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||||
}
|
autoComplete="off"
|
||||||
return state;
|
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) {
|
<InputRow>
|
||||||
let state = '';
|
<Input
|
||||||
if (gasLimitWarnings && !gasLimitErrors) {
|
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||||
state = 'warning';
|
autoComplete="off"
|
||||||
}
|
autoCorrect="off"
|
||||||
if (gasLimitErrors) {
|
autoCapitalize="off"
|
||||||
state = 'error';
|
spellCheck="false"
|
||||||
}
|
topLabel="Amount"
|
||||||
return state;
|
value={amount}
|
||||||
}
|
onChange={event => onAmountChange(event.target.value)}
|
||||||
|
bottomText={errors.amount || warnings.amount || infos.amount}
|
||||||
getGasPriceInputState(gasPriceErrors: string, gasPriceWarnings: string) {
|
sideAddons={[
|
||||||
let state = '';
|
(
|
||||||
if (gasPriceWarnings && !gasPriceErrors) {
|
<SetMaxAmountButton
|
||||||
state = 'warning';
|
key="icon"
|
||||||
}
|
onClick={() => onSetMax()}
|
||||||
if (gasPriceErrors) {
|
isActive={setMax}
|
||||||
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> & 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> & 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()}
|
|
||||||
>
|
>
|
||||||
{sendButtonText}
|
{!setMax && (
|
||||||
</SendButton>
|
<Icon
|
||||||
</AdvancedSettingsSendButtonWrapper>
|
icon={ICONS.TOP}
|
||||||
</AdvancedSettingsWrapper>
|
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 && (
|
<InputRow>
|
||||||
<PendingTransactions
|
<FeeLabelWrapper>
|
||||||
pending={this.props.selectedAccount.pending}
|
<FeeLabel>Fee</FeeLabel>
|
||||||
tokens={this.props.selectedAccount.tokens}
|
{gasPriceNeedsUpdate && (
|
||||||
network={network}
|
<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={advancedButtonCanAnimate}
|
||||||
/>
|
/>
|
||||||
)}
|
</ToggleAdvancedSettingsButton>
|
||||||
</Wrapper>
|
|
||||||
</SelectedAccount>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
{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;
|
export default AccountSend;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user