mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
6d91616a62
Interactive tutorials: more consistent style Interactive tutorials: Use new generics for send-xrp, use-tickets Interactive tutorials: clean up now-unused code Interactive tutorials: progress & debugging of errors Interactive: Require Destination Tags; and related - Validate addresses in Transaction Sender and warn on Mainnet X-address - Option to load destination address from query param in Tx Sender - Some more/updated helpers in interactive tutorial JS Interactive tutorials: fix JA version Interactive tutorials: readme, include code filter (incomplete) Interactive tutorials: improvements for consistency Interactive Tutorials: finish readme Interactive tutorials: fix syntax errors
101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
// Prerequisite: Generate
|
|
// 1. Connect
|
|
// The code for these steps is handled by interactive-tutorial.js
|
|
|
|
$(document).ready(() => {
|
|
|
|
// 2. Prepare Transaction ------------------------------------------------------
|
|
$("#prepare-button").click( async function(event) {
|
|
const block = $(event.target).closest(".interactive-block")
|
|
block.find(".output-area").html("")
|
|
const send_amount = $("#xrp-amount").val()
|
|
|
|
const sender = get_address(event)
|
|
if (!sender) {return}
|
|
|
|
const prepared = await api.prepareTransaction({
|
|
"TransactionType": "Payment",
|
|
"Account": sender,
|
|
"Amount": api.xrpToDrops(send_amount), // Same as "Amount": "22000000"
|
|
"Destination": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
|
|
}, {
|
|
// Expire this transaction if it doesn't execute within ~5 minutes:
|
|
"maxLedgerVersionOffset": 75
|
|
})
|
|
|
|
block.find(".output-area").append(
|
|
`<div><strong>Prepared transaction instructions:</strong>
|
|
<pre><code id='prepared-tx-json'>${pretty_print(prepared.txJSON)}</code></pre>
|
|
</div>
|
|
<div><strong>Transaction cost:</strong> ${prepared.instructions.fee} XRP</div>
|
|
<div><strong>Transaction expires after ledger:</strong>
|
|
${prepared.instructions.maxLedgerVersion}</div>`)
|
|
|
|
complete_step("Prepare")
|
|
})
|
|
|
|
|
|
// 3. Sign the transaction -----------------------------------------------------
|
|
$("#sign-button").click( function(event) {
|
|
const block = $(event.target).closest(".interactive-block")
|
|
block.find(".output-area").html("")
|
|
|
|
const preparedTxJSON = $("#prepared-tx-json").text()
|
|
const secret = get_secret(event)
|
|
if (!secret) {return}
|
|
|
|
signResponse = api.sign(preparedTxJSON, secret)
|
|
|
|
block.find(".output-area").html(
|
|
`<div><strong>Signed Transaction blob:</strong>
|
|
<code id='signed-tx-blob' style='overflow-wrap: anywhere; word-wrap: anywhere'
|
|
>${signResponse.signedTransaction}</code></div>
|
|
<div><strong>Identifying hash:</strong> <span id='signed-tx-hash'
|
|
>${signResponse.id}</span></div>`
|
|
)
|
|
|
|
complete_step("Sign")
|
|
})
|
|
|
|
// 4. Submit the signed transaction --------------------------------------------
|
|
$("#submit-button").click( submit_handler )
|
|
|
|
// 5. Wait for Validation: handled by interactive-tutorial.js and by the
|
|
// generic submit handler in the previous step. --------------------------------
|
|
|
|
|
|
// 6. Check transaction status -------------------------------------------------
|
|
$("#get-tx-button").click( async function(event) {
|
|
const block = $(event.target).closest(".interactive-block")
|
|
// Wipe previous output
|
|
block.find(".output-area").html("")
|
|
|
|
const txID = $("#signed-tx-hash").text()
|
|
const earliestLedgerVersion = parseInt(
|
|
$("#interactive-wait .earliest-ledger-version").text(), 10)
|
|
const lastLedgerSequence = parseInt(
|
|
$("#interactive-wait .lastledgersequence").text(), 10)
|
|
|
|
try {
|
|
const tx = await api.getTransaction(txID, {
|
|
minLedgerVersion: earliestLedgerVersion,
|
|
maxLedgerVersion: lastLedgerSequence
|
|
})
|
|
|
|
block.find(".output-area").html(
|
|
"<div><strong>Transaction result:</strong> " +
|
|
tx.outcome.result + "</div>" +
|
|
"<div><strong>Balance changes:</strong> <pre><code>" +
|
|
pretty_print(tx.outcome.balanceChanges) +
|
|
"</pre></code></div>"
|
|
)
|
|
|
|
complete_step("Check")
|
|
} catch(error) {
|
|
show_error(block, "Couldn't get transaction outcome:" + error)
|
|
}
|
|
|
|
})
|
|
|
|
})
|