m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

confTx - show disabled accept btn + add colors

Browse Source
This commit is contained in:
kumavis 2016-09-15 12:42:35 -07:00
parent 8ea086290b
commit 5005fc143b
2 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/app/components/pending-tx.js
View File

@ -16,6 +16,21 @@ function PendingTx () {
PendingTx.prototype.render = function () { PendingTx.prototype.render = function () {
var state = this.props var state = this.props
var txData = state.txData var txData = state.txData
var txParams = txData.txParams || {}
var address = txParams.from || state.selectedAddress
var account = state.accounts[address]
var balance = account ? account.balance : '0x0'
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
var txFee = gasCost.mul(gasPrice)
var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
var maxCost = txValue.add(txFee)
var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
var insufficientBalance = maxCost.gt(balanceBn)
return ( return (
h('div', { h('div', {
@ -41,42 +56,23 @@ PendingTx.prototype.render = function () {
}, },
}, [ }, [
this.buttonDeligator(), ( insufficientBalance ?
h('button.btn-green', {
onClick: state.sendTransaction,
}, 'Buy Ether')
:
null
),
h('button.cancel', { h('button.confirm', {
disabled: insufficientBalance,
onClick: state.sendTransaction,
}, 'Accept'),
h('button.cancel.btn-red', {
onClick: state.cancelTransaction, onClick: state.cancelTransaction,
style: { background: 'rgb(254,35,17)' },
}, 'Reject'), }, 'Reject'),
]), ]),
]) ])
) )
} }
PendingTx.prototype.buttonDeligator = function () {
var state = this.props
var txData = state.txData
var txParams = txData.txParams || {}
var address = txParams.from || state.selectedAddress
var account = state.accounts[address]
var balance = account ? account.balance : '0x0'
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
var txFee = gasCost.mul(gasPrice)
var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
var maxCost = txValue.add(txFee)
var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
if (maxCost.gt(balanceBn)) {
return h('button.confirm', {
onClick: state.sendTransaction,
style: { background: 'rgb(251,117,1)' },
}, 'Buy')
} else {
return h('button.confirm', {
onClick: state.sendTransaction,
style: { background: 'rgb(251,117,1)' },
}, 'Accept')
}
}

26
ui/app/css/index.css
View File

@ -36,24 +36,40 @@ button {
font-family: 'Montserrat Bold'; font-family: 'Montserrat Bold';
outline: none; outline: none;
cursor: pointer; cursor: pointer;
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
/*margin: 10px;*/
padding: 8px 12px; padding: 8px 12px;
border: none; border: none;
background: #F7861C;
color: white; color: white;
transform-origin: center center; transform-origin: center center;
transition: transform 50ms ease-in; transition: transform 50ms ease-in;
/* default orange */
background: rgba(247, 134, 28, 1);
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
}
button.btn-green {
background: rgba(106, 195, 96, 1);
box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
}
button.btn-red {
background: rgba(254, 35, 17, 1);
box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
}
button[disabled] {
cursor: not-allowed;
background: rgba(197, 197, 197, 1);
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
} }
button.spaced { button.spaced {
margin: 2px; margin: 2px;
} }
button:hover { button:not([disabled]):hover {
transform: scale(1.1); transform: scale(1.1);
} }
button:active { button:not([disabled]):active {
transform: scale(0.95); transform: scale(0.95);
} }