This repository has been archived by the owner on Oct 4, 2019. It is now read-only.
forked from ethereum/btcrelay
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtestnetSampleRelayTx.html
258 lines (220 loc) · 11 KB
/
testnetSampleRelayTx.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="btc relay, ethereum, bitcoin, bitcoin relay, smart contracts, sidechain, peg" />
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BTC Relay relayTx sample</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">
if (typeof web3 !== 'undefined') {
// Web3 has been injected by the browser (Mist/MetaMask)
web3 = new Web3(web3.currentProvider);
} else {
// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
// web3.eth.coinbase should be unlocked and rpccorsdomain should be * for this sample
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
var btcproof = require('bitcoin-proof');
var gRelayAddr = '0x5770345100a27b15f5b40bec86a701f888e8c601'; // testnet Morden
// source code of processor contract is BitcoinProcessor.sol
var gProcessorAddr = '0x59c9fb53d658b15a7dded65c693703baf58cf63c'; // testnet Morden
var gMerkleProof;
var gBlockHashOfTx;
var gFeeVerifyFinney;
var RelayContractClass = web3.eth.contract(btcRelayAbi); // see ./js/btcRelayAbi.js
var gRelayContract = RelayContractClass.at(gRelayAddr);
function doRelayTx(txBytes, txIndex, merkleSibling, txBlockHash) {
// gFeeVerifyFinney is transferred! coinbase must have it or relayTx fails
var feeWei = web3.toWei(gFeeVerifyFinney, 'finney');
var objParam = { from: web3.eth.coinbase, value: feeWei, gas: 1900000 };
gRelayContract.relayTx.sendTransaction(txBytes, txIndex, merkleSibling,
txBlockHash, gProcessorAddr, objParam, function(err, ethTx) {
if (err) {
console.log('@@@ relayTx error');
return;
}
document.getElementById('result').innerText = ethTx;
// console.log('@@@ relayTx receipt: ', receipt)
// when the tx is mined, the storage of gProcessorAddr at key0 will have
// the Bitcoin transaction hash
});
}
function callContract() {
var txBytes = '0x' + $('#txHexText').val();
var txBlockHash = '0x' + gBlockHashOfTx;
// web3.js wants 0x prepended
var merkleSibling = gMerkleProof.sibling.map(function(sib) {
return '0x' + sib;
});
doRelayTx(txBytes, gMerkleProof.txIndex, merkleSibling, txBlockHash);
}
// A transaction hash by itself has no meaning (it's just a hash), so a
// service (like blockr.io) needs to be used to lookup the raw transaction.
// This function also shows how to use 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) {
var rawTx = data.data.tx.hex;
$('#txHexText').val(rawTx);
// A separate call is needed because the transaction index, the position
// of the transaction in the block, is needed to be able to compute the
// Merkle proof
var blockNum = data.data.tx.blockhash;
var blockInfoUrl = "//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;
}
}
// Proof can now be computed from the raw transaction and
// transaction index
gMerkleProof = btcproof.getProof(res.data.tx, txIndex);
console.log('merkle proof: ', gMerkleProof)
$('#mProof').val(JSON.stringify(gMerkleProof));
gRelayContract.getFeeAmount.call('0x'+gBlockHashOfTx, function(err, feeWei) {
if (err) {
console.log('@@@ getFeeAmount error');
return;
}
gFeeVerifyFinney = web3.fromWei(feeWei, 'finney');
$('#feeVerifyTx').text(gFeeVerifyFinney);
})
})
})
}
$(function() {
// tx[1] of block 408000
$('#transHex').val('dd059634699e85b51af4964ab97d5e75fb7cd86b748d0ee1c537ca1850101dc7');
$('#btn-get-tx').click(getTxInfo);
$('#relayAddr').text(gRelayAddr);
});
</script>
</head>
<body>
<div class="container">
<div class="logo">
<img src="./images/BTCRelayLogo.png"/>
</div>
<div class="row">
<h3>To integrate BTC Relay:</h3>
<ul>
<li>Create and deploy a BitcoinProcessor contract with a processTransaction
function with the following signature:</li>
<i>function processTransaction(bytes txn, uint256 txHash) returns (int256)</i>
<li>From your frontend, call BTC Relay <a href="https://github.com/ethereum/btcrelay#relaytxrawtransaction-transactionindex-merklesibling-blockhash-contractaddress">relayTx</a></li>
</ul>
</div>
<div class="row">
<p class="lead">BTC Relay Morden testnet at <span id="relayAddr"></span></p>
<p>This is a sample of using BTC Relay <a href="https://github.com/ethereum/btcrelay#relaytxrawtransaction-transactionindex-merklesibling-blockhash-contractaddress">relayTx</a>, which is the easiest way to
integrate BTC Relay because the ABI can remain in the frontend.<br>
A Bitcoin transaction is relayed to <a href="https://github.com/ethereum/btcrelay/blob/master/examples/BitcoinProcessor.sol">BitcoinProcessor.sol</a> that
has been deployed at <a href="https://morden.ether.camp/account/59c9fb53d658b15a7dded65c693703baf58cf63c">0x59c9fb53d658b15a7dded65c693703baf58cf63c</a><br>
The easiest way to run this sample is with the <a href="https://metamask.io">MetaMask
<img src="https://metamask.io/img/metamask.png" alt="MetaMask Logo" width=50px height=46px></a> Chrome plugin<br>
Otherwise you need a testnet client configured like:
geth --testnet --unlock 0 --rpc --rpcport 8545 --rpccorsdomain=* --rpcaddr localhost<br>
</p>
</div>
<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>
<div class="form-group">
<label class="col-md-2 control-label">Verification fee milli-ether</label>
<p class="form-control-static" id="feeVerifyTx">?</p>
</div>
<button type="button" class="btn btn-default" onclick="callContract();">send transaction relayTx</button>
</form>
</div>
<div class="row">
<div>BTC Relay Ethereum tx hash: <span id="result">[click buttons in step1 then step2]</span></div>
</div>
<hr>
<div class="row">
When this tx is mined, check the <a href="https://morden.ether.camp/account/59c9fb53d658b15a7dded65c693703baf58cf63c">
BitcoinProcessor</a> sample contract. In its storage, the lastTxHash
value should be the same as your input, and ethBlock block will be the
mined Ethereum block number.<br>
If morden.ether.camp isn't running,
you can use web3.eth.getStorageAt('0x59c9fb53d658b15a7dded65c693703baf58cf63c', 0)
and web3.toDecimal(web3.eth.getStorageAt('0x59c9fb53d658b15a7dded65c693703baf58cf63c', 0))
to look up the values in storage.
</div>
<div class="row">
This example shows the use of a BitcoinProcessor contract, which receives
Bitcoin transactions via relayTx. This is the easiest way to use BTC Relay
because the ABI can remain on the frontend.
</thead>
</div>
<hr>
<div class="row">
<div>View page source to see the main steps:</div>
<ul>
<li>Getting a raw transaction and its index from a hash</li>
<li>Using <a href="https://www.npmjs.com/package/bitcoin-proof">bitcoin-proof </a>to get a Merkle proof</li>
<li>Calling <a href="https://github.com/ethereum/btcrelay#relaytxrawtransaction-transactionindex-merklesibling-blockhash-contractaddress">relayTx</a></li>
</ul>
</div>
<div class="footer-logo">
<img src="./images/ethereum-logo-small.png"/>
</div>
</div>
</body>
</html>