update to match existing modular tutorials

This commit is contained in:
Oliver Eggert
2024-08-26 21:45:03 -07:00
parent 5358b7170c
commit c9bb4102e0
22 changed files with 1076 additions and 348 deletions

View File

@@ -10,86 +10,103 @@ labels:
This example shows how to:
1. Purchase `FOO` tokens from an AMM.
2. Deposit `XRP` and `FOO` to the AMM and receive LP tokens.
3. Vote on AMM trading fees.
1. Deposit `XRP` and issued tokens to an AMM and receive LP tokens.
2. Vote on AMM trading fees.
3. Check the value of your LP tokens.
4. Redeem LP Tokens for assets.
[![Add assets to AMM test harness](/docs/img/quickstart-add-to-amm1.png)](/docs/img/quickstart-add-to-amm1.png)
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> archive to try each of the samples in your own browser.
{% admonition type="note" name="Note" %}
Without the Quickstart Samples, you will not be able to try the examples that follow.
{% /admonition %}
## Usage
![Test harness to create AMM](/docs/img/add-assets-to-amm.png)
### Get Accounts
Download the [AMM Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/amm/js/) to use the AMM test harness in your browser and follow along in this tutorial.
1. Open `12.add-to-amm.html` in a browser.
2. Select **Testnet** or **Devnet**
3. Get test accounts.
- If you have existing account seeds:
1. Paste account seeds in the **Seeds** field.
2. Click **Get Accounts from Seeds**.
- If you don't have account seeds:
1. Click **Get New Standby Account**.
2. Click **Get New Operational Account**.
### Set up an AMM
1. Click **Get New Devnet Account**.
2. Click **Issue FOO Tokens**.
3. Click **Create AMM**. You can view the AMM pool info in the `AMM Info` box.
[![Get account results](/docs/img/quickstart-add-to-amm2.png)](/docs/img/quickstart-add-to-amm2.png)
### Buy FOO tokens
### Add Assets to an Existing AMM
Buy `FOO` tokens from the established AMM in order to interact with the pool.
Choose the amount of assets to add to the AMM. You can deposit either one or both assets, but deposting only one asset reduces the amount of LP tokens you receive. In the standby account fields:
1. Click **Get Second Devnet Account**.
2. Click **Buy FOO Tokens**. To simplify this tutorial, this purchases 250 `FOO`. The AMM starts with a ratio of 10:1 `FOO`:`XRP`. This doesn't translate to a direct 25 `XRP` spend, since the AMM will adjust the cost of `FOO` to be more expensive as you buy more from it.
1. Enter how much XRP to add in the **XRP Balance** field.
2. Enter how many issued tokens to add in the **Amount** field.
3. Enter the token issuer address in the **Destination** field.
4. Click **Add to AMM**.
### Add Assets to the AMM
Add a value in the `XRP` and `FOO` fields, then click **Add Assets**. You can deposit either one or both assets, but depositing only one asset will reduce the amount of LP tokens you receive.
[![Add assets to AMM results](/docs/img/quickstart-add-to-amm3.png)](/docs/img/quickstart-add-to-amm3.png)
### Vote on trading fees
Add a value in the `Fee` field, then click **Add Vote**. You can view the updated AMM info after doing so and see your submission under trading fees.
1. Enter a value in the **Trading Fee** field. The proposed fee is in units of 1/100,000; a value of 1 is equivalent to 0.001%. The maximum value is 1000, indicating a 1% fee.
2. Click **Vote on Fee**.
The proposed fee is in units of 1/100,000; a value of 1 is equivalent to 0.001%. The maximum value is 1000, indicating a 1% fee.
[![Vote on trading fees results](/docs/img/quickstart-add-to-amm4.png)](/docs/img/quickstart-add-to-amm4.png)
### Redeem your LP tokens
### Check LP Token Value
1. Click **Calculate LP Value**.
2. Click **Withdraw LP**. This tutorial redeems all your LP tokens to withdraw both assets, but AMM withdrawals can be either both or one, depending on the fields specified in the transaction.
1. Enter a value in the **LP Tokens** field.
2. Click **Get LP Value**.
[![Get LP token value results](/docs/img/quickstart-add-to-amm5.png)](/docs/img/quickstart-add-to-amm5.png)
### Redeem Your LP Tokens
1. Enter a value in the **LP Tokens** field.
2. Click **Redeem LP**.
[![Get LP token value results](/docs/img/quickstart-add-to-amm6.png)](/docs/img/quickstart-add-to-amm6.png)
## Code Walkthrough
### Buy FOO tokens
Purchases 250 `FOO` tokens by creating an offer on the XRPL DEX. Since the AMM created in the test harness is the only available source of `FOO`, it takes the offer.
{% code-snippet file="/_code-samples/amm/js/2.add-assets-to-amm.js" language="js" from="// Buy FOO tokens from the XRP/FOO AMM." before="// Deposit assets to AMM." /%}
You can open `ripplex12-add-to-amm.js` from the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/) to view the source code.
### Deposit assets
### Add Assets to an Existing AMM
This code checks if you're trying to add one or both assets, and then modifies the `AMMDeposit` transaction to be either a single or double-asset deposit.
The function to update LP balance checks the AMM to get the unique AMM account, which acts as its own issuer of LP tokens. It then checks your wallet balance and gets the LP token value by matching it with the AMM issuer.
{% code-snippet file="/_code-samples/amm/js/2.add-assets-to-amm.js" language="js" from="// Deposit assets to AMM." before="// Vote on fees." /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex12-add-to-amm.js" from="// Deposit assets to existing AMM." before="// Vote on AMM trading fees" language="js" /%}
### Vote on trading fees
### Vote on Trading Fees
Trading fees are applied to any transaction that interacts with the AMM. The act of voting is straightforward and only requires you to hold the AMM LP tokens before submitting a vote.
{% code-snippet file="/_code-samples/amm/js/2.add-assets-to-amm.js" language="js" from="// Vote on fees." before="// Calculate the value of LP tokens." /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex12-add-to-amm.js" from="// Vote on AMM trading fees" before="// Calculate the value of your LP tokens." language="js" /%}
### Calculate value of LP tokens
### Calculate Value of LP Tokens
There isn't a dedicated method to calculate how much you can redeem your LP tokens for, but the math isn't too complicated. The percentage of the total LP tokens you own qualifies you for the same percentage of the total assets in the AMM.
There isn't a dedicated method to calculate how much you can redeem your LP tokens for, but the math isn't too complicated. The percentage of the total LP tokens in circulation that you own qualifies you for the same percentage of the total assets in the AMM.
{% code-snippet file="/_code-samples/amm/js/2.add-assets-to-amm.js" language="js" from="// Calculate the value of LP tokens." before="// Withdraw by redeeming LP tokens." /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex12-add-to-amm.js" from="// Calculate the value of your LP tokens." before="// Withdraw by redeeming LP tokens." language="js" /%}
### Redeem your LP tokens
### Redeem Your LP Tokens
Redeeming your LP tokens requires you to get the LP token issuer and currency code, both of which you can check using the `amm_info` method. This code redeems assets using all your LP tokens, but you can also specify withdrawals by the amount of an asset you want to take out.
Redeeming your LP tokens requires you to get the LP token issuer and currency code, both of which you can check using the `amm_info` method.
{% code-snippet file="/_code-samples/amm/js/2.add-assets-to-amm.js" language="js" from="// Withdraw by redeeming LP tokens." /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex12-add-to-amm.js" from="// Withdraw by redeeming LP tokens." language="js" /%}

View File

@@ -2,55 +2,100 @@
This example shows how to:
1. Issue `FOO` tokens on Devnet.
2. Check if an AMM exists for `XRP/FOO`.
3. Create an AMM for `XRP/FOO`.
1. Check if an AMM pair exists.
2. Issue tokens.
3. Create an AMM pair with the issued tokens and XRP.
[![Create AMM test harness](/docs/img/quickstart-create-amm1.png)](/docs/img/quickstart-create-amm1.png)
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> archive to try each of the samples in your own browser.
{% admonition type="note" name="Note" %}
Without the Quickstart Samples, you will not be able to try the examples that follow.
{% /admonition %}
## Usage
![Test harness to create AMM](/docs/img/create-an-amm.png)
### Get Accounts
Download the [AMM Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/amm/js/) to use the AMM test harness in your browser and follow along in this tutorial.
1. Open `11.create-amm.html` in a browser.
2. Select **Testnet** or **Devnet**
3. Get test accounts.
- If you have existing account seeds:
1. Paste account seeds in the **Seeds** field.
2. Click **Get Accounts from Seeds**.
- If you don't have account seeds:
1. Click **Get New Standby Account**.
2. Click **Get New Operational Account**.
1. Open `create-an-amm.html` in a browser.
2. Click **Get New Devnet Account**.
3. Click **Issue FOO Tokens**.
4. Click **Check for AMM**.
5. Click **Create AMM**.
6. Click **Check for AMM**.
[![Get account results](/docs/img/quickstart-create-amm2.png)](/docs/img/quickstart-create-amm2.png)
### Check AMM
In the standby account fields:
1. Enter a [currency code](/docs/references/protocol/data-types/currency-formats.md#currency-codes) in the **Currency** field.
2. Enter a token issuer in the **Destination** field.
3. Click **Check AMM**.
[![Check AMM results](/docs/img/quickstart-create-amm3.png)](/docs/img/quickstart-create-amm3.png)
### Create Trustline
Create a trustline from the operational account to the standby account. In the standby account fields:
1. Enter a currency code in the **Currency** field.
2. Enter the maximum transfer limit in the **Amount** field.
3. Enter the operational account address in the **Destination** field.
4. Click **Create Trustline**.
[![Create trustline results](/docs/img/quickstart-create-amm4.png)](/docs/img/quickstart-create-amm4.png)
### Issue Tokens
Send issued tokens from the operational account to the standby account. In the operational account fields:
1. Select **Allow Rippling** and click **Configure Account**.
2. Enter a value in the **Amount** field.
3. Enter the standby account address in the **Destination** field.
4. Enter the currency code from the trustline in the **Currency** field.
5. Click **Send Currency**.
[![Issue token results](/docs/img/quickstart-create-amm5.png)](/docs/img/quickstart-create-amm5.png)
### Create an AMM
In the standby account fields:
1. Click **Get Balances** to verify how many tokens you have.
2. Enter how much XRP to add in the **XRP Balance** field.
3. Enter the operational account address in the **Destination** field.
4. Enter the currency code in the **Currency** field.
5. Enter how many issued tokens to add in the **Amount** field.
6. Click **Create AMM**.
[![Create AMM results](/docs/img/quickstart-create-amm6.png)](/docs/img/quickstart-create-amm6.png)
## Code Walkthrough
### Connect to Devnet and generate credentials
You must be connected to the network to query it and submit transactions. This code connects to Devnet and generates a fresh wallet, funded with 100 XRP.
{% code-snippet file="/_code-samples/amm/js/1.create-an-amm.js" from="// Define client, network, and explorer." before="// Issue FOO tokens to Devnet wallet." language="js" /%}
You can open `ripplex11-create-amm.js` from the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/) to view the source code.
### Issue FOO tokens
### Check AMM
Normally, you'd acquire a second token through a stablecoin issuer, or buying it off an exchange. For this tutorial, we'll go through the process of issuing a brand new FOO token, enabling us to create a unique AMM pair later. Creating a new issuer and issuing a token involves:
This checks if an AMM already exists. While multiple tokens can share the same currency code, each issuer makes them unique. When specifying an AMM, you must include the currency code and token issuer. If the AMM pair exists, this responds with the AMM information, such as token pair, trading fees, etc.
1. Creating a new issuer wallet.
2. Enabling the `DefaultRipple` flag.
3. Creating a trustline from your wallet to the issuer wallet.
4. Sending the `FOO` tokens from the issuer to your wallet.
{% code-snippet file="/_code-samples/amm/js/1.create-an-amm.js" from="// Issue FOO tokens to Devnet wallet." before="// Check if AMM exists." language="js" /%}
### Check if an AMM already exists.
Each AMM pair is unique. This checks to make sure the `XRP/FOO` pair doesn't already exist. In the previous step, we created a new issuer and `FOO` token; even if another `FOO` token already exists, it's considered unique if issued by another account. If the AMM pair exists, this responds with the AMM information, such as token pair, trading fees, etc.
{% code-snippet file="/_code-samples/amm/js/1.create-an-amm.js" from="// Check if AMM exists." before="// Create new AMM." language="js" /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex11-create-amm.js" from="// Check AMM" language="js" /%}
### Create AMM
This send the `AMMCreate` transaction with an initial pairing of 50 `XRP` to 500 `FOO`.
This sends the `AMMCreate` transaction and creates a new AMM, using the initial assets provided.
{% code-snippet file="/_code-samples/amm/js/1.create-an-amm.js" from="// Create new AMM." language="js" /%}
{% code-snippet file="/_code-samples/quickstart/js/ripplex11-create-amm.js" from="// Create AMM function" before="// Check AMM function" language="js" /%}