Restructured Step 2 - 7 to "code along" style

content/_code-samples/build-a-wallet/desktop-js/2_async-poll.js

@@ -1,75 +0,0 @@
-const async = require('async')
-const { app, BrowserWindow } = require('electron')
-const path = require('path')
-const xrpl = require("xrpl")
-
-const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
-
-/**
- * This function sends a ledger-request and returns the response
- *
- * @param client
- * @returns {Promise<*>}
- */
-const getValidatedLedgerData = async (client) => {
-    // Reference: https://xrpl.org/ledger.html#ledger
-    const ledgerRequest = {
-        "command": "ledger",
-        "ledger_index": "validated"
-    }
-    const ledgerResponse = await client.request(ledgerRequest)
-
-    return ledgerResponse.result
-}
-
-/**
- * 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', '2_preload.js'),
-        },
-    })
-
-    appWindow.loadFile(path.join(__dirname, 'view', '2_async.html'))
-
-    return appWindow
-}
-
-/**
- * This function creates a XRPL client, continuously polls the XRPL with a ledger-request and broadcasts
- * the result 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()
-
-    async.forever(
-        function(next) {
-            getValidatedLedgerData(client).then((value) => {
-                appWindow.webContents.send('update-ledger-data', value)
-            })
-
-            setTimeout(function() {
-                next()
-            }, 2500)
-        },
-        function(err) {
-            // if next is called with a value in its first parameter, it will appear
-            // in here as 'err', and execution will stop.
-        }
-    )
-}
-
-app.whenReady().then(main)

content/_code-samples/build-a-wallet/desktop-js/2_async-subscribe.js

@@ -19,7 +19,7 @@ const createWindow = () => {
         },
     })
 
-    appWindow.loadFile(path.join(__dirname, 'view', '2_async.html'))
+    appWindow.loadFile(path.join(__dirname, 'view', '2_async-subscribe.html'))
 
     return appWindow
 }

content/_code-samples/build-a-wallet/desktop-js/3_account.js

@@ -47,6 +47,14 @@ const main = async () => {
             appWindow.webContents.send('update-ledger-data', ledger)
         })
 
+        // Initial Ledger Request -> Get account details on startup
+        // Reference: https://xrpl.org/ledger.html
+        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
         client.on("transaction", async (transaction) => {
             // Reference: https://xrpl.org/account_info.html
@@ -67,8 +75,8 @@ const main = async () => {
             "account": address,
             "ledger_index": "current"
         })
-        const accountData = prepareAccountData(accountInfoResponse.result.account_data)
-        appWindow.webContents.send('update-account-data', accountData)
+        const initialAccountData = prepareAccountData(accountInfoResponse.result.account_data)
+        appWindow.webContents.send('update-account-data', initialAccountData)
     })
 }
 

content/_code-samples/build-a-wallet/desktop-js/library/3_helpers.js

@@ -6,7 +6,6 @@ const xrpl = require("xrpl");
 // Reference: https://xrpl.org/basic-data-types.html
 const RIPPLE_EPOCH = 946684800;
 
-
 const prepareAccountData = (rawAccountData, reserve) => {
     const numOwners = rawAccountData.OwnerCount || 0
 
@@ -25,7 +24,7 @@ const prepareAccountData = (rawAccountData, reserve) => {
 }
 
 const prepareLedgerData = (rawLedgerData) => {
-    const timestamp = RIPPLE_EPOCH + rawLedgerData.ledger_time
+    const timestamp = RIPPLE_EPOCH + (rawLedgerData.ledger_time ?? rawLedgerData.close_time)
     const dateTime = new Date(timestamp * 1000)
     const dateTimeString = dateTime.toLocaleDateString() + ' ' + dateTime.toLocaleTimeString()
 
@@ -36,7 +35,6 @@ const prepareLedgerData = (rawLedgerData) => {
     }
 }
 
-
 const prepareReserve = (ledger) => {
     const reserveBaseXrp = xrpl.dropsToXrp(ledger.reserve_base)
     const reserveIncrementXrp = xrpl.dropsToXrp(ledger.reserve_inc)

content/_code-samples/build-a-wallet/desktop-js/package.json

@@ -5,7 +5,6 @@
   "scripts": {
     "hello": "electron ./0_hello.js",
     "ledger-index": "electron ./1_ledger-index.js",
-    "async-poll": "electron ./2_async-poll.js",
     "async-subscribe": "electron ./2_async-subscribe.js",
     "account": "electron ./3_account.js",
     "tx-history": "electron ./4_tx-history.js",

content/_code-samples/build-a-wallet/desktop-js/view/3_renderer.js

@@ -1,4 +1,3 @@
-// Step 3 code additions - start
 document.addEventListener('DOMContentLoaded', openAccountAddressDialog);
 
 function openAccountAddressDialog(){
@@ -19,19 +18,19 @@ function openAccountAddressDialog(){
 
     accountAddressDialog.showModal()
 }
-// Step 3 code additions - end
 
 const ledgerIndexEl = document.getElementById('ledger-index')
 const ledgerHashEl = document.getElementById('ledger-hash')
 const ledgerCloseTimeEl = document.getElementById('ledger-close-time')
 
+// Step 3 - Section start - this remains as it is, the rest is new
 window.electronAPI.onUpdateLedgerData((_event, ledger) => {
     ledgerIndexEl.innerText = ledger.ledgerIndex
     ledgerHashEl.innerText = ledger.ledgerHash
     ledgerCloseTimeEl.innerText = ledger.ledgerCloseTime
 })
+// Step 3 - Section end
 
-// Step 3 code additions - start
 const accountAddressClassicEl = document.getElementById('account-address-classic')
 const accountAddressXEl = document.getElementById('account-address-x')
 const accountBalanceEl = document.getElementById('account-balance')
@@ -43,4 +42,3 @@ window.electronAPI.onUpdateAccountData((_event, value) => {
     accountBalanceEl.innerText = value.xrpBalance
     accountReserveEl.innerText = value.xrpReserve
 })
-// Step 3 code additions - end

content/_code-samples/build-a-wallet/desktop-js/view/7_renderer.js

@@ -101,4 +101,4 @@ window.electronAPI.onSendXrpTransactionFinish((_event) => {
     destinationTagEl.value = ''
     amountEl.value = ''
 })
-// Step 7 code additions - start
+// Step 7 code additions - end