mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-22 20:55:50 +00:00
Migrate content syntax via script
The changes in this commit were auto-generated by running tool/migrate.sh Following this commit, the Dactyl build no longer works but the Redocly build (mostly) should.
This commit is contained in:
mDuo13
@@ -13,12 +13,12 @@ This tutorial demonstrates how to build a desktop wallet for the XRP Ledger usin
|
||||
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](get-started-using-javascript.html).
|
||||
- You are somewhat familiar with modern JavaScript programming and have completed the [Get Started Using JavaScript tutorial](../get-started/get-started-using-javascript.md).
|
||||
- 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]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/). 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`.
|
||||
You can find the complete source code for all of this tutorial's examples in the {% repo-link path="content/_code-samples/build-a-desktop-wallet/js/" %}code samples section of this website's repository{% /repo-link %}. 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`.
|
||||
|
||||
**Caution:** 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.
|
||||
|
||||
@@ -33,7 +33,7 @@ We will use the well-established [Electron Framework](https://www.electronjs.org
|
||||
|
||||
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.
|
||||
|
||||
@@ -41,13 +41,13 @@ 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](direct-xrp-payments.html), and providing feedback about the intended destination address, including:
|
||||
- Sending [direct XRP payments](../../concepts/payment-types/direct-xrp-payments.md), 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](xrp-ledger-toml.html#account-verification) associated with it.
|
||||
- If the address has a [verified domain name](../../references/xrp-ledger-toml.md#account-verification) associated with it.
|
||||
|
||||
The application in this tutorial _doesn't_ have the ability to send or trade [tokens](issued-currencies.html) or
|
||||
use other [payment types](payment-types.html) like [Escrow](https://xrpl.org/escrow.html) or [Payment Channels](https://xrpl.org/payment-channels.html). However, it provides a foundation
|
||||
The application in this tutorial _doesn't_ have the ability to send or trade [tokens](../../concepts/tokens/index.md) or
|
||||
use other [payment types](../../concepts/payment-types/index.md) like [Escrow](https://xrpl.org/escrow.html) or [Payment Channels](https://xrpl.org/payment-channels.html). 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.
|
||||
@@ -162,23 +162,23 @@ To run the reference application found in `content/_code-samples/build-a-desktop
|
||||
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-desktop-wallet/js/) are numbered/prefixed with the respective step number:
|
||||
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="content/_code-samples/build-a-desktop-wallet/js/" %}reference section{% /repo-link %} are numbered/prefixed with the respective step number:
|
||||
|
||||
**Full code for this step:**
|
||||
[`0-hello/0_hello.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/0_hello.js),
|
||||
[`0-hello/view/0_hello.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/0_hello.html),
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/0_hello.js" %}`0-hello/0_hello.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/0_hello.html" %}`0-hello/view/0_hello.html`{% /repo-link %},
|
||||
|
||||
### 1. Ledger Index
|
||||
|
||||
**Full code for this step:**
|
||||
[`1-ledger-index/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/1_ledger-index.js),
|
||||
[`1-ledger-index/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/1_preload.js),
|
||||
[`1-ledger-index/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/1_ledger-index.html),
|
||||
[`1-ledger-index/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/1_renderer.js).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/1_preload.js" %}`1-ledger-index/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/1_ledger-index.html" %}`1-ledger-index/view/template.html`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/1_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:
|
||||
|
||||
|
||||
|
||||
|
||||
1. Update `index.js` by adding the following snippet in the import section at the top of the file below the `path` import:
|
||||
|
||||
@@ -224,7 +224,7 @@ const getValidatedLedgerIndex = async () => {
|
||||
const createWindow = () => {
|
||||
```
|
||||
|
||||
This helper function does the following: It establishes a WebSocket connection to the XRP Ledger, calls the XRP Ledger API's [ledger method](ledger.html) and returns the ledger index from the response. We will wire up this function at the end of this step.
|
||||
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.
|
||||
|
||||
2. In order to attach a preloader script, modify the `createWindow` method in `index.js` by adding the following code:
|
||||
|
||||
@@ -340,14 +340,14 @@ npm run ledger-index
|
||||
### 2. Show Ledger Updates by using WebSocket subscriptions
|
||||
|
||||
**Full code for this step:**
|
||||
[`2-async/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/2_async-subscribe.js),
|
||||
[`2-async/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/2_preload.js),
|
||||
[`2-async/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/2_renderer.js),
|
||||
[`2-async/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/2_async.html).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/2_async-subscribe.js" %}`2-async/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/2_preload.js" %}`2-async/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/2_renderer.js" %}`2-async/view/renderer.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/2_async.html" %}`2-async/view/template.html`{% /repo-link %}.
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
1. In `index.js` remove the `getValidatedLedgerIndex` function.
|
||||
|
||||
@@ -446,22 +446,22 @@ npm run async
|
||||
### 3. Display an Account
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/3_helpers.js).
|
||||
[`3-account/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/3_account.js),
|
||||
[`3-account/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/3_preload.js),
|
||||
[`3-account/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/3_renderer.js),
|
||||
[`3-account/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/3_account.html).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/3_account.js" %}`3-account/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/3_preload.js" %}`3-account/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/3_renderer.js" %}`3-account/view/renderer.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/3_account.html" %}`3-account/view/template.html`{% /repo-link %}.
|
||||
|
||||
We now have a permanent connection to the XRPL and some code to bring the delivered data to life on our screen, it's time to add some "wallet" functionality by managing an individual account.
|
||||
|
||||
We will ask the user for address of the account to monitor by using a HTML dialog element. We will furthermore refactor the application by encapsulating some functionality in a library. After finishing this step the application should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
1. In the project root, create a new directory named `library`. Inside this directory, create a file `3_helpers.js` with the following content:
|
||||
|
||||
`3_helpers.js`
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/library/3_helpers.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" language="js" /%}
|
||||
|
||||
Here we define three utility functions that will transform data we receive from the ledger into flat value objects for easy digestion in the frontend code. As we progress in this tutorial, we will keep this pattern of adding functionality by adding files that are prefixed by the step number.
|
||||
|
||||
@@ -631,7 +631,7 @@ onEnterAccountAddress: (address) => {
|
||||
|
||||
6. To incorporate the refactored markup, handle the HTML dialog element and well as the new account data section replace the contents of `view/renderer.js` with the following code:
|
||||
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/3-account/view/renderer.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/3-account/view/renderer.js" language="js" /%}
|
||||
|
||||
The parts at the beginning and end are totally new, but the section in the middle is _almost_ the same as before. The difference is that the names of a few fields have changed, since we're now passing them from `prepareLedgerData(...)`. For example `ledger.ledger_time` is now `ledger.ledgerCloseTime` instead.
|
||||
|
||||
@@ -641,7 +641,7 @@ Now you need an XRPL account address to monitor. If you already have one or know
|
||||
npm run start
|
||||
```
|
||||
|
||||
If you need a Testnet address, [you can get one from the faucet](xrp-testnet-faucet.html). Then you can paste that address into the [Transaction Sender](tx-sender.html) to send XRP transactions that your app can see.
|
||||
If you need a Testnet address, [you can get one from the faucet](/resources/dev-tools/xrp-faucets). Then you can paste that address into the [Transaction Sender](/resources/dev-tools/tx-sender) to send XRP transactions that your app can see.
|
||||
|
||||
On, startup, the application should display a simple dialog prompting the user for an XRPL account address. After entering the address the application should display some basic information about that account and about the ledger.
|
||||
|
||||
@@ -654,20 +654,20 @@ npm run account
|
||||
### 4. Show Account's Transactions
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js),
|
||||
[`library/4_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js),
|
||||
[`4-tx-history/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/4_tx-history.js),
|
||||
[`4-tx-history/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/4_tx-preload.js),
|
||||
[`4-tx-history/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/4_tx-renderer.js),
|
||||
[`4-tx-history/view/index.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/4_tx-history.html).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" %}`library/4_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/4_tx-history.js" %}`4-tx-history/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/4_tx-preload.js" %}`4-tx-history/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/4_tx-renderer.js" %}`4-tx-history/view/renderer.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/4_tx-history.html" %}`4-tx-history/view/index.html`{% /repo-link %}.
|
||||
|
||||
At this point, our wallet shows the account's balance getting updated, but doesn't give us any clue about how this state came about, namely the actual transactions that caused the updates. So, our next step is to display the account's up to date transaction history using subscriptions once again:
|
||||
|
||||
|
||||
|
||||
|
||||
1. In the `library` folder, add a new file `4_helpers.js`. Then add the following helper function to that file:
|
||||
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/library/4_helpers.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" language="js" /%}
|
||||
|
||||
2. Now, in `index.js`, require the new helper function at the bottom of the import section like so:
|
||||
|
||||
@@ -820,17 +820,17 @@ npm run tx-history
|
||||
### 5. Saving the Private Keys with a Password
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js).
|
||||
[`library/4_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js).
|
||||
[`library/5_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js).
|
||||
[`5-password/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/5_password.js).
|
||||
[`5-password/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/5_tx-preload.js).
|
||||
[`5-password/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/5_password.html).
|
||||
[`5-password/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/5_tx-renderer.js).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" %}`library/4_helpers.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js" %}`library/5_helpers.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/5_password.js" %}`5-password/index.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/5_tx-preload.js" %}`5-password/view/preload.js`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/5_password.html" %}`5-password/view/template.html`{% /repo-link %}.
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/5_tx-renderer.js" %}`5-password/view/renderer.js`{% /repo-link %}.
|
||||
|
||||
After finishing this step the application should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
By now we always query the user for an account address at application startup. We more or less have a monitoring tool for accounts that queries publicly available data. Because we want to have real wallet functionality including sending XRP, we will have to deal with private keys and seeds.
|
||||
|
||||
@@ -838,7 +838,7 @@ In this step we will query the user for a seed and a password they can use to ac
|
||||
|
||||
1. In the `library` folder, add a new file `5_helpers.js` with the following content:
|
||||
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/library/5_helpers.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js" language="js" /%}
|
||||
|
||||
2. Modify the import section at the top of `index.js` to look like this:
|
||||
|
||||
@@ -1069,27 +1069,27 @@ npm run password
|
||||
### 6. Styling
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js),
|
||||
[`library/4_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js),
|
||||
[`library/5_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js),
|
||||
[`6-styling/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/6_styling.js),
|
||||
[`6-styling/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/6_tx-preload.js),
|
||||
[`6-styling/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/6_styling.html),
|
||||
[`6-styling/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/6_tx-renderer.js),
|
||||
[`bootstrap/bootstrap.bundle.min.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.js),
|
||||
[`bootstrap/bootstrap.min.css`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.css),
|
||||
[`bootstrap/custom.css`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/custom.css),
|
||||
[`bootstrap/XRPLedger_DevPortal-white.svg`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/XRPLedger_DevPortal-white.svg).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" %}`library/4_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js" %}`library/5_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/6_styling.js" %}`6-styling/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/6_tx-preload.js" %}`6-styling/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/6_styling.html" %}`6-styling/view/template.html`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/6_tx-renderer.js" %}`6-styling/view/renderer.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.js" %}`bootstrap/bootstrap.bundle.min.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.css" %}`bootstrap/bootstrap.min.css`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/custom.css" %}`bootstrap/custom.css`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/XRPLedger_DevPortal-white.svg" %}`bootstrap/XRPLedger_DevPortal-white.svg`{% /repo-link %}.
|
||||
|
||||
After finishing this step the application should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
1. In the project root, create a new folder `bootstrap` and add the following files into that directory:
|
||||
[`bootstrap.bundle.min.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.js),
|
||||
[`bootstrap.min.css`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.css),
|
||||
[`custom.css`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/custom.css),
|
||||
[`XRPLedger_DevPortal-white.svg`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/bootstrap/XRPLedger_DevPortal-white.svg)
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.js" %}`bootstrap.bundle.min.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/bootstrap.bundle.min.css" %}`bootstrap.min.css`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/custom.css" %}`custom.css`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/bootstrap/XRPLedger_DevPortal-white.svg" %}`XRPLedger_DevPortal-white.svg`{% /repo-link %}
|
||||
|
||||
2. Change the content of `view/template.html` to be the following code:
|
||||
|
||||
@@ -1232,23 +1232,23 @@ npm run styling
|
||||
### 7. Send XRP
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js),
|
||||
[`library/4_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js),
|
||||
[`library/5_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js),
|
||||
[`library/6_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/6_helpers.js),
|
||||
[`library/7_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js),
|
||||
[`7-send-xrp/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/7_send-xrp.js),
|
||||
[`7-send-xrp/view/preload.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/7_preload.js),
|
||||
[`7-send-xrp/view/renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/7_renderer.js),
|
||||
[`7-send-xrp/view/template.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/7_send-xrp.html).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" %}`library/4_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js" %}`library/5_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/6_helpers.js" %}`library/6_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js" %}`library/7_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/7_send-xrp.js" %}`7-send-xrp/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/7_preload.js" %}`7-send-xrp/view/preload.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/7_renderer.js" %}`7-send-xrp/view/renderer.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/7_send-xrp.html" %}`7-send-xrp/view/template.html`{% /repo-link %}.
|
||||
|
||||
Up until now we have enabled our app to query and display data from the XRPL. Now it's time to actively participate in the ledger by enabling our application to send transactions. For now, we can stick to sending direct XRP payments because there are more complexities involved in sending issued tokens. After finishing this step the application should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
1. Create the file `library/7_helpers.js` and add the following contents:
|
||||
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/library/7_helpers.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js" language="js" /%}
|
||||
|
||||
|
||||
(There was no `6-helpers.js`, so don't worry!)
|
||||
@@ -1378,32 +1378,32 @@ npm run send-xrp
|
||||
### 8. Domain Verification and Polish
|
||||
|
||||
**Full code for this step:**
|
||||
[`library/3_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js),
|
||||
[`library/4_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js),
|
||||
[`library/5_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js),
|
||||
[`library/6_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/6_helpers.js),
|
||||
[`library/7_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js),
|
||||
[`library/8_helpers.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js),
|
||||
[`8-domain-verification/index.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/8_domain-verification.js),
|
||||
[`8-domain-verification/view/8_prelaod.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/8_preload.js),
|
||||
[`8-domain-verification/view/8_domain-verification.html`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/8_domain-verification.html),
|
||||
[`8-domain-verification/view/8_renderer.js`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-desktop-wallet/js/view/8_renderer.js).
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/3_helpers.js" %}`library/3_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/4_helpers.js" %}`library/4_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/5_helpers.js" %}`library/5_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/6_helpers.js" %}`library/6_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/7_helpers.js" %}`library/7_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js" %}`library/8_helpers.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/8_domain-verification.js" %}`8-domain-verification/index.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/8_preload.js" %}`8-domain-verification/view/8_prelaod.js`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/8_domain-verification.html" %}`8-domain-verification/view/8_domain-verification.html`{% /repo-link %},
|
||||
{% repo-link path="content/_code-samples/build-a-desktop-wallet/js/view/8_renderer.js" %}`8-domain-verification/view/8_renderer.js`{% /repo-link %}.
|
||||
|
||||
One of the biggest shortcomings of the wallet app from the previous step is that it doesn't provide a lot of protections or feedback for users to save them from human error and scams. These sorts of protections are extra important when dealing with the cryptocurrency space because decentralized systems like the XRP Ledger don't have an admin or support team one can ask to cancel or refund a payment if you made a mistake such as sending it to the wrong address.
|
||||
|
||||
This step shows how to add some checks on destination addresses to warn the user before sending XRP.
|
||||
|
||||
One type of check we could make is to verify the domain name associated with an XRP Ledger address; this is called [account domain verification](xrp-ledger-toml.html#account-verification). When an account's domain is verified, we can could show it like this:
|
||||
One type of check we could make is to verify the domain name associated with an XRP Ledger address; this is called [account domain verification](../../references/xrp-ledger-toml.md#account-verification). When an account's domain is verified, we can could show it like this:
|
||||
|
||||
|
||||
|
||||
|
||||
1. In the `library` folder, add a new file `8_helpers.js`. Then add the following contents to that file:
|
||||
|
||||
{{ include_code("_code-samples/build-a-desktop-wallet/js/library/8_helpers.js", language="js") }}
|
||||
{% code-snippet file="/_code-samples/build-a-desktop-wallet/js/library/8_helpers.js" language="js" /%}
|
||||
|
||||
The code in `8_helpers.js` looks up the account on the ledger by sending an [`account_info`](account_info.html) request.
|
||||
The code in `8_helpers.js` looks up the account on the ledger by sending an [`account_info`](../../references/http-websocket-apis/public-api-methods/account-methods/account_info.md) request.
|
||||
|
||||
If the account does exist, the code checks for the [`lsfDisallowXRP` flag](accountroot.html#accountroot-flags).
|
||||
If the account does exist, the code checks for the [`lsfDisallowXRP` flag](../../references/protocol/ledger-data/ledger-entry-types/accountroot.md#accountroot-flags).
|
||||
|
||||
2. Import the new helper function in `index.js`:
|
||||
|
||||
@@ -1520,7 +1520,7 @@ npm run domain-verification
|
||||
|
||||
Congratulations, you now have created your own wallet application! In completing this tutorial, you've not only learned how to interact with the XRP Ledger, but also which challenges this provokes when building a user facing application. So let's do a recap of what you have accomplished:
|
||||
|
||||
|
||||
|
||||
|
||||
0. First you set up the project and created a basic electron application.
|
||||
1. In Step 1 you did your first ledger query and had the application display the latest closed ledger index, using Electron's inter-process-communication.
|
||||
|
||||
Reference in New Issue
Block a user