Fix interactive tutorial faucet interface on Devnet; migrate AMM tutorial to Devnet

This commit is contained in:
mDuo13
2023-09-07 16:41:16 -07:00
parent 3437ee9fe2
commit fd273dccb8
5 changed files with 299 additions and 25 deletions

View File

@@ -186,29 +186,36 @@ function setup_generate_step() {
const faucet_url = $("#generate-creds-button").data("fauceturl")
try {
// destination not defined - API will create account.
const data = await call_faucet(faucet_url, undefined, event)
const wallet = xrpl.Wallet.generate("ed25519")
const data = await call_faucet(faucet_url, wallet.address, event)
block.find(".loader").hide()
block.find(".output-area").html(`<div><strong>${tl("Address:")}</strong>
<span id="use-address">${data.account.address}</span></div>
<div><strong>${tl("Secret:")}</strong>
<span id="use-secret">${data.account.secret}</span></div>
<strong>${tl("Balance:")}</strong>
${Number(data.balance).toLocaleString(current_locale)} XRP`)
<span id="use-secret">${wallet.seed}</span></div>`)
if (data.balance) {
block.find(".output-area").append(`<div><strong>${tl("Balance:")}</strong>
${Number(data.balance).toLocaleString(current_locale)} XRP</div>`)
}
// Automatically populate all examples in the page with the
// generated credentials...
let creds_updated = false;
$("code span:contains('"+EXAMPLE_ADDR+"')").each( function() {
creds_updated = true
let eltext = $(this).text()
$(this).text( eltext.replace(EXAMPLE_ADDR, data.account.address) )
})
$("code span:contains('"+EXAMPLE_SECRET+"')").each( function() {
creds_updated = true
let eltext = $(this).text()
$(this).text( eltext.replace(EXAMPLE_SECRET, data.account.secret) )
})
if (creds_updated) {
block.find(".output-area").append(`<p>${tl("Populated this page's examples with these credentials.")}</p>`)
}
complete_step("Generate")
@@ -288,9 +295,7 @@ async function call_faucet(faucet_url, destination, event) {
};
const body = {};
if (typeof destination != "undefined") {
body["destination"] = destination;
}
body["memos"] = [memo];
const response = await fetch(faucet_url, {

View File

@@ -0,0 +1,269 @@
// 1. Generate
// 2. Connect
// The code for these steps is handled by interactive-tutorial.js
$(document).ready(() => {
const EXPLORER = $("#connect-button").data("explorer")
$("#get-foo").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const wallet = get_wallet(event)
if (!wallet) {return}
const currency_code = "FOO"
const issue_quantity = "1000"
block.find(".loader").show()
show_log(block, "<p>Funding an issuer address with the faucet...</p>")
const issuer = (await api.fundWallet()).wallet
show_log(block, `<p>Got issuer <span id="issuer-address" data-seed="${issuer.seed}">${issuer.address}</span>.</p>`)
$(".foo-issuer").text(issuer.address) // Update display in the "Create AMM" step
// Enable issuer DefaultRipple ----------------------------------------------
const issuer_setup_tx = {
"TransactionType": "AccountSet",
"Account": issuer.address,
"SetFlag": xrpl.AccountSetAsfFlags.asfDefaultRipple
}
add_memo(event, issuer_setup_tx)
const issuer_setup_result = await api.submitAndWait(issuer_setup_tx, {autofill: true, wallet: issuer} )
if (issuer_setup_result.result.meta.TransactionResult == "tesSUCCESS") {
show_log(block, `<p><a href="${EXPLORER}/transactions/${issuer_setup_result.result.hash}">✅ Issuer DefaultRipple enabled</a></p>`)
} else {
show_error(block, `Error sending transaction: <pre><code>${pretty_print(issuer_setup_result)}</code></pre>`)
}
// Create trust line to issuer ----------------------------------------------
const trust_tx = {
"TransactionType": "TrustSet",
"Account": wallet.address,
"LimitAmount": {
"currency": currency_code,
"issuer": issuer.address,
"value": "10000000000" // Large limit, arbitrarily chosen
}
}
add_memo(event, trust_tx)
const trust_result = await api.submitAndWait(trust_tx, {autofill: true, wallet: wallet})
if (trust_result.result.meta.TransactionResult == "tesSUCCESS") {
show_log(block, `<p><a href="${EXPLORER}/transactions/${trust_result.result.hash}">✅ Trust line created</a></p>`)
} else {
show_error(block, `Error sending transaction: <pre><code>${pretty_print(trust_result)}</code></pre>`)
}
// Issue tokens -------------------------------------------------------------
const issue_tx = {
"TransactionType": "Payment",
"Account": issuer.address,
"Amount": {
"currency": currency_code,
"value": issue_quantity,
"issuer": issuer.address
},
"Destination": wallet.address
}
add_memo(event, issue_tx)
const issue_result = await api.submitAndWait(issue_tx, {autofill: true, wallet: issuer})
if (issue_result.result.meta.TransactionResult == "tesSUCCESS") {
show_log(block, `<p><a href="${EXPLORER}/transactions/${issue_result.result.hash}">✅ Tokens issued</a></p>`)
$("#get-foo").data("foo-acquired", true).prop("disabled", true).addClass("disabled").addClass("done")
} else {
show_error(block, `Error sending transaction: <pre><code>${pretty_print(issue_result)}</code></pre>`)
}
block.find(".loader").hide()
if ($("#get-foo").data("foo-acquired") && $("#buy-tst").data("tst-acquired")) {
complete_step("Acquire tokens")
}
})
$("#buy-tst").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const wallet = get_wallet(event)
if (!wallet) {return}
block.find(".loader").show()
const tx_json = {
"TransactionType": "OfferCreate",
"Account": wallet.address,
"TakerPays": {
currency: "TST",
issuer: "rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd",
value: "25"
},
"TakerGets": xrpl.xrpToDrops(25*10*1.16)
}
add_memo(event, tx_json)
const offer_result = await api.submitAndWait(tx_json, {autofill: true, wallet: wallet})
if (offer_result.result.meta.TransactionResult == "tesSUCCESS") {
show_log(block, `<p><a href="${EXPLORER}/transactions/${offer_result.result.hash}">✅ TST offer placed</a></p>`)
const balance_changes = xrpl.getBalanceChanges(offer_result.result.meta)
for (const bc of balance_changes) {
if (bc.account != wallet.address) {continue}
for (const bal of bc.balances) {
if (bal.currency == "TST") {
show_log(block, `<p>Got <strong>${bal.value}</strong> ${bal.currency}.${bal.issuer}.</p>`)
break
}
}
break
}
$("#buy-tst").data("tst-acquired", true).prop("disabled", true).addClass("disabled").addClass("done")
} else {
show_error(block, `<p>Transaction failed:</p><pre><code>${pretty_print(offer_result)}</code></pre>`)
}
block.find(".loader").hide()
if ($("#get-foo").data("foo-acquired") && $("#buy-tst").data("tst-acquired")) {
complete_step("Acquire tokens")
}
})
$("#check-for-amm").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const foo_issuer_address = $("#issuer-address").text()
block.find(".output-area").html("")
block.find(".loader").show()
try {
const amm_info = await api.request({
"command": "amm_info",
"asset": {
"currency": "TST",
"issuer": "rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd"
},
"asset2": {
"currency": "FOO",
"issuer": foo_issuer_address
},
"ledger_index": "validated"
})
show_log(block, `<pre><code>${pretty_print}amm_info</code></pre>`)
} catch(err) {
if (err.data.error === 'actNotFound') {
show_log(block, `<p>✅ No AMM exists yet for the pair
FOO.${foo_issuer_address} /
TST.rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd.`)
complete_step("Check for AMM")
} else {
show_error(block, err)
}
}
block.find(".loader").hide()
})
$("#look-up-ammcreate-cost").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
block.find(".loader").show()
let amm_fee_drops = "5000000"
try {
const ss = await api.request({"command": "server_state"})
amm_fee_drops = ss.result.state.validated_ledger.reserve_inc.toString()
show_log(block, `<p>Current AMMCreate transaction cost: ${xrpl.dropsToXrp(amm_fee_drops)} XRP (<span id="ammcreate-cost-drops">${amm_fee_drops}</span> drops)</p>`)
complete_step("Look up AMMCreate cost")
} catch(err) {
show_error(block, `Error looking up AMMCreate tx cost: ${err}`)
}
block.find(".loader").hide()
})
$("#create-amm").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const wallet = get_wallet(event)
if (!wallet) {return}
amm_fee_drops = $("#ammcreate-cost-drops").text()
if (!amm_fee_drops) {return}
const asset_amount = $("#asset-amount").val()
const asset2_amount = $("#asset2-amount").val()
const asset2_issuer_address = $("#issuer-address").text()
const trading_fee = Math.floor($("#trading-fee").val()*1000) // Convert from %
const ammcreate_tx = {
"TransactionType": "AMMCreate",
"Account": wallet.address,
"Amount": {
currency: "TST",
issuer: "rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd",
value: asset_amount
},
"Amount2": {
"currency": "FOO",
"issuer": asset2_issuer_address,
"value": asset2_amount
},
"TradingFee": 500, // 0.5%
"Fee": amm_fee_drops
}
add_memo(event, ammcreate_tx)
const ammcreate_result = await api.submitAndWait(ammcreate_tx, {autofill: true, wallet: wallet, fail_hard: true})
if (ammcreate_result.result.meta.TransactionResult == "tesSUCCESS") {
show_log(block, `<p><a href="${EXPLORER}/transactions/${ammcreate_result.result.hash}">AMM created</a>:</p>
<pre><code>${pretty_print(ammcreate_result)}</code></pre>`)
complete_step("Create AMM")
} else {
throw `Error sending transaction: ${ammcreate_result}`
}
block.find(".loader").hide()
})
$("#check-amm-info").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const foo_issuer_address = $("#issuer-address").text()
block.find(".output-area").html("")
block.find(".loader").show()
try {
const amm_info = await api.request({
"command": "amm_info",
"asset": {
"currency": "TST",
"issuer": "rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd"
},
"asset2": {
"currency": "FOO",
"issuer": foo_issuer_address
},
"ledger_index": "validated"
})
show_log(block, `<p><strong>AMM Info:</strong><pre><code>${pretty_print(amm_info)}</code></pre>`)
const lp_token = amm_info.result.amm.lp_token
show_log(block, `<p>The AMM account <strong>${lp_token.issuer}</strong> has <strong>${lp_token.value}</strong> total
LP tokens outstanding, and uses the currency code <code>${lp_token.currency}</code>.</p>`)
const amount = amm_info.result.amm.amount
const amount2 = amm_info.result.amm.amount2
show_log(block, `<p>In its pool, the AMM holds <strong>${amount.value} ${amount.currency}.${amount.issuer}</strong>
and <strong>${amount2.value} ${amount2.currency}.${amount2.issuer}</strong></p>`)
complete_step("Check AMM info")
} catch(err) {
show_error(block, err)
}
block.find(".loader").hide()
})
$("#check-trust-lines").click( async (event) => {
const block = $(event.target).closest(".interactive-block")
const address = get_address()
if (!address) {return}
block.find(".output-area").html("")
block.find(".loader").show()
try {
const account_lines = await api.request({
"command": "account_lines",
"account": address,
"ledger_index": "validated"
})
show_log(block, `<p><strong>Trust lines:</strong><pre><code>${pretty_print(account_lines)}</code></pre>`)
complete_step("Check trust lines")
} catch(err) {
show_error(block, err)
}
block.find(".loader").hide()
})
})

View File

@@ -1,8 +1,8 @@
// In browsers, use a <script> tag. In Node.js, uncomment the following line:
// const xrpl = require('xrpl')
const WS_URL = 'wss://amm.devnet.rippletest.net:51233/'
const EXPLORER = 'amm-devnet.xrpl.org' // Optional, for linking
const WS_URL = 'wss://s.devnet.rippletest.net:51233/'
const EXPLORER = 'devnet.xrpl.org' // Optional, for linking
async function main() {
// Define the network client

View File

@@ -14,8 +14,8 @@ if (typeof module !== "undefined") {
}
// Connect to the network -----------------------------------------------------
const WS_URL = 'wss://amm.devnet.rippletest.net:51233'
const EXPLORER = 'https://amm-devnet.xrpl.org'
const WS_URL = 'wss://s.devnet.rippletest.net:51233'
const EXPLORER = 'https://devnet.xrpl.org'
async function main() {
const client = new xrpl.Client(WS_URL);

View File

@@ -37,7 +37,7 @@ Complete sample code for all of the steps of these tutorials is available under
## Steps
{% set n = cycler(* range(1,99)) %}
{% set use_network = "AMM-Devnet" %}
{% set use_network = "Devnet" %}
### {{n.next()}}. Connect to the network
@@ -131,7 +131,7 @@ If the AMM does already exist, you should double-check that you specified the ri
Creating an AMM has a special [transaction cost][] to prevent spam: since it creates objects in the ledger that no one owns, you must burn at least one [owner reserve increment](reserves.html) of XRP to send the AMMCreate transaction. The exact value can change due to [fee voting](https://xrpl.org/fee-voting.html), so you should look up the current incremental reserve value using the [server_state method][].
It is also a good practice to display this value and give a human operator a chance to stop before you send the transaction. Burning an owner reserve is typically a much higher cost than sending a normal transaction, so you don't want it to be a surprise. (Currently, on both Mainnet and AMM-Devnet, the cost of sending a typical transaction is 0.000010 XRP but the cost of AMMCreate is 2 XRP.)
It is also a good practice to display this value and give a human operator a chance to stop before you send the transaction. Burning an owner reserve is typically a much higher cost than sending a normal transaction, so you don't want it to be a surprise. (Currently, on both Mainnet and Devnet, the cost of sending a typical transaction is 0.000010 XRP but the cost of AMMCreate is 2 XRP.)
<!-- MULTICODE_BLOCK_START -->