mirror of
https://github.com/trezor/trezor-wallet
synced 2025-02-02 11:21:11 +00:00
Refactorize AccountSend
This commit is contained in:
Vasek Mlejnsky
parent
9ef8d8f618
commit
39aff35810
@ -1,19 +1,178 @@
|
||||
/* @flow */
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Select from 'react-select';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Select } from 'components/Select';
|
||||
import Button from 'components/Button';
|
||||
import Input from 'components/inputs/Input';
|
||||
import Icon from 'components/Icon';
|
||||
import Link from 'components/Link';
|
||||
import ICONS from 'config/icons';
|
||||
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 'rc-tooltip';
|
||||
import TooltipContent from 'components/TooltipContent';
|
||||
import { calculate, validation } from 'actions/SendFormActions';
|
||||
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||
import type { Token } from 'flowtype';
|
||||
import AdvancedForm from './components/AdvancedForm';
|
||||
import PendingTransactions from './components/PendingTransactions';
|
||||
import { FeeSelectValue, FeeSelectOption } from './components/FeeSelect';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
export default class AccountSendContainer extends Component<Props> {
|
||||
type State = {
|
||||
isAdvancedSettingsHidden: boolean,
|
||||
shouldAnimateAdvancedSettingsToggle: boolean,
|
||||
};
|
||||
|
||||
const Wrapper = styled.section`
|
||||
padding: 0 48px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
const InputRow = styled.div`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const SetMaxAmountButton = styled(Button)`
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-weight: ${FONT_WEIGHT.SMALLEST};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
|
||||
border-radius: 0;
|
||||
border: 1px solid ${colors.DIVIDER};
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
background: transparent;
|
||||
transition: ${TRANSITION.HOVER};
|
||||
|
||||
&:hover {
|
||||
background: ${colors.GRAY_LIGHT};
|
||||
}
|
||||
|
||||
${props => props.isActive && css`
|
||||
color: ${colors.WHITE};
|
||||
background: ${colors.GREEN_PRIMARY};
|
||||
border-color: ${colors.GREEN_PRIMARY};
|
||||
|
||||
&:hover {
|
||||
background: ${colors.GREEN_SECONDARY};
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: ${colors.GREEN_TERTIARY};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const CurrencySelect = styled(Select)`
|
||||
height: 34px;
|
||||
flex: 0.2;
|
||||
`;
|
||||
|
||||
const FeeOptionWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const FeeLabelWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
`;
|
||||
|
||||
const FeeLabel = styled.span`
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
const UpdateFeeWrapper = styled.span`
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
color: ${colors.WARNING_PRIMARY};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
margin-left: 4px;
|
||||
`;
|
||||
|
||||
const ToggleAdvancedSettingsWrapper = styled.div`
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const ToggleAdvancedSettingsButton = styled(Button)`
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
||||
`;
|
||||
|
||||
const SendButton = styled(Button)`
|
||||
min-width: 50%;
|
||||
`;
|
||||
|
||||
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};
|
||||
`;
|
||||
|
||||
class AccountSend extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isAdvancedSettingsHidden: true,
|
||||
shouldAnimateAdvancedSettingsToggle: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(newProps: Props) {
|
||||
calculate(this.props, newProps);
|
||||
validation(newProps);
|
||||
@ -21,30 +180,84 @@ export default class AccountSendContainer extends Component<Props> {
|
||||
this.props.saveSessionStorage();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SelectedAccount {...this.props}>
|
||||
<Send {...this.props} />
|
||||
</SelectedAccount>
|
||||
);
|
||||
getAddressInputState(address: string, addressErrors: string, addressWarnings: string) {
|
||||
let state = '';
|
||||
if (address && !addressErrors) {
|
||||
state = 'success';
|
||||
} else if (addressWarnings && !addressErrors) {
|
||||
state = 'warning';
|
||||
} else if (addressErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding: 20px 48px;
|
||||
`;
|
||||
getAmountInputState(amountErrors: string, amountWarnings: string) {
|
||||
let state = '';
|
||||
if (amountWarnings && !amountErrors) {
|
||||
state = 'warning';
|
||||
} else if (amountErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
const Send = (props: Props) => {
|
||||
const device = props.wallet.selectedDevice;
|
||||
getAmountInputBottomText(amountErrors: string, amountWarnings: string) {
|
||||
let text = '';
|
||||
if (amountWarnings && !amountErrors) {
|
||||
text = amountWarnings;
|
||||
} else if (amountErrors) {
|
||||
text = amountErrors;
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) {
|
||||
let state = '';
|
||||
if (gasLimitWarnings && !gasLimitErrors) {
|
||||
state = 'warning';
|
||||
} else if (gasLimitErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
getGasPriceInputState(gasPriceErrors: string, gasPriceWarnings: string) {
|
||||
let state = '';
|
||||
if (gasPriceWarnings && !gasPriceErrors) {
|
||||
state = 'warning';
|
||||
} else if (gasPriceErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
getTokensSelectData(tokens: Array<Token>, accountNetwork: any) {
|
||||
const tokensSelectData = 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,
|
||||
} = props.selectedAccount;
|
||||
|
||||
if (!device || !account || !discovery || !network) return null;
|
||||
|
||||
} = this.props.selectedAccount;
|
||||
const {
|
||||
address,
|
||||
amount,
|
||||
@ -53,15 +266,16 @@ const Send = (props: Props) => {
|
||||
currency,
|
||||
feeLevels,
|
||||
selectedFeeLevel,
|
||||
recommendedGasPrice,
|
||||
gasPriceNeedsUpdate,
|
||||
total,
|
||||
errors,
|
||||
warnings,
|
||||
infos,
|
||||
advanced,
|
||||
data,
|
||||
sending,
|
||||
} = props.sendForm;
|
||||
gasLimit,
|
||||
gasPrice,
|
||||
} = this.props.sendForm;
|
||||
|
||||
const {
|
||||
onAddressChange,
|
||||
@ -71,134 +285,288 @@ const Send = (props: Props) => {
|
||||
onFeeLevelChange,
|
||||
updateFeeLevels,
|
||||
onSend,
|
||||
} = props.sendFormActions;
|
||||
onGasLimitChange,
|
||||
onGasPriceChange,
|
||||
onDataChange,
|
||||
} = this.props.sendFormActions;
|
||||
|
||||
const fiatRate = props.fiat.find(f => f.network === network);
|
||||
if (!device || !account || !discovery || !network) return null;
|
||||
|
||||
const tokensSelectData = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
|
||||
tokensSelectData.unshift({ value: network.symbol, label: network.symbol });
|
||||
|
||||
const setMaxClassName: string = setMax ? 'set-max enabled' : 'set-max';
|
||||
|
||||
let updateFeeLevelsButton = null;
|
||||
if (gasPriceNeedsUpdate) {
|
||||
updateFeeLevelsButton = (
|
||||
<span className="update-fee-levels">Recommended fees updated. <a onClick={updateFeeLevels}>Click here to use them</a></span>
|
||||
);
|
||||
}
|
||||
|
||||
let addressClassName: ?string;
|
||||
if (errors.address) {
|
||||
addressClassName = 'not-valid';
|
||||
} else if (warnings.address) {
|
||||
addressClassName = 'warning';
|
||||
} else if (address.length > 0) {
|
||||
addressClassName = 'valid';
|
||||
}
|
||||
|
||||
let buttonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
|
||||
let buttonLabel: string = 'Send';
|
||||
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) {
|
||||
buttonLabel += ` ${amount} ${currency.toUpperCase()}`;
|
||||
sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
|
||||
} else if (networkSymbol === currency && total !== '0') {
|
||||
buttonLabel += ` ${total} ${network.symbol}`;
|
||||
sendButtonText += ` ${total} ${network.symbol}`;
|
||||
}
|
||||
|
||||
if (!device.connected) {
|
||||
buttonLabel = 'Device is not connected';
|
||||
buttonDisabled = true;
|
||||
sendButtonText = 'Device is not connected';
|
||||
isSendButtonDisabled = true;
|
||||
} else if (!device.available) {
|
||||
buttonLabel = 'Device is unavailable';
|
||||
buttonDisabled = true;
|
||||
sendButtonText = 'Device is unavailable';
|
||||
isSendButtonDisabled = true;
|
||||
} else if (!discovery.completed) {
|
||||
buttonLabel = 'Loading accounts';
|
||||
buttonDisabled = true;
|
||||
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 (
|
||||
<section className="send-form">
|
||||
<SelectedAccount {...this.props}>
|
||||
<Wrapper>
|
||||
<StyledH2>Send Ethereum or tokens</StyledH2>
|
||||
<div className="row address-input">
|
||||
<label>Address</label>
|
||||
<input
|
||||
type="text"
|
||||
<InputRow>
|
||||
<Input
|
||||
state={this.getAddressInputState(address, errors.address, warnings.address)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel="Address"
|
||||
bottomText={errors.address ? 'Wrong Address' : ''}
|
||||
value={address}
|
||||
className={addressClassName}
|
||||
onChange={event => onAddressChange(event.target.value)}
|
||||
/>
|
||||
<span className="input-icon" />
|
||||
{ errors.address ? (<span className="error">{ errors.address }</span>) : null }
|
||||
{ warnings.address ? (<span className="warning">{ warnings.address }</span>) : null }
|
||||
{ infos.address ? (<span className="info">{ infos.address }</span>) : null }
|
||||
</div>
|
||||
</InputRow>
|
||||
|
||||
<div className="row">
|
||||
<label>Amount</label>
|
||||
<div className="amount-input">
|
||||
<input
|
||||
type="text"
|
||||
<InputRow>
|
||||
<Input
|
||||
state={this.getAmountInputState(errors.amount, warnings.amount)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel="Amount"
|
||||
value={amount}
|
||||
className={errors.amount ? 'not-valid' : null}
|
||||
onChange={event => onAmountChange(event.target.value)}
|
||||
bottomText={this.getAmountInputBottomText(errors.amount, warnings.amount)}
|
||||
sideAddons={[
|
||||
(
|
||||
<SetMaxAmountButton
|
||||
key="icon"
|
||||
onClick={() => onSetMax()}
|
||||
isActive={setMax}
|
||||
>
|
||||
{!setMax && (
|
||||
<Icon
|
||||
icon={ICONS.TOP}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
|
||||
<a className={setMaxClassName} onClick={onSetMax}>Set max</a>
|
||||
|
||||
<Select
|
||||
name="currency"
|
||||
className="currency"
|
||||
searchable={false}
|
||||
clearable={false}
|
||||
multi={false}
|
||||
value={currency}
|
||||
disabled={tokensSelectData.length < 2}
|
||||
)}
|
||||
{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}
|
||||
/>
|
||||
</div>
|
||||
{ errors.amount ? (<span className="error">{ errors.amount }</span>) : null }
|
||||
{ warnings.amount ? (<span className="warning">{ warnings.amount }</span>) : null }
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<label>Fee{ updateFeeLevelsButton }</label>
|
||||
<Select
|
||||
name="fee"
|
||||
className="fee"
|
||||
searchable={false}
|
||||
clearable={false}
|
||||
value={selectedFeeLevel}
|
||||
onChange={onFeeLevelChange}
|
||||
valueComponent={FeeSelectValue}
|
||||
optionComponent={FeeSelectOption}
|
||||
disabled={networkSymbol === currency && data.length > 0}
|
||||
optionClassName="fee-option"
|
||||
options={feeLevels}
|
||||
),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</InputRow>
|
||||
|
||||
<AdvancedForm
|
||||
selectedAccount={props.selectedAccount}
|
||||
sendForm={props.sendForm}
|
||||
sendFormActions={props.sendFormActions}
|
||||
<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>
|
||||
<ToggleAdvancedSettingsButton
|
||||
isTransparent
|
||||
onClick={() => this.handleToggleAdvancedSettingsButton()}
|
||||
>
|
||||
<button disabled={buttonDisabled} onClick={event => onSend()}>{ buttonLabel }</button>
|
||||
</AdvancedForm>
|
||||
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}
|
||||
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={(
|
||||
<React.Fragment>
|
||||
Gas limit
|
||||
<Tooltip
|
||||
arrowContent={<div className="rc-tooltip-arrow-inner" />}
|
||||
overlay={(
|
||||
<TooltipContent>
|
||||
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>
|
||||
</TooltipContent>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
)}
|
||||
bottomText={errors.gasLimit ? errors.gasLimit : warnings.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={(
|
||||
<React.Fragment>
|
||||
Gas price
|
||||
<Tooltip
|
||||
arrowContent={<div className="rc-tooltip-arrow-inner" />}
|
||||
overlay={(
|
||||
<TooltipContent>
|
||||
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>
|
||||
</TooltipContent>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
)}
|
||||
bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice}
|
||||
value={gasPrice}
|
||||
onChange={event => onGasPriceChange(event.target.value)}
|
||||
/>
|
||||
</GasInputRow>
|
||||
|
||||
<StyledTextarea
|
||||
topLabel={(
|
||||
<React.Fragment>
|
||||
Data
|
||||
<Tooltip
|
||||
arrowContent={<div className="rc-tooltip-arrow-inner" />}
|
||||
overlay={(
|
||||
<TooltipContent>
|
||||
Data is usually used when you send transactions to contracts.
|
||||
</TooltipContent>
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
)}
|
||||
disabled={networkSymbol !== currency}
|
||||
value={networkSymbol !== currency ? '' : data}
|
||||
onChange={event => onDataChange(event.target.value)}
|
||||
/>
|
||||
|
||||
<AdvancedSettingsSendButtonWrapper>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</AdvancedSettingsSendButtonWrapper>
|
||||
</AdvancedSettingsWrapper>
|
||||
)}
|
||||
|
||||
<PendingTransactions
|
||||
pending={props.selectedAccount.pending}
|
||||
tokens={props.selectedAccount.tokens}
|
||||
pending={this.props.selectedAccount.pending}
|
||||
tokens={this.props.selectedAccount.tokens}
|
||||
network={network}
|
||||
/>
|
||||
|
||||
</section>
|
||||
</Wrapper>
|
||||
</SelectedAccount>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default AccountSend;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user