coinbin/index.html
2014-12-31 22:34:43 +09:00

648 lines
27 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitcoin Wallet by Coinb.in</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="bitcoin, wallet, multisig, multisignature, address, browser, javascript, js, broadcast, transaction, verify, decode" />
<meta name="description" content="A Bitcoin Wallet written in Javascript. Supports Multisig, Custom Transactions, nLockTime and more!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/crypto-min.js"></script>
<script type="text/javascript" src="js/crypto-sha256.js"></script>
<script type="text/javascript" src="js/ripemd160.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<script type="text/javascript" src="js/jsbn.js"></script>
<script type="text/javascript" src="js/ellipticcurve.js"></script>
<script type="text/javascript" src="js/securerandom.js"></script>
<script type="text/javascript" src="js/coin.js"></script>
<script type="text/javascript" src="js/coinbin.js"></script>
</head>
<body>
<div id="wrap">
<!-- Fixed navbar -->
<div id="header" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#home" class="navbar-brand" id="homeBtn"><b><img src="images/coinbin.gif" style="height:25px;margin-top:-5px"></b></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-plus"></span> New<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#newAddress" data-toggle="tab">New Address</a></li>
<li><a href="#newMultiSig" data-toggle="tab">MultiSig Address</a></li>
<li class="divider"></li>
<li><a href="#newTransaction" data-toggle="tab">Transaction</a></li>
</ul>
</li>
<li><a href="#verify" data-toggle="tab"><span class="glyphicon glyphicon-ok"></span> Verify</a></li>
<li><a href="#sign" data-toggle="tab"><span class="glyphicon glyphicon-pencil"></span> Sign</a></li>
<li><a href="#broadcast" data-toggle="tab"><span class="glyphicon glyphicon-globe"></span> Broadcast</a></li>
<li><a href="https://localbitcoins.com/?ch=173j" target="_blank"><span class="glyphicon glyphicon-shopping-cart"></span> Buy &amp; Sell</a></li>
<!-- <li><a href="#dev" data-toggle="tab"><span class="glyphicon glyphicon-wrench"></span> Dev</a></li>
--> <li><a href="#about" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
</ul>
</div>
</div>
</div>
<div id="content" class="container">
<noscript class="alert alert-danger center-block"><span class="glyphicon glyphicon-exclamation-sign"></span> This page uses javascript, please enable it to continue!</noscript>
<div class="tab-content">
<div class="tab-pane tab-content active" id="home">
<div class="row">
<div class="col-md-12">
<h2>Open Wallet <small> browser based bitcoin wallet</small></h2>
<div id="openLogin">
<form class="form-signin" role="form" action="javascript:;">
<p>Use the form below to open a wallet and begin using this service.</p>
<div class="alert alert-warning">
<b>Notice</b>: Different email address and password combination will open different wallets, be careful when entering your details as lost accounts can not be recovered!
</div>
<input id="openEmail" type="email" class="form-control" placeholder="Email address" required autofocus>
<input id="openPass" type="password" class="form-control" placeholder="Password" required>
<input id="openPassConfirm" type="password" class="form-control" placeholder="Password confirm" required>
<br>
<div id="openLoginStatus" class="alert alert-danger hidden"></div>
<button id="openBtn" class="btn btn-lg btn-primary btn-block" type="submit">Open</button>
</form>
</div>
<div id="openWallet" class="hidden">
<div class="row">
<div class="col-md-12">
<p><span style="float:right;"><a href="javascript:;" id="walletLogout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></span>Welcome to your wallet, enjoy your stay!</p>
</div>
<div class="col-md-12" align="center">
<div id="walletQrCode"></div> <br>
<div>
<span id="walletLoader" class="hidden"><img src="images/loader.gif"></span>
<span id="walletAddress"></span>
</div>
<br>
<div style="text-align:center; width:350px;">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="javascript:;" id="walletBalance">0.00 BTC</a></li>
<li role="presentation"><a href="javascript:;" id="walletShowSpend">Spend</a></li>
<li role="presentation"><a id="walletHistory" href="javascript:;" target="_blank">History</a></li>
<li role="presentation"><a href="javascript:;" id="walletShowKeys">Keys</a></li>
</ul>
<br>
<div id="walletKeys" class="hidden">
<label>Public Key</label>
<input class="form-control pubkey" type="text" readonly>
<label>Private key</label>
<div class="input-group">
<input class="form-control privkey" type="password" readonly>
<span class="input-group-btn">
<button class="showKey btn btn-default" type="button">Show</button>
</span>
</div>
</div>
<div id="walletSpend" class="hidden">
<div class="row">
<div class="form-inline output">
<div class="col-xs-8">
<label>Address</label>
</div>
<div class="col-xs-3">
<label>Amount</label>
</div>
</div>
</div>
<div class="row" id="walletSpendTo">
<div class="form-inline output">
<div class="col-xs-8">
<input type="text" class="form-control addressTo" data-original-title="" title="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control amount" data-original-title="" title="" placeholder="0.00">
</div>
<a href="javascript:;" class="addressAdd"><span class="glyphicon glyphicon-plus"></span></a>
<br><br>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label><abbr title="the amount to pay in network miner fees - 0.0001 or more recommended">Transaction Fee</abbr></label>
<input type="text" class="form-control" value="0.00001" id="txFee">
</div>
<div class="col-xs-5">
<label><abbr title="the amount to donate to the sites developer">Donation</abbr></label>
<input type="text" class="form-control" value="0.00" id="developerDonation">
</div>
</div>
<br>
<div id="walletSendStatus" class="alert alert-danger hidden"></div>
<button class="btn btn-primary" type="button" id="walletSendBtn">Send</button>
<button class="btn btn-default" type="button">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-content" id="newAddress">
<h2>New Address <small>create a new address</small></h2>
<p>Any keys used you will need to manually store safely as they will be needed later to redeem the bitcoins.</p>
<label>Address (Share)</label>
<div class="input-group">
<input id="newBitcoinAddress" type="text" class="form-control address" value="" readonly>
<span class="input-group-btn">
<button class="qrcodeBtn btn btn-default" type="button" data-toggle="modal" data-target="#modalQrcode"><span class="glyphicon glyphicon-qrcode"></span></button>
</span>
</div>
<label>Pubkey (Share)</label>
<input id="newPubKey" type="text" class="form-control" readonly>
<label>Private key (WIF key)</label>
<div class="input-group">
<input id="newPrivKey" type="password" class="form-control" value="" readonly>
<span class="input-group-btn">
<button class="showKey btn btn-default" type="button">Show</button>
</span>
</div>
<h3>Address Options</h3>
<p>You can use the advanced options below to generate different kind of keys and addresses.</p>
<div class="checkbox">
<label><input type="checkbox" id="newCompressed" class="checkbox-inline" checked> Compress <span class="text-muted">(recommended)</span></label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="newBrainwallet" class="checkbox-inline"> Custom Seed or Brain Wallet</label>
<input type="text" class="form-control hidden" id="brainwallet">
</div>
<input type="button" class="btn btn-primary" value="Generate" id="newKeysBtn">
<br>
</div>
<div class="tab-pane tab-content" id="newMultiSig">
<h2>New Multisig Address <small>Secure multisig address</small></h2>
<p>Public keys can be <a href="#newAddress">generated in your browser</a> or from your bitcoin client</a>.</p>
<p>Enter the public keys of all the participants, to create a <a href="https://en.bitcoin.it/wiki/Address#Multi-signature_addresses" target="_blank">multi signature address</a>. Maximum of 15 allowed. Compressed and uncompressed public keys are accepted.</p>
<div id="multisigPubKeys" class="row">
<div class="form-inline">
<div class="col-xs-11">
<input type="text" class="form-control pubkey">
</div>
<a href="javascript:;" class="pubkeyAdd"><span class="glyphicon glyphicon-plus"></span></a>
<br><br>
</div>
</div>
<p>Enter the amount of signatures required to release the coins</p>
<div class="row">
<div class="col-xs-3">
<select id="releaseCoins" class="form-control">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
</select>
</div>
</div>
<br>
<div id="multiSigErrorMsg" class="alert alert-danger" style="display:none;"></div>
<div class="alert alert-success hidden" id="multiSigData">
<label>Address</label>
<p>Payment should be made to this address:</p>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control address" value="" readonly>
<span class="input-group-btn">
<button class="qrcodeBtn btn btn-default" type="button" data-toggle="modal" data-target="#modalQrcode"><span class="glyphicon glyphicon-qrcode"></span></button>
</span>
</div>
</div>
</div>
<label>Redeem Script</label>
<p>This script should be <i>saved and should be shared with all the participants before a payment is made</i>, so they may validate the authenticity of the address, it will also be used later to release the bitcoins.</p>
<textarea class="form-control script" style="height:160px" readonly></textarea>
<label>Shareable URL</label>
<input type="text" class="scriptUrl form-control" disabled>
</div>
<input type="button" class="btn btn-primary" value="Submit" id="newMultiSigAddress">
<br>
</div>
<div class="tab-pane tab-content" id="newTransaction">
<h2>Transaction <small>Create a new transaction</small></h2>
<p>Use this page to create a raw transaction</p>
<b>Address, WIF key or Multisig Redeem Script</b>:
<div class="input-group">
<input type="text" id="redeemFrom" class="form-control" value="">
<span class="input-group-btn">
<button id="redeemFromBtn" class="btn btn-info" type="button">Load</button>
</span>
</div>
<br>
<div class="hidden alert alert-danger" id="redeemFromStatus"></div>
<div class="hidden alert alert-info" id="redeemFromAddress"></div>
<div>
<a href="javascript:;" id="optionsCollapse"><div class="well well-sm"><span class="glyphicon glyphicon-collapse-down" id="glyphcollapse"></span> Advanced Options</div></a>
<div class="hidden" id="optionsAdvanced">
<label>Clear Inputs</label>
<p class="checkbox">
<label><input type="checkbox" id="clearInputsOnLoad" class="checkbox-inline" checked> Clear existing inputs when new inputs are loaded.</label>
</p>
<hr>
<label>Null Data</label> <span class="text-muted text-normal">(40 byte limit)</span>
<p class="checkbox">
<label><input type="checkbox" id="opReturn" class="checkbox-inline"> Allow data to be sent within the transaction and stored in the blockchain by using <a href="https://bitcoin.org/en/developer-guide#null-data" target="_"blank">OP_RETURN</a>.</label>
<div class="text-muted">When using this option you may enter a hex string or address into the address field on the output tab.</div>
</p>
<hr>
<label>Lock Time</label>
<p>The <a href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number">locktime</a> indicates the earliest time a transaction can be added to the block chain.</p>
<input type="text" class="form-control" value="0" id="nLockTime">
<hr>
</div>
</div>
<ul class="nav nav-tabs" id="putTabs">
<li class="active"><a href="#txoutputs" data-toggle="tab">Outputs (<span id="totalOutput">0.0000</span>)</a></li>
<li><a href="#txinputs" data-toggle="tab">Inputs (<span id="totalInput">0.0000</span>)</a></li>
</ul>
<br>
<div class="tab-content">
<div class="tab-pane fade in active" id="txoutputs">
<p>Enter the address and amount you wish to make a payment to.</p>
<div class="row">
<div class="col-xs-8">
<label><abbr title="Address to send to">Address</abbr></label>
</div>
<div class="col-xs-3">
<label><abbr title="Amount to send">Amount</abbr></label>
</div>
<div class="col-xs-1">
</div>
</div>
<div id="recipients">
<div class="row recipient">
<div class="col-xs-8">
<input type="text" class="form-control address" placeholder="1">
</div>
<div class="col-xs-3">
<input type="text" class="form-control amount" placeholder="0.00">
</div>
<div class="col-xs-1">
<a href="javascript:;" class="addressAddTo"><span class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="txinputs">
<p>Enter the details of inputs you wish to spend.</p>
<div class="row">
<div class="col-xs-5">
<label><abbr title="Transaction ID">Transaction ID:</abbr></label>
</div>
<div class="col-xs-1">
<label><abbr title="Transaction Input Number">N</abbr></label>
</div>
<div class="col-xs-3">
<label>Script</label>
</div>
<div class="col-xs-2">
<label><abbr title="This field is for accounting purposes only - the entire input will be spent!">Amount</abbr></label>
</div>
<div class="col-xs-1">
</div>
</div>
<div id="inputs">
<div class="row inputs">
<div class="col-xs-5">
<input type="text" class="form-control txId" placeholder="">
</div>
<div class="col-xs-1">
<input type="text" class="form-control txIdN" placeholder="0">
</div>
<div class="col-xs-3">
<input type="text" class="form-control txIdScript">
</div>
<div class="col-xs-2">
<input type="text" class="form-control txIdAmount" placeholder="0.00">
</div>
<div class="col-xs-1">
<a href="javascript:;" class="txidAdd"><span class="glyphicon glyphicon-plus"></span></a>
<a href="javascript:;" class="txidClear"><span class="glyphicon glyphicon-minus"></span></a>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
<label><abbr title="What is not spent will be used as a transaction fee">Transaction Fee</abbr></label>
<input type="text" id="transactionFee" class="form-control" value="0.0000" readonly>
</div>
</div>
<br>
<div id="transactionCreate" class="alert alert-success hidden">
<label>Transaction</label>
<p>The transaction below has been generated and encoded. It can be broadcasted once it has been signed.</p>
<br>
<textarea class="form-control" style="height:150px" readonly></textarea>
<p class="text-muted">Size: <span class="txSize">0</span> <i>bytes</i></p>
</div>
<input type="button" value="Submit" class="btn btn-primary" id="transactionBtn">
<br>
</div>
<div class="tab-pane tab-content" id="verify">
<h2>Verify <small>transactions and other scripts</small></h2>
<div class="row">
<div class="col-md-12">
<p>Enter the raw transaction, redeem script, pubkey or wif key to convert it into a readable format that can be verified manually.</p>
<textarea type="text" id="verifyScript" class="form-control" style="height:125px"></textarea>
</div>
</div>
<br>
<div class="hidden verifyData" id="verifyRsData">
<h4>Redeem Script</h4>
<p>The above redeem script has been decoded</p>
<label>Multi Signature Address</label>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control address multisigAddress" value="" readonly>
<span class="input-group-btn">
<button class="qrcodeBtn btn btn-default" type="button" data-toggle="modal" data-target="#modalQrcode"><span class="glyphicon glyphicon-qrcode"></span></button>
</span>
</div>
</div>
</div>
<label>Required Signatures</label>
<p class="signaturesRequired">?</p>
<label>Signatures Required from</label>
<table class="table table-striped table-hover">
<tbody>
</tbody>
</table>
</div>
<div class="hidden verifyData" id="verifyTransactionData">
<h4>Transaction Script</h4>
<p>The above script has been decoded</p>
<div><b>Version</b>: <span class="transactionVersion"></span></div>
<div><b>Transaction Size</b>: <span class="transactionSize"></span></div>
<div><b>Lock time</b>: <span class="transactionLockTime"></span></div>
<hr>
<label>Inputs</label>
<table class="table table-striped table-hover ins">
<thead>
<tr style="font-weight:bold;">
<td><abbr title="the transaction id">Txid</abbr></td><td><abbr title="index id of the the transaction">N</abbr></td><td><abbr title="transaction script">Script</abbr></td><td><abbr title="is input signed?">Signed?</abbr></td><td><abbr title="is transaction a multisig transaction?">MultiSig?</abbr></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<label>Outputs</label>
<table class="table table-striped table-hover outs">
<thead>
<tr style="font-weight:bold;">
<td><abbr title="address the funds are being sent to">Address</abbr></td><td><abbr title="the amount the address is being sent">Amount</abbr></td><td><abbr title="the script of the transaction">Script</abbr></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="hidden verifyData" id="verifyPrivKey">
<h4>WIF key</h4>
<p>The above wif key has been decoded</p>
<p><b>Address</b>: <input type="text" class="form-control address" readonly></p>
<p><b>Public key</b>: <input type="text" class="form-control pubkey" readonly></p>
<p><b>Private key</b>: <input type="text" class="form-control privkey" readonly></p>
<p><b>Is compressed</b>: <span class="iscompressed"></span></p>
</div>
<div class="hidden verifyData" id="verifyPubKey">
<h4>Public key</h4>
<p>The above public key has been encoded to its address</p>
<p><b>Address</b>: <input type="text" class="form-control address" readonly></p>
</div>
<div id="verifyStatus" class="alert alert-danger hidden"><span class="glyphicon glyphicon-exclamation-sign"></span> Unable to decode</div>
<input type="button" value="Submit" class="btn btn-primary" id="verifyBtn">
<br>
</div>
<div class="tab-pane tab-content" id="sign">
<h2>Sign Transaction <small>once a transaction has been verified</small></h2>
<p>Once you have <a href="#verify">verified</a> a transaction you can sign and then <a href="#broadcast">broadcast</a> it into the network.</p>
<div class="row">
<div class="col-md-12">
<label for="signPrivateKey">Private key</label>
<div class="input-group">
<input id="signPrivateKey" type="password" class="form-control" value="">
<span class="input-group-btn">
<button class="showKey btn btn-default" type="button">Show</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="signTransaction">Transaction</label>
<textarea type="text" id="signTransaction" class="form-control" style="height:125px"></textarea>
</div>
</div>
<br>
<div class="alert alert-danger hidden" id="signedDataError">
<span class="glyphicon glyphicon-exclamation-sign"></span> There is a problem with one or more of your inputs, please check and try again
</div>
<div class="alert alert-success hidden" id="signedData">
<label>Signed transaction</label>
<p>The above transaction has been signed:</p>
<textarea class="form-control script" style="height:160px" readonly></textarea>
<p class="text-muted">Size: <span class="txSize">0</span> <i>bytes</i></p>
</div>
<input type="button" value="Submit" class="btn btn-primary" id="signBtn">
<br>
</div>
<div class="tab-pane tab-content" id="broadcast">
<h2>Broadcast Transaction <small>into the bitcoin network</small></h2>
<p>Enter your hex encoded bitcoin transaction</p>
<textarea class="form-control" style="height:125px" id="rawTransaction"></textarea>
<br>
<div id="rawTransactionStatus" class="alert hidden">
</div>
<input type="button" value="Submit" id="rawSubmitBtn" class="btn btn-primary">
<br>
</div>
<div class="tab-pane tab-content" id="dev">
<h2>Development <small>Javascript framework, API and more</small></h2>
</div>
<div class="tab-pane tab-content" id="about">
<h2>About <small>open source bitcoin wallet</small></h2>
<p>Version 1.0 beta by <a href="https://bitcointalk.org/index.php?action=profile;u=34834" target="_blank">OutCast3k</a></p>
<p>Compatible with bitcoin-qt</p>
<p>Github <a href="https://github.com/OutCast3k/coinbin/">https://github.com/OutCast3k/coinbin/</a></p>
<p>TOR <a href="http://4zpinp6gdkjfplhk.onion">4zpinp6gdkjfplhk.onion</a></p>
<br>
<p>Donate 1CWHWkTWaq1K5hevimJia3cyinQsrgXUvg</p>
</div>
<br>
<p class="text-muted">This page uses javascript to generate your addresses and sign your transactions within your browser, this means we <i>never</i> receive your private keys, this can be indepently verified by reviewing the source code on <a href="https://github.com/OutCast3k/coinbin/" target="_blank">github</a>. You can even <a href="https://github.com/OutCast3k/coinbin/archive/master.zip">download</a> this page and host it yourself or run it offline!</p>
<br>
</div>
</div>
</div>
<div id="footer">
<div class="container text-right">
<p class="text-muted">Version 1.0 beta</p>
</div>
</div>
<!-- wallet confirm send modal -->
<div class="modal fade" id="modalWalletConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Please confirm</h4>
</div>
<div class="modal-body">
<p>You are about to send a transaction to the value of <span id="spendAmount">0.00</span> BTC</p>
<br>
<div id="walletSendConfirmStatus" class="alert alert-danger hidden"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="walletConfirmSend">Send</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="confirmClose">Close</button>
</div>
</div>
</div>
</div>
<!-- wallet confirm send modal -->
<!-- qrcode modal -->
<div class="modal fade" id="modalQrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">qrcode</h4>
</div>
<div class="modal-body" align="center">
<div id="qrcode"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="agentClose">Close</button>
</div>
</div>
</div>
</div>
<!-- qrcode modal -->
<div class="hidden" id="entropybucket"></div>
</body>
</html>