# Build a Desktop Wallet in JavaScript This tutorial demonstrates how to build a desktop wallet for the XRP Ledger using the JavaScript programming language, the [Electron Framework](https://www.electronjs.org/) and various libraries. This application can be used as a starting point for building a more complex and powerful application, as a reference point for building comparable apps, or as a learning experience to better understand how to integrate XRP Ledger functionality into a larger project. ## Prerequisites To complete this tutorial, you should meet the following requirements: - You have [Node.js](https://nodejs.org/) 14+ installed. - You are somewhat familiar with modern JavaScript programming and have completed the [Get Started Using JavaScript tutorial](/ja/docs/tutorials/javascript/build-apps/get-started). - You have some understanding of the XRP Ledger, its capabilities, and of cryptocurrency in general. Ideally you have completed the [Basic XRPL guide](https://learn.xrpl.org/). ### Source Code You can find the complete source code for all of this tutorial's examples in the code samples section of this website's repository. After a `npm install` in this directory you can run the application for each step as described in the `scripts` section of `package.json`, e.g, `npm run ledger-index`. Be careful if you copy-and-paste the source code from these directly from these files. The sample code is split up into different files per step, so some shared imports and files are in different directories in the examples. This especially applies to the `library`, `bootstrap`, and `WALLET_DIR` contents. ## Rationale This tutorial takes you through the process of creating an XRP Wallet application from scratch. It begins with a "Hello World"-like example with minimal functionality, and adds more features in each step. ## Goals At the end of this tutorial, you will have built a JavaScript Wallet application that looks something like this:  The look and feel of the user interface should be roughly the same regardless of operating system, as the Electron Framework allows us to write cross-platform applications that are styled with HTML and CSS just like a web-based application. The application we are going to build here will be capable of the following: - Showing updates to the XRP Ledger in real-time. - Viewing any XRP Ledger account's activity "read-only" including showing how much XRP was delivered by each transaction. - Sending [direct XRP payments](/ja/docs/concepts/payment-types/direct-xrp-payments), and providing feedback about the intended destination address, including: - Whether the intended destination already exists in the XRP Ledger, or the payment would have to fund its creation. - If the address doesn't want to receive XRP (**Disallow XRP** flag enabled). - If the address has a [verified domain name](/ja/docs/references/xrp-ledger-toml#account-verification) associated with it. The application in this tutorial *doesn't* have the ability to send or trade [tokens](/ja/docs/concepts/tokens) or use other [payment types](/ja/docs/concepts/payment-types) like [Escrow](/ja/docs/concepts/payment-types/escrow) or [Payment Channels](/ja/docs/concepts/payment-types/payment-channels). However, it provides a foundation that you can implement those and other features on top of. In addition to the above features, you'll also learn a bit about Events, IPC (inter-process-communication) and asynchronous (async) code in JavaScript. ## Steps ### 0. Project setup - Hello World 1. To initialize the project, create a file named `package.json` with the following content: { "name": "xrpl-javascript-desktop-wallet", "version": "1.1.0", "license": "MIT", "scripts": { "hello": "electron 0-hello/index.js", "ledger-index": "electron 1-ledger-index/index.js", "async": "electron 2-async/index.js", "account": "electron 3-account/index.js", "tx-history": "electron 4-tx-history/index.js", "password": "electron 5-password/index.js", "styling": "electron 6-styling/index.js", "send-xrp": "electron 7-send-xrp/index.js", "domain-verification": "electron 8-domain-verification/index.js" }, "dependencies": { "async": "^3.2.6", "fernet": "=0.3.3", "node-fetch": "^2.7.0", "pbkdf2-hmac": "^1.2.1", "open": "^8.4.0", "toml": "^3.0.0", "xrpl": "^4.4.2" }, "devDependencies": { "electron": "38.2.0" } } 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. 1. After you create your package.json file, install those dependencies by running the following command: ```console npm install ``` This installs the Electron Framework, the xrpl.js client library and a couple of helpers we are going to need for our application to work. 1. In the root folder, create an `index.js` file with the following content: const { app, BrowserWindow } = require('electron') const path = require('path') /** * 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 = () => { // Create the application window const appWindow = new BrowserWindow({ width: 1024, height: 768 }) // Load 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() }) 1. Make a new folder named `view` in the root directory of the project. 2. Now, inside the `view` folder, add a `template.html` file with the following content: