diff --git a/_code-samples/build-a-desktop-wallet/js/0-hello/index.js b/_code-samples/build-a-desktop-wallet/js/0-hello/index.js index dbf8664c30..d4003f48c8 100644 --- a/_code-samples/build-a-desktop-wallet/js/0-hello/index.js +++ b/_code-samples/build-a-desktop-wallet/js/0-hello/index.js @@ -3,20 +3,19 @@ const { app, BrowserWindow } = require('electron') const path = require('path') /** - * This is our main function, it creates our application window, preloads the code we will need to communicate - * between the renderer Process and the main Process, loads a layout and performs the main logic + * Main function: create application window, preload the code to communicate + * between the renderer Process and the main Process, load a layout, + * and perform the main logic */ const createWindow = () => { - - // Creates the application window + // Create the application window const appWindow = new BrowserWindow({ width: 1024, height: 768 }) - // Loads a layout + // Load a layout appWindow.loadFile(path.join(__dirname, 'view', 'template.html')) - return appWindow } diff --git a/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js b/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js index e461474dd3..fae39a0465 100644 --- a/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js +++ b/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js @@ -1,40 +1,37 @@ const { app, BrowserWindow } = require('electron') const path = require('path') -const xrpl = require("xrpl") +// Ledger index code additions - start +const xrpl = require('xrpl') -const TESTNET_URL = "wss://s.altnet.rippletest.net:51233" +const TESTNET_URL = 'wss://s.altnet.rippletest.net:51233' /** - * This function creates a WebService client, which connects to the XRPL and fetches the latest ledger index. + * Create a WebSocket client, connect to the XRPL, and fetch the latest ledger index. * * @returns {Promise} */ const getValidatedLedgerIndex = async () => { const client = new xrpl.Client(TESTNET_URL) - await client.connect() - - // Reference: https://xrpl.org/ledger.html#ledger + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/ledger-methods/ledger const ledgerRequest = { "command": "ledger", "ledger_index": "validated" } - const ledgerResponse = await client.request(ledgerRequest) - await client.disconnect() - return ledgerResponse.result.ledger_index } +// Ledger index code additions - end /** - * This is our main function, it creates our application window, preloads the code we will need to communicate - * between the renderer Process and the main Process, loads a layout and performs the main logic + * Main function: create application window, preload the code to communicate + * between the renderer Process and the main Process, load a layout, + * and perform the main logic */ const createWindow = () => { - - // Creates the application window + // Create the application window const appWindow = new BrowserWindow({ width: 1024, height: 768, @@ -43,9 +40,8 @@ const createWindow = () => { }, }) - // Loads a layout + // Load a layout appWindow.loadFile(path.join(__dirname, 'view', 'template.html')) - return appWindow } diff --git a/_code-samples/build-a-desktop-wallet/js/2-async/index.js b/_code-samples/build-a-desktop-wallet/js/2-async/index.js index 57ef7daa76..53051eaab2 100644 --- a/_code-samples/build-a-desktop-wallet/js/2-async/index.js +++ b/_code-samples/build-a-desktop-wallet/js/2-async/index.js @@ -38,7 +38,7 @@ const main = async () => { await client.connect() // Subscribe client to 'ledger' events - // Reference: https://xrpl.org/subscribe.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe await client.request({ "command": "subscribe", "streams": ["ledger"] diff --git a/_code-samples/build-a-desktop-wallet/js/3-account/index.js b/_code-samples/build-a-desktop-wallet/js/3-account/index.js index 24f1bf910f..eb6e640d88 100644 --- a/_code-samples/build-a-desktop-wallet/js/3-account/index.js +++ b/_code-samples/build-a-desktop-wallet/js/3-account/index.js @@ -29,30 +29,30 @@ const main = async () => { await client.connect() - // Reference: https://xrpl.org/subscribe.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe await client.request({ "command": "subscribe", "streams": ["ledger"], "accounts": [address] }) - // Reference: https://xrpl.org/subscribe.html#ledger-stream + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream client.on("ledgerClosed", async (rawLedgerData) => { const ledger = prepareLedgerData(rawLedgerData) appWindow.webContents.send('update-ledger-data', ledger) }) // Initial Ledger Request -> Get account details on startup - // Reference: https://xrpl.org/ledger.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/ledger-methods/ledger 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 + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#transaction-streams client.on("transaction", async (transaction) => { - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoRequest = { "command": "account_info", "account": address, @@ -64,7 +64,7 @@ const main = async () => { }) // Initial Account Request -> Get account details on startup - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoResponse = await client.request({ "command": "account_info", "account": address, diff --git a/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js b/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js index 39d038f6b0..8ea4400858 100644 --- a/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js +++ b/_code-samples/build-a-desktop-wallet/js/4-tx-history/index.js @@ -30,14 +30,14 @@ const main = async () => { await client.connect() - // Reference: https://xrpl.org/subscribe.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe await client.request({ "command": "subscribe", "streams": ["ledger"], "accounts": [address] }) - // Reference: https://xrpl.org/subscribe.html#ledger-stream + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream client.on("ledgerClosed", async (rawLedgerData) => { const ledger = prepareLedgerData(rawLedgerData) appWindow.webContents.send('update-ledger-data', ledger) @@ -45,7 +45,7 @@ const main = async () => { // Wait for transaction on subscribed account and re-request account data client.on("transaction", async (transaction) => { - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoRequest = { "command": "account_info", "account": address, @@ -61,7 +61,7 @@ const main = async () => { }) // Initial Account Request -> Get account details on startup - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoResponse = await client.request({ "command": "account_info", "account": address, @@ -71,7 +71,7 @@ const main = async () => { appWindow.webContents.send('update-account-data', accountData) // Initial Transaction Request -> List account transactions on startup - // Reference: https://xrpl.org/account_tx.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx const txResponse = await client.request({ "command": "account_tx", "account": address diff --git a/_code-samples/build-a-desktop-wallet/js/5-password/index.js b/_code-samples/build-a-desktop-wallet/js/5-password/index.js index bc11ee477c..f8e0032b4f 100644 --- a/_code-samples/build-a-desktop-wallet/js/5-password/index.js +++ b/_code-samples/build-a-desktop-wallet/js/5-password/index.js @@ -51,6 +51,9 @@ const main = async () => { } const wallet = xrpl.Wallet.fromSeed(seed) + // For compatibility with seeds generated using secp256k1 (the old + // default algorithm), use the following instead: + // const wallet = xrpl.Wallet.fromSeed(seed, {algorithm: "secp256k1"}) const client = new xrpl.Client(TESTNET_URL) diff --git a/_code-samples/build-a-desktop-wallet/js/README.md b/_code-samples/build-a-desktop-wallet/js/README.md index 04af176e98..7b645c8d13 100644 --- a/_code-samples/build-a-desktop-wallet/js/README.md +++ b/_code-samples/build-a-desktop-wallet/js/README.md @@ -2,7 +2,7 @@ Build a non-custodial XRP Ledger wallet application in JavaScript that runs on the desktop using Electron. -For the full documentation, refer to the [Build a Wallet in JavaScript tutorial](https://xrpl.org/build-a-wallet-in-javascript.html). +For the full documentation, refer to the [Build a Desktop Wallet in JavaScript tutorial](https://xrpl.org/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript). ## TL;DR diff --git a/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js index 6c94ad1596..9ea3cd763e 100644 --- a/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js +++ b/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js @@ -3,7 +3,7 @@ const xrpl = require("xrpl"); // The rippled server and its APIs represent time as an unsigned integer. // This number measures the number of seconds since the "Ripple Epoch" of // January 1, 2000 (00:00 UTC). This is like the way the Unix epoch works, -// Reference: https://xrpl.org/basic-data-types.html +// Reference: https://xrpl.org/docs/references/protocol/data-types/basic-data-types#specifying-time const RIPPLE_EPOCH = 946684800; const prepareAccountData = (rawAccountData) => { diff --git a/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js index 2f6fb55023..08872175f3 100644 --- a/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js +++ b/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js @@ -14,7 +14,7 @@ const fernet = require("fernet"); * @returns {Promise} */ const initialize = async (client, wallet, appWindow) => { - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoResponse = await client.request({ "command": "account_info", "account": wallet.address, @@ -23,7 +23,7 @@ const initialize = async (client, wallet, appWindow) => { const accountData = prepareAccountData(accountInfoResponse.result.account_data) appWindow.webContents.send('update-account-data', accountData) - // Reference: https://xrpl.org/account_tx.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx const txResponse = await client.request({ "command": "account_tx", "account": wallet.address @@ -42,14 +42,14 @@ const initialize = async (client, wallet, appWindow) => { */ const subscribe = async (client, wallet, appWindow) => { - // Reference: https://xrpl.org/subscribe.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe await client.request({ "command": "subscribe", "streams": ["ledger"], "accounts": [wallet.address] }) - // Reference: https://xrpl.org/subscribe.html#ledger-stream + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/subscription-methods/subscribe#ledger-stream client.on("ledgerClosed", async (rawLedgerData) => { const ledger = prepareLedgerData(rawLedgerData) appWindow.webContents.send('update-ledger-data', ledger) @@ -57,7 +57,7 @@ const subscribe = async (client, wallet, appWindow) => { // Wait for transaction on subscribed account and re-request account data client.on("transaction", async (transaction) => { - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const accountInfoRequest = { "command": "account_info", "account": wallet.address, diff --git a/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js index 926946eedf..2372583c38 100644 --- a/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js +++ b/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js @@ -9,7 +9,7 @@ const xrpl = require("xrpl"); * @returns {Promise<*>} */ const sendXrp = async (paymentData, client, wallet) => { - // Reference: https://xrpl.org/submit.html#request-format-1 + // Reference: https://xrpl.org/docs/references/protocol/transactions/types/payment const paymentTx = { "TransactionType": "Payment", "Account": wallet.address, diff --git a/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js b/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js index 30d39344af..4441a2014d 100644 --- a/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js +++ b/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js @@ -39,7 +39,7 @@ async function checkDestination(accountData) { /** * Verify an account using a xrp-ledger.toml file. - * https://xrpl.org/xrp-ledger-toml.html#xrp-ledgertoml-file + * https://xrpl.org/docs/references/xrp-ledger-toml * * @param accountData * @returns {Promise<{domain: string, verified: boolean}>} @@ -89,7 +89,7 @@ async function verifyAccountDomain(accountData) { * @returns {Promise<{domain: string, verified: boolean}>} */ async function verify(accountAddress, client) { - // Reference: https://xrpl.org/account_info.html + // Reference: https://xrpl.org/docs/references/http-websocket-apis/public-api-methods/account-methods/account_info const request = { "command": "account_info", "account": accountAddress, diff --git a/_code-samples/build-a-desktop-wallet/js/package.json b/_code-samples/build-a-desktop-wallet/js/package.json index ff5ac0b9e3..f53d54daaa 100644 --- a/_code-samples/build-a-desktop-wallet/js/package.json +++ b/_code-samples/build-a-desktop-wallet/js/package.json @@ -1,6 +1,6 @@ { "name": "xrpl-javascript-desktop-wallet", - "version": "1.0.0", + "version": "1.1.0", "license": "MIT", "scripts": { "hello": "electron 0-hello/index.js", @@ -14,15 +14,15 @@ "domain-verification": "electron 8-domain-verification/index.js" }, "dependencies": { - "async": "^3.2.4", + "async": "^3.2.6", "fernet": "=0.3.3", - "node-fetch": "^2.6.9", - "pbkdf2-hmac": "^1.1.0", + "node-fetch": "^2.7.0", + "pbkdf2-hmac": "^1.2.1", "open": "^8.4.0", "toml": "^3.0.0", - "xrpl": "^4.3.0" + "xrpl": "^4.4.2" }, "devDependencies": { - "electron": "28.3.2" + "electron": "38.2.0" } } diff --git a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md index 93da2300c2..172ba0fa9c 100644 --- a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md +++ b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md @@ -59,28 +59,7 @@ In addition to the above features, you'll also learn a bit about Events, IPC (in 1. To initialize the project, create a file named `package.json` with the following content: -```json -{ - "name": "xrpl-javascript-desktop-wallet", - "version": "1.0.0", - "license": "MIT", - "scripts": { - "start": "electron ./index.js" - }, - "dependencies": { - "async": "^3.2.4", - "fernet": "^0.4.0", - "node-fetch": "^2.6.9", - "pbkdf2-hmac": "^1.1.0", - "open": "^8.4.0", - "toml": "^3.0.0", - "xrpl": "^3.0.0" - }, - "devDependencies": { - "electron": "22.3.24" - } -} -``` +{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/package.json" language="json" /%} Here we define the libraries our application will use in the `dependencies` section as well as shortcuts for running our application in the `scripts` section. @@ -94,70 +73,25 @@ application to work. 3. In the root folder, create an `index.js` file with the following content: -```javascript -const { app, BrowserWindow } = require('electron') - -const path = require('path') - -/** - * This is our main function, it creates our application window, preloads the code we will need to communicate - * between the renderer Process and the main Process, loads a layout and performs the main logic - */ -const createWindow = () => { - - // Creates the application window - const appWindow = new BrowserWindow({ - width: 1024, - height: 768 - }) - - // Loads a layout - appWindow.loadFile(path.join(__dirname, 'view', 'template.html')) - - return appWindow -} - -// Here we have to wait for the application to signal that it is ready -// to execute our code. In this case we just create a main window. -app.whenReady().then(() => { - createWindow() -}) -``` +{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/0-hello/index.js" language="js" /%} 4. Make a new folder named `view` in the root directory of the project. 5. Now, inside the `view` folder, add a `template.html` file with the following content: -```html - - +{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/0-hello/view/template.html" language="html" /%} - - - - - XRPL Wallet Tutorial (JavaScript / Electron) - - - -

Build a XRPL Wallet

- Hello world! - - - - -``` 6. Now, start the application with the following command: ```console npm run start ``` -{% admonition type="success" name="Tip" %}When you need to debug the application, you can open Developer Tools like in Chrome or Firefox by selecting "View / Toggle Developer Tools" from The application Menu or using a Shortcut ("Ctrl+Shift+I" on Windows or Linux, "Option+Command+I on Mac).{% /admonition %} +{% admonition type="success" name="Tip" %}When you need to debug the application, you can open Developer Tools by selecting "View / Toggle Developer Tools" from the application menu or using a keyboard shortcut (Ctrl+Shift+i on Windows or Linux; Option+Command+i on Mac).{% /admonition %} You should see a window appear that displays the text "Build a XRPL Wallet" and "Hello world!" -To run the reference application found in `_code-samples/build-a-desktop-wallet/desktop-js` for this step, run: +To run the reference application for this step, run: ```console npm run hello @@ -166,64 +100,24 @@ 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 {% repo-link path="_code-samples/build-a-desktop-wallet/js/" %}reference section{% /repo-link %} are numbered/prefixed with the respective step number: **Full code for this step:** -{% repo-link path="_code-samples/build-a-desktop-wallet/js/0_hello.js" %}`0-hello/0_hello.js`{% /repo-link %}, -{% repo-link path="_code-samples/build-a-desktop-wallet/js/view/0_hello.html" %}`0-hello/view/0_hello.html`{% /repo-link %}, +{% repo-link path="_code-samples/build-a-desktop-wallet/js/0-hello/index.js" %}`0-hello/index.js`{% /repo-link %}, +{% repo-link path="_code-samples/build-a-desktop-wallet/js/0-hello/view/template.html" %}`0-hello/view/template.html`{% /repo-link %}, ### 1. Ledger Index **Full code for this step:** -{% repo-link path="_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %}, -{% repo-link path="_code-samples/build-a-desktop-wallet/js/view/1_preload.js" %}`1-ledger-index/view/preload.js`{% /repo-link %}, -{% repo-link path="_code-samples/build-a-desktop-wallet/js/view/1_ledger-index.html" %}`1-ledger-index/view/template.html`{% /repo-link %}, -{% repo-link path="_code-samples/build-a-desktop-wallet/js/view/1_renderer.js" %}`1-ledger-index/view/renderer.js`{% /repo-link %}. +{% repo-link path="_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js" %}`1-ledger-index/index.js`{% /repo-link %}, +{% repo-link path="_code-samples/build-a-desktop-wallet/js/1-ledger-index/view/preload.js" %}`1-ledger-index/view/preload.js`{% /repo-link %}, +{% repo-link path="_code-samples/build-a-desktop-wallet/js/1-ledger-index/view/template.html" %}`1-ledger-index/view/template.html`{% /repo-link %}, +{% repo-link path="_code-samples/build-a-desktop-wallet/js/1-ledger-index/view/renderer.js" %}`1-ledger-index/view/renderer.js`{% /repo-link %}. -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: +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 application should look like this: ![Screenshot: Step 1, hello world equivalent](/docs/img/javascript-wallet-1.png) 1. Update `index.js` by adding the following snippet in the import section at the top of the file below the `path` import: -```javascript -const { app, BrowserWindow } = require('electron') - -const path = require('path') - -// Step 3 code additions - start -const xrpl = require("xrpl") - -const TESTNET_URL = "wss://s.altnet.rippletest.net:51233" - -/** - * This function creates a WebService client, which connects to the XRPL and fetches the latest ledger index. - * - * @returns {Promise} - */ -const getValidatedLedgerIndex = async () => { - const client = new xrpl.Client(TESTNET_URL) - - await client.connect() - - // Reference: https://xrpl.org/ledger.html#ledger - const ledgerRequest = { - "command": "ledger", - "ledger_index": "validated" - } - - const ledgerResponse = await client.request(ledgerRequest) - - await client.disconnect() - - return ledgerResponse.result.ledger_index -} -// Step 3 code additions - end - - -/** - * This is our main function, it creates our application window, preloads the code we will need to communicate - * between the renderer Process and the main Process, loads a layout and performs the main logic - */ -const createWindow = () => { -``` +{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/1-ledger-index/index.js" language="js" from="// Ledger index code additions - start" before="// Ledger index code additions - end" /%} This helper function does the following: It establishes a WebSocket connection to the XRP Ledger, calls the XRP Ledger API's [ledger method](../../../references/http-websocket-apis/public-api-methods/ledger-methods/ledger.md) and returns the ledger index from the response. We will wire up this function at the end of this step.