example/composer.html

<!DOCTYPE html>
<html>
	<head>
		<style>
			html {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}

			body {
				height: 100%;
				width: 100%;
				overflow: auto;
				display: flex;
				margin: 0;
			}

			.hidden {
				display: none;
			}

			.col {
				flex-grow: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				background: #2a2a2a;
				padding: 15px;
			}

			.header {
				padding: 5px;
				font-size: 12px;
				font-family: Menlo, monaco, Courier;
				font-weight: bold;
				letter-spacing: 0.9px;
				text-align: center;
				background: black;
				color: white;
				border-radius: 4px;
			}

			textarea {
				font-size: 12px;
				font-family: Menlo, monaco, Courier;
				padding: 0px;
				padding-top: 20px;
				outline: none;
				background: #2a2a2a;
				color: rgba(255, 255, 255, 0.8);
				border: none;
				width: 100%;
				height: 100%;
				resize: none;
			}

			#send {
				position: fixed;
				right: 30px;
				bottom: 30px;
				padding: 10px 20px;
				font-family: Menlo, monaco, Courier;
				background: gold;
				font-size: 12px;
				color: black;
				text-decoration: none;
				border-radius: 4px;
			}

			#sent {
				position: fixed;
				right: 30px;
				bottom: 30px;
				background: black;
				color: gold;
				padding: 10px 30px;
				border-radius: 4px;
			}

			#sent a {
				text-decoration: none;
			}

			#how {
				font-size: 12px;
				font-family: Menlo, monaco, Courier;
				position: fixed;
				bottom: 30px;
				left: 30px;
				background: black;
				color: gold;
				padding: 10px 30px;
				border-radius: 4px;
			}
		</style>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="../dist/datapay.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/untrusting/bitails/dist/bitails.min.js"></script>

		<script>
			const explorer = new Explorer("main");

			document.addEventListener("DOMContentLoaded", (event) => {
				let dslEl = document.querySelector("#dsl");
				let txEl = document.querySelector("#tx");
				let hexEl = document.querySelector("#hex");
				let sendEl = document.querySelector("#send");
				let howEl = document.querySelector("#how");

				const defaultJSON = {
					"data": ["", "Hello, World!"],
					"pay": {
						"key": ""
					}
				};

				dslEl.value = JSON.stringify(defaultJSON, null, 4);

				dslEl.oninput = (e) => {
					update(e.target.value);
				}

				howEl.onclick = (e) => {
					alert("The first column is where you declaratively describe your transaction (See datapay documentation). The second column is where the generated transaction is displayed. The third column displays the actual hex encoded string that can be broadcasted to Bitcoin SV network. The default transaction description is just a simple data-only OP_RETURN transaction which only spends 300 satoshi transaction fee and nothing more, but you can experiment with different options as well. WARNING: THIS ACTUALLY WORKS, SO HANDLE WITH CARE.");
					return false;
				}

				const update = (html) => {
					let h = html.replace(/\n/g, '');
					datapay.build(JSON.parse(h), function(err, tx) {
						txEl.value = JSON.stringify(tx.toJSON(), null, 4);
						hexEl.value = tx.toString()
					})
				}

				sendEl.onclick = (e) => {
					let t = hexEl.value;
					let isvalid = new datapay.bsv.TxVerifier({
						tx: t
					});
					if (isvalid) {
						send(t)
					}
					return false;
				}

				update(dslEl.value);
			});

			const send = (transaction) => {
				explorer.broadcast(transaction.toString()).then((res) => {
					console.log(res);
					document.querySelector("#sent").innerHTML = "<a href='https://whatsonchain.com/tx/" + res.txid + "' target='_blank'>Success! Click to view Transaction</a>";
					document.querySelector("#sent").className = "";
					document.querySelector("#send").className = "hidden";
				});
			}
		</script>
	</head>

	<body>
		<div class='col'>
			<div class='header'>Transaction Description</div>
			<textarea id='dsl'>
			</textarea>
		</div>

		<div class='col'>
			<div class='header'>Generated Transaction</div>
			<textarea id='tx'></textarea>
		</div>

		<div class='col'>
			<div class='header'>Hex Format</div>
			<textarea id='hex'></textarea>
		</div>

		<a href='#' id='send'>Click to Broadcast Transaction ></a>
		<div id='sent' class='hidden'></div>
		<a id='how' href='#'>how does this work?</a>
	</body>
</html>