mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
032e2d28b4
- Send partial payments works - Shows progress bars for partial payment setup, escrow auto-release - Actually tracks sending address's XRP balance
155 lines
8.3 KiB
HTML
155 lines
8.3 KiB
HTML
{% extends "template-base.html" %}
|
|
|
|
{% block bodyclasses %}page-tx-sender{% endblock %}
|
|
|
|
{% block right_sidebar %}
|
|
<div id="connection-status" class="card">
|
|
<div class="card-header bg-dark">
|
|
<h3 class="card-title">Status</h3>
|
|
</div><!--/.card-header-->
|
|
<div class="card-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item" id="connection-status-label">XRP Test Net:</li>
|
|
<li class="list-group-item disabled" id="connection-status-item">Not Connected</li>
|
|
<li class="list-group-item" id="sending-address-label">Sending Address:</li>
|
|
<li class="list-group-item disabled sending-address-item">(None)</li>
|
|
<li class="list-group-item" id="balance-label">Test XRP Available:</li>
|
|
<li class="list-group-item disabled" id="balance-item">(None)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<section class="container-fluid p-3">
|
|
<h1>Transaction Sender</h1>
|
|
|
|
<div class="content">
|
|
<p>This tool sends transactions to the <a href="xrp-test-net-faucet.html">XRP Test Net</a> address of your choice so you can test how you monitor and respond to incoming transactions.</p>
|
|
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="destination_address">Destination Address</label>
|
|
<input type="text" class="form-control" id="destination_address" aria-describedby="destination_address_help" value="rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM" />
|
|
<small id="destination_address_help" class="form-text text-muted">Send transactions to this XRP Test Net address</small>
|
|
</div>
|
|
|
|
<h3>Send Transaction</h3>
|
|
|
|
<div class="form-group" id="send_xrp_payment">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="send_xrp_payment_btn">Send XRP Payment</button>
|
|
<div class="input-group-append">
|
|
<input id="send_xrp_payment_amount" class="form-control" type="number" aria-describedby="send_xrp_payment_amount_help" value="100000" min="1" max="10000000000" />
|
|
<span class="input-group-text" id="send_xrp_payment_amount_help">drops of XRP</span>
|
|
</div>
|
|
<!-- Future feature: Optional custom destination tag -->
|
|
</div>
|
|
<small class="form-text text-muted">Send a <a href="send-xrp.html">simple XRP-to-XRP payment</a>.</small>
|
|
</div><!-- /#send_xrp_payment -->
|
|
|
|
<hr />
|
|
|
|
<div class="form-group" id="send_partial_payment">
|
|
<div class="progress mb-1" id="pp_progress">
|
|
<div class="progress-bar progress-bar-striped w-0"> </div>
|
|
<small class="justify-content-center d-flex position-absolute w-100">(Getting ready to send partial payments)</small>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="send_partial_payment_btn" disabled="disabled" autocomplete="off" title="(Please wait for partial payments setup to finish)">Send Partial Payment</button>
|
|
</div>
|
|
<small class="form-text text-muted">Delivers a small amount of XRP with a large <code>Amount</code> value, to test your handling of <a href="partial-payments.html">partial payments</a>.</small>
|
|
</div><!-- /.form group for partial payment -->
|
|
|
|
<hr />
|
|
|
|
<div class="form-group" id="create_escrow">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="create_escrow_btn">Create Escrow</button>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">for</span>
|
|
<input class="form-control" type="number" value="60" min="5" max="10000" id="create_escrow_duration_seconds" />
|
|
<span class="input-group-text">seconds</span>
|
|
<span class="input-group-text">
|
|
(
|
|
<input type="checkbox" id="create_escrow_release_automatically" value="1" />
|
|
<label class="form-check-label" for="create_escrow_release_automatically">Release automatically</label>)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">Create a time-based escrow of 1 XRP.</small>
|
|
<div class="progress mb-1" style="display:none" id="escrow_progress">
|
|
<div class="progress-bar progress-bar-striped w-0"> </div>
|
|
<small class="justify-content-center d-flex position-absolute w-100">(Waiting to release Escrow when it's ready)</small>
|
|
</div>
|
|
</div><!-- /.form group for create escrow -->
|
|
|
|
<hr />
|
|
|
|
<div class="form-group" id="create_payment_channel">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="create_payment_channel_btn">Create Payment Channel</button>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">funded with</span>
|
|
<input id="create_payment_channel_amount" class="form-control" type="number" aria-describedby="create_payment_channel_amount_help" value="100000" min="1" max="10000000000" />
|
|
<span class="input-group-text" id="create_payment_channel_amount_help">drops of XRP</span>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">Create a payment channel.</small>
|
|
</div><!-- /.form group for create paychan -->
|
|
|
|
<hr />
|
|
|
|
<div class="form-group" id="send_issued_currency">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="send_issued_currency_btn">Send Issued Currency</button>
|
|
<div class="input-group-append">
|
|
<input id="send_issued_currency_amount" class="form-control" type="text" value="100" /><!-- Note: HTML limits "number" inputs to IEEE 764 double precision, which isn't enough for the full range of issued currency amounts -->
|
|
<span class="input-group-text" id="send_issued_currency_code">FOO</span><!-- TODO: custom currency codes -->
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">Your destination address needs a trust line to <span class="sending-address-item">(the test sender)</span> for the currency in question. Otherwise, you'll get tecPATH_DRY.</small>
|
|
</div><!-- /.form group for issued currency payment -->
|
|
|
|
<hr />
|
|
|
|
<div class="form-group" id="trust_for">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
|
|
</div>
|
|
<button class="btn btn-primary form-control" type="button" id="trust_for_btn">Trust for</button>
|
|
<div class="input-group-append">
|
|
<input id="trust_for_amount" class="form-control disabled" type="number" value="100000" />
|
|
<span class="input-group-text" id="trust_for_currency_code">FOO</span>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">The test sender creates a trust line to your account for the given currency.</small>
|
|
</div><!-- /.form group for create trust line -->
|
|
|
|
</form>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block endbody %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
|
|
<script type="application/javascript" src="assets/js/ripple-lib-1.1.2-min.js"></script>
|
|
<script type='text/javascript' src='assets/js/tx-sender.js'></script>
|
|
{% endblock %}
|