ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-22 04:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use filter for interactive tutorial steps

Browse Source
This commit is contained in:
mDuo13
2019-05-06 13:08:23 -07:00
parent 77a7093249
commit b2bfac86f1
5 changed files with 165 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
content/tutorials/use-simple-xrp-payments/monitor-incoming-payments-with-websocket.md
View File

@@ -57,37 +57,31 @@ const socket = new WebSocket('ws://localhost:6006')
Example:
<div class="interactive-block" id="interactive-connect">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item disabled current bc-connect"><a href="#interactive-connect">Connect</a></li>
<!-- TODO: breadcrumb items for each step -->
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="connect-button" class="btn btn-primary">Connect</button>
<div>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<h5>Console:</h5>
<div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
</div>
</div>
</div>
{{ start_step("Connect") }}
<button id="connect-button" class="btn btn-primary">Connect</button>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<h5>Console:</h5>
<div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
{{ end_step() }}
<script type="application/javascript">
const socket = new WebSocket('wss://s1.ripple.com');
socket.addEventListener('open', (event) => {
// This callback runs when the connection is open
writeToConsole("#monitor-console-connect", "Connected!")
const command = {
"id": "on_open_ping_1",
"command": "ping"
}
socket.send(JSON.stringify(command))
})
socket.addEventListener('message', (event) => {
writeToConsole("#monitor-console-connect", "Got message from server: "+JSON.stringify(event.data))
let socket;
$("#connect-button").click((event) => {
socket = new WebSocket('wss://s1.ripple.com')
socket.addEventListener('open', (event) => {
// This callback runs when the connection is open
writeToConsole("#monitor-console-connect", "Connected!")
const command = {
"id": "on_open_ping_1",
"command": "ping"
}
socket.send(JSON.stringify(command))
})
socket.addEventListener('message', (event) => {
writeToConsole("#monitor-console-connect", "Got message from server: "+JSON.stringify(event.data))
})
})
</script>
@@ -99,10 +93,14 @@ Since WebSocket connections can have several messages going each way and there i
- For any message that is a direct response to a request from the client side, the `type` is the string `response`. In this case, the server also provides an `id` field that matches the `id` provided in the request this is a response for. (This is important because responses may arrive out of order.)
- For follow-up messages from [subscriptions](subscribe.html), the `type` indicates the type of follow-up message it is, such as the notification of an new transaction, ledger, or validation; or a follow-up to an ongoing [pathfinding request](path_find.html). Your client only receives these messages if it subscribes to them.
{{ start_step("Handle Incoming Messages") }}
<h5>Handle Incoming Placeholder</h5>
{{ end_step() }}
## Footnotes
1. <a id="footnote-1"></a> In practice, when calling an HTTP-based API multiple times, the client and server may reuse the same connection for several requests and responses. This practice is called [HTTP persistent connection, or keep-alive](https://en.wikipedia.org/wiki/HTTP_persistent_connection). From a development standpoint, the code to use an HTTP-based API is the same regardless of whether the underlying connection is new or reused.
[1.](#from-footnote-1) <a id="footnote-1"></a> In practice, when calling an HTTP-based API multiple times, the client and server may reuse the same connection for several requests and responses. This practice is called [HTTP persistent connection, or keep-alive](https://en.wikipedia.org/wiki/HTTP_persistent_connection). From a development standpoint, the code to use an HTTP-based API is the same regardless of whether the underlying connection is new or reused.

186
content/tutorials/use-simple-xrp-payments/send-xrp.md
View File

@@ -12,27 +12,15 @@ This tutorial explains how to send a simple XRP Payment using RippleAPI for Java
- To send transactions in the XRP Ledger, you first need an address and secret key, and some XRP. You can get an address in the XRP Test Net with a supply of Test Net XRP using the following interface:
<div class="interactive-block test-net-inset" id="interactive-generate">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active current bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="generate-creds-button" class="btn btn-primary">Generate credentials</button>
<div id='loader-0' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
<div id='secret'></div>
<div id='balance'></div>
<div id="populate-creds-status"></div>
</div>
</div>
{{ start_step("Generate") }}
<button id="generate-creds-button" class="btn btn-primary">Generate credentials</button>
<div id='loader-0' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
<div id='secret'></div>
<div id='balance'></div>
<div id="populate-creds-status"></div>
{{ end_step() }}
<script type="application/javascript">
$(document).ready( () => {
@@ -122,27 +110,15 @@ api.connect()
For this tutorial, you can connect directly from your browser by pressing the following button:
<div class="interactive-block" id="interactive-connect">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled current bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="connect-button" class="btn btn-primary">Connect to TestNet</button>
<div>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
</div>
</div>
{{ start_step("Connect") }}
<button id="connect-button" class="btn btn-primary">Connect to TestNet</button>
<div>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
</div>
{{ end_step() }}
<script type="application/javascript">
api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'})
api.on('connected', () => {
@@ -216,25 +192,13 @@ async function doPrepare() {
txJSON = doPrepare()
```
<div class="interactive-block" id="interactive-prepare">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled current bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
{{ start_step("Prepare") }}
<button id="prepare-button" class="btn btn-primary connection-required"
title="Connect to Test Net first" disabled>Prepare
example transaction</button>
<div id="prepare-output"></div>
</div>
</div>
{{ end_step() }}
<script type="application/javascript">
$("#prepare-button").click( async function() {
// Wipe existing results
@@ -290,25 +254,13 @@ The result of the signing operation is a transaction object containing a signatu
The signing API also returns the transaction's ID, or identifying hash, which you can use to look up the transaction later. This is a 64-character hexadecimal string that is unique to this transaction.
<div class="interactive-block" id="interactive-sign">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled current bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="sign-button" class="btn btn-primary connection-required"
title="Complete all previous steps first" disabled>Sign
example transaction</button>
<div id="sign-output"></div>
</div>
</div>
{{ start_step("Sign") }}
<button id="sign-button" class="btn btn-primary connection-required"
title="Complete all previous steps first" disabled>Sign
example transaction</button>
<div id="sign-output"></div>
{{ end_step() }}
<script type="application/javascript">
$("#sign-button").click( function() {
// Wipe previous output
@@ -377,26 +329,14 @@ If you see any other result, you should check the following:
See the full list of [transaction results](transaction-results.html) for more possibilities.
<div class="interactive-block" id="interactive-submit">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled current bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
{{ start_step("Submit") }}
<button id="submit-button" class="btn btn-primary connection-required"
title="Connection to Test Net required" disabled>Submit
example transaction</button>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<div id="submit-output"></div>
</div>
</div>
{{ end_step() }}
<script type="application/javascript">
$("#submit-button").click( async function() {
$("#submit-output").html("") // Wipe previous output
@@ -445,35 +385,23 @@ api.on('ledger', ledger => {
})
```
<div class="interactive-block" id="interactive-wait">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled current bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<table>
{{ start_step("Wait") }}
<table>
<tr>
<th>Latest Validated Ledger Version:</th>
<td id="current-ledger-version">(Not connected)</td>
</tr>
<tr>
<th>Latest Validated Ledger Version:</th>
<td id="current-ledger-version">(Not connected)</td>
<th>Ledger Version at Time of Submission:</th>
<td id="earliest-ledger-version">(Not submitted)</td>
</tr>
<tr>
<th>Ledger Version at Time of Submission:</th>
<td id="earliest-ledger-version">(Not submitted)</td>
</tr>
<tr>
<th>Transaction LastLedgerSequence:</th>
<td id="tx-lls"></td>
</tr>
</table>
</div>
</div>
<tr>
<th>Transaction LastLedgerSequence:</th>
<td id="tx-lls"></td>
</tr>
</table>
{{ end_step() }}
<script type="application/javascript">
api.on('ledger', ledger => {
$("#current-ledger-version").text(ledger.ledgerVersion)
@@ -512,24 +440,12 @@ The RippleAPI `getTransaction()` method only returns success if the transaction
**Caution:** Other APIs may return tentative results from ledger versions that have not yet been validated. For example, if you use the `rippled` APIs' [tx method][], be sure to look for `"validated": true` in the response to confirm that the data comes from a validated ledger version. Transaction results that are not from a validated ledger version are subject to change. For more information, see [Finality of Results](finality-of-results.html).
<div class="interactive-block" id="interactive-check">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled current bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="get-tx-button" class="btn btn-primary connection-required"
title="Connection to Test Net required" disabled>Check transaction status</button>
<div id="get-tx-output"></div>
</div>
</div>
{{ start_step("Check") }}
<button id="get-tx-button" class="btn btn-primary connection-required"
title="Connection to Test Net required" disabled>Check transaction status</button>
<div id="get-tx-output"></div>
{{ end_step() }}
<script type="application/javascript">
$("#get-tx-button").click( async function() {
// Wipe previous output