Changed folder structure

content/_code-samples/build-a-wallet/desktop-js/0-hello/view/0_hello.html

@@ -15,6 +15,4 @@
 
 </body>
 
-<script src="1_renderer.js"></script>
-
 </html>

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

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

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

@@ -1,7 +1,7 @@
 const { app, BrowserWindow, ipcMain} = require('electron')
 const path = require('path')
 const xrpl = require("xrpl")
-const { prepareReserve, prepareAccountData, prepareLedgerData} = require('./library/3_helpers')
+const { prepareReserve, prepareAccountData, prepareLedgerData} = require('../library/3_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 

content/_code-samples/build-a-wallet/desktop-js/4-tx-history/4_tx-history.js

@@ -1,8 +1,8 @@
 const {app, BrowserWindow, ipcMain} = require('electron')
 const path = require('path')
 const xrpl = require("xrpl")
-const { prepareReserve, prepareAccountData, prepareLedgerData} = require('./library/3_helpers')
-const { prepareTxData } = require('./library/4_helpers')
+const { prepareReserve, prepareAccountData, prepareLedgerData} = require('../library/3_helpers')
+const { prepareTxData } = require('../library/4_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 

content/_code-samples/build-a-wallet/desktop-js/5-password/5_password.js

@@ -2,7 +2,7 @@ const {app, BrowserWindow, ipcMain} = require('electron')
 const fs = require('fs')
 const path = require('path')
 const xrpl = require("xrpl")
-const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('./library/5_helpers')
+const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('../library/5_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 

content/_code-samples/build-a-wallet/desktop-js/6-styling/6_styling.js

@@ -2,7 +2,7 @@ const {app, BrowserWindow, ipcMain} = require('electron')
 const fs = require('fs')
 const path = require('path')
 const xrpl = require("xrpl")
-const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('./library/5_helpers')
+const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('../library/5_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 
@@ -14,7 +14,7 @@ const createWindow = () => {
         width: 1024,
         height: 768,
         webPreferences: {
-            preload: path.join(__dirname, 'view', '5_preload.js'),
+            preload: path.join(__dirname, 'view', '6_preload.js'),
         },
     })
 

content/_code-samples/build-a-wallet/desktop-js/6-styling/view/6_preload.js

@@ -0,0 +1,31 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    // Step 5 code additions - start
+    onOpenSeedDialog: (callback) => {
+        ipcRenderer.on('open-seed-dialog', callback)
+    },
+    onEnterSeed: (seed) => {
+        ipcRenderer.send('seed-entered', seed)
+    },
+    onOpenPasswordDialog: (callback) => {
+        ipcRenderer.on('open-password-dialog', callback)
+    },
+    onEnterPassword: (password) => {
+        ipcRenderer.send('password-entered', password)
+    },
+    requestSeedChange: () => {
+        ipcRenderer.send('request-seed-change')
+    },
+    // Step 5 code additions - end
+
+    onUpdateLedgerData: (callback) => {
+        ipcRenderer.on('update-ledger-data', callback)
+    },
+    onUpdateAccountData: (callback) => {
+        ipcRenderer.on('update-account-data', callback)
+    },
+    onUpdateTransactionData: (callback) => {
+        ipcRenderer.on('update-transaction-data', callback)
+    }
+})

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

@@ -0,0 +1,75 @@
+// Step 5 code additions - start
+window.electronAPI.onOpenSeedDialog((_event) => {
+    const seedDialog = document.getElementById('seed-dialog')
+    const seedInput = seedDialog.querySelector('input')
+    const submitButton = seedDialog.querySelector('button[type="submit"]')
+
+    submitButton.addEventListener('click', () => {
+        const seed = seedInput.value
+        window.electronAPI.onEnterSeed(seed)
+        seedDialog.close()
+    });
+
+    seedDialog.showModal()
+})
+
+window.electronAPI.onOpenPasswordDialog((_event) => {
+    const passwordDialog = document.getElementById('password-dialog')
+    const passwordInput = passwordDialog.querySelector('input')
+    const submitButton = passwordDialog.querySelector('button[type="submit"]')
+    const changeSeedButton = passwordDialog.querySelector('button[type="button"]')
+
+    submitButton.addEventListener('click', () => {
+        const password = passwordInput.value
+        window.electronAPI.onEnterPassword(password)
+        passwordDialog.close()
+    });
+
+    changeSeedButton.addEventListener('click', () => {
+        passwordDialog.close()
+        window.electronAPI.requestSeedChange()
+    });
+
+    passwordDialog.showModal()
+});
+// Step 5 code additions - end
+
+const ledgerIndexEl = document.getElementById('ledger-index')
+const ledgerHashEl = document.getElementById('ledger-hash')
+const ledgerCloseTimeEl = document.getElementById('ledger-close-time')
+
+window.electronAPI.onUpdateLedgerData((_eventledger, ledger) => {
+    ledgerIndexEl.innerText = ledger.ledgerIndex
+    ledgerHashEl.innerText = ledger.ledgerHash
+    ledgerCloseTimeEl.innerText = ledger.ledgerCloseTime
+})
+
+const accountAddressClassicEl = document.getElementById('account-address-classic')
+const accountAddressXEl = document.getElementById('account-address-x')
+const accountBalanceEl = document.getElementById('account-balance')
+const accountReserveEl = document.getElementById('account-reserve')
+
+window.electronAPI.onUpdateAccountData((_event, value) => {
+    accountAddressClassicEl.innerText = value.classicAddress
+    accountAddressXEl.innerText = value.xAddress
+    accountBalanceEl.innerText = value.xrpBalance
+    accountReserveEl.innerText = value.xrpReserve
+})
+
+const txTableBodyEl = document.getElementById('tx-table').tBodies[0]
+window.testEl = txTableBodyEl
+
+window.electronAPI.onUpdateTransactionData((_event, transactions) => {
+    for (let transaction of transactions) {
+        txTableBodyEl.insertAdjacentHTML( 'beforeend',
+        "<tr>" +
+            "<td>" + transaction.confirmed + "</td>" +
+            "<td>" + transaction.type + "</td>" +
+            "<td>" + transaction.from + "</td>" +
+            "<td>" + transaction.to + "</td>" +
+            "<td>" + transaction.value + "</td>" +
+            "<td>" + transaction.hash + "</td>" +
+            "</tr>"
+        )
+    }
+})

content/_code-samples/build-a-wallet/desktop-js/6-styling/view/6_styling.html

@@ -7,8 +7,8 @@
 
     <title>XRPL Wallet Tutorial (JavaScript / Electron)</title>
 
-    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css"/>
-    <link rel="stylesheet" href="./custom.css"/>
+    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../../bootstrap/custom.css"/>
 </head>
 
 <body>
@@ -114,7 +114,7 @@
 
 </body>
 
-<script src="../bootstrap/bootstrap.bundle.min.js"></script>
-<script src="5_renderer.js"></script>
+<script src="../../bootstrap/bootstrap.bundle.min.js"></script>
+<script src="6_renderer.js"></script>
 
 </html>

content/_code-samples/build-a-wallet/desktop-js/7-send-xrp/7_send-xrp.js

@@ -2,8 +2,8 @@ const { app, BrowserWindow, ipcMain } = require('electron')
 const fs = require("fs");
 const path = require('path')
 const xrpl = require("xrpl")
-const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('./library/5_helpers')
-const { sendXrp } = require('./library/7_helpers')
+const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('../library/5_helpers')
+const { sendXrp } = require('../library/7_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 

content/_code-samples/build-a-wallet/desktop-js/7-send-xrp/view/7_send-xrp.html

@@ -7,8 +7,8 @@
 
     <title>XRPL Wallet Tutorial (JavaScript / Electron)</title>
 
-    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css"/>
-    <link rel="stylesheet" href="./custom.css"/>
+    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../../bootstrap/custom.css"/>
 </head>
 
 <body>
@@ -150,7 +150,7 @@
 
 </body>
 
-<script src="../bootstrap/bootstrap.bundle.min.js"></script>
+<script src="../../bootstrap/bootstrap.bundle.min.js"></script>
 <script src="7_renderer.js"></script>
 
 </html>

content/_code-samples/build-a-wallet/desktop-js/8-domain-verification/8_domain-verification.js

@@ -2,9 +2,9 @@ const { app, BrowserWindow, ipcMain } = require('electron')
 const fs = require("fs");
 const path = require('path')
 const xrpl = require("xrpl")
-const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('./library/5_helpers')
-const { sendXrp } = require('./library/7_helpers')
-const { verify } = require('./library/8_helpers')
+const { initialize, subscribe, saveSaltedSeed, loadSaltedSeed } = require('../library/5_helpers')
+const { sendXrp } = require('../library/7_helpers')
+const { verify } = require('../library/8_helpers')
 
 const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
 

content/_code-samples/build-a-wallet/desktop-js/8-domain-verification/view/8_domain-verification.html

@@ -7,8 +7,8 @@
 
     <title>XRPL Wallet Tutorial (JavaScript / Electron)</title>
 
-    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css"/>
-    <link rel="stylesheet" href="./custom.css"/>
+    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../../bootstrap/custom.css"/>
 </head>
 
 <body>
@@ -153,7 +153,7 @@
 
 </body>
 
-<script src="../bootstrap/bootstrap.bundle.min.js"></script>
+<script src="../../bootstrap/bootstrap.bundle.min.js"></script>
 <script src="8_renderer.js"></script>
 
 </html>

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

@@ -3,15 +3,15 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "hello": "electron ./0_hello.js",
-    "ledger-index": "electron ./1_ledger-index.js",
-    "async-subscribe": "electron ./2_async-subscribe.js",
-    "account": "electron ./3_account.js",
-    "tx-history": "electron ./4_tx-history.js",
-    "password": "electron ./5_password.js",
-    "styling": "electron ./6_styling.js",
-    "send-xrp": "electron ./7_send-xrp.js",
-    "domain-verification": "electron ./8_domain-verification.js"
+    "hello": "electron 0-hello/0_hello.js",
+    "ledger-index": "electron 1-ledger-index/1_ledger-index.js",
+    "async": "electron 2-async/2_async.js",
+    "account": "electron 3-account/3_account.js",
+    "tx-history": "electron 4-tx-history/4_tx-history.js",
+    "password": "electron 5-password/5_password.js",
+    "styling": "electron 6-styling/6_styling.js",
+    "send-xrp": "electron 7-send-xrp/7_send-xrp.js",
+    "domain-verification": "electron 8-domain-verification/8_domain-verification.js"
   },
   "dependencies": {
     "async": "^3.2.4",