btcpayserver/BTCPayServer/Plugins/BoltcardBalance/Views/ScanCard.cshtml

@{
	ViewData["Title"] = "Boltcard Balances";
	ViewData["ShowFooter"] = false;
	Layout = "/Views/Shared/_LayoutWizard.cshtml";
}

@section PageHeadContent
{
<style>
		.amount-col {
		text-align: right;
		white-space: nowrap;
	}
</style>
}

<header class="text-center">
	<h1>Consult balance</h1>
	<p class="lead text-secondary mt-3" id="explanation">Scan your card for consulting the balance</p>
</header>

<div id="body" class="my-4">
	<div id="actions" class="d-flex align-items-center justify-content-center d-none">
		<div class="d-flex gap-3 mt-3 mt-sm-0">
			<a id="start-scan-btn" class="btn btn-primary" href="#">Ask permission...</a>
		</div>
	</div>
	<div id="qr" class="d-flex flex-column align-items-center justify-content-center d-none">
		<div class="d-inline-flex flex-column" style="width:256px">
			<div class="qr-container mb-2">
				<vc:qr-code data="@Context.Request.GetCurrentUrl()" />
			</div>
		</div>
		<p class="text-secondary">NFC not supported in this device</p>
	</div>
	<div id="scanning-btn" class="d-flex align-items-center justify-content-center d-none">
		<div class="d-flex gap-3 mt-3 mt-sm-0">
			<a id="scanning-btn-link" class="action-button" style="font-size: 50px;" ></a>
		</div>
	</div>
	<div id="balance" class="row">
		<div id="balance-table"></div>
	</div>
</div>

<script>
	(function () {
		var permissionGranted = false;
		var ndef = null;
		var abortController = null;
		function delay(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}
		async function showBalance(lnurlw) {
			setState("Submitting");
			await delay(1000);
			var url = window.location.href.replace("#", "");
			url = url.split("?")[0] + "?" + lnurlw.split("?")[1];
			// url = "https://testnet.demo.btcpayserver.org/boltcards/balance?p=...&c=..."

			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200 && this.responseText) {
					document.getElementById("balance-table").innerHTML = this.responseText;
					document.getElementById("CancelWizard").addEventListener("click", function (e) {
						e.preventDefault();
						setState("WaitingForCard");
						document.getElementById("balance-table").innerHTML = "";
					});

					document.getElementById("lnurlwithdraw-button").addEventListener("click", function (e) {
						var el = document.getElementsByClassName("lnurl-pay");
						for (var i = 0; i < el.length; i++) {
							if (el[i].classList.contains("d-none"))
								el[i].classList.remove("d-none");
							else
								el[i].classList.add("d-none");
						}
					});

					setState("ShowBalance");
				}
				else {
					setState("WaitingForCard");
				}
			};
			xhttp.open('GET', url, true);
			xhttp.send(new FormData());
		}

		async function startScan() {
			if (!('NDEFReader' in window)) {
				return;
			}
			ndef = new NDEFReader();
			abortController = new AbortController();
			abortController.signal.onabort = () => setState("WaitingForCard");

			await ndef.scan({ signal: abortController.signal })
			setState("WaitingForCard");
			ndef.onreading = async ({ message }) => {
				const record = message.records[0];
				const textDecoder = new TextDecoder('utf-8');
				const decoded = textDecoder.decode(record.data);
				await showBalance(decoded);
			};
		}

		function setState(state)
		{
			document.getElementById("actions").classList.add("d-none");
			document.getElementById("qr").classList.add("d-none");
			document.getElementById("scanning-btn").classList.add("d-none");
			document.getElementById("balance").classList.add("d-none");

			if (state === "NFCNotSupported")
			{
				document.getElementById("qr").classList.remove("d-none");
			}
			else if (state === "WaitingForPermission")
			{

				document.getElementById("actions").classList.remove("d-none");
			}
			else if (state === "WaitingForCard")
			{
				document.getElementById("scanning-btn").classList.remove("d-none");
				document.getElementById("scanning-btn-link").innerHTML = "<i class=\"fa fa-wifi\"></i>";
			}
			else if (state == "Submitting")
			{
				document.getElementById("scanning-btn").classList.remove("d-none");
				document.getElementById("scanning-btn-link").innerHTML = "<i class=\"fa fa-spinner\"></i>"
			}
			else if (state == "ShowBalance") {
				document.getElementById("scanning-btn").classList.remove("d-none");
				document.getElementById("scanning-btn-link").innerHTML = "<i class=\"fa fa-wifi\"></i>";
				document.getElementById("balance").classList.remove("d-none");
			}
		}
		document.addEventListener("DOMContentLoaded", async () => {
			var nfcSupported = 'NDEFReader' in window;
			if (!nfcSupported) {
				setState("NFCNotSupported");
			}
			else {
				setState("WaitingForPermission");
				var granted = (await navigator.permissions.query({ name: 'nfc' })).state === 'granted';
				if (granted)
				{
					setState("WaitingForCard");
					startScan();
				}
			}
			delegate('click', "#start-scan-btn", startScan);
			//showBalance("lnurl://ewfw?p=test&c=test");
		});
	})();
</script>