examples/sampleCall.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ethereum: get ether with bitcoin</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/dapp.css">
  <script src="./js/jquery-2.1.3.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>

  <script src="./js/btcRelayAbi.js"></script>

  <script src="./js/bignumber.js"></script>
  <script src="./js/web3.min.js"></script>

  <script src="./js/bitcoin-proof.js"></script>

  <script type="text/javascript">
  var web3 = require('web3');
      web3.setProvider(new web3.providers.HttpProvider('http://localhost:8545'));
  var btcproof = require('bitcoin-proof');

  var gRelayAddr = web3.eth.namereg.addr('btcrelay');
  var gMerkleProof;
  var gBlockHashOfTx;
  var gRawTx;

  // shows how to use web3 to make an eth_call to the relay contract
  // verifyTx returns 1 (success) or 0 (verify failed)
  function callVerifyTx(txHash, txIndex, merkleSibling, txBlockHash) {
    var RelayContract = web3.eth.contract(btcRelayAbi);  // see ./js/btcRelayAbi.js
    var contract = RelayContract.at(gRelayAddr);

    var objParam = { from: web3.eth.coinbase, gas: 3000000 };
    var res = contract.verifyTx.call(txHash, txIndex, merkleSibling, txBlockHash, objParam);

    document.getElementById('result').innerText = 'btcrelay verifyTx returned: ' + res.toString(10);
  }

  function callContract() {
    var transHex = $('#transHex').val();
    var txHash = '0x' + transHex;
    var txBlockHash = '0x' + gBlockHashOfTx;

    // web3.js wants 0x prepended
    var merkleSibling = gMerkleProof.sibling.map(function(sib) {
      return '0x' + sib;
    });

    callVerifyTx(txHash, gMerkleProof.txIndex, merkleSibling, txBlockHash);
  }

  // includes sample of using the bitcoin-proof module
  function getTxInfo() {
    var txid = $('#transHex').val();
    var urlJsonTx = "https://btc.blockr.io/api/v1/tx/raw/" + txid;
    $.getJSON(urlJsonTx, function(data) {
        gRawTx = data.data.tx.hex;
        $('#txHexText').val(gRawTx);

        var blockNum = data.data.tx.blockhash;
        var blockInfoUrl = "http://btc.blockr.io/api/v1/block/raw/"+blockNum;
        $.getJSON(blockInfoUrl, function(res) {
            gBlockHashOfTx = res.data.hash;
            $('#txBlockHash').text(gBlockHashOfTx)

            var txIndex;
            for (var key in res.data.tx) {
              if (res.data.tx[key] == txid) {
                txIndex = key;
                break;
              }
            }

            gMerkleProof = btcproof.getProof(res.data.tx, txIndex);
            console.log('merkle proof: ', gMerkleProof)
            $('#mProof').val(JSON.stringify(gMerkleProof));
        })
    })
  }

  $(function() {
    // tx[1] of block 360276
    $('#transHex').val('be44a9201e8016b1772e7331f3c3c8a4820060307df4603033dc5350a01ac279');
    $('#btn-get-tx').click(getTxInfo);
    $('#relayAddr').text(gRelayAddr);
  });

  </script>
</head>

<body>
  <div class="container">
    <div class="logo">
      <img src="./images/ethereum-logo-small.png"/>
    </div>

    <p class="lead">btcrelay at <span id="relayAddr"></span></p>

    <p>This is a sample of calling the verifyTx method on the btcrelay contract
    </p>

    <h2>1.</h2>
    <div class="row">
      <form class="form">
        <div class="form-group">
          <label for="transHex">Bitcoin Transaction Hash</label>
          <input type="text" class="form-control" id="transHex" size="64" maxlength="64"></input>
        </div>
        <button type="button" class="btn btn-default" id="btn-get-tx">Lookup</button>
      </form>
    </div>

    <h2>2.</h2>
    <div class="row">
      <form>
        <div class="form-group">
          <label for="txHexText">Raw Transaction</label>
          <textarea readonly class="form-control" name="textarea" id="txHexText" rows="6" cols="50"></textarea>
        </div>

        <div class="form-group">
          <label for="mProof">Merkle Proof</label>
          <textarea readonly class="form-control" name="textarea" id="mProof" rows="6" cols="50"></textarea>
        </div>

        <div class="form-group">
          <label class="col-md-1 control-label">Block Hash</label>
          <div class="col-md-9">
            <p class="form-control-static" id="txBlockHash">0</p>
          </div>
        </div>
        <br><br><br>
        <button type="button" class="btn btn-default" onclick="callContract();">Call verifyTx</button>
      </form>
    </div>

    <div id="result"></div>

    <div class="footer-logo">
      <img src="./images/ETH_DEV_LOGO_LARGE.svg"/>
    </div>
  </div>
</body>
</html>