aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/pending-tx.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/pending-tx.js')
-rw-r--r--ui/app/components/pending-tx.js634
1 files changed, 324 insertions, 310 deletions
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5324ccd64..1c47440f2 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -20,6 +20,34 @@ const GWEI_FACTOR = new BN(1e9)
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
const MIN_GAS_LIMIT_BN = new BN(21000)
+
+// Faked, for Icon
+const Identicon = require('./identicon')
+const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
+
+// Next: create separate react components
+// roughly 5 components:
+// heroIcon
+// numericDisplay (contains symbol + currency)
+// divider
+// contentBox
+// actionButtons
+const sectionDivider = h('div', {
+ style: {
+ height:'1px',
+ background:'#E7E7E7',
+ },
+})
+
+const contentDivider = h('div', {
+ style: {
+ marginLeft: '16px',
+ marginRight: '16px',
+ height:'1px',
+ background:'#E7E7E7',
+ },
+})
+
module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
@@ -70,344 +98,342 @@ PendingTx.prototype.render = function () {
this.inputs = []
return (
-
- h('div', {
- key: txMeta.id,
+ h('div.flex-column.flex-grow', {
+ style: {
+ // overflow: 'scroll',
+ minWidth: '355px', // TODO: maxWidth TBD, use home.html
+ },
}, [
- h('form#pending-tx-form', {
- onSubmit: this.onSubmit.bind(this),
-
+ // Main Send token Card
+ h('div.send-screen.flex-column.flex-grow', {
+ style: {
+ marginLeft: '3.5%',
+ marginRight: '3.5%',
+ background: '#FFFFFF', // $background-white
+ boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
+ }
}, [
+ h('section.flex-center.flex-row', {
+ style: {
+ zIndex: 15, // $token-icon-z-index
+ marginTop: '-35px',
+ }
+ }, [
+ h(Identicon, {
+ address: ARAGON,
+ diameter: 76,
+ }),
+ ]),
- // tx info
- h('div', [
+ //
+ // Required Fields
+ //
- h('.flex-row.flex-center', {
- style: {
- maxWidth: '100%',
- },
- }, [
+ h('h3.flex-center', {
+ style: {
+ marginTop: '-18px',
+ fontSize: '16px',
+ },
+ }, [
+ 'Confirm Transaction',
+ ]),
- h(MiniAccountPanel, {
- imageSeed: address,
- picOrder: 'right',
- }, [
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
- },
- }, identity.name),
-
- h(Copyable, {
- value: ethUtil.toChecksumAddress(address),
- }, [
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Light, Montserrat, sans-serif',
- },
- }, addressSummary(address, 6, 4, false)),
- ]),
-
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Light, Montserrat, sans-serif',
- },
- }, [
- h(EthBalance, {
- value: balance,
- conversionRate,
- currentCurrency,
- inline: true,
- labelColor: '#F7861C',
- }),
- ]),
- ]),
+ h('h3.flex-center', {
+ style: {
+ textAlign: 'center',
+ fontSize: '12px',
+ },
+ }, [
+ 'You\'re sending to Recipient ...5924',
+ ]),
- forwardCarrat(),
+ h('h3.flex-center', {
+ style: {
+ textAlign: 'center',
+ fontSize: '36px',
+ marginTop: '8px',
+ },
+ }, [
+ '0.24',
+ ]),
- this.miniAccountPanelForRecipient(),
- ]),
+ h('h3.flex-center', {
+ style: {
+ textAlign: 'center',
+ fontSize: '12px',
+ marginTop: '4px',
+ },
+ }, [
+ 'ANT',
+ ]),
- h('style', `
- .table-box {
- margin: 7px 0px 0px 0px;
- width: 100%;
- }
- .table-box .row {
- margin: 0px;
- background: rgb(236,236,236);
- display: flex;
- justify-content: space-between;
- font-family: Montserrat Light, sans-serif;
- font-size: 13px;
- padding: 5px 25px;
- }
- .table-box .row .value {
- font-family: Montserrat Regular;
- }
- `),
+ // error message
+ props.error && h('span.error.flex-center', props.error),
- h('.table-box', [
+ sectionDivider,
- // Ether Value
- // Currently not customizable, but easily modified
- // in the way that gas and gasLimit currently are.
- h('.row', [
- h('.cell.label', 'Amount'),
- h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
- ]),
+ h('section.flex-row.flex-center', {
+ }, [
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ }, [
+ h('span', {
+ style: {
+ textAlign: 'left',
+ fontSize: '12px',
+ }
+ }, [
+ 'From'
+ ])
+ ]),
- // Gas Limit (customizable)
- h('.cell.row', [
- h('.cell.label', 'Gas Limit'),
- h('.cell.value', {
- }, [
- h(BNInput, {
- name: 'Gas Limit',
- value: gasBn,
- precision: 0,
- scale: 0,
- // The hard lower limit for gas.
- min: MIN_GAS_LIMIT_BN.toString(10),
- max: safeGasLimit,
- suffix: 'UNITS',
- style: {
- position: 'relative',
- top: '5px',
- },
- onChange: this.gasLimitChanged.bind(this),
-
- ref: (hexInput) => { this.inputs.push(hexInput) },
- }),
- ]),
- ]),
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ },[
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '10px',
+ marginBottom: '-10px',
+ },
+ }, 'Aragon Token'),
- // Gas Price (customizable)
- h('.cell.row', [
- h('.cell.label', 'Gas Price'),
- h('.cell.value', {
- }, [
- h(BNInput, {
- name: 'Gas Price',
- value: gasPriceBn,
- precision: 9,
- scale: 9,
- suffix: 'GWEI',
- min: MIN_GAS_PRICE_GWEI_BN.toString(10),
- style: {
- position: 'relative',
- top: '5px',
- },
- onChange: this.gasPriceChanged.bind(this),
- ref: (hexInput) => { this.inputs.push(hexInput) },
- }),
- ]),
- ]),
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '8px',
+ },
+ }, 'Your Balance 2.34 ANT')
+ ])
+ ]),
- // Max Transaction Fee (calculated)
- h('.cell.row', [
- h('.cell.label', 'Max Transaction Fee'),
- h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
- ]),
+ contentDivider,
- h('.cell.row', {
+ h('section.flex-row.flex-center', {
+ }, [
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ }, [
+ h('span', {
style: {
- fontFamily: 'Montserrat Regular',
- background: 'white',
- padding: '10px 25px',
- },
+ textAlign: 'left',
+ fontSize: '12px',
+ }
}, [
- h('.cell.label', 'Max Total'),
- h('.cell.value', {
- style: {
- display: 'flex',
- alignItems: 'center',
- },
- }, [
- h(EthBalance, {
- value: maxCost.toString(16),
- currentCurrency,
- conversionRate,
- inline: true,
- labelColor: 'black',
- fontSize: '16px',
- }),
- ]),
- ]),
+ 'To'
+ ])
+ ]),
- // Data size row:
- h('.cell.row', {
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ },[
+ h('div', {
style: {
- background: '#f7f7f7',
- paddingBottom: '0px',
+ textAlign: 'left',
+ fontSize: '10px',
+ marginBottom: '-10px',
},
- }, [
- h('.cell.label'),
- h('.cell.value', {
- style: {
- fontFamily: 'Montserrat Light',
- fontSize: '11px',
- },
- }, `Data included: ${dataLength} bytes`),
- ]),
- ]), // End of Table
+ }, 'Ethereum Address'),
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '8px',
+ },
+ }, '...5924')
+ ])
]),
- h('style', `
- .conf-buttons button {
- margin-left: 10px;
- text-transform: uppercase;
- }
- `),
+ contentDivider,
- txMeta.simulationFails ?
- h('.error', {
- style: {
- marginLeft: 50,
- fontSize: '0.9em',
- },
- }, 'Transaction Error. Exception thrown in contract code.')
- : null,
-
- !isValidAddress ?
- h('.error', {
+ h('section.flex-row.flex-center', {
+ }, [
+ h('div', {
style: {
- marginLeft: 50,
- fontSize: '0.9em',
- },
- }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
- : null,
-
- insufficientBalance ?
- h('span.error', {
+ width: '50%',
+ }
+ }, [
+ h('span', {
+ style: {
+ textAlign: 'left',
+ fontSize: '12px',
+ }
+ }, [
+ 'Gas Fee'
+ ])
+ ]),
+
+ h('div', {
style: {
- marginLeft: 50,
- fontSize: '0.9em',
- },
- }, 'Insufficient balance for transaction')
- : null,
-
- // send + cancel
- h('.flex-row.flex-space-around.conf-buttons', {
+ width: '50%',
+ }
+ },[
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '10px',
+ marginBottom: '-10px',
+ },
+ }, '$0.04 USD'),
+
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '8px',
+ },
+ }, '0.001575 ETH')
+ ])
+ ]),
+
+ contentDivider,
+
+ h('section.flex-row.flex-center', {
style: {
- display: 'flex',
- justifyContent: 'flex-end',
- margin: '14px 25px',
- },
+ backgroundColor: '#F6F6F6', // $wild-sand
+ borderRadius: '8px',
+ marginLeft: '10px',
+ marginRight: '10px',
+ paddingLeft: '6px',
+ paddingRight: '6px',
+ marginBottom: '10px',
+ }
}, [
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ }, [
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '12px',
+ marginBottom: '-10px',
+ }
+ }, [
+ 'Total Tokens'
+ ]),
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '8px',
+ }
+ }, [
+ 'Total Gas'
+ ])
- insufficientBalance ?
- h('button.btn-green', {
- onClick: props.buyEth,
- }, 'Buy Ether')
- : null,
-
- h('button', {
- onClick: (event) => {
- this.resetGasFields()
- event.preventDefault()
- },
- }, 'Reset'),
-
- // Accept Button
- h('input.confirm.btn-green', {
- type: 'submit',
- value: 'SUBMIT',
- style: { marginLeft: '10px' },
- disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
- }),
+ ]),
- h('button.cancel.btn-red', {
- onClick: props.cancelTransaction,
- }, 'Reject'),
- ]),
- ]),
- ])
- )
-}
+ h('div', {
+ style: {
+ width: '50%',
+ }
+ },[
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '10px',
+ marginBottom: '-10px',
+ },
+ }, '0.24 ANT (127.00 USD)'),
-PendingTx.prototype.miniAccountPanelForRecipient = function () {
- const props = this.props
- const txData = props.txData
- const txParams = txData.txParams || {}
- const isContractDeploy = !('to' in txParams)
-
- // If it's not a contract deploy, send to the account
- if (!isContractDeploy) {
- return h(MiniAccountPanel, {
- imageSeed: txParams.to,
- picOrder: 'left',
- }, [
+ h('div', {
+ style: {
+ textAlign: 'left',
+ fontSize: '8px',
+ },
+ }, '0.249 ETH')
+ ])
+ ]),
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
- },
- }, nameForAddress(txParams.to, props.identities)),
+ ]), // end of container
- h(Copyable, {
- value: ethUtil.toChecksumAddress(txParams.to),
+ h('form#pending-tx-form.flex-column.flex-center', {
+ onSubmit: this.onSubmit.bind(this),
}, [
- h('span.font-small', {
+ // Reset Button
+ // h('button', {
+ // onClick: (event) => {
+ // this.resetGasFields()
+ // event.preventDefault()
+ // },
+ // }, 'Reset'),
+
+ // Accept Button
+ h('input.confirm.btn-green', {
+ type: 'submit',
+ value: 'CONFIRM',
style: {
- fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+ marginTop: '8px',
+ width: '8em',
+ color: '#FFFFFF',
+ borderRadius: '2px',
+ fontSize: '12px',
+ lineHeight: '20px',
+ textAlign: 'center',
+ borderStyle: 'none',
},
- }, addressSummary(txParams.to, 6, 4, false)),
- ]),
-
- ])
- } else {
- return h(MiniAccountPanel, {
- picOrder: 'left',
- }, [
+ disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
+ }),
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
- },
- }, 'New Contract'),
-
- ])
- }
-}
-
-PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
- log.info(`Gas price changed to: ${newBN.toString(10)}`)
- const txMeta = this.gatherTxMeta()
- txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
- this.setState({
- txData: clone(txMeta),
- valid,
- })
-}
-
-PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
- log.info(`Gas limit changed to ${newBN.toString(10)}`)
- const txMeta = this.gatherTxMeta()
- txMeta.txParams.gas = '0x' + newBN.toString('hex')
- this.setState({
- txData: clone(txMeta),
- valid,
- })
+ // Cancel Button
+ h('button.cancel.btn-light', {
+ style: {
+ background: '#F7F7F7', // $alabaster
+ border: 'none',
+ opacity: 1,
+ width: '8em',
+ },
+ onClick: props.cancelTransaction,
+ }, 'CANCEL'),
+ ]),
+ ]) // end of minwidth wrapper
+ )
}
-PendingTx.prototype.resetGasFields = function () {
- log.debug(`pending-tx resetGasFields`)
-
- this.inputs.forEach((hexInput) => {
- if (hexInput) {
- hexInput.setValid()
- }
- })
-
- this.setState({
- txData: null,
- valid: true,
- })
-}
+// PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
+// log.info(`Gas price changed to: ${newBN.toString(10)}`)
+// const txMeta = this.gatherTxMeta()
+// txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
+// this.setState({
+// txData: clone(txMeta),
+// valid,
+// })
+// }
+
+// PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
+// log.info(`Gas limit changed to ${newBN.toString(10)}`)
+// const txMeta = this.gatherTxMeta()
+// txMeta.txParams.gas = '0x' + newBN.toString('hex')
+// this.setState({
+// txData: clone(txMeta),
+// valid,
+// })
+// }
+
+// PendingTx.prototype.resetGasFields = function () {
+// log.debug(`pending-tx resetGasFields`)
+
+// this.inputs.forEach((hexInput) => {
+// if (hexInput) {
+// hexInput.setValid()
+// }
+// })
+
+// this.setState({
+// txData: null,
+// valid: true,
+// })
+// }
PendingTx.prototype.onSubmit = function (event) {
event.preventDefault()
@@ -466,15 +492,3 @@ PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denomi
const denomBN = new BN(denominator)
return targetBN.mul(numBN).div(denomBN)
}
-
-function forwardCarrat () {
- return (
- h('img', {
- src: 'images/forward-carrat.svg',
- style: {
- padding: '5px 6px 0px 10px',
- height: '37px',
- },
- })
- )
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-09 14:51:15 +0800