Submit transaction using metamask as in ewasm-studio

routes/tx.js

@@ -6,7 +6,8 @@ var Web3 = require('web3');
 var web3extended = require('web3-extended');
 var abi = require('ethereumjs-abi');
 var abiDecoder = require('abi-decoder');
-
+var txn = null;
+
 router.get('/pending', function(req, res, next) {
 
   var config = req.app.get('config');
@@ -39,22 +40,40 @@ router.get('/submit', function(req, res, next) {
   res.render('tx_submit', { });
 });
 
-router.post('/submit', function(req, res, next) {
-  if (!req.body.txHex) {
-    return res.render('tx_submit', { message: "No transaction data specified"});
-  }
-
-  var config = req.app.get('config');
-  var web3 = new Web3();
-  web3.setProvider(config.provider);
-
-  async.waterfall([
-    function(callback) {
-      web3.eth.sendRawTransaction(req.body.txHex, function(err, result) {
-        callback(err, result);
-      });
+
+router.post('/submit', function(req, res, next) {
+
+  var config = req.app.get('config');
+  var web3 = new Web3();
+
+  txn = {};
+
+  if (req.body.txHex.length > 0)
+    txn.data = req.body.txHex;
+
+  if (req.body.destAddress)
+    txn.to = req.body.destAddress;
+
+  if (req.body.value) {
+    let value = parseInt(req.body.value);
+    if (!value) {
+      alert("must input number as value");
+      throw("valueError");
+    }
+    txn.value = req.body.value;
+  }
+
+  async.waterfall([
+    function(callback) {
+
+      // metamask is called on the front end
+      res.render('tx_submit', {
+        message: 'Submitting transaction...',
+        txn: txn
+      });
+
     }
-  ], function(err, hash) {
+  ], function(err, hash) {
     if (err) {
       res.render('tx_submit', { message: "Error submitting transaction: " + err });
     } else {

views/layout.pug

@@ -11,12 +11,12 @@ html(lang="en")
     meta(name='keywords', content='ethereum, explorer, blockchain, etherchain, cryptocurrency, cryptocurrencies, bitcoin')
 
     title ewasm testnet
-
     link(href=config.bootstrapUrl, rel="stylesheet", crossorigin="anonymous")    
     link(rel='stylesheet', href='/explorer/stylesheets/style.css')
     script(src='/explorer/js/libwabt.js')
     script(src='/explorer/js/compile2wast.js')
-
+  script.
+    metamask = window.web3
   body
     nav.navbar.navbar-inverse.navbar-fixed-top
       .container

views/tx_submit.pug

@@ -1,11 +1,32 @@
 extends layout
 
 block content
-  h3 Submit raw transaction
-  form(action="/explorer/tx/submit", method="post")
-    .form-group
-      label(for="txHex") Signed Transaction Hex
-      textarea.form-control#txHex(rows=15, name="txHex", placeholder="0x...")
-    button.btn.btn-default.pull-right(type="submit") Submit
-  if message
-    p #{message}
+  if txn
+    if message
+      h3#message #{message}
+    script.
+      transaction = !{JSON.stringify(txn)}
+      console.log("Transaction:\n", transaction)
+      if (transaction) {
+        metamask.eth.sendTransaction(transaction, function(e, tx) {
+          if (!e) {
+            window.location.href = '/tx/pending'
+          } else {
+            document.getElementById('message').innerHTML = e.message;
+          }
+        })
+      }  
+  else
+    h3 Submit transaction
+    form(action="/explorer/tx/submit", method="post")
+      .form-group
+        label(for="destAddress") Destination address*
+        input.form-control#destAddress(type="text", placeholder="0x...", name="destAddress")
+        label(for="value") Value (Wei)
+        input.form-control#value(type="text", placeholder="0", name="value")
+        label(for="txHex") Transaction data (optional)
+        textarea.form-control#txHex(rows=15, name="txHex", placeholder="0x...")
+      button.btn.btn-default.pull-right(type="submit") Submit
+    if message
+      p #{message}
+