mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 20:25:51 +00:00
80 lines
3.1 KiB
HTML
80 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>XRPL.js Base Example</title>
|
|
<!-- @chunk {"steps": ["import-web-tag"]} -->
|
|
<script src="https://unpkg.com/xrpl/build/xrpl-latest-min.js"></script>
|
|
<!-- @chunk-end -->
|
|
</head>
|
|
<body>
|
|
<h1>XRPL.js Get Started</h1>
|
|
<div id="output"></div>
|
|
|
|
<script>
|
|
(async () => {
|
|
const output = document.getElementById('output');
|
|
|
|
// @chunk {"steps": ["connect-tag"]}
|
|
// Define the network client
|
|
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
|
|
const client = new xrpl.Client(SERVER_URL)
|
|
await client.connect()
|
|
output.innerHTML = '<p>Connected to Testnet</p>';
|
|
// @chunk-end
|
|
|
|
// @chunk {"steps": ["get-account-create-wallet-tag"]}
|
|
// Create a wallet and fund it with the Testnet faucet:
|
|
output.innerHTML += '<p>Creating a new wallet and funding it with Testnet XRP...</p>';
|
|
const fund_result = await client.fundWallet()
|
|
const test_wallet = fund_result.wallet
|
|
output.innerHTML += `<p>Wallet: ${test_wallet.address}</p>`;
|
|
output.innerHTML += `<p>Balance: ${fund_result.balance}</p>`;
|
|
output.innerHTML += `<p>View account on XRPL Testnet Explorer: <a href="https://testnet.xrpl.org/accounts/${test_wallet.address}" target="_blank">${test_wallet.address}</a></p>`;
|
|
// @chunk-end
|
|
|
|
// To generate a wallet without funding it, uncomment the code below
|
|
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
|
|
// const test_wallet = xrpl.Wallet.generate()
|
|
// @chunk-end
|
|
|
|
// To provide your own seed, replace the test_wallet value with the below
|
|
// @chunk {"steps": ["get-account-create-wallet-c-tag"]}
|
|
// const test_wallet = xrpl.Wallet.fromSeed("your-seed-key")
|
|
// @chunk-end
|
|
|
|
// @chunk {"steps": ["query-xrpl-tag"]}
|
|
// Get info from the ledger about the address we just funded
|
|
output.innerHTML += `<p>Getting account info...</p>`;
|
|
const response = await client.request({
|
|
"command": "account_info",
|
|
"account": test_wallet.address,
|
|
"ledger_index": "validated"
|
|
})
|
|
output.innerHTML += `<pre>${JSON.stringify(response, null, 2)}</pre>`;
|
|
// @chunk-end
|
|
|
|
// @chunk {"steps": ["listen-for-events-tag"]}
|
|
// Listen to ledger close events
|
|
output.innerHTML += '<p>Listening for ledger close events...</p>';
|
|
client.request({
|
|
"command": "subscribe",
|
|
"streams": ["ledger"]
|
|
})
|
|
client.on("ledgerClosed", async (ledger) => {
|
|
output.innerHTML += `<p>Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions</p>`;
|
|
})
|
|
// @chunk-end
|
|
|
|
// @chunk {"steps": ["disconnect-web-tag"]}
|
|
// Disconnect when done. Delay this by 10 seconds to give the ledger event listener time to
|
|
// receive and display some ledger events.
|
|
setTimeout(async () => {
|
|
await client.disconnect();
|
|
output.innerHTML += '<p>Disconnected</p>';
|
|
}, 10000);
|
|
// @chunk-end
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|