skyfffire
/
core-chain


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>{{.Network}}: Faucet</title>

	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.4.1/packaged/jquery.noty.packaged.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>

	<style>
		.vertical-center {
			min-height: 100%;
			min-height: 100vh;
			display: flex;
			align-items: center;
		}
		.progress {
			position: relative;
		}
		.progress span {
			position: absolute;
			display: block;
			width: 100%;
			color: white;
		}
		pre {
			padding: 6px;
			margin: 0;
		}
	</style>
</head>

<body>
<div class="vertical-center">
	<div class="container">
		<div class="row" style="margin-bottom: 16px;">
			<div class="col-lg-12">
				<h1 style="text-align: center;"><i class="fa fa-bath" aria-hidden="true"></i> {{.Network}} Faucet</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2">
				<div class="input-group">
					<input id="url" name="url" type="text" class="form-control" placeholder="Social network URL containing your Core Chain address...">
					<span class="input-group-btn">
								<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Give me BNB	<i class="fa fa-caret-down" aria-hidden="true"></i></button>
				        <ul class="dropdown-menu dropdown-menu-right">{{range $idx, $amount := .Amounts}}
				          <li><a style="text-align: center;" onclick="tier={{$idx}};symbol='BNB'; {{if $.Recaptcha}}grecaptcha.execute(){{else}}submit({{$idx}}){{end}}">{{$amount}}</a></li>{{end}}
				        </ul>
							</span>
					<span class="input-group-btn">
								<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Peggy tokens<i class="fa fa-caret-down" aria-hidden="true"></i></button>
				        <ul class="dropdown-menu dropdown-menu-right"> {{range $symbol, $bep2eInfo := .Bep2eInfos}}
								<li><a style="text-align: center;" onclick="symbol={{$symbol}}; {{if $.Recaptcha}}grecaptcha.execute(){{else}}submitBep2e({{$symbol}}){{end}}">{{$bep2eInfo.AmountStr}} {{$symbol}}</a></li>{{end}}
				        </ul>
							</span>
				</div>{{if .Recaptcha}}
				<div class="g-recaptcha" data-sitekey="{{.Recaptcha}}" data-callback="submit" data-size="invisible"></div>{{end}}
			</div>
		</div>
		<div class="row" style="margin-top: 32px;">
			<div class="col-lg-6 col-lg-offset-3">
				<div class="panel panel-small panel-default">
					<div class="panel-body" style="padding: 0; overflow: auto; max-height: 300px;">
						<table id="requests" class="table table-condensed" style="margin: 0;"></table>
					</div>
					<div class="panel-footer">
						<table style="width: 100%"><tr>
							<td style="text-align: center;"><i class="fa fa-rss" aria-hidden="true"></i> <span id="peers"></span> peers</td>
							<td style="text-align: center;"><i class="fa fa-database" aria-hidden="true"></i> <span id="block"></span> blocks</td>
							<td style="text-align: center;"><i class="fa fa-heartbeat" aria-hidden="true"></i> <span id="funds"></span> BNBs</td>
							<td style="text-align: center;"><i class="fa fa-university" aria-hidden="true"></i> <span id="funded"></span> funded</td>
						</tr></table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	// Global variables to hold the current status of the faucet
	var attempt = 0;
	var server;
	var tier = 0;
	var symbol="";
	var requests = [];

	// Define a function that creates closures to drop old requests
	var dropper = function(hash) {
		return function() {
			for (var i=0; i<requests.length; i++) {
				if (requests[i].tx.hash == hash) {
					requests.splice(i, 1);
					break;
				}
			}
		}
	};
	// Define the function that submits a gist url to the server
	var submit = function({{if .Recaptcha}}captcha{{end}}) {
		server.send(JSON.stringify({url: $("#url")[0].value, symbol: symbol, tier: tier{{if .Recaptcha}}, captcha: captcha{{end}}}));{{if .Recaptcha}}
		grecaptcha.reset();{{end}}
	};
	// Define a method to reconnect upon server loss
	var reconnect = function() {
		server = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/faucet-smart/api");

		server.onmessage = function(event) {
			var msg = JSON.parse(event.data);
			if (msg === null) {
				return;
			}

			if (msg.funds !== undefined) {
				$("#funds").text(msg.funds);
			}
			if (msg.funded !== undefined) {
				$("#funded").text(msg.funded);
			}
			if (msg.peers !== undefined) {
				$("#peers").text(msg.peers);
			}
			if (msg.number !== undefined) {
				$("#block").text(parseInt(msg.number, 16));
			}
			if (msg.error !== undefined) {
				noty({layout: 'topCenter', text: msg.error, type: 'error', timeout: 5000, progressBar: true});
			}
			if (msg.success !== undefined) {
				noty({layout: 'topCenter', text: msg.success, type: 'success', timeout: 5000, progressBar: true});
			}
			if (msg.requests !== undefined && msg.requests !== null) {
				// Mark all previous requests missing as done
				for (var i=0; i<requests.length; i++) {
					if (msg.requests.length > 0 && msg.requests[0].tx.hash == requests[i].tx.hash) {
						break;
					}
					if (requests[i].time != "") {
						requests[i].time = "";
						setTimeout(dropper(requests[i].tx.hash), 3000);
					}
				}
				// Append any new requests into our local collection
				var common = -1;
				if (requests.length > 0) {
					for (var i=0; i<msg.requests.length; i++) {
						if (requests[requests.length-1].tx.hash == msg.requests[i].tx.hash) {
							common = i;
							break;
						}
					}
				}
				for (var i=common+1; i<msg.requests.length; i++) {
					requests.push(msg.requests[i]);
				}
				// Iterate over our entire local collection and re-render the funding table
				var content = "";
				for (var i=requests.length-1; i >= 0; i--) {
					var done    = requests[i].time == "";
					var elapsed = moment().unix()-moment(requests[i].time).unix();

					content += "<tr id='" + requests[i].tx.hash + "'>";
					content += "  <td><div style=\"background: url('" + requests[i].avatar + "'); background-size: cover; width:32px; height: 32px; border-radius: 4px;\"></div></td>";
					content += "  <td><pre>" + requests[i].account + "</pre></td>";
					content += "  <td style=\"width: 100%; text-align: center; vertical-align: middle;\">";
					if (done) {
						content += "    funded";
					} else {
						content += "    <span id='time-" + i + "' class='timer'>" + moment.duration(-elapsed, 'seconds').humanize(true) + "</span>";
					}
					content += "    <div class='progress' style='height: 4px; margin: 0;'>";
					if (done) {
						content += "      <div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='30' style='width:100%;'></div>";
					} else if (elapsed > 30) {
						content += "      <div class='progress-bar progress-bar-danger progress-bar-striped active' role='progressbar' aria-valuenow='30' style='width:100%;'></div>";
					} else {
						content += "      <div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='" + elapsed + "' style='width:" + (elapsed * 100 / 30) + "%;'></div>";
					}
					content += "    </div>";
					content += "  </td>";
					content += "</tr>";
				}
				$("#requests").html("<tbody>" + content + "</tbody>");
			}
		}
		server.onclose = function() { setTimeout(reconnect, 3000); };
	}
	// Start a UI updater to push the progress bars forward until they are done
	setInterval(function() {
		$('.progress-bar').each(function() {
			var progress = Number($(this).attr('aria-valuenow')) + 1;
			if (progress < 30) {
				$(this).attr('aria-valuenow', progress);
				$(this).css('width', (progress * 100 / 30) + '%');
			} else if (progress == 30) {
				$(this).css('width', '100%');
				$(this).addClass("progress-bar-danger");
			}
		})
		$('.timer').each(function() {
			var index = Number($(this).attr('id').substring(5));
			$(this).html(moment.duration(moment(requests[index].time).unix()-moment().unix(), 'seconds').humanize(true));
		})
	}, 1000);

	// Establish a websocket connection to the API server
	reconnect();
</script>{{if .Recaptcha}}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>{{end}}
</body>
</html>