From 6561e75aa2fb03c77544da3c090ad6ea2883d29a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:23 -0330 Subject: Add old-ui directory --- old-ui/app/send.js | 293 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 293 insertions(+) create mode 100644 old-ui/app/send.js (limited to 'old-ui/app/send.js') diff --git a/old-ui/app/send.js b/old-ui/app/send.js new file mode 100644 index 000000000..e59c1130e --- /dev/null +++ b/old-ui/app/send.js @@ -0,0 +1,293 @@ +const inherits = require('util').inherits +const PersistentForm = require('../lib/persistent-form') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const Identicon = require('./components/identicon') +const actions = require('./actions') +const util = require('./util') +const numericBalance = require('./util').numericBalance +const addressSummary = require('./util').addressSummary +const isHex = require('./util').isHex +const EthBalance = require('./components/eth-balance') +const EnsInput = require('./components/ens-input') +const ethUtil = require('ethereumjs-util') +module.exports = connect(mapStateToProps)(SendTransactionScreen) + +function mapStateToProps (state) { + var result = { + address: state.metamask.selectedAddress, + accounts: state.metamask.accounts, + identities: state.metamask.identities, + warning: state.appState.warning, + network: state.metamask.network, + addressBook: state.metamask.addressBook, + conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, + } + + result.error = result.warning && result.warning.split('.')[0] + + result.account = result.accounts[result.address] + result.identity = result.identities[result.address] + result.balance = result.account ? numericBalance(result.account.balance) : null + + return result +} + +inherits(SendTransactionScreen, PersistentForm) +function SendTransactionScreen () { + PersistentForm.call(this) +} + +SendTransactionScreen.prototype.render = function () { + this.persistentFormParentId = 'send-tx-form' + + const props = this.props + const { + address, + account, + identity, + network, + identities, + addressBook, + conversionRate, + currentCurrency, + } = props + + return ( + + h('.send-screen.flex-column.flex-grow', [ + + // + // Sender Profile + // + + h('.account-data-subsection.flex-row.flex-grow', { + style: { + margin: '0 20px', + }, + }, [ + + // header - identicon + nav + h('.flex-row.flex-space-between', { + style: { + marginTop: '15px', + }, + }, [ + // back button + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: this.back.bind(this), + }), + + // large identicon + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(Identicon, { + diameter: 62, + address: address, + }), + ]), + + // invisible place holder + h('i.fa.fa-users.fa-lg.invisible', { + style: { + marginTop: '28px', + }, + }), + + ]), + + // account label + + h('.flex-column', { + style: { + marginTop: '10px', + alignItems: 'flex-start', + }, + }, [ + h('h2.font-medium.color-forest.flex-center', { + style: { + paddingTop: '8px', + marginBottom: '8px', + }, + }, identity && identity.name), + + // address and getter actions + h('.flex-row.flex-center', { + style: { + marginBottom: '8px', + }, + }, [ + + h('div', { + style: { + lineHeight: '16px', + }, + }, addressSummary(address)), + + ]), + + // balance + h('.flex-row.flex-center', [ + + h(EthBalance, { + value: account && account.balance, + conversionRate, + currentCurrency, + }), + + ]), + ]), + ]), + + // + // Required Fields + // + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: '15px', + marginBottom: '16px', + }, + }, [ + 'Send Transaction', + ]), + + // error message + props.error && h('span.error.flex-center', props.error), + + // 'to' field + h('section.flex-row.flex-center', [ + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + onChange: this.recipientDidChange.bind(this), + network, + identities, + addressBook, + }), + ]), + + // 'amount' and send button + h('section.flex-row.flex-center', [ + + h('input.large-input', { + name: 'amount', + placeholder: 'Amount', + type: 'number', + style: { + marginRight: '6px', + }, + dataset: { + persistentFormId: 'tx-amount', + }, + }), + + h('button.primary', { + onClick: this.onSubmit.bind(this), + style: { + textTransform: 'uppercase', + }, + }, 'Next'), + + ]), + + // + // Optional Fields + // + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: '16px', + marginBottom: '16px', + }, + }, [ + 'Transaction Data (optional)', + ]), + + // 'data' field + h('section.flex-column.flex-center', [ + h('input.large-input', { + name: 'txData', + placeholder: '0x01234', + style: { + width: '100%', + resize: 'none', + }, + dataset: { + persistentFormId: 'tx-data', + }, + }), + ]), + ]) + ) +} + +SendTransactionScreen.prototype.navigateToAccounts = function (event) { + event.stopPropagation() + this.props.dispatch(actions.showAccountsPage()) +} + +SendTransactionScreen.prototype.back = function () { + var address = this.props.address + this.props.dispatch(actions.backToAccountDetail(address)) +} + +SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) { + this.setState({ + recipient: recipient, + nickname: nickname, + }) +} + +SendTransactionScreen.prototype.onSubmit = function () { + const state = this.state || {} + const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') + const nickname = state.nickname || ' ' + const input = document.querySelector('input[name="amount"]').value + const value = util.normalizeEthStringToWei(input) + const txData = document.querySelector('input[name="txData"]').value + const balance = this.props.balance + let message + + if (value.gt(balance)) { + message = 'Insufficient funds.' + return this.props.dispatch(actions.displayWarning(message)) + } + + if (input < 0) { + message = 'Can not send negative amounts of ETH.' + return this.props.dispatch(actions.displayWarning(message)) + } + + if ((util.isInvalidChecksumAddress(recipient))) { + message = 'Recipient address checksum is invalid.' + return this.props.dispatch(actions.displayWarning(message)) + } + + if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { + message = 'Recipient address is invalid.' + return this.props.dispatch(actions.displayWarning(message)) + } + + if (!isHex(ethUtil.stripHexPrefix(txData)) && txData) { + message = 'Transaction data must be hex string.' + return this.props.dispatch(actions.displayWarning(message)) + } + + this.props.dispatch(actions.hideWarning()) + + this.props.dispatch(actions.addToAddressBook(recipient, nickname)) + + var txParams = { + from: this.props.address, + value: '0x' + value.toString(16), + } + + if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) + if (txData) txParams.data = txData + + this.props.dispatch(actions.signTx(txParams)) +} -- cgit From f7ad015f5bd3b037b73d7792d0a09d7e0382a511 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 15 Nov 2017 14:05:18 -0330 Subject: Use newui actions in old-ui --- old-ui/app/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'old-ui/app/send.js') diff --git a/old-ui/app/send.js b/old-ui/app/send.js index e59c1130e..9ab064aea 100644 --- a/old-ui/app/send.js +++ b/old-ui/app/send.js @@ -3,7 +3,7 @@ const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') -const actions = require('./actions') +const actions = require('../../ui/app/actions') const util = require('./util') const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary -- cgit From 099f078a3d73b2aed30dc5e1cd3a2facde58606a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 3 Jan 2018 11:16:46 -0800 Subject: Fix merge conflict --- old-ui/app/send.js | 1 - 1 file changed, 1 deletion(-) (limited to 'old-ui/app/send.js') diff --git a/old-ui/app/send.js b/old-ui/app/send.js index 0dc0fa778..b40910236 100644 --- a/old-ui/app/send.js +++ b/old-ui/app/send.js @@ -267,7 +267,6 @@ SendTransactionScreen.prototype.onSubmit = function () { const value = util.normalizeEthStringToWei(input) const txData = document.querySelector('input[name="txData"]').value const balance = this.props.balance - let message if (value.gt(balance)) { message = 'Insufficient funds.' -- cgit