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",

content/tutorials/build-apps/build-a-desktop-wallet-in-javascript.md

@@ -171,16 +171,16 @@ npm run hello
 In the next steps we will continually expand on this very basic setup. To better keep track of all the changes that will be made, the files in the [reference section]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/) are numbered/prefixed with the respective step number:
 
 **Full code for this step:**
-[`0_hello.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/0_hello.js),
-[`view/0_hello.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/0_hello.html),
+[`0-hello/0_hello.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/0_hello.js),
+[`0-hello/view/0_hello.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/0_hello.html),
 
 ### 1. Ledger Index
 
 **Full code for this step:** 
-[`1_ledger-index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/1_ledger-index.js),
-[`view/1_preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_preload.js),
-[`view/1_ledger-index.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_ledger-index.html),
-[`view/1_renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_renderer.js).
+[`1-ledger-index/1_ledger-index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/1_ledger-index.js),
+[`1-ledger-index/view/1_preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_preload.js),
+[`1-ledger-index/view/1_ledger-index.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_ledger-index.html),
+[`1-ledger-index/view/1_renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/1_renderer.js).
 
 Our first step was to have a running "Hello World" application. Now we want to expand on that so that the application can interact on a very basic level with the XRP Ledger and display some information about the current ledger state on the screen. After completing this step, the - for the time being unstyled - application should look like this:
 
@@ -333,10 +333,10 @@ npm run ledger-index
 ### 2. Show Ledger Updates by using WebSocket subscriptions
 
 **Full code for this step:** 
-[`2_async-subscribe.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/2_async-subscribe.js),
-[`view/2_preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_preload.js),
-[`view/2_async-subscribe.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_async.html),
-[`view/2_renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_renderer.js).
+[`2-async/2_async-subscribe.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/2_async-subscribe.js),
+[`2-async/view/2_preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_preload.js),
+[`2-async/view/2_async-subscribe.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_async.html),
+[`2-async/view/2_renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/desktop-js/view/2_renderer.js).
 
 Our application so far only shows the latest validated ledger sequence at the time when we opened it. Let's take things up a notch and add some dashboard like functionality where our wallet app will keep in sync with the ledger and display the latest specs and stats like a clock that is keeping track of time. The result will look something like this: