Move Build a Desktop Wallet code samples

2025-11-20 11:45:50 +00:00 · 2023-09-22 19:22:32 -07:00
parent cd3ac90249
commit 63efabe0c2
61 changed files with 143 additions and 139 deletions
--- a/content/_code-samples/build-a-desktop-wallet/js/2-async/index.js
+++ b/content/_code-samples/build-a-desktop-wallet/js/2-async/index.js
@@ -0,0 +1,53 @@
+const { app, BrowserWindow } = require('electron')
+const path = require('path')
+const xrpl = require("xrpl")
+
+const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
+
+/**
+ * This function creates our application window
+ *
+ * @returns {Electron.CrossProcessExports.BrowserWindow}
+ */
+const createWindow = () => {
+
+    const appWindow = new BrowserWindow({
+        width: 1024,
+        height: 768,
+        webPreferences: {
+            preload: path.join(__dirname, 'view', 'preload.js'),
+        },
+    })
+
+    appWindow.loadFile(path.join(__dirname, 'view', 'template.html'))
+
+    return appWindow
+}
+
+/**
+ * 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
+ *
+ * @returns {Promise<void>}
+ */
+const main = async () => {
+    const appWindow = createWindow()
+
+    const client = new xrpl.Client(TESTNET_URL)
+
+    await client.connect()
+
+    // Subscribe client to 'ledger' events
+    // Reference: https://xrpl.org/subscribe.html
+    await client.request({
+        "command": "subscribe",
+        "streams": ["ledger"]
+    })
+
+    // Dispatch 'update-ledger-data' event
+    client.on("ledgerClosed", async (ledger) => {
+        appWindow.webContents.send('update-ledger-data', ledger)
+    })
+}
+
+app.whenReady().then(main)
--- a/content/_code-samples/build-a-desktop-wallet/js/2-async/view/preload.js
+++ b/content/_code-samples/build-a-desktop-wallet/js/2-async/view/preload.js
@@ -0,0 +1,7 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    onUpdateLedgerData: (callback) => {
+        ipcRenderer.on('update-ledger-data', callback)
+    }
+})
--- a/content/_code-samples/build-a-desktop-wallet/js/2-async/view/renderer.js
+++ b/content/_code-samples/build-a-desktop-wallet/js/2-async/view/renderer.js
@@ -0,0 +1,15 @@
+const ledgerIndexEl = document.getElementById('ledger-index')
+
+// Step 2 code additions - start
+const ledgerHashEl = document.getElementById('ledger-hash')
+const ledgerCloseTimeEl = document.getElementById('ledger-close-time')
+// Step 2 code additions - end
+
+window.electronAPI.onUpdateLedgerData((_event, value) => {
+    ledgerIndexEl.innerText = value.ledger_index
+
+    // Step 2 code additions - start
+    ledgerHashEl.innerText = value.ledger_hash
+    ledgerCloseTimeEl.innerText = value.ledger_time
+    // Step 2 code additions - end
+})
--- a/content/_code-samples/build-a-desktop-wallet/js/2-async/view/template.html
+++ b/content/_code-samples/build-a-desktop-wallet/js/2-async/view/template.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
+  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
+  <title>XRPL Wallet Tutorial (JavaScript / Electron)</title>
+</head>
+
+<body>
+  <h3>Build a XRPL Wallet - Part 2/8</h3>
+  <b>Latest validated ledger stats</b><br />
+  Ledger Index: <strong id="ledger-index"></strong><br />
+  Ledger Hash: <strong id="ledger-hash"></strong><br />
+  Close Time: <strong id="ledger-close-time"></strong><br />
+</body>
+
+<script src="renderer.js"></script>
+
+</html>