ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-04 11:55:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3234 from XRPLF/stepped-tutorial-demo

Browse Source 
Javascript Get Started with code walkthrough
This commit is contained in:
Maria Shodunke
2025-09-09 10:23:04 +01:00
committed by GitHub
parent ba2859ee84 8ae346849a
commit ba9eeb508d
12 changed files with 803 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
_code-samples/get-started/js/README.md Normal file
View File

@@ -0,0 +1,135 @@
# Get Started Using JavaScript Library
Connects to the XRP Ledger, gets account information, and subscribes to ledger events using JavaScript.
To download the source code, see [Get Started Using JavaScript Library](http://xrpl.org/docs/tutorials/javascript/build-apps/get-started).
## Run the Code
**Node.js**
Quick setup and usage:
```sh
npm install
node ./get-acct-info.js
```
You should see output similar to the following:
```sh
Connected to Testnet
Creating a new wallet and funding it with Testnet XRP...
Wallet: rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
Balance: 10
Account Testnet Explorer URL:
https://testnet.xrpl.org/accounts/rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
Getting account info...
{
"api_version": 2,
"id": 4,
"result": {
"account_data": {
"Account": "rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i",
"Balance": "10000000",
"Flags": 0,
"LedgerEntryType": "AccountRoot",
"OwnerCount": 0,
"PreviousTxnID": "0FF9DB2FE141DD0DF82566A171B6AF70BB2C6EB6A53D496E65D42FC062C91A78",
"PreviousTxnLgrSeq": 9949268,
"Sequence": 9949268,
"index": "4A9C9220AE778DC38C004B2B17A08E218416D90E01456AFCF844C18838B36D01"
},
"account_flags": {
"allowTrustLineClawback": false,
"defaultRipple": false,
"depositAuth": false,
"disableMasterKey": false,
"disallowIncomingCheck": false,
"disallowIncomingNFTokenOffer": false,
"disallowIncomingPayChan": false,
"disallowIncomingTrustline": false,
"disallowIncomingXRP": false,
"globalFreeze": false,
"noFreeze": false,
"passwordSpent": false,
"requireAuthorization": false,
"requireDestinationTag": false
},
"ledger_hash": "304C7CC2A33B712BE43EB398B399E290C191A71FCB71784F584544DFB7C441B0",
"ledger_index": 9949268,
"validated": true
},
"type": "response"
}
Listening for ledger close events...
Ledger #9949269 validated with 0 transactions!
Ledger #9949270 validated with 0 transactions!
Ledger #9949271 validated with 0 transactions!
Disconnected
```
**Web**
To run the web example, open `index.html` in a web browser and wait for the results to appear on the page.
You should see output similar to the following:
```text
Connected to Testnet
Creating a new wallet and funding it with Testnet XRP...
Wallet: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
Balance: 10
View account on XRPL Testnet Explorer: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
Getting account info...
{
"api_version": 2,
"id": 5,
"result": {
"account_data": {
"Account": "rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S",
"Balance": "10000000",
"Flags": 0,
"LedgerEntryType": "AccountRoot",
"OwnerCount": 0,
"PreviousTxnID": "96E4B44F93EC0399B7ADD75489630C6A8DCFC922F20F6810D25490CC0D3AA12E",
"PreviousTxnLgrSeq": 9949610,
"Sequence": 9949610,
"index": "B5D2865DD4BF8EEDFEE2FD95DE37FC28D624548E9BBC42F9FBF61B618E98FAC8"
},
"account_flags": {
"allowTrustLineClawback": false,
"defaultRipple": false,
"depositAuth": false,
"disableMasterKey": false,
"disallowIncomingCheck": false,
"disallowIncomingNFTokenOffer": false,
"disallowIncomingPayChan": false,
"disallowIncomingTrustline": false,
"disallowIncomingXRP": false,
"globalFreeze": false,
"noFreeze": false,
"passwordSpent": false,
"requireAuthorization": false,
"requireDestinationTag": false
},
"ledger_hash": "7692673B8091899C3EEE6807F66B65851D3563F483A49A5F03A83608658473D6",
"ledger_index": 9949610,
"validated": true
},
"type": "response"
}
Listening for ledger close events...
Ledger #9949611 validated with 0 transactions
Ledger #9949612 validated with 1 transactions
Ledger #9949613 validated with 0 transactions
Disconnected
```

22
_code-samples/get-started/js/base.js
View File

@@ -1,17 +1,11 @@
// In browsers, use a <script> tag. In Node.js, uncomment the following line:
// const xrpl = require('xrpl')
// You can also use a <script> tag in browsers or require('xrpl') in Node.js
import xrpl from 'xrpl'
// Wrap code in an async function so we can use await
async function main() {
// Define the network client
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
await client.connect()
// Define the network client
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
await client.connect()
// ... custom code goes here
// ... custom code goes here
// Disconnect when done (If you omit this, Node.js won't end the process)
await client.disconnect()
}
main()
// Disconnect when done (If you omit this, Node.js won't end the process)
client.disconnect()

88
_code-samples/get-started/js/get-acct-info.js
View File

@@ -1,39 +1,65 @@
// Import the library
const xrpl = require("xrpl")
// @chunk {"steps": ["connect-tag"]}
import xrpl from "xrpl"
// Wrap code in an async function so we can use await
async function main() {
// Define the network client
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
const client = new xrpl.Client(SERVER_URL)
await client.connect()
console.log("Connected to Testnet")
// @chunk-end
// Define the network client
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
const client = new xrpl.Client(SERVER_URL)
await client.connect()
// @chunk {"steps": ["get-account-create-wallet-tag"]}
// Create a wallet and fund it with the Testnet faucet:
console.log("\nCreating a new wallet and funding it with Testnet XRP...")
const fund_result = await client.fundWallet()
const test_wallet = fund_result.wallet
console.log(`Wallet: ${test_wallet.address}`)
console.log(`Balance: ${fund_result.balance}`)
console.log('Account Testnet Explorer URL:')
console.log(` https://testnet.xrpl.org/accounts/${test_wallet.address}`)
// @chunk-end
// Create a wallet and fund it with the Testnet faucet:
const fund_result = await client.fundWallet()
const test_wallet = fund_result.wallet
console.log(fund_result)
// 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
// Get info from the ledger about the address we just funded
const response = await client.request({
"command": "account_info",
"account": test_wallet.address,
"ledger_index": "validated"
})
console.log(response)
// 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
// Listen to ledger close events
client.request({
"command": "subscribe",
"streams": ["ledger"]
})
client.on("ledgerClosed", async (ledger) => {
console.log(`Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions!`)
})
// @chunk {"steps": ["query-xrpl-tag"]}
// Get info from the ledger about the address we just funded
console.log("\nGetting account info...")
const response = await client.request({
"command": "account_info",
"account": test_wallet.address,
"ledger_index": "validated"
})
console.log(JSON.stringify(response, null, 2))
// @chunk-end
// Disconnect when done so Node.js can end the process
await client.disconnect()
}
// @chunk {"steps": ["listen-for-events-tag"]}
// Listen to ledger close events
console.log("\nListening for ledger close events...")
client.request({
"command": "subscribe",
"streams": ["ledger"]
})
client.on("ledgerClosed", async (ledger) => {
console.log(`Ledger #${ledger.ledger_index} validated ` +
`with ${ledger.txn_count} transactions!`)
})
// @chunk-end
// call the async function
main()
// @chunk {"steps": ["disconnect-node-tag"]}
// Disconnect when done so Node.js can end the process.
// Delay this by 10 seconds to give the ledger event listener time to receive
// and display some ledger events.
setTimeout(async () => {
await client.disconnect();
console.log('\nDisconnected');
}, 10000);
// @chunk-end

79
_code-samples/get-started/js/index.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>

5
_code-samples/get-started/js/package.json
View File

@@ -1,5 +1,6 @@
{
"dependencies": {
"xrpl": "^4.0.0"
}
"xrpl": "^4.4.0"
},
"type": "module"
}