confTx - show disabled accept btn + add colors

ui/app/components/pending-tx.js

@@ -16,6 +16,21 @@ function PendingTx () {
 PendingTx.prototype.render = 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)
+  var insufficientBalance = maxCost.gt(balanceBn)
+
   return (
 
     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,
-          style: { background: 'rgb(254,35,17)' },
         }, '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')
-  }
-}

ui/app/css/index.css

@@ -36,24 +36,40 @@ button {
   font-family: 'Montserrat Bold';
   outline: none;
   cursor: pointer;
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-   /*margin: 10px;*/
   padding: 8px 12px;
   border: none;
-  background: #F7861C;
   color: white;
   transform-origin: center center;
   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 {
   margin: 2px;
 }
 
-button:hover {
+button:not([disabled]):hover {
   transform: scale(1.1);
 }
-button:active {
+button:not([disabled]):active {
   transform: scale(0.95);
 }