Tx Sender updates

- Add 'initialize' button to reduce wasted testnet accounts
- Change default destination to be the correct faucet account

assets/js/tx-sender.js

@@ -45,8 +45,23 @@ const set_up_tx_sender = async function() {
   let sending_secret
   let xrp_balance
 
+  function enable_buttons_if_ready() {
+    if ( (typeof sending_address) === "undefined") {
+      console.debug("No sending address yet...")
+      return false
+    }
+
+    if (!connection_ready) {
+      console.debug("API not connected yet...")
+      return false
+    }
+
+    $(".needs-connection").prop("disabled", false)
+    $(".needs-connection").removeClass("disabled")
+    set_up_for_partial_payments()
+    return true
+  }
 
-  console.debug("Getting a sending address from the faucet...")
 
   faucet_response = function(data) {
     sending_address = data.account.address
@@ -57,8 +72,15 @@ const set_up_tx_sender = async function() {
 
     $("#balance-item").text(xrp_balance)
     $(".sending-address-item").text(sending_address)
+    $("#init_button").prop("disabled", "disabled")
+    $("#init_button").addClass("disabled")
+    $("#init_button").attr("title", "Done")
+    $("#init_button").append('&nbsp;<i class="fa fa-check-circle"></i>')
+    enable_buttons_if_ready()
   }
 
+  $("#init_button").click((evt) => {
+    console.debug("Getting a sending address from the faucet...")
     $.ajax({
       url: FAUCET_URL,
       type: 'POST',
@@ -68,12 +90,14 @@ const set_up_tx_sender = async function() {
         errorNotif("There was an error with the XRP Ledger Test Net Faucet. Reload this page to try again.")
       }
     })
+  })
 
   api = new ripple.RippleAPI({server: TESTNET_URL})
   api.on('connected', () => {
     connection_ready = true
     $("#connection-status-item").text("Connected")
     $("#connection-status-item").removeClass("disabled").addClass("active")
+    enable_buttons_if_ready()
   })
   api.on('disconnected', (code) => {
     connection_ready = false
@@ -281,7 +305,6 @@ const set_up_tx_sender = async function() {
     $("#send_partial_payment button").prop("disabled",false)
     $("#send_partial_payment button").attr("title", "")
   }
-  set_up_for_partial_payments()
 
   //////////////////////////////////////////////////////////////////////////////
   // Button Handlers
@@ -292,7 +315,7 @@ const set_up_tx_sender = async function() {
     const destination_address = $("#destination_address").val()
     const xrp_drops_input = $("#send_xrp_payment_amount").val()
     $("#send_xrp_payment .loader").show()
-    $("#send_xrp_payment button").attr("disabled","disabled")
+    $("#send_xrp_payment button").prop("disabled","disabled")
     await submit_and_verify({
       TransactionType: "Payment",
       Account: sending_address,
@@ -300,7 +323,7 @@ const set_up_tx_sender = async function() {
       Amount: xrp_drops_input
     })
     $("#send_xrp_payment .loader").hide()
-    $("#send_xrp_payment button").attr("disabled",false)
+    $("#send_xrp_payment button").prop("disabled",false)
 
   }
   $("#send_xrp_payment button").click(on_click_send_xrp_payment)
@@ -309,7 +332,7 @@ const set_up_tx_sender = async function() {
   async function on_click_send_partial_payment(event) {
     const destination_address = $("#destination_address").val()
     $("#send_partial_payment .loader").show()
-    $("#send_partial_payment button").attr("disabled","disabled")
+    $("#send_partial_payment button").prop("disabled","disabled")
 
     // const path_find_result = await api.request("ripple_path_find", {
     //   source_account: sending_address,
@@ -333,7 +356,7 @@ const set_up_tx_sender = async function() {
       Flags: api.txFlags.Payment.PartialPayment | api.txFlags.Universal.FullyCanonicalSig
     })
     $("#send_partial_payment .loader").hide()
-    $("#send_partial_payment button").attr("disabled",false)
+    $("#send_partial_payment button").prop("disabled",false)
   }
   $("#send_partial_payment button").click(on_click_send_partial_payment)
 
@@ -352,7 +375,7 @@ const set_up_tx_sender = async function() {
     const finish_after = api.iso8601ToRippleTime(Date()) + duration_seconds
 
     $("#create_escrow .loader").show()
-    $("#create_escrow button").attr("disabled","disabled")
+    $("#create_escrow button").prop("disabled","disabled")
     const escrowcreate_tx_data = await submit_and_verify({
       TransactionType: "EscrowCreate",
       Account: sending_address,
@@ -398,7 +421,7 @@ const set_up_tx_sender = async function() {
       })
     }
     $("#create_escrow .loader").hide()
-    $("#create_escrow button").attr("disabled",false)
+    $("#create_escrow button").prop("disabled",false)
   }
   $("#create_escrow button").click(on_click_create_escrow)
 
@@ -408,7 +431,7 @@ const set_up_tx_sender = async function() {
     const xrp_drops_input = $("#create_payment_channel_amount").val()
     const pubkey = api.deriveKeypair(sending_secret).publicKey
     $("#create_payment_channel .loader").show()
-    $("#create_payment_channel button").attr("disabled","disabled")
+    $("#create_payment_channel button").prop("disabled","disabled")
     await submit_and_verify({
       TransactionType: "PaymentChannelCreate",
       Account: sending_address,
@@ -418,7 +441,7 @@ const set_up_tx_sender = async function() {
       PublicKey: pubkey
     })
     $("#create_payment_channel .loader").hide()
-    $("#create_payment_channel button").attr("disabled",false)
+    $("#create_payment_channel button").prop("disabled",false)
 
     // Future feature: figure out channel ID and enable a button that creates
     //   valid claims for the given payment channel to help test redeeming
@@ -432,7 +455,7 @@ const set_up_tx_sender = async function() {
     const issue_amount = $("#send_issued_currency_amount").val()
     const issue_code = $("#send_issued_currency_code").text()
     $("#send_issued_currency .loader").show()
-    $("#send_issued_currency button").attr("disabled","disabled")
+    $("#send_issued_currency button").prop("disabled","disabled")
     // Future feature: cross-currency sending with paths?
     await submit_and_verify({
       TransactionType: "Payment",
@@ -445,7 +468,7 @@ const set_up_tx_sender = async function() {
       }
     })
     $("#send_issued_currency .loader").hide()
-    $("#send_issued_currency button").attr("disabled",false)
+    $("#send_issued_currency button").prop("disabled",false)
   }
   $("#send_issued_currency button").click(on_click_send_issued_currency)
 
@@ -455,7 +478,7 @@ const set_up_tx_sender = async function() {
     const trust_limit = $("#trust_for_amount").val()
     const trust_currency_code = $("#trust_for_currency_code").text()
     $("#trust_for .loader").show()
-    $("#trust_for button").attr("disabled","disabled")
+    $("#trust_for button").prop("disabled","disabled")
     await submit_and_verify({
       TransactionType: "TrustSet",
       Account: sending_address,
@@ -466,7 +489,7 @@ const set_up_tx_sender = async function() {
       }
     })
     $("#trust_for .loader").hide()
-    $("#trust_for button").attr("disabled",false)
+    $("#trust_for button").prop("disabled",false)
   }
   $("#trust_for button").click(on_trust_for)
 

tool/template-tx-sender.html

@@ -9,11 +9,11 @@
   </div>
   <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" id="connection-status-label">XRP Testnet:</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" id="balance-label">Testnet XRP Available:</li>
       <li class="list-group-item disabled" id="balance-item">(None)</li>
     </ul>
     <div id="tx-sender-history">
@@ -30,13 +30,18 @@
   <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>
+    <p>This tool sends transactions to the <a href="xrp-test-net-faucet.html">XRP Testnet</a> address of your choice so you can test how you monitor and respond to incoming transactions.</p>
 
     <form>
+      <div class="form-group">
+        <button class="btn btn-primary form-control" type="button" id="init_button">Initialize</button>
+        <small class="form-text text-muted">Set up the necessary Testnet XRP addresses to send test payments.</small>
+      </div><!--/.form-group-->
+
       <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" />
+        <input type="text" class="form-control" id="destination_address" aria-describedby="destination_address_help" value="rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe" />
-        <small id="destination_address_help" class="form-text text-muted">Send transactions to this XRP Test Net address</small>
+        <small id="destination_address_help" class="form-text text-muted">Send transactions to this XRP Testnet address</small>
       </div>
 
       <h3>Send Transaction</h3>
@@ -46,7 +51,7 @@
           <div class="input-group-prepend">
             <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/xrp-loader-96.png" /></span>
           </div>
-          <button class="btn btn-primary form-control" type="button" id="send_xrp_payment_btn">Send XRP Payment</button>
+          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="send_xrp_payment_btn" disabled="disabled">Send XRP Payment</button>
           <input id="send_xrp_payment_amount" class="form-control" type="number" aria-describedby="send_xrp_payment_amount_help" value="100000" min="1" max="10000000000" />
           <div class="input-group-append">
             <span class="input-group-text" id="send_xrp_payment_amount_help">drops of XRP</span>
@@ -69,7 +74,7 @@
           </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>
+        <small class="form-text text-muted">Deliver 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 />
@@ -79,7 +84,7 @@
           <div class="input-group-prepend">
             <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/xrp-loader-96.png" /></span>
           </div>
-          <button class="btn btn-primary form-control" type="button" id="create_escrow_btn">Create Escrow</button>
+          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="create_escrow_btn" disabled="disabled">Create Escrow</button>
           <input class="form-control" type="number" value="60" min="5" max="10000" id="create_escrow_duration_seconds" />
           <div class="input-group-append">
             <span class="input-group-text">seconds</span>
@@ -104,7 +109,7 @@
           <div class="input-group-prepend">
             <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/xrp-loader-96.png" /></span>
           </div>
-          <button class="btn btn-primary form-control" type="button" id="create_payment_channel_btn">Create Payment Channel</button>
+          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="create_payment_channel_btn" disabled="disabled">Create Payment Channel</button>
           <input id="create_payment_channel_amount" class="form-control" type="number" aria-describedby="create_payment_channel_amount_help" value="100000" min="1" max="10000000000" />
           <div class="input-group-append">
             <span class="input-group-text" id="create_payment_channel_amount_help">drops of XRP</span>
@@ -120,7 +125,7 @@
           <div class="input-group-prepend">
             <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/xrp-loader-96.png" /></span>
           </div>
-          <button class="btn btn-primary form-control" type="button" id="send_issued_currency_btn">Send Issued Currency</button>
+          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="send_issued_currency_btn" disabled="disabled">Send Issued Currency</button>
           <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 -->
           <div class="input-group-append">
             <span class="input-group-text" id="send_issued_currency_code">FOO</span><!-- TODO: custom currency codes -->
@@ -136,7 +141,7 @@
           <div class="input-group-prepend">
             <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/xrp-loader-96.png" /></span>
           </div>
-          <button class="btn btn-primary form-control" type="button" id="trust_for_btn">Trust for</button>
+          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="trust_for_btn" disabled="disabled">Trust for</button>
           <input id="trust_for_amount" class="form-control disabled" type="number" value="100000" />
           <div class="input-group-append">
             <span class="input-group-text" id="trust_for_currency_code">FOO</span>