Move Build a Desktop Wallet code samples

content/_code-samples/build-a-desktop-wallet/js/5-password/view/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-desktop-wallet/js/5-password/view/renderer.js

@@ -0,0 +1,81 @@
+// Step 5 code additions - start
+const seedDialog = document.getElementById('seed-dialog')
+const seedInput = seedDialog.querySelector('input')
+const seedSubmitButton = seedDialog.querySelector('button[type="submit"]')
+
+const seedSubmitFn = () => {
+    const seed = seedInput.value
+    window.electronAPI.onEnterSeed(seed)
+    seedDialog.close()
+}
+
+window.electronAPI.onOpenSeedDialog((_event) => {
+    seedSubmitButton.addEventListener('click', seedSubmitFn, {once : true});
+
+    seedDialog.showModal()
+})
+
+const passwordDialog = document.getElementById('password-dialog')
+const passwordInput = passwordDialog.querySelector('input')
+const passwordError = passwordDialog.querySelector('span.invalid-password')
+const passwordSubmitButton = passwordDialog.querySelector('button[type="submit"]')
+const changeSeedButton = passwordDialog.querySelector('button[type="button"]')
+
+const handlePasswordSubmitFn = () => {
+    const password = passwordInput.value
+    window.electronAPI.onEnterPassword(password)
+    passwordDialog.close()
+}
+
+const handleChangeSeedFn = () => {
+    passwordDialog.close()
+    window.electronAPI.requestSeedChange()
+}
+
+window.electronAPI.onOpenPasswordDialog((_event, showInvalidPassword = false) => {
+    if (showInvalidPassword) {
+        passwordError.innerHTML = 'INVALID PASSWORD'
+    }
+    passwordSubmitButton.addEventListener('click', handlePasswordSubmitFn, {once : true});
+    changeSeedButton.addEventListener('click', handleChangeSeedFn, {once : true});
+    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')
+
+window.electronAPI.onUpdateAccountData((_event, value) => {
+    accountAddressClassicEl.innerText = value.classicAddress
+    accountAddressXEl.innerText = value.xAddress
+    accountBalanceEl.innerText = value.xrpBalance
+})
+
+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-desktop-wallet/js/5-password/view/template.html

@@ -0,0 +1,75 @@
+<!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 5/8</h3>
+
+    <fieldset>
+        <legend>Account</legend>
+        Classic Address: <strong id="account-address-classic"></strong><br/>
+        X-Address: <strong id="account-address-x"></strong><br/>
+        XRP Balance: <strong id="account-balance"></strong><br/>
+    </fieldset>
+
+    <fieldset>
+        <legend>Latest validated ledger</legend>
+        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/>
+    </fieldset>
+
+    <fieldset>
+        <legend>Transactions:</legend>
+        <table id="tx-table">
+            <thead>
+            <tr>
+                <th>Confirmed</th>
+                <th>Type</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Value Delivered</th>
+                <th>Hash</th>
+            </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </fieldset>
+
+    <dialog id="seed-dialog">
+        <form method="dialog">
+            <div>
+                <label for="seed-input">Enter seed:</label>
+                <input type="text" id="seed-input" name="seed-input" />
+            </div>
+            <div>
+                <button type="submit">Submit</button>
+            </div>
+        </form>
+    </dialog>
+
+    <dialog id="password-dialog">
+        <form method="dialog">
+            <div>
+                <label for="password-input">Enter password (min-length 5):</label><br />
+                <input type="text" id="password-input" name="password-input" /><br />
+                <span class="invalid-password"></span>
+            </div>
+            <div>
+                <button type="button">Change Seed</button>
+                <button type="submit">Submit</button>
+            </div>
+        </form>
+    </dialog>
+
+</body>
+
+<script src="renderer.js"></script>
+
+</html>