Created
September 5, 2022 14:07
-
-
Save wesleymoliveira/8e865ec77a6c69eda5ad998ae49ee417 to your computer and use it in GitHub Desktop.
basic html + Polkadot-JS API to interact with the blockchain
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Quick start: Get Balance</title> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> | |
| <style> | |
| body { | |
| margin: 60px; | |
| } | |
| .container { | |
| width: auto; | |
| max-width: 680px; | |
| padding: 20px 15px; | |
| } | |
| .output { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main role="main" class="container"> | |
| <h1 style="font-family: sans-serif; font-weight: 500;">Display an account balance</h1> | |
| <p style="font-family: sans-serif;">Enter a development account address, then click <b>Get Balance</b>.</p> | |
| <input type="text" size="58" id="account_address"/> | |
| <input type="button" onclick="GetBalance()" value="Get Balance"> | |
| <p class="output">Balance: <span id="polkadot-balance">Not Connected</span></p> | |
| </main> | |
| <script src="https://unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script> | |
| <script src="https://unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script> | |
| <script src="https://unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script> | |
| <script src="https://unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script> | |
| <script> | |
| async function GetBalance() { | |
| const ADDR = '5Gb6Zfe8K8NSKrkFLCgqs8LUdk7wKweXM5pN296jVqDpdziR'; | |
| const { WsProvider, ApiPromise } = polkadotApi; | |
| const wsProvider = new WsProvider('ws://127.0.0.1:9944'); | |
| const polkadot = await ApiPromise.create({ provider: wsProvider }); | |
| let polkadotBalance = document.getElementById("polkadot-balance"); | |
| const x = document.getElementById("account_address").value; | |
| const { data: balance } = await polkadot.query.system.account(x); | |
| polkadotBalance.innerText = balance.free; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment