Created
September 11, 2024 20:19
-
-
Save shawntabrizi/2646f7d85fe585f1535b53c834e1b56e to your computer and use it in GitHub Desktop.
Polkadot SDK Balance
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment