Update ripple-lib samples to 1.10.0

- Removes lodash dependecy for web version - Uses the new generateFaucetWallet() API method - Make 'issue a token' code capable of running in-browser or in Node.js without modification
2025-11-20 11:45:50 +00:00 · 2021-08-24 14:38:07 -07:00
parent cff0fcc716
commit d6e06ae140
18 changed files with 52 additions and 89 deletions
--- a/content/_code-samples/issue-a-token/js/README.md
+++ b/content/_code-samples/issue-a-token/js/README.md
@@ -2,6 +2,6 @@

 This code demonstrates how to issue a (fungible) token on the XRP Ledger. For a detailed explanation, see <https://xrpl.org/issue-a-fungible-token.html>.

-The code is designed to run in-browser by loading `demo.html` and watching the console output. To run it in Node.js, you must uncomment three `require()` lines towards the top of `issue-a-token.js` and use your preferred package manager (such as `yarn` or `npm`) to install the dependencies.
+The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).

 In both cases you also need [the `submit-and-verify.js` code from another folder of this repository](../submit-and-verify/). It should already be in the right place if you cloned or download an archive of the repo.
--- a/content/_code-samples/issue-a-token/js/demo.html
+++ b/content/_code-samples/issue-a-token/js/demo.html
@@ -3,9 +3,8 @@
 <head>
 <meta charset="utf-8" />
 <title>Code Sample - Issue a Token</title>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/ripple-lib@1.9.8/build/ripple-latest-min.js"></script>
-<script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
+<script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
+<script type="application/javascript" src="../../submit-and-verify/submit-and-verify.js"></script>
 <script type="application/javascript" src="issue-a-token.js"></script>
 </head>
 <body>Open your browser's console (F12) to see the logs.</body>
--- a/content/_code-samples/issue-a-token/js/issue-a-token.js
+++ b/content/_code-samples/issue-a-token/js/issue-a-token.js
@@ -1,11 +1,13 @@
 // Stand-alone code sample for the "issue a token" tutorial:
 // https://xrpl.org/issue-a-fungible-token.html

-// Uncomment these dependencies for Node.js. In browsers, use <script> tags as
-// in the example demo.html.
-// const ripple = require('ripple-lib')
-// const fetch = require('node-fetch')
-// const submit_and_verify = require('../submit-and-verify/submit-and-verify.js').submit_and_verify
+// Dependencies for Node.js.
+// In browsers, use <script> tags as in the example demo.html.
+if (typeof module !== "undefined") {
+  // gotta use var here because const/let are block-scoped to the if statement.
+  var ripple = require('ripple-lib')
+  var submit_and_verify = require('../../submit-and-verify/submit-and-verify.js').submit_and_verify
+}

 // Connect ---------------------------------------------------------------------
 async function main() {
@@ -14,32 +16,13 @@ async function main() {
  await api.connect()

  // Get credentials from the Testnet Faucet -----------------------------------
-  // This doesn't technically need to happen after you call api.connect() but
-  // it's convenient to do here.
-  async function get_faucet_address() {
-    const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
-    const faucet_options = {
-      method: 'POST',
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: '{}'
-    }
-    const response = await fetch(faucet_url, faucet_options)
-    if (!response.ok) {
-      throw `Faucet returned an error: ${data.error}`
-    }
-    const data = await response.json()
-    return data
-  }
-
  console.log("Requesting addresses from the Testnet faucet...")
-  const hot_data = await get_faucet_address()
-  const hot_address = hot_data.account.address
+  const hot_data = await api.generateFaucetWallet()
+  const hot_address = hot_data.account.classicAddress
  const hot_secret = hot_data.account.secret

-  const cold_data = await get_faucet_address()
-  const cold_address = cold_data.account.address
+  const cold_data = await api.generateFaucetWallet()
+  const cold_address = cold_data.account.classicAddress
  const cold_secret = cold_data.account.secret

  console.log("Waiting until we have a validated starting sequence number...")
--- a/content/_code-samples/issue-a-token/js/package.json
+++ b/content/_code-samples/issue-a-token/js/package.json
@@ -1,6 +1,5 @@
 {
  "dependencies": {
-    "node-fetch": "^2.6.1",
-    "ripple-lib": "^1.9.8"
+    "ripple-lib": "^1.10.0"
  }
 }
--- a/content/_code-samples/issue-a-token/js/yarn.lock
+++ b/content/_code-samples/issue-a-token/js/yarn.lock
@@ -494,10 +494,10 @@ ripple-lib-transactionparser@0.8.2:
    bignumber.js "^9.0.0"
    lodash "^4.17.15"

-ripple-lib@^1.9.8:
-  version "1.9.8"
-  resolved "https://registry.yarnpkg.com/ripple-lib/-/ripple-lib-1.9.8.tgz#ff70ec13512531f63f25a560f3683e3a66afc671"
-  integrity sha512-86wAP4GD6ZVMHIZeqrzn9m8BZSWSpMr06ULaAKNZbN6mxvh7SwcabJjcINRZNpI73Sb3oibWoOsCQ+Vf64WSTA==
+ripple-lib@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/ripple-lib/-/ripple-lib-1.10.0.tgz#e41aaf17d5c6e6f8bcc8116736ac108ff3d6b810"
+  integrity sha512-Cg2u73UybfM1PnzcuLt5flvLKZn35ovdIp+1eLrReVB4swuRuUF/SskJG9hf5wMosbvh+E+jZu8A6IbYJoyFIA==
  dependencies:
    "@types/lodash" "^4.14.136"
    "@types/ws" "^7.2.0"
--- a/content/_code-samples/require-destination-tags/README.md
+++ b/content/_code-samples/require-destination-tags/README.md
@@ -0,0 +1,5 @@
+# Require Destination Tags Sample Code
+
+This code demonstrates how to configure your XRP Ledger account to require destination tags. For a detailed explanation, see <https://xrpl.org/require-destination-tags.html>.
+
+The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).
--- a/content/_code-samples/require-destination-tags/demo.html
+++ b/content/_code-samples/require-destination-tags/demo.html
@@ -2,8 +2,7 @@
 <html>
 <head>
 <meta charset="utf-8" />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
+<script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
 <script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
 <script type="application/javascript" src="require-destination-tags.js"></script>
 </head>
--- a/content/_code-samples/require-destination-tags/package.json
+++ b/content/_code-samples/require-destination-tags/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "ripple-lib": "^1.10.0"
+  }
+}
--- a/content/_code-samples/require-destination-tags/require-destination-tags.js
+++ b/content/_code-samples/require-destination-tags/require-destination-tags.js
@@ -1,24 +1,20 @@
+// Stand-alone code sample for the "Require Destination Tags" tutorial:
+// https://xrpl.org/require-destination-tags.html
+
+// Dependencies for Node.js.
+// In browsers, use <script> tags as in the example demo.html.
+if (typeof module !== "undefined") {
+  // gotta use var here because const/let are block-scoped to the if statement.
+  var ripple = require('ripple-lib')
+}
+
 // Connect -------------------------------------------------------------------
 api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'})
 api.connect()
 api.on('connected', async () => {

  // Get credentials from the Testnet Faucet -----------------------------------
-  // This doesn't technically need to happen after you call api.connect() but
-  // it's convenient to do here because we can use await on the faucet call and
-  // to wait for the new account to be funded.
-  const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
-  const response = await fetch(faucet_url, {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: '{}'
-  })
-  if (!response.ok) {
-    throw `Faucet returned an error: ${data.error}`
-  }
-  const data = await response.json()
+  const data = await api.generateFaucetWallet()
  const address = data.account.address
  const secret = data.account.secret

--- a/content/_code-samples/send-xrp/demo.html
+++ b/content/_code-samples/send-xrp/demo.html
@@ -3,8 +3,7 @@
 <head>
 <meta charset="utf-8" />
 <title>Code Sample - Send XRP</title>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
+<script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
 <script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
 <script type="application/javascript" src="send-xrp.js"></script>
 </head>
--- a/content/_code-samples/send-xrp/send-xrp.js
+++ b/content/_code-samples/send-xrp/send-xrp.js
@@ -9,21 +9,7 @@ api.connect()
 api.on('connected', async () => {

  // Get credentials from the Testnet Faucet -----------------------------------
-  // This doesn't technically need to happen after you call api.connect() but
-  // it's convenient to do here because we can use await on the faucet call and
-  // to wait for the new account to be funded.
-  const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
-  const response = await fetch(faucet_url, {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: '{}'
-  })
-  if (!response.ok) {
-    throw `Faucet returned an error: ${data.error}`
-  }
-  const data = await response.json()
+  const data = await api.generateFaucetWallet()
  address = data.account.address
  secret = data.account.secret

--- a/content/tutorials/get-started/get-started-using-node-js.md
+++ b/content/tutorials/get-started/get-started-using-node-js.md
@@ -256,22 +256,20 @@ See [Reliable Transaction Submission](reliable-transaction-submission.html) for

 # RippleAPI in Web Browsers

-RippleAPI can also be used in a web browser. To access it, load [Lodash](https://lodash.com/) and [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in your site's HTML. For example:
+RippleAPI can also be used in a web browser. To access it, load [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in your site's HTML. For example:

 <!-- MULTICODE_BLOCK_START -->

 _unpkg_

 ```html
-<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
-<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
+<script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
 ```

 _jsDelivr_

 ```html
-<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
 ```

 <!-- MULTICODE_BLOCK_END -->
--- a/content/tutorials/get-started/get-started.md
+++ b/content/tutorials/get-started/get-started.md
@@ -16,7 +16,6 @@ The following example gets the latest [ledger version](ledgers.html) and a list
 **Tip:** If you can, open your browser's Developer Tools by pressing **F12**. The "Console" tab provides a native JavaScript console and can give insight into what code is running on any webpage. <!-- SPELLING_IGNORE: f12 -->

 <!-- ripple-lib & prerequisites -->
-{{currentpage.lodash_tag}}
 {{currentpage.ripple_lib_tag}}

 <!-- JS_EDITOR_START step2 -->
@@ -101,14 +100,12 @@ Try editing the code above to do something different:

 ## Setup Steps

-This page has the necessary prerequisites already loaded, but you can access the XRP Ledger from **any webpage** if you load [Lodash](https://lodash.com/) and [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in that page's HTML. For example:
+This page has the necessary prerequisites already loaded, but you can access the XRP Ledger from **any webpage** if you load [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in that page's HTML. For example:

 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
-<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
+<script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
 ```

-<!-- SPELLING_IGNORE: lodash -->

 ## Further Reading

--- a/content/tutorials/get-started/monitor-incoming-payments-with-websocket.ja.md
+++ b/content/tutorials/get-started/monitor-incoming-payments-with-websocket.ja.md
@@ -76,7 +76,7 @@ const socket = new WebSocket('ws://localhost:6006')
 例:

 {{ start_step("Connect") }}
-<button id="connect-button" class="btn btn-primary">Connect</button>
+<button id="connect-socket-button" class="btn btn-primary">Connect</button>
 <strong>Connection status:</strong>
 <span id="connection-status">Not connected</span>
 <h5>Console:</h5>
@@ -85,7 +85,7 @@ const socket = new WebSocket('ws://localhost:6006')

 <script type="application/javascript">
 let socket;
-$("#connect-button").click((event) => {
+$("#connect-socket-button").click((event) => {
  socket = new WebSocket('wss://s.altnet.rippletest.net:51233')
  socket.addEventListener('open', (event) => {
    // This callback runs when the connection is open
--- a/content/tutorials/get-started/monitor-incoming-payments-with-websocket.md
+++ b/content/tutorials/get-started/monitor-incoming-payments-with-websocket.md
@@ -74,7 +74,7 @@ const socket = new WebSocket('ws://localhost:6006')
 Example:

 {{ start_step("Connect") }}
-<button id="connect-button" class="btn btn-primary">Connect</button>
+<button id="connect-socket-button" class="btn btn-primary">Connect</button>
 <strong>Connection status:</strong>
 <span id="connection-status">Not connected</span>
 <h5>Console:</h5>
@@ -83,7 +83,7 @@ Example:

 <script type="application/javascript">
 let socket;
-$("#connect-button").click((event) => {
+$("#connect-socket-button").click((event) => {
  socket = new WebSocket('wss://s.altnet.rippletest.net:51233')
  socket.addEventListener('open', (event) => {
    // This callback runs when the connection is open