mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 11:45:50 +00:00
Fix interactive tutorial faucet interface on Devnet; migrate AMM tutorial to Devnet
This commit is contained in:
mDuo13
@@ -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) )
|
||||
})
|
||||
|
||||
block.find(".output-area").append(`<p>${tl("Populated this page's examples with these credentials.")}</p>`)
|
||||
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["destination"] = destination;
|
||||
body["memos"] = [memo];
|
||||
|
||||
const response = await fetch(faucet_url, {
|
||||
|
||||
269
assets/js/tutorials/create-amm.js
Normal file
269
assets/js/tutorials/create-amm.js
Normal 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()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user