Add content boxes to pendingTx, prep for reusability

ui/app/components/pending-tx.js

@@ -20,6 +20,11 @@ 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'
+
 module.exports = PendingTx
 inherits(PendingTx, Component)
 function PendingTx () {
@@ -31,6 +36,24 @@ function PendingTx () {
   }
 }
 
+const sectionDivider = h('div', {
+  style: {
+    height:'1px',
+    background:'#E7E7E7',
+  },
+}),
+
+// Next: create separate react components
+const contentDivider = h('div', {
+  style: {
+    marginLeft: '16px',
+    marginRight: '16px',
+    height:'1px',
+    background:'#E7E7E7',
+  },
+})
+
+
 PendingTx.prototype.render = function () {
   const props = this.props
   const { currentCurrency, blockGasLimit } = props
@@ -70,349 +93,187 @@ PendingTx.prototype.render = function () {
   this.inputs = []
 
   return (
-
+    h('div.flex-column.flex-grow', {
-    h('div', {
+      style: {
-      key: txMeta.id,
+        // overflow: 'scroll',
+        minWidth: '355px', // TODO: maxWidth TBD, use home.html
+      },
     }, [
 
-      h('div', {
+      // 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)',
+        }
       }, [
-        // tx info
+        h('section.flex-center.flex-row', {
-        h('div', [
+          style: {
-
+            zIndex: 15, // $token-icon-z-index
-          h('.flex-row.flex-center', {
+            marginTop: '-35px',
-            style: {
+          }
-              maxWidth: '100%',
+        }, [
-            },
+          h(Identicon, {
-          }, [
+            address: ARAGON,
-
+            diameter: 76,
-            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',
-                }),
-              ]),
-            ]),
-
-            forwardCarrat(),
-
-            this.miniAccountPanelForRecipient(),
-          ]),
-
-          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;
-            }
-          `),
-
-          h('.table-box', [
-
-            // 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 }),
-            ]),
-
-            // 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) },
-                }),
-              ]),
-            ]),
-
-            // 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) },
-                }),
-              ]),
-            ]),
-
-            // Max Transaction Fee (calculated)
-            h('.cell.row', [
-              h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
-            ]),
-
-            h('.cell.row', {
-              style: {
-                fontFamily: 'Montserrat Regular',
-                background: 'white',
-                padding: '10px 25px',
-              },
-            }, [
-              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',
-                }),
-              ]),
-            ]),
-
-            // Data size row:
-            h('.cell.row', {
-              style: {
-                background: '#f7f7f7',
-                paddingBottom: '0px',
-              },
-            }, [
-              h('.cell.label'),
-              h('.cell.value', {
-                style: {
-                  fontFamily: 'Montserrat Light',
-                  fontSize: '11px',
-                },
-              }, `Data included: ${dataLength} bytes`),
-            ]),
-          ]), // End of Table
-
         ]),
 
-        h('style', `
+        //
-          .conf-buttons button {
+        // Required Fields
-            margin-left: 10px;
+        //
-            text-transform: uppercase;
-          }
-        `),
 
-        txMeta.simulationFails ?
+        h('h3.flex-center', {
-          h('.error', {
-            style: {
-              marginLeft: 50,
-              fontSize: '0.9em',
-            },
-          }, 'Transaction Error. Exception thrown in contract code.')
-        : null,
-
-        !isValidAddress ?
-          h('.error', {
-            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', {
-            style: {
-              marginLeft: 50,
-              fontSize: '0.9em',
-            },
-          }, 'Insufficient balance for transaction')
-        : null,
-
-        // send + cancel
-        h('.flex-row.flex-space-around.conf-buttons', {
           style: {
-            display: 'flex',
+            marginTop: '-18px',
-            justifyContent: 'flex-end',
+            fontSize: '16px',
-            margin: '14px 25px',
           },
         }, [
+          'Confirm Transaction',
+        ]),
 
+        h('h3.flex-center', {
+          style: {
+            textAlign: 'center',
+            fontSize: '12px',
+          },
+        }, [
+          'You\'re sending to Recipient ...5924',
+        ]),
 
-          insufficientBalance ?
+        h('h3.flex-center', {
-            h('button.btn-green', {
+          style: {
-              onClick: props.buyEth,
+            textAlign: 'center',
-            }, 'Buy Ether')
+            fontSize: '36px',
-          : null,
+            marginTop: '8px',
+          },
+        }, [
+          '0.24',
+        ]),
 
+        h('h3.flex-center', {
+          style: {
+            textAlign: 'center',
+            fontSize: '12px',
+            marginTop: '4px',
+          },
+        }, [
+          'ANT',
+        ]),
 
-          h('form#pending-tx-form', {
+        // error message
-            onSubmit: this.onSubmit.bind(this),
+        props.error && h('span.error.flex-center', props.error),
+
+        sectionDivider,
+
+        h('section.flex-row.flex-center', {
+
+        }, [
+          h('div', {
+            style: {
+              width: '50%',
+            }
           }, [
-            // Reset Button
+            h('span', {
-            h('button', {
+              style: {
-              onClick: (event) => {
+                textAlign: 'left',
-                this.resetGasFields()
+                fontSize: '12px',
-                event.preventDefault()
+              }
-              },
+            }, [
-            }, 'Reset'),
+              'From'
-
+            ])
-            // Accept Button
-            h('input.confirm.btn-green', {
-              type: 'submit',
-              value: 'SUBMIT',
-              style: { marginLeft: '10px' },
-              disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
-            }),
-
-            // Cancel Button
-            h('button.cancel.btn-red', {
-              onClick: props.cancelTransaction,
-            }, 'Reject'),
           ]),
 
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          },[
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '10px',
+                marginBottom: '-10px',
+              },
+            }, 'Aragon Token'),
+
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '8px',
+              },
+            }, 'Your Balance 2.34 ANT')
+          ])
         ]),
-      ]),
+
-    ])
+        contentDivider,
+
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit.bind(this),
+        }, [
+          // Reset Button
+          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,
+          }),
+
+          // Cancel Button
+          h('button.cancel.btn-red', {
+            onClick: props.cancelTransaction,
+          }, 'Reject'),
+        ]),
+
+      ]) // end of main container
+    ]) // end of minwidth wrapper
   )
 }
 
-PendingTx.prototype.miniAccountPanelForRecipient = function () {
+// PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
-  const props = this.props
+//   log.info(`Gas price changed to: ${newBN.toString(10)}`)
-  const txData = props.txData
+//   const txMeta = this.gatherTxMeta()
-  const txParams = txData.txParams || {}
+//   txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
-  const isContractDeploy = !('to' in txParams)
+//   this.setState({
+//     txData: clone(txMeta),
+//     valid,
+//   })
+// }
 
-  // If it's not a contract deploy, send to the account
+// PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
-  if (!isContractDeploy) {
+//   log.info(`Gas limit changed to ${newBN.toString(10)}`)
-    return h(MiniAccountPanel, {
+//   const txMeta = this.gatherTxMeta()
-      imageSeed: txParams.to,
+//   txMeta.txParams.gas = '0x' + newBN.toString('hex')
-      picOrder: 'left',
+//   this.setState({
-    }, [
+//     txData: clone(txMeta),
+//     valid,
+//   })
+// }
 
-      h('span.font-small', {
+// PendingTx.prototype.resetGasFields = function () {
-        style: {
+//   log.debug(`pending-tx resetGasFields`)
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, nameForAddress(txParams.to, props.identities)),
 
-      h(Copyable, {
+//   this.inputs.forEach((hexInput) => {
-        value: ethUtil.toChecksumAddress(txParams.to),
+//     if (hexInput) {
-      }, [
+//       hexInput.setValid()
-        h('span.font-small', {
+//     }
-          style: {
+//   })
-            fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-          },
-        }, addressSummary(txParams.to, 6, 4, false)),
-      ]),
 
-    ])
+//   this.setState({
-  } else {
+//     txData: null,
-    return h(MiniAccountPanel, {
+//     valid: true,
-      picOrder: 'left',
+//   })
-    }, [
+// }
-
-      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,
-  })
-}
-
-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()
@@ -471,15 +332,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',
-      },
-    })
-  )
-}