<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星云链测试网 | Nebulas Testnet</title>
<link href="https://cdn.bootcss.com/tether/1.4.3/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="static/frontend/img/logo.png" type="image/png">
<link rel="apple-touch-icon" href="static/frontend/img/logo.png">
<link rel="stylesheet" href="static/frontend/css/base.css" />
<link rel="stylesheet" href="static/frontend/css/home.css" />
<script type="text/javascript" src="static/frontend/js/wallet.js"></script>
</head>
<body>
<section id="menu" class="white">
    <nav class="navbar navbar-dropdown bg-color">
        <div class="container">
            <div class="mbr-table">
                <div class="mbr-table-cell">
                    <div class="navbar-brand">
                        <a href="#" class="navbar-logo">
                        <img src="static/frontend/img/logo-b.png" alt="Nebulas" style="height: 54px;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="col-md-12">
            <div style=" font-size: 2rem; text-align: left; padding-right: 1rem; margin-bottom: 1rem;" id="tab"><span><a href="index.html">Create New Wallet</a></span>    <span class="left"><a class="create" href="sendNas.html">Send NAS</a></span></div>
            <hr/>
        </div>
    </div>
</section>


<div id="unlock" class="container wallet">
	<div id="unlockWallet" class="col-md-12">
		<div class="form-group">
			<label for="openfile">Select Your Wallet File:</label>
			<a class="form-control openfile" onclick="openFiledialog()">SELECT WALLET FILE...</a>
			<input type="file" id="openfile" style="display:none;">
		</div>
		<div class="form-group" id="password_div" style="display:none;">
			<label for="password">Your wallet is encrypted. Good! Please enter the password.</label>
			<input type="password" class="form-control" id="password" placeholder="">
		</div>
		<button id="unlock" type="submit" class="btn btn-default col-xs-12 col-sm-12 col-md-12 text-center" onclick="unlock()">Unlock</button>		
	</div>
	<div class="col-xs-12">
	<p class="wallet_help">This is not a recommended way to access your wallet.<br />
Entering your private key on a website dangerous. If our website is compromised or you accidentally visit a different website, your funds will be stolen. </p>
	</div>
</div><!-- unlock -->
<div id="send" class="container send">
	<div id="sendNas" class="col-md-12">
		<div class="form-group">
			<div class="row">
				<div class="col-md-6">
					<label for="fromaddress">From Address</label>
					<input type="text" class="form-control" id="fromaddress" placeholder="">
				</div>
				<div class="col-md-6">
					<label for="balance">Balance</label>
					<div class="input-group">
				      <input type="text" class="form-control" id="balance" placeholder="">
				      <div class="input-group-addon">NAS</div>
				    </div>					
				</div>
			</div>
		</div>
		<div class="form-group">
			<label for="toaddress">To Address</label>
			<input type="text" class="form-control" id="toaddress" placeholder="">
		</div>
		<div class="form-group">
			<label for="amount">Value / Amount to Send</label>			
			<div class="input-group">
		      <input type="text" class="form-control" id="amount" placeholder="Amount">
		      <div class="input-group-addon">NAS</div>
		    </div>
		</div>
		<div class="form-group">
			<label for="limit">Gas Limit</label>
			<input type="text" class="form-control" id="limit" value="20000" placeholder="">
		</div>
		<div class="form-group">
			<label for="price">Gas Price</label>			
			<div class="input-group">
		      <input type="text" class="form-control" id="price" value="1000000" placeholder="">
		      <div class="input-group-addon">NIS</div>
		    </div>
		</div>
		<div class="form-group">
			<label for="nonce">Nonce</label>
			<input type="text" class="form-control" id="nonce" placeholder="">
		</div>
		<button id="generate" type="submit" class="btn btn-default col-xs-12 col-sm-12 col-md-12 text-center" onclick="generate()">Generate Transaction</button>	
	</div>
</div><!-- send -->
<div id="transaction" class="container transaction">
<div class="col-md-6">
	<div class="form-group">
		<label for="raw">Raw Transaction</label>
		<textarea class="form-control" rows="8" id="raw"></textarea>
	</div>
</div>
<div class="col-md-6">
	<div class="form-group">
		<label for="signed">Signed Transaction</label>
		<textarea class="form-control" rows="8" id="signed"></textarea>
	</div>
</div>
<div class="col-md-12">
<button id="sendtransaction" type="submit" class="btn btn-default col-xs-12 col-sm-12 col-md-12 text-center" onclick="sendtransaction()">Send Transaction</button>
</div>
</div><!-- Transaction -->
<div class="container transaction" id="receipt_div" style="display:none;">
<div class="col-md-6">
	<div class="form-group">
		<label for="raw">txhash</label>
		<textarea readonly id="receipt" rows="6" class="form-control"></textarea>
	</div>
</div>
<div class="col-md-6">
	<div class="form-group">
		<label for="signed">receipt</label>
		<textarea readonly id="receipt_state" rows="6" class="form-control"></textarea>
	</div>
</div>
</div><!-- hxhash -->

<!-- footer -->
<section class=" mbr-section mbr-section-sm-padding mbr-footer ">
	<div class="container ">
		<div class="row ">
			<div class="mbr-footer-content col-xs-12 text-xs-center footer-title ">
				<a href="# ">
					<img src="static/frontend/img/logo-b.png " alt="Nebulas Testnet ">
				</a>
			</div>
			<div class="mbr-footer-content col-xs-12 text-xs-center ">
				<p>
					<a href="https://nebulas.io/">Home</a>
					<a href="https://nebulas.io/technology.html">Technology</a>
					<a href="https://nebulas.io/community.html">Community</a>
					<a href="https://nebulas.io/team.html">Team</a>
					<a href="https://nebulas.io/resources.html">Resources</a>
					<a href="https://medium.com/nebulasio" target="_blank">Blog</a>
				</p>
			</div>
			<div class="mbr-footer-content col-xs-12 text-xs-center ">
				<p>Copyright &copy; 2017 Nebulas.io, 814 Mission Street, San Francisco</p>
			</div>
		</div>
	</div>
</section>

<div class="modal fade" tabindex="-1" id="info" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">info</h4>
      </div>
      <div class="modal-body">
        <p>unlocking&hellip;</p>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://cdn.bootcss.com/tether/1.4.3/js/tether.min.js "></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js "></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js "></script>
<script src="static/frontend/js/home.v1.js "></script>
<script>
var Neb = require("wallet").Neb;
var Account = require("wallet").Account;
var Transaction = require("wallet").Transaction;
var utils = require("wallet").Utils;
var neb = new Neb();
neb.setRequest(new Neb.HttpRequest("https://testnet.nebulas.io"));
var account,toaccount,state,tx,txhash;;
account= new Account();
var testnetchainID = 1001;
var unitMap = {
		  'none': '0',
		  'nis': '1',
		  'knis': '1000',
		  'mnis': '1000000',
		  'nanonas': '1000000000',
		  'micronas': '1000000000000',
		  'millinas': '1000000000000000',
		  'nas': '1000000000000000000'
		};

var unitValue = function (unit) {
  unit = unit ? unit.toLowerCase() : 'nas';
  var unitValue = unitMap[unit];
  if (unitValue === undefined) {
    throw new Error('The unit undefined, please use the following units:' + JSON.stringify(unitMap, null, 2));
  }
  return new utils.toBigNumber(unitValue, 10);
};
function openFiledialog(){
	return $("#openfile").click();
}
$("#openfile").change(function(){
	var selectedFile = document.getElementById("openfile").files[0];
    var name = selectedFile.name;
    try{
    	account = Account.fromAddress(name);
    	$("#password_div").show();
    }catch(e){
    	bootbox.dialog(
				{
					title:'Error',
					message:e,size:'large'
				}
				);
    }
});
function unlock(){
	var objFile = $("#openfile");
	if(objFile.val()==""){
		bootbox.dialog(
				{
					title:'please select your wallet',
					message:"please upload your wallet file,thanks",size:'large'
				}
				);
	}else{
		var selectedFile = document.getElementById("openfile").files[0];
	    var name = selectedFile.name;
	    var size = selectedFile.size;
	    var password = $("#password").val();	    
	    setTimeout(function () {
	    	var reader = new FileReader();
		    reader.readAsText(selectedFile);
		    reader.onload = function(){
		　　　　　　	try{
		　　　　　　		$.ajax({
		　　　　　　			"url":"/unlock",
		      			"type":"post",
		      			"data":{"key":this.result,"password":password},
		      			"success":function(res){
		      				try
		      				{
			      				if(res.error === '0'){
			      					account.setPrivateKey(res.PrivateKey);		
			      					$('#info').modal('hide');
			      					$("#fromaddress").val(res.address);			　　　　　　		　　　		
						　　　　　　		$("#unlock").hide();
						   	    	$("#send").show();
						   	    	setTimeout(function () {
						　　　　            state = neb.api.getAccountState(res.address);
						　　　　            balance_nas = utils.toBigNumber(state.balance).dividedBy(unitValue("nas")).toNumber();
						　　　　            $("#balance").val(balance_nas);
						　　　　            $("#nonce").val(state.nonce);
						　　　　        }, 1000);
			      				}else{
			      					throw this.message = res.address;
			      				}
		      				}catch(e){
		    		　　　　　　		bootbox.dialog(
		    		　　　　				{
		    		　　　　					title:'Error',
		    		　　　　					message:e,size:'large'
		    		　　　　				}
		    		　　　　				);
		    		　　　　　　	}	
		      				
		      			}
		　　　　　　		});	　　
		　　　　　　	}catch(e){
		　　　　　　		bootbox.dialog(
		　　　　				{
		　　　　					title:'Error',
		　　　　					message:e,size:'large'
		　　　　				}
		　　　　				);
		　　　　　　	}	
		    };      		    
		　　　　}, 1000);
	    $('#info').modal('show');
	}
	return false;  
}
function generate(){
	fromaddress = $("#fromaddress").val();
	toaddress = $("#toaddress").val();
	try{
    	toaccount = Account.fromAddress(toaddress);
    	amount = $("#amount").val();
    	balance = $("#balance").val();    	
    	gaslimit = $("#limit").val();
    	gasprice = $("#price").val();
    	tmp = utils.toBigNumber(gaslimit).times(utils.toBigNumber(gasprice)).dividedBy(unitValue("nas"));
    	if(utils.toBigNumber(balance).lt(utils.toBigNumber(amount).plus(tmp))){
    		amount = utils.toBigNumber(balance).minus(utils.toBigNumber(tmp)).toNumber();
    	}
        tx = new Transaction(testnetchainID, account, toaddress, neb.nasToBasic(amount), parseInt(state.nonce)+1, gasprice, gaslimit);
        tx.signTransaction();
        $("#raw").val(tx.toString());
        $("#signed").val(tx.toProtoString());
    	$("#transaction").show();
    }catch(e){
    	bootbox.dialog(
				{
					title:'Error',
					message:e,size:'large'
				}
				);
    }
    
	return false;
}
function sendtransaction(){
	var resp = neb.api.sendRawTransaction(tx.toProtoString());
    txhash = resp.txhash;
    neb.api.getTransactionReceipt(txhash, function (err, resps) {
        $("#receipt_state").val(JSON.stringify(resps));
    });
    $("#receipt").val(txhash);
    $("#receipt_div").show();
    setTimeout(function () {
        state = neb.api.getAccountState(account.getAddressString());
        balance_nas = utils.toBigNumber(state.balance).dividedBy(unitValue("nas"));;
        $("#balance").val(balance_nas);
        $("#nonce").val(state.nonce);
    }, 60000);　　　
}

</script>
</body>
</html>