Merge pull request #3329 from XRPLF/update_desktop_wallet_js_tutorial

mDuo13 · web-flow · commit b08d7f085f04 · 2025-10-08T12:11:57.000-07:00
Update Desktop Wallet (JS) tutorial
diff --git a/_code-samples/build-a-desktop-wallet/js/0-hello/index.js b/_code-samples/build-a-desktop-wallet/js/0-hello/index.js
@@ -3,20 +3,19 @@ const { app, BrowserWindow } = require('electron')
 const path = require('path')
 
 /**
- * This is our main function, it creates our application window, preloads the code we will need to communicate
- * between the renderer Process and the main Process, loads a layout and performs the main logic
+ * Main function: create application window, preload the code to communicate
+ * between the renderer Process and the main Process, load a layout,
+ * and perform the main logic.
  */
 const createWindow = () => {
-
-    // Creates the application window
+    // Create the application window
     const appWindow = new BrowserWindow({
         width: 1024,
         height: 768
     })
 
-    // Loads a layout
+    // Load a layout
     appWindow.loadFile(path.join(__dirname, 'view', 'template.html'))
-
     return appWindow
 }
 
diff --git a/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js b/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js
@@ -1,40 +1,37 @@
 const { app, BrowserWindow } = require('electron')
 
 const path = require('path')
-const xrpl = require("xrpl")
+// Ledger index code additions - start
+const xrpl = require('xrpl')
 
-const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
+const TESTNET_URL = 'wss://s.altnet.rippletest.net:51233'
 
 /**
- * This function creates a WebService client, which connects to the XRPL and fetches the latest ledger index.
+ * Create a WebSocket client, connect to the XRPL, and fetch the latest ledger index.
  *
  * @returns {Promise<number>}
  */
 const getValidatedLedgerIndex = async () => {
     const client = new xrpl.Client(TESTNET_URL)
-
     await client.connect()
-
-    // Reference: https://xrpl.org/ledger.html#ledger
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/ledger-methods/ledger
     const ledgerRequest = {
         "command": "ledger",
         "ledger_index": "validated"
     }
-
     const ledgerResponse = await client.request(ledgerRequest)
-
     await client.disconnect()
-
     return ledgerResponse.result.ledger_index
 }
+// Ledger index code additions - end
 
 /**
- * This is our main function, it creates our application window, preloads the code we will need to communicate
- * between the renderer Process and the main Process, loads a layout and performs the main logic
+ * Main function: create application window, preload the code to communicate
+ * between the renderer Process and the main Process, load a layout,
+ * and perform the main logic.
  */
 const createWindow = () => {
-
-    // Creates the application window
+    // Create the application window
     const appWindow = new BrowserWindow({
         width: 1024,
         height: 768,
@@ -43,9 +40,8 @@ const createWindow = () => {
         },
     })
 
-    // Loads a layout
+    // Load a layout
     appWindow.loadFile(path.join(__dirname, 'view', 'template.html'))
-
     return appWindow
 }
 
diff --git a/_code-samples/build-a-desktop-wallet/js/2-async/index.js b/_code-samples/build-a-desktop-wallet/js/2-async/index.js
@@ -24,9 +24,10 @@ const createWindow = () => {
     return appWindow
 }
 
+// Step 2 changes - main whenReady function - start
 /**
- * This function creates a XRPL client, subscribes to 'ledger' events from the XRPL and broadcasts those by
- * dispatching the 'update-ledger-data' event which will be picked up by the frontend
+ * Create an XRPL client, subscribe to 'ledger' events, and broadcast those by
+ * dispatching an 'update-ledger-data' event to the frontend.
  *
  * @returns {Promise<void>}
  */
@@ -38,7 +39,7 @@ const main = async () => {
     await client.connect()
 
     // Subscribe client to 'ledger' events
-    // Reference: https://xrpl.org/subscribe.html
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe
     await client.request({
         "command": "subscribe",
         "streams": ["ledger"]
@@ -51,3 +52,4 @@ const main = async () => {
 }
 
 app.whenReady().then(main)
+// Step 2 changes - main whenReady function - end
diff --git a/_code-samples/build-a-desktop-wallet/js/3-account/index.js b/_code-samples/build-a-desktop-wallet/js/3-account/index.js
@@ -29,30 +29,30 @@ const main = async () => {
 
         await client.connect()
 
-        // Reference: https://xrpl.org/subscribe.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe
         await client.request({
             "command": "subscribe",
             "streams": ["ledger"],
             "accounts": [address]
         })
 
-        // Reference: https://xrpl.org/subscribe.html#ledger-stream
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream
         client.on("ledgerClosed", async (rawLedgerData) => {
             const ledger = prepareLedgerData(rawLedgerData)
             appWindow.webContents.send('update-ledger-data', ledger)
         })
 
         // Initial Ledger Request -> Get account details on startup
-        // Reference: https://xrpl.org/ledger.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/ledger-methods/ledger
         const ledgerResponse = await client.request({
             "command": "ledger"
         })
         const initialLedgerData = prepareLedgerData(ledgerResponse.result.closed.ledger)
         appWindow.webContents.send('update-ledger-data', initialLedgerData)
 
-        // Reference: https://xrpl.org/subscribe.html#transaction-streams
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#transaction-streams
         client.on("transaction", async (transaction) => {
-            // Reference: https://xrpl.org/account_info.html
+            // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
             const accountInfoRequest = {
                 "command": "account_info",
                 "account": address,
@@ -64,7 +64,7 @@ const main = async () => {
         })
 
         // Initial Account Request -> Get account details on startup
-        // Reference: https://xrpl.org/account_info.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
         const accountInfoResponse = await client.request({
             "command": "account_info",
             "account": address,
diff --git a/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js b/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js
@@ -30,22 +30,22 @@ const main = async () => {
 
         await client.connect()
 
-        // Reference: https://xrpl.org/subscribe.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe
         await client.request({
             "command": "subscribe",
             "streams": ["ledger"],
             "accounts": [address]
         })
 
-        // Reference: https://xrpl.org/subscribe.html#ledger-stream
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream
         client.on("ledgerClosed", async (rawLedgerData) => {
             const ledger = prepareLedgerData(rawLedgerData)
             appWindow.webContents.send('update-ledger-data', ledger)
         })
 
         // Wait for transaction on subscribed account and re-request account data
         client.on("transaction", async (transaction) => {
-            // Reference: https://xrpl.org/account_info.html
+            // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
             const accountInfoRequest = {
                 "command": "account_info",
                 "account": address,
@@ -61,7 +61,7 @@ const main = async () => {
         })
 
         // Initial Account Request -> Get account details on startup
-        // Reference: https://xrpl.org/account_info.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
         const accountInfoResponse = await client.request({
             "command": "account_info",
             "account": address,
@@ -71,7 +71,7 @@ const main = async () => {
         appWindow.webContents.send('update-account-data', accountData)
 
         // Initial Transaction Request -> List account transactions on startup
-        // Reference: https://xrpl.org/account_tx.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx
         const txResponse = await client.request({
             "command": "account_tx",
             "account": address
diff --git a/_code-samples/build-a-desktop-wallet/js/5-password/index.js b/_code-samples/build-a-desktop-wallet/js/5-password/index.js
@@ -23,6 +23,7 @@ const createWindow = () => {
     return appWindow
 }
 
+// Step 5 - new main function - start
 const main = async () => {
     const appWindow = createWindow()
 
@@ -51,6 +52,9 @@ const main = async () => {
         }
 
         const wallet = xrpl.Wallet.fromSeed(seed)
+        // For compatibility with seeds generated using secp256k1
+        // (the old default algorithm), use the following instead:
+        // const wallet = xrpl.Wallet.fromSeed(seed, {algorithm: "secp256k1"})
 
         const client = new xrpl.Client(TESTNET_URL)
 
@@ -80,5 +84,6 @@ const main = async () => {
         }
     })
 }
+// Step 5 - new main function - end
 
 app.whenReady().then(main)
diff --git a/_code-samples/build-a-desktop-wallet/js/README.md b/_code-samples/build-a-desktop-wallet/js/README.md
@@ -2,7 +2,7 @@
 
 Build a non-custodial XRP Ledger wallet application in JavaScript that runs on the desktop using Electron.
 
-For the full documentation, refer to the [Build a Wallet in JavaScript tutorial](https://xrpl.org/build-a-wallet-in-javascript.html).
+For the full documentation, refer to the [Build a Desktop Wallet in JavaScript tutorial](https://xrpl.org/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript).
 
 ## TL;DR
 
diff --git a/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js
@@ -3,7 +3,7 @@ const xrpl = require("xrpl");
 // The rippled server and its APIs represent time as an unsigned integer.
 // This number measures the number of seconds since the "Ripple Epoch" of
 // January 1, 2000 (00:00 UTC). This is like the way the Unix epoch  works,
-// Reference: https://xrpl.org/basic-data-types.html
+// Reference: https://xrpl.org/docs/references/protocol/data-types/basic-data-types#specifying-time
 const RIPPLE_EPOCH = 946684800;
 
 const prepareAccountData = (rawAccountData) => {
diff --git a/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js
@@ -14,7 +14,7 @@ const fernet = require("fernet");
  * @returns {Promise<void>}
  */
 const initialize = async (client, wallet, appWindow) => {
-    // Reference: https://xrpl.org/account_info.html
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
     const accountInfoResponse = await client.request({
         "command": "account_info",
         "account": wallet.address,
@@ -23,7 +23,7 @@ const initialize = async (client, wallet, appWindow) => {
     const accountData = prepareAccountData(accountInfoResponse.result.account_data)
     appWindow.webContents.send('update-account-data', accountData)
 
-    // Reference: https://xrpl.org/account_tx.html
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx
     const txResponse = await client.request({
         "command": "account_tx",
         "account": wallet.address
@@ -42,22 +42,22 @@ const initialize = async (client, wallet, appWindow) => {
  */
 const subscribe = async (client, wallet, appWindow) => {
 
-    // Reference: https://xrpl.org/subscribe.html
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe
     await client.request({
         "command": "subscribe",
         "streams": ["ledger"],
         "accounts": [wallet.address]
     })
 
-    // Reference: https://xrpl.org/subscribe.html#ledger-stream
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream
     client.on("ledgerClosed", async (rawLedgerData) => {
         const ledger = prepareLedgerData(rawLedgerData)
         appWindow.webContents.send('update-ledger-data', ledger)
     })
 
     // Wait for transaction on subscribed account and re-request account data
     client.on("transaction", async (transaction) => {
-        // Reference: https://xrpl.org/account_info.html
+        // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
         const accountInfoRequest = {
             "command": "account_info",
             "account": wallet.address,
diff --git a/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js
@@ -9,7 +9,7 @@ const xrpl = require("xrpl");
  * @returns {Promise<*>}
  */
 const sendXrp = async (paymentData, client, wallet) => {
-    // Reference: https://xrpl.org/submit.html#request-format-1
+    // Reference: https://xrpl.org/docs/references/protocol/transactions/types/payment
     const paymentTx = {
         "TransactionType": "Payment",
         "Account": wallet.address,
diff --git a/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js
@@ -39,7 +39,7 @@ async function checkDestination(accountData) {
 
 /**
  * Verify an account using a xrp-ledger.toml file.
- * https://xrpl.org/xrp-ledger-toml.html#xrp-ledgertoml-file
+ * https://xrpl.org/docs/references/xrp-ledger-toml
  *
  * @param accountData
  * @returns {Promise<{domain: string, verified: boolean}>}
@@ -89,7 +89,7 @@ async function verifyAccountDomain(accountData) {
  * @returns {Promise<{domain: string, verified: boolean}>}
  */
 async function verify(accountAddress, client) {
-    // Reference: https://xrpl.org/account_info.html
+    // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info
     const request = {
         "command": "account_info",
         "account": accountAddress,
diff --git a/_code-samples/build-a-desktop-wallet/js/package.json b/_code-samples/build-a-desktop-wallet/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xrpl-javascript-desktop-wallet",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "scripts": {
     "hello": "electron 0-hello/index.js",
@@ -14,15 +14,15 @@
     "domain-verification": "electron 8-domain-verification/index.js"
   },
   "dependencies": {
-    "async": "^3.2.4",
+    "async": "^3.2.6",
     "fernet": "=0.3.3",
-    "node-fetch": "^2.6.9",
-    "pbkdf2-hmac": "^1.1.0",
+    "node-fetch": "^2.7.0",
+    "pbkdf2-hmac": "^1.2.1",
     "open": "^8.4.0",
     "toml": "^3.0.0",
-    "xrpl": "^4.3.0"
+    "xrpl": "^4.4.2"
   },
   "devDependencies": {
-    "electron": "28.3.2"
+    "electron": "38.2.0"
   }
 }
diff --git a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ const createWindow = () => {`
`23`	`23`	`return appWindow`
`24`	`24`	`}`
`25`	`25`
	`26`	`+// Step 5 - new main function - start`
`26`	`27`	`const main = async () => {`
`27`	`28`	`const appWindow = createWindow()`
`28`	`29`
`@@ -51,6 +52,9 @@ const main = async () => {`
`51`	`52`	`}`
`52`	`53`
`53`	`54`	`const wallet = xrpl.Wallet.fromSeed(seed)`
	`55`	`+ // For compatibility with seeds generated using secp256k1`
	`56`	`+ // (the old default algorithm), use the following instead:`
	`57`	`+ // const wallet = xrpl.Wallet.fromSeed(seed, {algorithm: "secp256k1"})`
`54`	`58`
`55`	`59`	`const client = new xrpl.Client(TESTNET_URL)`
`56`	`60`
`@@ -80,5 +84,6 @@ const main = async () => {`
`80`	`84`	`}`
`81`	`85`	`})`
`82`	`86`	`}`
	`87`	`+// Step 5 - new main function - end`
`83`	`88`
`84`	`89`	`app.whenReady().then(main)`