Skip to content

Commit f84f5bb

Browse files
maria-robobugmaria-robobug
committed
Add improvements to walkthrough
1 parent 63fc110 commit f84f5bb

File tree

6 files changed

+193
-156
lines changed

6 files changed

+193
-156
lines changed

‎_code-samples/get-started/js/base.html

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎_code-samples/get-started/js/base.js

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
// In browsers, use a <script> tag. In Node.js, uncomment the following line:
2-
const xrpl = require('xrpl')
2+
import xrpl from 'xrpl'
33

4-
// Wrap code in an async function so we can use await
5-
async function main() {
4+
// Define the network client
5+
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
6+
await client.connect()
67

7-
// Define the network client
8-
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
9-
await client.connect()
8+
// ... custom code goes here
109

11-
// ... custom code goes here
12-
13-
// Disconnect when done (If you omit this, Node.js won't end the process)
14-
await client.disconnect()
15-
}
16-
17-
main()
10+
// Disconnect when done (If you omit this, Node.js won't end the process)
11+
client.disconnect()

‎_code-samples/get-started/js/get-acct-info.js

Lines changed: 44 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,52 @@
11
// Import the library
2-
// @chunk {"steps": ["import-node-tag"]}
3-
const xrpl = require("xrpl")
4-
// @chunk-end
5-
6-
// Wrap code in an async function so we can use await
7-
async function main() {
8-
9-
// @chunk {"steps": ["connect-tag"]}
10-
// Define the network client
11-
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
12-
const client = new xrpl.Client(SERVER_URL)
13-
await client.connect()
14-
// @chunk-end
2+
// @chunk {"steps": ["connect-tag"]}
3+
import xrpl from "xrpl"
154

16-
// @chunk {"steps": ["get-account-create-wallet-tag"]}
17-
// Create a wallet and fund it with the Testnet faucet:
18-
const fund_result = await client.fundWallet()
19-
const test_wallet = fund_result.wallet
20-
console.log(fund_result)
21-
// @chunk-end
5+
// Define the network client
6+
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
7+
const client = new xrpl.Client(SERVER_URL)
8+
await client.connect()
9+
// @chunk-end
2210

23-
// To generate keys only, uncomment the code below
24-
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
25-
// const test_wallet = xrpl.Wallet.generate()
26-
// @chunk-end
11+
// @chunk {"steps": ["get-account-create-wallet-tag"]}
12+
// Create a wallet and fund it with the Testnet faucet:
13+
const fund_result = await client.fundWallet()
14+
const test_wallet = fund_result.wallet
15+
console.log(fund_result)
16+
// @chunk-end
2717

28-
// To provide your own seed, replace the test_wallet value with the below
29-
// @chunk {"steps": ["get-account-create-wallet-c-tag"], "inputs": ["wallet-input"]}
30-
// const test_wallet = xrpl.Wallet.fromSeed({{wallet-input}})
31-
// @chunk-end
18+
// To generate keys only, uncomment the code below
19+
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
20+
// const test_wallet = xrpl.Wallet.generate()
21+
// @chunk-end
3222

33-
// @chunk {"steps": ["query-xrpl-tag"]}
34-
// Get info from the ledger about the address we just funded
35-
const response = await client.request({
36-
"command": "account_info",
37-
"account": test_wallet.address,
38-
"ledger_index": "validated"
39-
})
40-
console.log(response)
41-
// @chunk-end
23+
// To provide your own seed, replace the test_wallet value with the below
24+
// @chunk {"steps": ["get-account-create-wallet-c-tag"]}
25+
// const test_wallet = xrpl.Wallet.fromSeed("your-seed-key")
26+
// @chunk-end
4227

43-
// @chunk {"steps": ["listen-for-events-tag"]}
44-
// Listen to ledger close events
45-
client.request({
46-
"command": "subscribe",
47-
"streams": ["ledger"]
48-
})
49-
client.on("ledgerClosed", async (ledger) => {
50-
console.log(`Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions!`)
51-
})
52-
// @chunk-end
28+
// @chunk {"steps": ["query-xrpl-tag"]}
29+
// Get info from the ledger about the address we just funded
30+
const response = await client.request({
31+
"command": "account_info",
32+
"account": test_wallet.address,
33+
"ledger_index": "validated"
34+
})
35+
console.log(response)
36+
// @chunk-end
5337

54-
// @chunk {"steps": ["disconnect-tag"]}
55-
// Disconnect when done so Node.js can end the process
56-
await client.disconnect()
57-
// @chunk-end
58-
}
38+
// @chunk {"steps": ["listen-for-events-tag"]}
39+
// Listen to ledger close events
40+
client.request({
41+
"command": "subscribe",
42+
"streams": ["ledger"]
43+
})
44+
client.on("ledgerClosed", async (ledger) => {
45+
console.log(`Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions!`)
46+
})
47+
// @chunk-end
5948

60-
// call the async function
61-
main()
49+
// @chunk {"steps": ["disconnect-node-tag"]}
50+
// Disconnect when done so Node.js can end the process
51+
await client.disconnect()
52+
// @chunk-end

‎_code-samples/get-started/js/index.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>XRPL.js Base Example</title>
5+
<!-- @chunk {"steps": ["import-web-tag"]} -->
6+
<script src="https://unpkg.com/xrpl/build/xrpl-latest-min.js"></script>
7+
<!-- @chunk-end -->
8+
</head>
9+
<body>
10+
<h1>XRPL.js Get Started</h1>
11+
<div id="output"></div>
12+
13+
<script>
14+
(async () => {
15+
const output = document.getElementById('output');
16+
17+
// @chunk {"steps": ["connect-tag"]}
18+
// Define the network client
19+
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
20+
const client = new xrpl.Client(SERVER_URL)
21+
await client.connect()
22+
output.innerHTML = '<p>Connected to Testnet</p>';
23+
// @chunk-end
24+
25+
// @chunk {"steps": ["get-account-create-wallet-tag"]}
26+
// Create a wallet and fund it with the Testnet faucet:
27+
output.innerHTML += '<p>Funding Wallet...</p>';
28+
const fund_result = await client.fundWallet()
29+
const test_wallet = fund_result.wallet
30+
output.innerHTML += `<p>Wallet: ${test_wallet.address}</p>`;
31+
output.innerHTML += `<p>Balance: ${fund_result.balance}</p>`;
32+
// @chunk-end
33+
34+
// To generate keys only, uncomment the code below
35+
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
36+
// const test_wallet = xrpl.Wallet.generate()
37+
// @chunk-end
38+
39+
// To provide your own seed, replace the test_wallet value with the below
40+
// @chunk {"steps": ["get-account-create-wallet-c-tag"]}
41+
// const test_wallet = xrpl.Wallet.fromSeed("your-seed-key")
42+
// @chunk-end
43+
44+
// @chunk {"steps": ["query-xrpl-tag"]}
45+
// Get info from the ledger about the address we just funded
46+
const response = await client.request({
47+
"command": "account_info",
48+
"account": test_wallet.address,
49+
"ledger_index": "validated"
50+
})
51+
output.innerHTML += `<p>Account info: ${response.result.account_data}</p>`;
52+
// @chunk-end
53+
54+
// @chunk {"steps": ["listen-for-events-tag"]}
55+
// Listen to ledger close events
56+
client.request({
57+
"command": "subscribe",
58+
"streams": ["ledger"]
59+
})
60+
client.on("ledgerClosed", async (ledger) => {
61+
output.innerHTML += `<p>Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions</p>`;
62+
})
63+
// @chunk-end
64+
65+
// @chunk {"steps": ["disconnect-web-tag"]}
66+
// Disconnect when done. Delay this by 10 seconds to give the ledger event listener time to
67+
// receive and display some ledger events.
68+
setTimeout(async () => {
69+
await client.disconnect();
70+
output.innerHTML += '<p>Disconnected</p>';
71+
}, 10000);
72+
// @chunk-end
73+
})();
74+
</script>
75+
</body>
76+
</html>

‎_code-samples/get-started/js/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"dependencies": {
3-
"xrpl": "^4.0.0"
4-
}
3+
"xrpl": "^4.4.0"
4+
},
5+
"type": "module"
56
}

0 commit comments

Comments
 (0)