shawntabrizi · October 7, 2024 21:00
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">

 <head>
 	<title>Play with PAPI</title>
 </head>

 <body>
 	<h1>Play with PAPI (<a href="https://github.com/polkadot-api/polkadot-api">The Polkadot API</a>)</h1>
 	<pre id="chainInfo">Loading...</pre>
 	<pre id="blockNumber"></pre>
 	<pre id="freeBalance"></pre>
 </body>

 <script src="https://unpkg.com/polkadot-api/dist/umd/index.min.js"></script>
 <script src="https://unpkg.com/polkadot-api/dist/umd/ws-provider_web.min.js"></script>
 <script src="https://unpkg.com/polkadot-api/dist/umd/polkadot-sdk-compat.min.js"></script>

 <script>
 	BigInt.prototype.toJSON = function () { return Number(this); }; // This handles printing large numbers.
 	const { createClient } = papi;
 	const { withPolkadotSdkCompat } = papiPolkadotSdkCompat;
 	const { getWsProvider } = papiWsProviderWeb;

 	const ENDPOINT = "wss://rpc.polkadot.io"; // TODO: Change which blockchain you connect to! Try `wss://kusama-rpc.polkadot.io`
 	const client = createClient(withPolkadotSdkCompat(getWsProvider(ENDPOINT)));
 	const api = client.getUnsafeApi(); // Here is our API :)

 	document.getElementById("chainInfo").innerText = "Connecting to RPC endpoint...";

 	client.getChainSpecData().then((chainSpec) => { // This will tell us about the chain we are connected to!
 		document.getElementById("chainInfo").innerText =
 			`Connected to:\n\n${JSON.stringify(chainSpec, 0, 2)}`;
 	});

 	client.finalizedBlock$.subscribe((block) => { // Thanks to our subscription, the block number automatically updates!
 		document.getElementById("blockNumber").innerText =
 			`Latest finalized block:\n\n${JSON.stringify(block, 0, 2)}`;
 	});

 	const ACCOUNT = "5DksjtJER6oLDWkWKCWcL3f1swPWeNNFsS9zHxa2rPa7LsH9"; // TODO: Feel free to change this account! Maybe try your own?
 	api.query.System.Account.watchValue(ACCOUNT).subscribe((account) => { // TODO: Feel free to change this query! Try `api.query.Staking.Ledger`.
 		document.getElementById("freeBalance").innerText =
 			`Data for ${ACCOUNT}:\n\n${JSON.stringify(account, 0, 2)}`;
 	});

 	// TODO: Congrats! You are now ready to try the "Intro to PAPI" tutorial: https://dotcodeschool.com/courses/intro-to-papi
 </script>

 </html>
	<!doctype html>
	<html lang="en">

	<head>
	<title>Play with PAPI</title>
	</head>

	<body>
	<h1>Play with PAPI (<a href="https://github.com/polkadot-api/polkadot-api">The Polkadot API</a>)</h1>
	<pre id="chainInfo">Loading...</pre>
	<pre id="blockNumber"></pre>
	<pre id="freeBalance"></pre>
	</body>

	<script src="https://unpkg.com/polkadot-api/dist/umd/index.min.js"></script>
	<script src="https://unpkg.com/polkadot-api/dist/umd/ws-provider_web.min.js"></script>
	<script src="https://unpkg.com/polkadot-api/dist/umd/polkadot-sdk-compat.min.js"></script>

	<script>
	BigInt.prototype.toJSON = function () { return Number(this); }; // This handles printing large numbers.
	const { createClient } = papi;
	const { withPolkadotSdkCompat } = papiPolkadotSdkCompat;
	const { getWsProvider } = papiWsProviderWeb;

	const ENDPOINT = "wss://rpc.polkadot.io"; // TODO: Change which blockchain you connect to! Try `wss://kusama-rpc.polkadot.io`
	const client = createClient(withPolkadotSdkCompat(getWsProvider(ENDPOINT)));
	const api = client.getUnsafeApi(); // Here is our API :)

	document.getElementById("chainInfo").innerText = "Connecting to RPC endpoint...";

	client.getChainSpecData().then((chainSpec) => { // This will tell us about the chain we are connected to!
	document.getElementById("chainInfo").innerText =
	`Connected to:\n\n${JSON.stringify(chainSpec, 0, 2)}`;
	});

	client.finalizedBlock$.subscribe((block) => { // Thanks to our subscription, the block number automatically updates!
	document.getElementById("blockNumber").innerText =
	`Latest finalized block:\n\n${JSON.stringify(block, 0, 2)}`;
	});

	const ACCOUNT = "5DksjtJER6oLDWkWKCWcL3f1swPWeNNFsS9zHxa2rPa7LsH9"; // TODO: Feel free to change this account! Maybe try your own?
	api.query.System.Account.watchValue(ACCOUNT).subscribe((account) => { // TODO: Feel free to change this query! Try `api.query.Staking.Ledger`.
	document.getElementById("freeBalance").innerText =
	`Data for ${ACCOUNT}:\n\n${JSON.stringify(account, 0, 2)}`;
	});

	// TODO: Congrats! You are now ready to try the "Intro to PAPI" tutorial: https://dotcodeschool.com/courses/intro-to-papi
	</script>

	</html>