mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
// Prerequisite: Generate
|
|
// 1. Connect
|
|
// The code for these steps is handled by interactive-tutorial.js
|
|
|
|
onCurrentRouteLoaded(() => {
|
|
// 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 vli = await api.getLedgerIndex()
|
|
|
|
const prepared = await api.autofill({
|
|
TransactionType: 'Payment',
|
|
Account: sender,
|
|
Amount: xrpl.xrpToDrops(send_amount), // Same as "Amount": "22000000"
|
|
Destination: 'rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe',
|
|
LastLedgerSequence: vli + 75, // gives ~5min, rather than the default ~1min
|
|
})
|
|
|
|
block.find('.output-area').append(
|
|
`<div><strong>Prepared transaction instructions:</strong>
|
|
<pre><code id='prepared-tx-json'>${pretty_print(prepared)}</code></pre>
|
|
</div>
|
|
<div><strong>Transaction cost:</strong> ${xrpl.dropsToXrp(prepared.Fee)} XRP</div>
|
|
<div><strong>Transaction expires after ledger:</strong>
|
|
${prepared.LastLedgerSequence}</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 = JSON.parse($('#prepared-tx-json').text())
|
|
const wallet = get_wallet(event)
|
|
if (!wallet) {
|
|
return
|
|
}
|
|
|
|
const { tx_blob, hash } = wallet.sign(preparedTxJSON)
|
|
|
|
block.find('.output-area').html(
|
|
`<div><strong>Signed Transaction blob:</strong>
|
|
<code id='signed-tx-blob' style='overflow-wrap: anywhere; word-wrap: anywhere'
|
|
>${tx_blob}</code></div>
|
|
<div><strong>Identifying hash:</strong> <span id='signed-tx-hash'
|
|
>${hash}</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.request({
|
|
command: 'tx',
|
|
transaction: txID,
|
|
min_ledger: earliestLedgerVersion,
|
|
max_ledger: lastLedgerSequence,
|
|
})
|
|
|
|
block.find('.output-area').html(
|
|
`<div><strong>Transaction result code:</strong>
|
|
${tx.result.meta.TransactionResult} (${tx.result.validated ? 'validated' : 'pending'})</div>
|
|
<div><strong>Balance changes:</strong>
|
|
<pre><code>${pretty_print(xrpl.getBalanceChanges(tx.result.meta))}</code></pre>
|
|
</div>`,
|
|
)
|
|
|
|
complete_step('Check')
|
|
} catch (error) {
|
|
show_error(block, "Couldn't get transaction outcome:" + error)
|
|
}
|
|
})
|
|
})
|