Javascript Get Started with code walkthrough

_code-samples/get-started/js/README.md

@@ -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
+```

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

@@ -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()

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

@@ -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

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

@@ -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>

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

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