mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
6.7 KiB
195 lines
6.7 KiB
6 years ago
|
/* @flow */
|
||
|
'use strict';
|
||
|
|
||
|
import React, { Component } from 'react';
|
||
|
import Select from 'react-select';
|
||
|
import AdvancedForm from './AdvancedForm';
|
||
6 years ago
|
import PendingTransactions from './PendingTransactions';
|
||
6 years ago
|
import { FeeSelectValue, FeeSelectOption } from './FeeSelect';
|
||
6 years ago
|
import { Notification } from '../../../common/Notification';
|
||
|
import AbstractAccount from '../AbstractAccount';
|
||
|
import { findAccountTokens } from '../../../../reducers/TokensReducer';
|
||
6 years ago
|
|
||
6 years ago
|
import type { Props } from './index';
|
||
6 years ago
|
import type { AccountState } from '../AbstractAccount';
|
||
6 years ago
|
|
||
|
export default class Send extends AbstractAccount<Props> {
|
||
6 years ago
|
render() {
|
||
6 years ago
|
return super.render() || _render(this.props, this.state);
|
||
6 years ago
|
}
|
||
|
}
|
||
|
|
||
6 years ago
|
const _render = (props: Props, state: AccountState): React$Element<string> => {
|
||
|
|
||
|
const {
|
||
|
device,
|
||
|
account,
|
||
6 years ago
|
discovery,
|
||
6 years ago
|
deviceStatusNotification
|
||
|
} = state;
|
||
6 years ago
|
const abstractAccount = props.abstractAccount;
|
||
6 years ago
|
|
||
6 years ago
|
if (!device || !account || !discovery || !abstractAccount) return <section></section>;
|
||
6 years ago
|
|
||
6 years ago
|
const tokens = findAccountTokens(props.tokens, account);
|
||
6 years ago
|
const { network } = abstractAccount;
|
||
6 years ago
|
|
||
|
const {
|
||
|
address,
|
||
|
amount,
|
||
|
setMax,
|
||
6 years ago
|
coinSymbol,
|
||
6 years ago
|
selectedCurrency,
|
||
6 years ago
|
feeLevels,
|
||
|
selectedFeeLevel,
|
||
|
gasPriceNeedsUpdate,
|
||
|
total,
|
||
|
errors,
|
||
|
warnings,
|
||
|
infos,
|
||
|
advanced,
|
||
|
sending,
|
||
|
} = props.sendForm;
|
||
|
|
||
|
const {
|
||
|
onAddressChange,
|
||
|
onAmountChange,
|
||
|
onSetMax,
|
||
|
onCurrencyChange,
|
||
|
onFeeLevelChange,
|
||
|
updateFeeLevels,
|
||
|
onSend,
|
||
|
} = props.sendFormActions;
|
||
|
|
||
6 years ago
|
const selectedCoin = abstractAccount.coin;
|
||
6 years ago
|
const fiatRate = props.fiat.find(f => f.network === network);
|
||
6 years ago
|
|
||
6 years ago
|
const tokensSelectData = tokens.map(t => {
|
||
6 years ago
|
return { value: t.symbol, label: t.symbol };
|
||
|
});
|
||
6 years ago
|
tokensSelectData.unshift({ value: selectedCoin.symbol, label: selectedCoin.symbol });
|
||
6 years ago
|
|
||
|
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';
|
||
|
}
|
||
|
|
||
6 years ago
|
let buttonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
|
||
6 years ago
|
let buttonLabel: string = 'Send';
|
||
6 years ago
|
if (coinSymbol !== selectedCurrency && amount.length > 0 && !errors.amount) {
|
||
|
buttonLabel += ` ${amount} ${ selectedCurrency.toUpperCase() }`
|
||
|
} else if (coinSymbol === selectedCurrency && total !== '0') {
|
||
6 years ago
|
buttonLabel += ` ${total} ${ selectedCoin.symbol }`;
|
||
6 years ago
|
}
|
||
|
|
||
6 years ago
|
if (!device.connected){
|
||
|
buttonLabel = 'Device is not connected';
|
||
|
buttonDisabled = true;
|
||
|
} else if (!device.available) {
|
||
|
buttonLabel = 'Device is unavailable';
|
||
|
buttonDisabled = true;
|
||
|
} else if (!discovery.completed) {
|
||
|
buttonLabel = 'Loading accounts';
|
||
|
buttonDisabled = true;
|
||
|
}
|
||
6 years ago
|
|
||
6 years ago
|
let notification = null;
|
||
|
|
||
|
return (
|
||
|
<section className="send-form">
|
||
|
|
||
6 years ago
|
{ deviceStatusNotification }
|
||
6 years ago
|
|
||
|
<h2>Send Ethereum or tokens</h2>
|
||
|
<div className="row address-input">
|
||
|
<label>Address</label>
|
||
|
<input
|
||
|
type="text"
|
||
|
autoComplete="off"
|
||
|
autoCorrect="off"
|
||
|
autoCapitalize="off"
|
||
|
spellCheck="false"
|
||
|
value={ address }
|
||
|
className={ addressClassName }
|
||
|
onChange={ event => onAddressChange(event.target.value) } />
|
||
|
<span className="input-icon"></span>
|
||
|
{ 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>
|
||
|
|
||
|
<div className="row">
|
||
|
<label>Amount</label>
|
||
|
<div className="amount-input">
|
||
|
<input
|
||
|
type="text"
|
||
|
autoComplete="off"
|
||
|
autoCorrect="off"
|
||
|
autoCapitalize="off"
|
||
|
spellCheck="false"
|
||
|
value={ amount }
|
||
|
className={ errors.amount ? 'not-valid' : null }
|
||
|
onChange={ event => onAmountChange(event.target.value) } />
|
||
|
|
||
|
<a className={ setMaxClassName } onClick={ onSetMax }>Set max</a>
|
||
|
|
||
|
<Select
|
||
|
name="currency"
|
||
|
className="currency"
|
||
|
searchable={ false }
|
||
|
clearable= { false }
|
||
|
multi={ false }
|
||
6 years ago
|
value={ selectedCurrency }
|
||
|
disabled={ tokensSelectData.length < 2 }
|
||
6 years ago
|
onChange={ onCurrencyChange }
|
||
6 years ago
|
options={ tokensSelectData } />
|
||
6 years ago
|
</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 }
|
||
|
optionClassName="fee-option"
|
||
|
options={ feeLevels } />
|
||
|
</div>
|
||
|
|
||
6 years ago
|
<AdvancedForm
|
||
|
abstractAccount={ props.abstractAccount }
|
||
|
sendForm={ props.sendForm }
|
||
|
sendFormActions={ props.sendFormActions }>
|
||
6 years ago
|
<button disabled={ buttonDisabled } onClick={ event => onSend() }>{ buttonLabel }</button>
|
||
|
</AdvancedForm>
|
||
6 years ago
|
|
||
6 years ago
|
<PendingTransactions
|
||
6 years ago
|
pending={ props.pending }
|
||
|
tokens={ props.tokens }
|
||
6 years ago
|
account={ account }
|
||
|
selectedCoin={ selectedCoin } />
|
||
6 years ago
|
|
||
|
</section>
|
||
|
);
|
||
|
}
|