feat(@cockpit/transaction-decoder): allow for decoding raw transaction hashes

embark-ui/src/components/TransactionDecoder.js

@@ -26,7 +26,7 @@ class TransactionDecoder extends React.Component {
 
   handleTransactionHashChange(event) {
     const transactionHash = event.target.value;
-    this.setState({transactionHash});
+    this.setState({...this.state, transactionHash});
   }
 
   fetchTransaction(e) {
@@ -48,14 +48,14 @@ class TransactionDecoder extends React.Component {
           <Form onSubmit={e => this.fetchTransaction(e)}>
             <FormGroup>
               <InputGroup>
-                <Input type="text" id="transactionHash" placeholder="Enter transaction hash" value={this.state.transactionHash} onChange={e => this.handleTransactionHashChange(e)}/>
+                <Input type="text" id="transactionHash" placeholder="Enter raw transaction hash" value={this.state.transactionHash} onChange={e => this.handleTransactionHashChange(e)}/>
                 <InputGroupAddon addonType="append">
                   <Button color="primary" type="submit">Decode</Button>
                 </InputGroupAddon>
               </InputGroup>
             </FormGroup>
           </Form>
-          {this.props.transactionHash && !this.props.transaction && <Alert color="danger">Couldn't find transaction for hash {this.props.transactionHash}</Alert>}
+          {this.props.transactionHash && !this.props.transaction && <Alert color="danger">Couldn't decode transaction with raw hash {this.props.transactionHash}</Alert>}
 
           <div className="mt-3">
             {this.props.transaction && <ReactJson src={this.props.transaction} theme="monokai" sortKeys={true} collapsed={1} />}
@@ -67,7 +67,7 @@ class TransactionDecoder extends React.Component {
 }
 
 TransactionDecoder.propTypes = {
-  history: PropTypes.array,
+  history: PropTypes.object,
   transaction: PropTypes.object,
   transactionHash: PropTypes.string
 };

embark-ui/src/containers/TransactionDecoderContainer.js

@@ -24,7 +24,7 @@ class TransactionDecoderContainer extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const hash = getQueryParams(this.props).hash;
+    const { hash } = getQueryParams(this.props);
     const prevHash = getQueryParams(prevProps).hash;
 
     if (hash && hash !== prevHash) {

src/lib/modules/blockchain_connector/index.js

@@ -1,6 +1,8 @@
 const Web3 = require('web3');
 const async = require('async');
 const Provider = require('./provider.js');
+const Transaction = require('ethereumjs-tx');
+const ethUtil = require('ethereumjs-util');
 const utils = require('../../utils/utils');
 const constants = require('../../constants');
 const embarkJsUtils = require('embarkjs').Utils;
@@ -411,7 +413,7 @@ class BlockchainConnector {
       'get',
       '/embark-api/blockchain/transactions/:hash',
       (req, res) => {
-        self.getTransaction(req.params.hash, (err, transaction) => {
+        self.getTransactionByRawTransactionHash(req.params.hash, (err, transaction) => {
           if (err) {
             self.logger.error(err);
           }
@@ -636,6 +638,24 @@ class BlockchainConnector {
     this.web3.eth.getTransaction(hash, cb);
   }
 
+  getTransactionByRawTransactionHash(hash, cb) {
+    const rawData = Buffer.from(ethUtil.stripHexPrefix(hash), 'hex');
+    const tx = new Transaction(rawData, 'hex');
+    const transaction = {
+      from: `0x${tx.getSenderAddress().toString('hex').toLowerCase()}`,
+      gasPrice: tx.gasPrice.toString('utf8'),
+      input: `0x${tx.input.toString('hex').toLowerCase()}`,
+      nonce: tx.nonce.toString('utf8'),
+      v: `0x${tx.v.toString('hex').toLowerCase()}`,
+      r: `0x${tx.r.toString('hex').toLowerCase()}`,
+      s: `0x${tx.s.toString('hex').toLowerCase()}`,
+      value: tx.value.toString('utf8'),
+      to: `0x${tx.to.toString('hex').toLowerCase()}`,
+      hash
+    };
+    cb(null, transaction);
+  }
+
   getGasPrice(cb) {
     const self = this;
     this.onReady(() => {