mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-02-13 10:22:25 +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>
|