The HTML file below shows how to import minimal-slp-wallet into a web page and query the balance of a BCH address from the blockchain. This is a simple example for interacting with the BCH blockchain with a web page.
A live demo of this app has been uploaded to Filecoin, and can be accessed here:
| <!DOCTYPE html> | |
| <!-- | |
| This HTML page checks the balance of a BCH address. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Check BCH Balance</title> | |
| <link rel="icon favicon" href="favicon.ico" /> | |
| </head> | |
| <body> | |
| <h1>Check BCH address balance</h1> | |
| <p> | |
| This page checks the balance of a BCH address. | |
| </p> | |
| <p> | |
| The address bitcoincash:qppngav5s88devt4ypv3vhgj643q06tctcx8fnzewp has a | |
| balance of this many sats: | |
| </p> | |
| <p id="bchStatus"></p> | |
| <p></p> | |
| </body> | |
| <script src="https://unpkg.com/minimal-slp-wallet"></script> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", async () => { | |
| try { | |
| console.log("hello world"); | |
| const wallet = new SlpWallet(undefined, { | |
| noUpdate: true, | |
| interface: "consumer-api" | |
| }); | |
| const bchAddr = | |
| "bitcoincash:qppngav5s88devt4ypv3vhgj643q06tctcx8fnzewp"; | |
| const balance = await wallet.getBalance(bchAddr); | |
| console.log(`balance: `, balance); | |
| // Update DOM. | |
| const balanceText = document.getElementById("bchStatus"); | |
| balanceText.innerHTML = `${balance}`; | |
| } catch (err) { | |
| console.error("Error in web app: ", err); | |
| } | |
| }); | |
| </script> | |
| </html> |