diff options
Diffstat (limited to 'ui/app/pages/send/send.component.js')
-rw-r--r-- | ui/app/pages/send/send.component.js | 193 |
1 files changed, 153 insertions, 40 deletions
diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js index 5f0c9c9f2..9cdf75536 100644 --- a/ui/app/pages/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -7,10 +7,14 @@ import { getToAddressForGasUpdate, doesAmountErrorRequireUpdate, } from './send.utils' - +import debounce from 'lodash.debounce' +import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient' import SendHeader from './send-header' +import AddRecipient from './send-content/add-recipient' import SendContent from './send-content' import SendFooter from './send-footer' +import EnsInput from './send-content/add-recipient/ens-input' + export default class SendTransactionScreen extends PersistentForm { @@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm { gasLimit: PropTypes.string, gasPrice: PropTypes.string, gasTotal: PropTypes.string, + to: PropTypes.string, history: PropTypes.object, network: PropTypes.string, primaryCurrency: PropTypes.string, recentBlocks: PropTypes.array, selectedAddress: PropTypes.string, selectedToken: PropTypes.object, + tokens: PropTypes.array, tokenBalance: PropTypes.string, tokenContract: PropTypes.object, fetchBasicGasEstimates: PropTypes.func, @@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm { scanQrCode: PropTypes.func, qrCodeDetected: PropTypes.func, qrCodeData: PropTypes.object, + ensResolution: PropTypes.string, + ensResolutionError: PropTypes.string, } static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + query: '', + toError: null, + toWarning: null, + } + + constructor (props) { + super(props) + this.dValidate = debounce(this.validate, 1000) } componentWillReceiveProps (nextProps) { @@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm { } } - updateGas ({ to: updatedToAddress, amount: value, data } = {}) { - const { - amount, - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken = {}, - to: currentToAddress, - updateAndSetGasLimit, - } = this.props - - updateAndSetGasLimit({ - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken, - to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), - value: value || amount, - data, - }) - } - componentDidUpdate (prevProps) { const { amount, @@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm { updateSendErrors, updateSendTokenBalance, tokenContract, + to, + toNickname, + addressBook, + updateToNicknameIfNecessary, } = this.props const { @@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm { tokenContract, address, }) + updateToNicknameIfNecessary(to, toNickname, addressBook) this.updateGas() } } @@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm { componentDidMount () { this.props.fetchBasicGasEstimates() - .then(() => { - this.updateGas() - }) + .then(() => { + this.updateGas() + }) } componentWillMount () { @@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm { this.props.resetSendState() } + onRecipientInputChange = query => { + if (query) { + this.dValidate(query) + } else { + this.validate(query) + } + + this.setState({ + query, + }) + } + + validate (query) { + const { + hasHexData, + tokens, + selectedToken, + network, + } = this.props + + if (!query) { + return this.setState({ toError: '', toWarning: '' }) + } + + const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network) + const toWarningObject = getToWarningObject(query, null, tokens, selectedToken) + + this.setState({ + toError: toErrorObject.to, + toWarning: toWarningObject.to, + }) + } + updateSendToken () { const { from: { address }, @@ -211,20 +241,103 @@ export default class SendTransactionScreen extends PersistentForm { }) } + updateGas ({ to: updatedToAddress, amount: value, data } = {}) { + const { + amount, + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken = {}, + to: currentToAddress, + updateAndSetGasLimit, + } = this.props + + updateAndSetGasLimit({ + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken, + to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), + value: value || amount, + data, + }) + } + render () { - const { history, showHexData } = this.props + const { history, to } = this.props + let content + + if (to) { + content = this.renderSendContent() + } else { + content = this.renderAddRecipient() + } return ( <div className="page-container"> - <SendHeader history={history}/> - <SendContent - updateGas={(updateData) => this.updateGas(updateData)} - scanQrCode={_ => this.props.scanQrCode()} - showHexData={showHexData} - /> - <SendFooter history={history}/> + <SendHeader history={history} /> + { this.renderInput() } + { content } </div> ) } + renderInput () { + return ( + <EnsInput + className="send__to-row" + scanQrCode={_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Used QR scanner', + }, + }) + this.props.scanQrCode() + }} + onChange={this.onRecipientInputChange} + onPaste={text => this.props.updateSendTo(text)} + onReset={() => this.props.updateSendTo('', '')} + updateEnsResolution={this.props.updateSendEnsResolution} + updateEnsResolutionError={this.props.updateSendEnsResolutionError} + /> + ) + } + + renderAddRecipient () { + const { scanQrCode } = this.props + const { toError, toWarning } = this.state + + return ( + <AddRecipient + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + query={this.state.query} + toError={toError} + toWarning={toWarning} + /> + ) + } + + renderSendContent () { + const { history, showHexData, scanQrCode } = this.props + + return [ + <SendContent + key="send-content" + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + showHexData={showHexData} + />, + <SendFooter key="send-footer" history={history} />, + ] + } + } |