mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Fleshed out pending tx view
This commit is contained in:
parent
689bd58d81
commit
7481f7c3df
File diff suppressed because one or more lines are too long
@ -43,7 +43,7 @@ AccountPanel.prototype.render = function () {
|
|||||||
return h('span.font-small', {
|
return h('span.font-small', {
|
||||||
key: `mini-${attr}`,
|
key: `mini-${attr}`,
|
||||||
style: {
|
style: {
|
||||||
fontFamily: 'Montserrat UltraLight, Montserrat Light, Montserrat',
|
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
|
||||||
},
|
},
|
||||||
}, attr)
|
}, attr)
|
||||||
}),
|
}),
|
||||||
|
@ -7,6 +7,7 @@ const addressSummary = require('../util').addressSummary
|
|||||||
const readableDate = require('../util').readableDate
|
const readableDate = require('../util').readableDate
|
||||||
const formatBalance = require('../util').formatBalance
|
const formatBalance = require('../util').formatBalance
|
||||||
const nameForAddress = require('../../lib/contract-namer')
|
const nameForAddress = require('../../lib/contract-namer')
|
||||||
|
const BN = require('ethereumjs-util').BN
|
||||||
|
|
||||||
module.exports = PendingTxDetails
|
module.exports = PendingTxDetails
|
||||||
|
|
||||||
@ -18,16 +19,18 @@ function PendingTxDetails () {
|
|||||||
const PTXP = PendingTxDetails.prototype
|
const PTXP = PendingTxDetails.prototype
|
||||||
|
|
||||||
PTXP.render = function () {
|
PTXP.render = function () {
|
||||||
var state = this.props
|
var props = this.props
|
||||||
var txData = state.txData
|
var txData = props.txData
|
||||||
|
|
||||||
var txParams = txData.txParams || {}
|
var txParams = txData.txParams || {}
|
||||||
var address = txParams.from || state.selectedAddress
|
var address = txParams.from || props.selectedAddress
|
||||||
var identity = state.identities[address] || { address: address }
|
var identity = props.identities[address] || { address: address }
|
||||||
var account = state.accounts[address] || { address: address }
|
var account = props.accounts[address] || { address: address }
|
||||||
|
|
||||||
var isContractDeploy = !('to' in txParams)
|
var isContractDeploy = !('to' in txParams)
|
||||||
|
|
||||||
|
var maxCost = (new BN(txParams.value, 16) + new BN(txParams.gas, 16)).toString(16)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('div', [
|
h('div', [
|
||||||
|
|
||||||
@ -41,10 +44,10 @@ PTXP.render = function () {
|
|||||||
attrs: [
|
attrs: [
|
||||||
identity.name,
|
identity.name,
|
||||||
addressSummary(address, 6, 4, false),
|
addressSummary(address, 6, 4, false),
|
||||||
formatBalance(identity.balance),
|
formatBalance(identity.balance).formatted,
|
||||||
],
|
],
|
||||||
imageSeed: address,
|
imageSeed: address,
|
||||||
imageifyIdenticons: state.imageifyIdenticons,
|
imageifyIdenticons: props.imageifyIdenticons,
|
||||||
picOrder: 'right',
|
picOrder: 'right',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@ -57,40 +60,70 @@ PTXP.render = function () {
|
|||||||
}),
|
}),
|
||||||
|
|
||||||
this.miniAccountPanelForRecipient(),
|
this.miniAccountPanelForRecipient(),
|
||||||
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// tx data
|
h('style', `
|
||||||
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
|
.table-box {
|
||||||
|
margin: 7px 6px 0px 6px;
|
||||||
|
}
|
||||||
|
.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 15px;
|
||||||
|
}
|
||||||
|
`),
|
||||||
|
|
||||||
h('.flex-row.flex-space-between', [
|
h('.table-box', [
|
||||||
h('label.font-small', 'TO ADDRESS'),
|
|
||||||
h('span.font-small', addressSummary(txParams.to)),
|
h('.row', [
|
||||||
|
h('.cell.label', 'Amount'),
|
||||||
|
h('.cell.value', formatBalance(txParams.value).formatted),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('.flex-row.flex-space-between', [
|
h('.cell.row', [
|
||||||
h('label.font-small', 'DATE'),
|
h('.cell.label', 'Max Transaction Fee'),
|
||||||
h('span.font-small', readableDate(txData.time)),
|
h('.cell.value', formatBalance(txParams.gas).formatted),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('.flex-row.flex-space-between', [
|
h('.cell.row', {
|
||||||
h('label.font-small', 'AMOUNT'),
|
style: {
|
||||||
h('span.font-small', formatBalance(txParams.value)),
|
fontFamily: 'Montserrat Regular',
|
||||||
|
background: 'rgb(216,216,216)',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.cell.label', 'Max Total'),
|
||||||
|
h('.cell.value', formatBalance(maxCost).formatted),
|
||||||
]),
|
]),
|
||||||
]),
|
|
||||||
|
h('.cell.row', {
|
||||||
|
style: {
|
||||||
|
background: '#f7f7f7',
|
||||||
|
paddingBottom: '0px',
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('.cell.label'),
|
||||||
|
h('.cell.value', `Data included: ${txParams.data.length - 2} bytes`)
|
||||||
|
])
|
||||||
|
]), // End of Table
|
||||||
|
|
||||||
|
this.warnIfNeeded(),
|
||||||
|
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
PTXP.miniAccountPanelForRecipient = function() {
|
PTXP.miniAccountPanelForRecipient = function() {
|
||||||
var state = this.props
|
var props = this.props
|
||||||
var txData = state.txData
|
var txData = props.txData
|
||||||
|
|
||||||
var txParams = txData.txParams || {}
|
var txParams = txData.txParams || {}
|
||||||
var address = txParams.from || state.selectedAddress
|
var address = txParams.from || props.selectedAddress
|
||||||
var identity = state.identities[address] || { address: address }
|
var identity = props.identities[address] || { address: address }
|
||||||
var account = state.accounts[address] || { address: address }
|
var account = props.accounts[address] || { address: address }
|
||||||
|
|
||||||
var isContractDeploy = !('to' in txParams)
|
var isContractDeploy = !('to' in txParams)
|
||||||
|
|
||||||
@ -102,7 +135,7 @@ PTXP.miniAccountPanelForRecipient = function() {
|
|||||||
addressSummary(txParams.to, 6, 4, false),
|
addressSummary(txParams.to, 6, 4, false),
|
||||||
],
|
],
|
||||||
imageSeed: address,
|
imageSeed: address,
|
||||||
imageifyIdenticons: state.imageifyIdenticons,
|
imageifyIdenticons: props.imageifyIdenticons,
|
||||||
picOrder: 'left',
|
picOrder: 'left',
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
@ -110,9 +143,26 @@ PTXP.miniAccountPanelForRecipient = function() {
|
|||||||
attrs: [
|
attrs: [
|
||||||
'New Contract'
|
'New Contract'
|
||||||
],
|
],
|
||||||
imageifyIdenticons: state.imageifyIdenticons,
|
imageifyIdenticons: props.imageifyIdenticons,
|
||||||
picOrder: 'left',
|
picOrder: 'left',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Should analyze if there is a DELEGATECALL opcode
|
||||||
|
// in the recipient contract, and show a warning if so.
|
||||||
|
PTXP.warnIfNeeded = function() {
|
||||||
|
return null
|
||||||
|
|
||||||
|
return h('span.error', {
|
||||||
|
style: {
|
||||||
|
fontFamily: 'Montserrat Light',
|
||||||
|
fontSize: '13px',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('i.fa.fa-lg.fa-info-circle', { style: { margin: '5px' } }),
|
||||||
|
h('span', ' Your identity may be used in other contracts!'),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
@ -33,7 +33,11 @@ PendingTx.prototype.render = function () {
|
|||||||
h(PendingTxDetails, state),
|
h(PendingTxDetails, state),
|
||||||
|
|
||||||
// send + cancel
|
// send + cancel
|
||||||
h('.flex-row.flex-space-around', [
|
h('.flex-row.flex-space-around', {
|
||||||
|
style: {
|
||||||
|
marginTop: '14px',
|
||||||
|
}
|
||||||
|
}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
onClick: state.cancelTransaction,
|
onClick: state.cancelTransaction,
|
||||||
}, 'Reject'),
|
}, 'Reject'),
|
||||||
|
@ -104,7 +104,8 @@ function parseBalance (balance) {
|
|||||||
return [beforeDecimal, afterDecimal]
|
return [beforeDecimal, afterDecimal]
|
||||||
}
|
}
|
||||||
|
|
||||||
// Takes wei hex, returns "None" or "${formattedAmount} ETH"
|
// Takes wei hex, returns an object with three properties.
|
||||||
|
// Its "formatted" property is what we generally use to render values.
|
||||||
function formatBalance (balance, decimalsToKeep) {
|
function formatBalance (balance, decimalsToKeep) {
|
||||||
var parsed = parseBalance(balance)
|
var parsed = parseBalance(balance)
|
||||||
var beforeDecimal = parsed[0]
|
var beforeDecimal = parsed[0]
|
||||||
|
Loading…
Reference in New Issue
Block a user