ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 12:15:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ripple-lib samples to 1.10.0

Browse Source 
- Removes lodash dependecy for web version
- Uses the new generateFaucetWallet() API method
- Make 'issue a token' code capable of running in-browser or in Node.js
  without modification
This commit is contained in:
mDuo13
2021-08-24 14:38:07 -07:00
parent cff0fcc716
commit d6e06ae140
18 changed files with 52 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/_code-samples/issue-a-token/js/README.md
View File

@@ -2,6 +2,6 @@
This code demonstrates how to issue a (fungible) token on the XRP Ledger. For a detailed explanation, see <https://xrpl.org/issue-a-fungible-token.html>. This code demonstrates how to issue a (fungible) token on the XRP Ledger. For a detailed explanation, see <https://xrpl.org/issue-a-fungible-token.html>.
The code is designed to run in-browser by loading `demo.html` and watching the console output. To run it in Node.js, you must uncomment three `require()` lines towards the top of `issue-a-token.js` and use your preferred package manager (such as `yarn` or `npm`) to install the dependencies. The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).
In both cases you also need [the `submit-and-verify.js` code from another folder of this repository](../submit-and-verify/). It should already be in the right place if you cloned or download an archive of the repo. In both cases you also need [the `submit-and-verify.js` code from another folder of this repository](../submit-and-verify/). It should already be in the right place if you cloned or download an archive of the repo.

5
content/_code-samples/issue-a-token/js/demo.html
View File

@@ -3,9 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Code Sample - Issue a Token</title> <title>Code Sample - Issue a Token</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script> <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://unpkg.com/ripple-lib@1.9.8/build/ripple-latest-min.js"></script> <script type="application/javascript" src="../../submit-and-verify/submit-and-verify.js"></script>
<script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
<script type="application/javascript" src="issue-a-token.js"></script> <script type="application/javascript" src="issue-a-token.js"></script>
</head> </head>
<body>Open your browser's console (F12) to see the logs.</body> <body>Open your browser's console (F12) to see the logs.</body>

39
content/_code-samples/issue-a-token/js/issue-a-token.js
View File

@@ -1,11 +1,13 @@
// Stand-alone code sample for the "issue a token" tutorial: // Stand-alone code sample for the "issue a token" tutorial:
// https://xrpl.org/issue-a-fungible-token.html // https://xrpl.org/issue-a-fungible-token.html
// Uncomment these dependencies for Node.js. In browsers, use <script> tags as // Dependencies for Node.js.
// in the example demo.html. // In browsers, use <script> tags as in the example demo.html.
// const ripple = require('ripple-lib') if (typeof module !== "undefined") {
// const fetch = require('node-fetch') // gotta use var here because const/let are block-scoped to the if statement.
// const submit_and_verify = require('../submit-and-verify/submit-and-verify.js').submit_and_verify var ripple = require('ripple-lib')
var submit_and_verify = require('../../submit-and-verify/submit-and-verify.js').submit_and_verify
}
// Connect --------------------------------------------------------------------- // Connect ---------------------------------------------------------------------
async function main() { async function main() {
@@ -14,32 +16,13 @@ async function main() {
await api.connect() await api.connect()
// Get credentials from the Testnet Faucet ----------------------------------- // Get credentials from the Testnet Faucet -----------------------------------
// This doesn't technically need to happen after you call api.connect() but
// it's convenient to do here.
async function get_faucet_address() {
const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
const faucet_options = {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: '{}'
}
const response = await fetch(faucet_url, faucet_options)
if (!response.ok) {
throw `Faucet returned an error: ${data.error}`
}
const data = await response.json()
return data
}
console.log("Requesting addresses from the Testnet faucet...") console.log("Requesting addresses from the Testnet faucet...")
const hot_data = await get_faucet_address() const hot_data = await api.generateFaucetWallet()
const hot_address = hot_data.account.address const hot_address = hot_data.account.classicAddress
const hot_secret = hot_data.account.secret const hot_secret = hot_data.account.secret
const cold_data = await get_faucet_address() const cold_data = await api.generateFaucetWallet()
const cold_address = cold_data.account.address const cold_address = cold_data.account.classicAddress
const cold_secret = cold_data.account.secret const cold_secret = cold_data.account.secret
console.log("Waiting until we have a validated starting sequence number...") console.log("Waiting until we have a validated starting sequence number...")

3
content/_code-samples/issue-a-token/js/package.json
View File

@@ -1,6 +1,5 @@
{ {
"dependencies": { "dependencies": {
"node-fetch": "^2.6.1", "ripple-lib": "^1.10.0"
"ripple-lib": "^1.9.8"
} }
} }

8
content/_code-samples/issue-a-token/js/yarn.lock
View File

@@ -494,10 +494,10 @@ ripple-lib-transactionparser@0.8.2:
bignumber.js "^9.0.0" bignumber.js "^9.0.0"
lodash "^4.17.15" lodash "^4.17.15"
ripple-lib@^1.9.8: ripple-lib@^1.10.0:
version "1.9.8" version "1.10.0"
resolved "https://registry.yarnpkg.com/ripple-lib/-/ripple-lib-1.9.8.tgz#ff70ec13512531f63f25a560f3683e3a66afc671" resolved "https://registry.yarnpkg.com/ripple-lib/-/ripple-lib-1.10.0.tgz#e41aaf17d5c6e6f8bcc8116736ac108ff3d6b810"
integrity sha512-86wAP4GD6ZVMHIZeqrzn9m8BZSWSpMr06ULaAKNZbN6mxvh7SwcabJjcINRZNpI73Sb3oibWoOsCQ+Vf64WSTA== integrity sha512-Cg2u73UybfM1PnzcuLt5flvLKZn35ovdIp+1eLrReVB4swuRuUF/SskJG9hf5wMosbvh+E+jZu8A6IbYJoyFIA==
dependencies: dependencies:
"@types/lodash" "^4.14.136" "@types/lodash" "^4.14.136"
"@types/ws" "^7.2.0" "@types/ws" "^7.2.0"

5
content/_code-samples/require-destination-tags/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Require Destination Tags Sample Code
This code demonstrates how to configure your XRP Ledger account to require destination tags. For a detailed explanation, see <https://xrpl.org/require-destination-tags.html>.
The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).

3
content/_code-samples/require-destination-tags/demo.html
View File

@@ -2,8 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script> <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
<script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script> <script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
<script type="application/javascript" src="require-destination-tags.js"></script> <script type="application/javascript" src="require-destination-tags.js"></script>
</head> </head>

5
content/_code-samples/require-destination-tags/package.json Normal file
View File

@@ -0,0 +1,5 @@
{
"dependencies": {
"ripple-lib": "^1.10.0"
}
}

26
content/_code-samples/require-destination-tags/require-destination-tags.js
View File

@@ -1,24 +1,20 @@
// Stand-alone code sample for the "Require Destination Tags" tutorial:
// https://xrpl.org/require-destination-tags.html
// Dependencies for Node.js.
// In browsers, use <script> tags as in the example demo.html.
if (typeof module !== "undefined") {
// gotta use var here because const/let are block-scoped to the if statement.
var ripple = require('ripple-lib')
}
// Connect ------------------------------------------------------------------- // Connect -------------------------------------------------------------------
api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'}) api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'})
api.connect() api.connect()
api.on('connected', async () => { api.on('connected', async () => {
// Get credentials from the Testnet Faucet ----------------------------------- // Get credentials from the Testnet Faucet -----------------------------------
// This doesn't technically need to happen after you call api.connect() but const data = await api.generateFaucetWallet()
// it's convenient to do here because we can use await on the faucet call and
// to wait for the new account to be funded.
const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
const response = await fetch(faucet_url, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: '{}'
})
if (!response.ok) {
throw `Faucet returned an error: ${data.error}`
}
const data = await response.json()
const address = data.account.address const address = data.account.address
const secret = data.account.secret const secret = data.account.secret

3
content/_code-samples/send-xrp/demo.html
View File

@@ -3,8 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Code Sample - Send XRP</title> <title>Code Sample - Send XRP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script> <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
<script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script> <script type="application/javascript" src="../submit-and-verify/submit-and-verify.js"></script>
<script type="application/javascript" src="send-xrp.js"></script> <script type="application/javascript" src="send-xrp.js"></script>
</head> </head>

16
content/_code-samples/send-xrp/send-xrp.js
View File

@@ -9,21 +9,7 @@ api.connect()
api.on('connected', async () => { api.on('connected', async () => {
// Get credentials from the Testnet Faucet ----------------------------------- // Get credentials from the Testnet Faucet -----------------------------------
// This doesn't technically need to happen after you call api.connect() but const data = await api.generateFaucetWallet()
// it's convenient to do here because we can use await on the faucet call and
// to wait for the new account to be funded.
const faucet_url = "https://faucet.altnet.rippletest.net/accounts"
const response = await fetch(faucet_url, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: '{}'
})
if (!response.ok) {
throw `Faucet returned an error: ${data.error}`
}
const data = await response.json()
address = data.account.address address = data.account.address
secret = data.account.secret secret = data.account.secret

8
content/tutorials/get-started/get-started-using-node-js.md
View File

@@ -256,22 +256,20 @@ See [Reliable Transaction Submission](reliable-transaction-submission.html) for
# RippleAPI in Web Browsers # RippleAPI in Web Browsers
RippleAPI can also be used in a web browser. To access it, load [Lodash](https://lodash.com/) and [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in your site's HTML. For example: RippleAPI can also be used in a web browser. To access it, load [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in your site's HTML. For example:
<!-- MULTICODE_BLOCK_START --> <!-- MULTICODE_BLOCK_START -->
_unpkg_ _unpkg_
```html ```html
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script> <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
``` ```
_jsDelivr_ _jsDelivr_
```html ```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
``` ```
<!-- MULTICODE_BLOCK_END --> <!-- MULTICODE_BLOCK_END -->

7
content/tutorials/get-started/get-started.md
View File

@@ -16,7 +16,6 @@ The following example gets the latest [ledger version](ledgers.html) and a list
**Tip:** If you can, open your browser's Developer Tools by pressing **F12**. The "Console" tab provides a native JavaScript console and can give insight into what code is running on any webpage. <!-- SPELLING_IGNORE: f12 --> **Tip:** If you can, open your browser's Developer Tools by pressing **F12**. The "Console" tab provides a native JavaScript console and can give insight into what code is running on any webpage. <!-- SPELLING_IGNORE: f12 -->
<!-- ripple-lib & prerequisites --> <!-- ripple-lib & prerequisites -->
{{currentpage.lodash_tag}}
{{currentpage.ripple_lib_tag}} {{currentpage.ripple_lib_tag}}
<!-- JS_EDITOR_START step2 --> <!-- JS_EDITOR_START step2 -->
@@ -101,14 +100,12 @@ Try editing the code above to do something different:
## Setup Steps ## Setup Steps
This page has the necessary prerequisites already loaded, but you can access the XRP Ledger from **any webpage** if you load [Lodash](https://lodash.com/) and [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in that page's HTML. For example: This page has the necessary prerequisites already loaded, but you can access the XRP Ledger from **any webpage** if you load [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in that page's HTML. For example:
```html ```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script>
<script src="https://unpkg.com/ripple-lib@1.9.1/build/ripple-latest-min.js"></script>
``` ```
<!-- SPELLING_IGNORE: lodash -->
## Further Reading ## Further Reading

4
content/tutorials/get-started/monitor-incoming-payments-with-websocket.ja.md
View File

@@ -76,7 +76,7 @@ const socket = new WebSocket('ws://localhost:6006')
例: 例:
{{ start_step("Connect") }} {{ start_step("Connect") }}
<button id="connect-button" class="btn btn-primary">Connect</button> <button id="connect-socket-button" class="btn btn-primary">Connect</button>
<strong>Connection status:</strong> <strong>Connection status:</strong>
<span id="connection-status">Not connected</span> <span id="connection-status">Not connected</span>
<h5>Console:</h5> <h5>Console:</h5>
@@ -85,7 +85,7 @@ const socket = new WebSocket('ws://localhost:6006')
<script type="application/javascript"> <script type="application/javascript">
let socket; let socket;
$("#connect-button").click((event) => { $("#connect-socket-button").click((event) => {
socket = new WebSocket('wss://s.altnet.rippletest.net:51233') socket = new WebSocket('wss://s.altnet.rippletest.net:51233')
socket.addEventListener('open', (event) => { socket.addEventListener('open', (event) => {
// This callback runs when the connection is open // This callback runs when the connection is open

4
content/tutorials/get-started/monitor-incoming-payments-with-websocket.md
View File

@@ -74,7 +74,7 @@ const socket = new WebSocket('ws://localhost:6006')
Example: Example:
{{ start_step("Connect") }} {{ start_step("Connect") }}
<button id="connect-button" class="btn btn-primary">Connect</button> <button id="connect-socket-button" class="btn btn-primary">Connect</button>
<strong>Connection status:</strong> <strong>Connection status:</strong>
<span id="connection-status">Not connected</span> <span id="connection-status">Not connected</span>
<h5>Console:</h5> <h5>Console:</h5>
@@ -83,7 +83,7 @@ Example:
<script type="application/javascript"> <script type="application/javascript">
let socket; let socket;
$("#connect-button").click((event) => { $("#connect-socket-button").click((event) => {
socket = new WebSocket('wss://s.altnet.rippletest.net:51233') socket = new WebSocket('wss://s.altnet.rippletest.net:51233')
socket.addEventListener('open', (event) => { socket.addEventListener('open', (event) => {
// This callback runs when the connection is open // This callback runs when the connection is open

1
dactyl-config.yml
View File

@@ -62,7 +62,6 @@ default_keys: &defaults
# Hover icon markup for permalinking headers # Hover icon markup for permalinking headers
hover_anchors: <i class="fa fa-link"></i> hover_anchors: <i class="fa fa-link"></i>
# Script tags used in a variety of tools & examples. # Script tags used in a variety of tools & examples.
lodash_tag: '<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>'
ripple_lib_tag: '<script type="application/javascript" src="assets/js/ripple-lib-1.10.0.min.js"></script>' ripple_lib_tag: '<script type="application/javascript" src="assets/js/ripple-lib-1.10.0.min.js"></script>'
targets: targets:

1
template/base.html.jinja
View File

@@ -156,7 +156,6 @@ $(document).ready(() => {
{% if currentpage.embed_ripple_lib %} {% if currentpage.embed_ripple_lib %}
<!-- ripple-lib & prerequisites --> <!-- ripple-lib & prerequisites -->
{{currentpage.lodash_tag}}
{{currentpage.ripple_lib_tag}} {{currentpage.ripple_lib_tag}}
{% endif %} {% endif %}

1
template/page-rpc-tool.html.jinja
View File

@@ -99,7 +99,6 @@
{% endblock %} {% endblock %}
{% block endbody %} {% block endbody %}
{{currentpage.lodash_tag}}
{{currentpage.ripple_lib_tag}} {{currentpage.ripple_lib_tag}}
<script type='text/javascript' src='assets/js/rpc-tool.js'></script> <script type='text/javascript' src='assets/js/rpc-tool.js'></script>