ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +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

2
assets/css/devportal.css
View File

@@ -1009,7 +1009,7 @@ a.current {
margin: 5px;
}
.interactive-block-inner > button {
.interactive-block-ui > button {
margin: 10px 0;
}

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

4
dactyl-config.yml
View File

@@ -679,6 +679,8 @@ pages:
doc_type: Tutorials
category: Use Simple XRP Payments
blurb: Test out sending XRP using the XRP Test Net.
filters:
- interactive_steps
targets:
- local
@@ -688,6 +690,8 @@ pages:
doc_type: Tutorials
category: Use Simple XRP Payments
blurb: See how to actively monitor for new XRP payments (and transaction of other types).
filters:
- interactive_steps
targets:
- local

80
tool/filter_interactive_steps.py Normal file
View File

@@ -0,0 +1,80 @@
################################################
## Interactive Steps Helper
## Author: Rome Reginelli
## Copyright: Ripple Labs, 2019
##
## Automates the process of building wrappers and breadcrumbs for interactive
## blocks in tutorials that have several interactive steps in order.
################################################
import re
def slugify(s):
unacceptable_chars = re.compile(r"[^A-Za-z0-9._ ]+")
whitespace_regex = re.compile(r"\s+")
s = re.sub(unacceptable_chars, "", s)
s = re.sub(whitespace_regex, "_", s)
s = s.lower()
if not s:
s = "_"
return s
def start_step(step_label):
"""Generates the HTML for the start of a step, including breadcrumbs"""
if '"' in step_label:
raise ValueError("step_label must not contain \" characters")
step_id = slugify(step_label)
out_html = """
<div class="interactive-block" id="interactive-{step_id}">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb tutorial-step-crumbs" id="bc-ul-{step_id}" data-steplabel="{step_label}" data-stepid="{step_id}">
</ul><!--/.breadcrumb.tutorial-step-crumbs-->
</div><!--/.breadcrumbs-wrap-->
<div class="interactive-block-ui">
""".format(step_id=step_id, step_label=step_label)
return out_html
def end_step():
"""Generates the HTML for the end of a step, including breadcrumbs"""
return " </div><!--/.interactive-block-ui-->\n </div><!--/.interactive-block-inner-->\n</div><!--/.interactive-block-->"
def filter_soup(soup, **kwargs):
"""Add steps to each tutorial-step-crumbs element based on the total steps
in the document. Each step results in a li element such as:
<li class="breadcrumb-item disabled current bc-connect">
<a href="#interactive-connect">Connect</a>
</li>"""
crumb_uls = soup.find_all(class_="tutorial-step-crumbs")
steps = [(el.attrs["data-stepid"], el.attrs["data-steplabel"]) for el in crumb_uls]
def add_lis(parent_ul, steps, current_step_id):
i = 0
for step_id, step_label in steps:
li = soup.new_tag("li")
li_classes = ["breadcrumb-item", "bc-{step_id}".format(step_id=step_id)]
if i > 0:
li_classes.append("disabled") # Steps get enabled in order by JS
if step_id == current_step_id:
li_classes.append("current")
li.attrs['class'] = li_classes
li_a = soup.new_tag("a", href="#interactive-{step_id}".format(step_id=step_id))
li_a.append(step_label)
li.append(li_a)
parent_ul.append(li)
i += 1
for ul in crumb_uls:
ul_step_id = ul.attrs["data-stepid"]
add_lis(ul, steps, ul_step_id)
export = {
"start_step": start_step,
"end_step": end_step
}