shawntabrizi · September 11, 2024 20:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Polkadot Balance Fetcher</title>
 	<style>
 		body {
 			font-family: Arial, sans-serif;
 			margin: 0;
 			padding: 20px;
 		}

 		h1 {
 			color: #333;
 		}

 		#balance {
 			font-weight: bold;
 			font-size: 1.5em;
 		}
 	</style>
 </head>

 <body>
 	<h1>Polkadot Balance Fetcher</h1>

 	<label for="address">Enter Polkadot Address:</label>
 	<input type="text" id="address" placeholder="Enter address here..." />

 	<button onclick="getBalance()">Get Balance</button>

 	<p>Balance: <span id="balance">0</span> DOT</p>

 	<p id="output"></p>
 </body>

 <!-- These are pre-packaged polkadot JS bundles so you can use them in a simple html page -->
 <script src="//unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script>
 <script src="//unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
 <script src="//unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script>
 <script src="//unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script>
 <script src="//unpkg.com/@polkadot/keyring/bundle-polkadot-keyring.js"></script>

 <!-- Here we connect to a Polkadot SDK blockchain when the page loads. -->
 <script>
 	// Initialize the Polkadot.js API connection
 	const initializeApi = async () => {
 		const { ApiPromise, WsProvider } = polkadotApi;
 		// Adjust the RPC endpoint here.
 		const wsProvider = new WsProvider('wss://rpc.polkadot.io');
 		const api = await ApiPromise.create({ provider: wsProvider });
 		// We store the API into a global variable so we can access it from other functions.
 		window.polkadotApiPromise = api;
 	};

 	// We initialize the API when the page loads.
 	initializeApi();
 </script>

 <!-- Your logic goes here -->
 <script>
 	async function getBalance() {
 		const output = document.getElementById('output');
 		const address = document.getElementById('address').value;
 		const api = await window.polkadotApiPromise;

 		// Reset all output from previous queries
 		output.textContent = "";
 		document.getElementById('balance').textContent = '0';

 		// If there is no address input, we exit early.
 		if (!address) {
 			output.textContent = "Please enter a valid address.";
 			return
 		}

 		try {
 			const { data: { free: balance } } = await api.query.system.account(address);
 			// DOT uses 10 decimal places.
 			const balanceFormatted = balance / Math.pow(10, 10);
 			// Reduce to just 4 decimal places.
 			document.getElementById('balance').textContent = balanceFormatted.toFixed(4);
 		} catch (error) {
 			document.getElementById('balance').textContent = 'Error';
 			console.error("Error fetching balance:", error);
 			output.textContent = "Error fetching balance. See console (F12)";
 		}
 	}
 </script>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Polkadot Balance Fetcher</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	}

	h1 {
	color: #333;
	}

	#balance {
	font-weight: bold;
	font-size: 1.5em;
	}
	</style>
	</head>

	<body>
	<h1>Polkadot Balance Fetcher</h1>

	<label for="address">Enter Polkadot Address:</label>
	<input type="text" id="address" placeholder="Enter address here..." />

	<button onclick="getBalance()">Get Balance</button>

	<p>Balance: <span id="balance">0</span> DOT</p>

	<p id="output"></p>
	</body>

	<!-- These are pre-packaged polkadot JS bundles so you can use them in a simple html page -->
	<script src="//unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script>
	<script src="//unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
	<script src="//unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script>
	<script src="//unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script>
	<script src="//unpkg.com/@polkadot/keyring/bundle-polkadot-keyring.js"></script>

	<!-- Here we connect to a Polkadot SDK blockchain when the page loads. -->
	<script>
	// Initialize the Polkadot.js API connection
	const initializeApi = async () => {
	const { ApiPromise, WsProvider } = polkadotApi;
	// Adjust the RPC endpoint here.
	const wsProvider = new WsProvider('wss://rpc.polkadot.io');
	const api = await ApiPromise.create({ provider: wsProvider });
	// We store the API into a global variable so we can access it from other functions.
	window.polkadotApiPromise = api;
	};

	// We initialize the API when the page loads.
	initializeApi();
	</script>

	<!-- Your logic goes here -->
	<script>
	async function getBalance() {
	const output = document.getElementById('output');
	const address = document.getElementById('address').value;
	const api = await window.polkadotApiPromise;

	// Reset all output from previous queries
	output.textContent = "";
	document.getElementById('balance').textContent = '0';

	// If there is no address input, we exit early.
	if (!address) {
	output.textContent = "Please enter a valid address.";
	return
	}

	try {
	const { data: { free: balance } } = await api.query.system.account(address);
	// DOT uses 10 decimal places.
	const balanceFormatted = balance / Math.pow(10, 10);
	// Reduce to just 4 decimal places.
	document.getElementById('balance').textContent = balanceFormatted.toFixed(4);
	} catch (error) {
	document.getElementById('balance').textContent = 'Error';
	console.error("Error fetching balance:", error);
	output.textContent = "Error fetching balance. See console (F12)";
	}
	}
	</script>

	</html>