mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-23 21:25:49 +00:00
Reorg tutorials to match nav, and update links
This commit is contained in:
mDuo13
13
docs/tutorials/javascript/modular-tutorials/index.md
Normal file
13
docs/tutorials/javascript/modular-tutorials/index.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
html: modular-tutorials-in-javascript.html
|
||||
parent: javascript.html
|
||||
top_nav_grouping: Article Types
|
||||
metadata:
|
||||
indexPage: true
|
||||
---
|
||||
# Modular Tutorials in JavaScript
|
||||
|
||||
Modular XRPL tutorials in JavaScript.
|
||||
|
||||
|
||||
{% child-pages /%}
|
||||
@@ -0,0 +1,757 @@
|
||||
---
|
||||
html: assign-an-authorized-minter-using-javascript.html
|
||||
parent: nfts-using-javascript.html
|
||||
seo:
|
||||
description: Authorize another account to mint NFTs for you.
|
||||
labels:
|
||||
- Accounts
|
||||
- Quickstart
|
||||
- XRP
|
||||
- NFTs, NFTokens
|
||||
---
|
||||
# Assign an Authorized Minter Using JavaScript
|
||||
|
||||
You can assign another account permission to mint NFTs for you.
|
||||
|
||||
This example shows how to:
|
||||
|
||||
1. Authorize an account to create NFTs for your account.
|
||||
2. Mint an NFT for another account, when authorized.
|
||||
|
||||
[](/docs/img/quickstart28.png)
|
||||
|
||||
# Usage
|
||||
|
||||
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 the sample in your own browser.
|
||||
|
||||
## Get Accounts
|
||||
|
||||
1. Open `6.authorized-minter.html` in a browser.
|
||||
2. Choose your ledger instance (_Testnet_ or _Devnet_).
|
||||
1. If you have existing test account seeds:
|
||||
1. Paste the account seeds in the **Seeds** field.
|
||||
2. Click **Get Accounts from Seeds**.
|
||||
2. If you do not have existing test accounts:
|
||||
1. Click **Get New Standby Account**.
|
||||
2. Click **Get New Operational Account**.
|
||||
|
||||
## Authorize an Account to Create NFTs
|
||||
|
||||
To authorize another account to create NFTs for your account:
|
||||
|
||||
1. Copy the **Operational Account** value.
|
||||
2. Paste the **Operational Account** value in the **Authorized Minter** field.
|
||||
3. Click **Set Minter**.
|
||||
|
||||
[](/docs/img/quickstart29.png)
|
||||
|
||||
## Mint an NFT for Another Account
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXvyu2ZDCBM?si=AFrGzgV4CAF2LoAk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
This example uses the Operational account, which was authorized in the previous step, to mint a token on behalf of the Standby account.
|
||||
|
||||
To mint a non-fungible token for another account:
|
||||
|
||||
1. Set the **Flags** field. For testing purposes, we recommend setting the value to _8_.
|
||||
2. Enter the **NFT URL**. This is a URI that points to the data or metadata associated with the NFT object. You can use the sample URI provided if you do not have one of your own.
|
||||
3. Enter the **Transfer Fee**, a percentage of the proceeds that the original creator receives from future sales of the NFT. This is a value of 0-50000 inclusive, allowing transfer rates between 0.000% and 50.000% in increments of 0.001%. If you do not set the **Flags** field to allow the NFT to be transferrable, set this field to 0.
|
||||
4. Copy the **Standby Account** value.
|
||||
5. Paste the **Standby Account** value in the Operational account **Issuer** field.
|
||||
6. Click the Operational account **Mint Other** button.
|
||||
|
||||
[](/docs/img/quickstart30.png)
|
||||
|
||||
Once the item is minted, the authorized minter can sell the NFT normally. The proceeds go to the authorized minter, less the transfer fee. The minter and the issuer can settle up on a division of the price separately.
|
||||
|
||||
## Create a Sell Offer
|
||||
|
||||
To create an NFT sell offer:
|
||||
|
||||
1. On the Operational account side, enter the **Amount** of the sell offer in drops (millionths of an XRP), for example 100000000 (100 XRP
|
||||
2. Set the **Flags** field to _1_.
|
||||
3. Enter the **NFT ID** of the minted NFT you want to sell.
|
||||
4. Optionally, enter a number of days until **Expiration**.
|
||||
5. Click **Create Sell Offer**.
|
||||
|
||||
The important piece of information in the response is the NFT Offer Index, labeled as `nft_offer_index`, which is used to accept the sell offer.
|
||||
|
||||
[](/docs/img/quickstart31.png)
|
||||
|
||||
## Accept Sell Offer
|
||||
|
||||
Once a sell offer is available, you can create a new account to accept the offer and buy the NFT.
|
||||
|
||||
To accept an available sell offer:
|
||||
|
||||
1. Click **Get New Standby Account**.
|
||||
1. Enter the **NFT Offer Index** (labeled as `nft_offer_index` in the NFT offer results. This is different from the `nft_id`).
|
||||
2. Click **Accept Sell Offer**.
|
||||
|
||||
The results show that the Issuer account has been credited 25 XRP. The Buyer account was debited the 100 XRP price plus 12 drops as the transaction cost. The Seller (Authorized Minter) account is credited 75 XRP. the Issuer and the Seller can divide the proceeds per their agreement in a separate transaction.
|
||||
[](/docs/img/quickstart32.png)
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
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.
|
||||
|
||||
## Set Minter
|
||||
|
||||
This function sets the authorized minter for an account. Each account can have 0 or 1 authorized minter that can mint NFTs in its stead.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// **************** Set Minter *************************
|
||||
// *******************************************************
|
||||
|
||||
async function setMinter() {
|
||||
```
|
||||
|
||||
Connect to the ledger and get the account.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallet.'
|
||||
standbyResultField.value = results
|
||||
my_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
standbyResultField.value = results ```
|
||||
|
||||
Define the AccountSet transaction, setting the `NFTokenMinter` account and the `asfAuthorizedNFTokenMinter` flag.
|
||||
|
||||
```javascript
|
||||
tx_json = {
|
||||
"TransactionType": "AccountSet",
|
||||
"Account": my_wallet.address,
|
||||
```
|
||||
|
||||
Set `NFTokenMinter` to the account number of the authorized minter.
|
||||
|
||||
```javascript
|
||||
"NFTokenMinter": standbyMinterField.value,
|
||||
```
|
||||
|
||||
Set the `asfAuthorizedNFTokenMinter` flag (the numeric value is _10_).
|
||||
|
||||
```javascript
|
||||
"SetFlag": xrpl.AccountSetAsfFlags.asfAuthorizedNFTokenMinter
|
||||
}
|
||||
```
|
||||
|
||||
Report progress.
|
||||
|
||||
```javascript
|
||||
results += '\nSet Minter.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Prepare and send the transaction, then wait for results
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill(tx_json)
|
||||
const signed = my_wallet.sign(prepared)
|
||||
const result = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
If the transaction succeeds, show the results. If not, report that the transaction failed.
|
||||
|
||||
```javascript
|
||||
if (result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += '\nAccount setting succeeded.\n'
|
||||
results += JSON.stringify(result,null,2)
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
throw 'Error sending transaction: ${result}'
|
||||
results += '\nAccount setting failed.'
|
||||
standbyResultField.value = results
|
||||
}
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of configureAccount()
|
||||
```
|
||||
|
||||
## Mint Other
|
||||
|
||||
This revised mint function allows one account to mint for another issuer.
|
||||
|
||||
```javascript
|
||||
|
||||
// *******************************************************
|
||||
// **************** Mint Other *************************
|
||||
// *******************************************************
|
||||
|
||||
async function mintOther() {
|
||||
```
|
||||
|
||||
Connect to the ledger and get the account.
|
||||
|
||||
```javascript
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
let net = getNet()
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
```
|
||||
Report success
|
||||
|
||||
```javascript
|
||||
results += '\nConnected. Minting NFT.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
This transaction blob is the same as the one used for the previous [`mintToken()` function](mint-and-burn-nfts.md#mint-token), with the addition of the `Issuer` field.
|
||||
|
||||
```javascript
|
||||
const tx_json = {
|
||||
"TransactionType": "NFTokenMint",
|
||||
"Account": standby_wallet.classicAddress,
|
||||
```
|
||||
|
||||
The URI is a link to a data file represented by the NFT.
|
||||
|
||||
```javascript
|
||||
"URI": xrpl.convertStringToHex(standbyTokenUrlField.value),
|
||||
```
|
||||
|
||||
At a minimum, we recommend that you set the `tfTransferable` flag (8) to enable accounts to sell and resell the NFT for testing purposes.
|
||||
|
||||
```javascript
|
||||
"Flags": parseInt(standbyFlagsField.value),
|
||||
```
|
||||
|
||||
Transfer fee is a value 0-50000 representing .001% of the price for a resale to be returned to the original issuer. For example, _25000_ translates to 25% of the price to be sent to the issuer on resale.
|
||||
|
||||
```javascript
|
||||
"TransferFee": parseInt(standbyTransferFeeField.value),
|
||||
```
|
||||
|
||||
The **Issuer** is the original creator of the object represented by the NFT.
|
||||
|
||||
```javascript
|
||||
"Issuer": standbyIssuerField.value,
|
||||
```
|
||||
|
||||
The `NFTokenTaxon` is an optional number field the issuer can use for their own purposes. The same taxon can be used for multiple tokens. Set it to 0 if you have no use for it.
|
||||
|
||||
```javascript
|
||||
"NFTokenTaxon": 0 //Required, but if you have no use for it, set to zero.
|
||||
}
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(tx_json, { wallet: standby_wallet} )
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += '\n\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\n\nnfts: ' + JSON.stringify(nfts, null, 2)
|
||||
standbyResultField.value = results + (await
|
||||
client.getXrpBalance(standby_wallet.address))
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} //End of mintOther()
|
||||
```
|
||||
|
||||
## Reciprocal Transactions
|
||||
|
||||
These functions duplicate the functions of the standby account for the operational account. See the corresponding standby account function for walkthrough information.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// **************** Set Operational Minter **************
|
||||
// ********************************************************
|
||||
|
||||
async function oPsetMinter() {
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallet.'
|
||||
operationalResultField.value = results
|
||||
my_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
operationalResultField.value = results
|
||||
|
||||
tx_json = {
|
||||
"TransactionType": "AccountSet",
|
||||
"Account": my_wallet.address,
|
||||
"NFTokenMinter": operationalMinterField.value,
|
||||
"SetFlag": xrpl.AccountSetAsfFlags.asfAuthorizedNFTokenMinter
|
||||
}
|
||||
results += '\nSet Minter.'
|
||||
operationalResultField.value = results
|
||||
|
||||
const prepared = await client.autofill(tx_json)
|
||||
const signed = my_wallet.sign(prepared)
|
||||
const result = await client.submitAndWait(signed.tx_blob)
|
||||
if (result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += '\nAccount setting succeeded.\n'
|
||||
results += JSON.stringify(result,null,2)
|
||||
operationalResultField.value = results
|
||||
} else {
|
||||
throw 'Error sending transaction: ${result}'
|
||||
results += '\nAccount setting failed.'
|
||||
operationalResultField.value = results
|
||||
}
|
||||
|
||||
client.disconnect()
|
||||
} // End of oPsetMinter()
|
||||
|
||||
|
||||
// *******************************************************
|
||||
// ************** Operational Mint Other *****************
|
||||
// *******************************************************
|
||||
|
||||
async function oPmintOther() {
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
let net = getNet()
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
results += '\nConnected. Minting NFT.'
|
||||
operationalResultField.value = results
|
||||
|
||||
// This version adds the "Issuer" field.
|
||||
// ------------------------------------------------------------------------
|
||||
const tx_json = {
|
||||
"TransactionType": 'NFTokenMint',
|
||||
"Account": operational_wallet.classicAddress,
|
||||
"URI": xrpl.convertStringToHex(operationalTokenUrlField.value),
|
||||
"Flags": parseInt(operationalFlagsField.value),
|
||||
"Issuer": operationalIssuerField.value,
|
||||
"TransferFee": parseInt(operationalTransferFeeField.value),
|
||||
"NFTokenTaxon": 0 //Required, but if you have no use for it, set to zero.
|
||||
}
|
||||
|
||||
// ----------------------------------------------------- Submit signed blob
|
||||
const tx = await client.submitAndWait(tx_json, { wallet: operational_wallet} )
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: operational_wallet.classicAddress
|
||||
})
|
||||
|
||||
// ------------------------------------------------------- Report results
|
||||
results += '\n\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\n\nnfts: ' + JSON.stringify(nfts, null, 2)
|
||||
results += await client.getXrpBalance(operational_wallet.address)
|
||||
operationalResultField.value = results
|
||||
client.disconnect()
|
||||
} //End of oPmintToken
|
||||
```
|
||||
|
||||
## 6.authorized-minter.html
|
||||
|
||||
Update the form with fields and buttons to support the new functions.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Token Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex2-send-currency.js'></script>
|
||||
<script src='ripplex3-mint-nfts.js'></script>
|
||||
<script src='ripplex4-transfer-nfts.js'></script>
|
||||
<script src='ripplex6-authorized-minter.js'></script>
|
||||
<script>
|
||||
if (typeof module !== "undefined") {
|
||||
const xrpl = require('xrpl')
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Token Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="testnet">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="devnet">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT URL</td>
|
||||
<td><input type="text" id="standbyTokenUrlField"
|
||||
value = "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf4dfuylqabf3oclgtqy55fbzdi" size="80"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Flags</td>
|
||||
<td><input type="text" id="standbyFlagsField" value="1" size="10"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT ID</td>
|
||||
<td><input type="text" id="standbyTokenIdField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT Offer Index</td>
|
||||
<td><input type="text" id="standbyTokenOfferIndexField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Owner</td>
|
||||
<td><input type="text" id="standbyOwnerField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Authorized Minter</td>
|
||||
<td><input type="text" id="standbyMinterField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Issuer</td>
|
||||
<td><input type="text" id="standbyIssuerField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Destination</td>
|
||||
<td><input type="text" id="standbyDestinationField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Expiration</td>
|
||||
<td><input type="text" id="standbyExpirationField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Transfer Fee</td>
|
||||
<td><input type="text" id="standbyTransferFeeField" value="" size="80"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="left">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP></button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="createTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="sendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="mintToken()">Mint NFT</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getTokens()">Get NFTs</button>
|
||||
<br/>
|
||||
<button type="button" onClick="burnToken()">Burn NFT</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="setMinter('standby')">Set Minter</button>
|
||||
<br/>
|
||||
<button type="button" onClick="mintOther()">Mint Other</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="createSellOffer()">Create Sell Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="acceptSellOffer()">Accept Sell Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="createBuyOffer()">Create Buy Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="acceptBuyOffer()">Accept Buy Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getOffers()">Get Offers</button>
|
||||
<br/>
|
||||
<button type="button" onClick="cancelOffer()">Cancel Offer</button>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()">< Send XRP</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPcreateTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPsendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPmintToken()">Mint NFT</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPgetTokens()">Get NFTs</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPburnToken()">Burn NFT</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPsetMinter()">Set Minter</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPmintOther()">Mint Other</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPcreateSellOffer()">Create Sell Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPacceptSellOffer()">Accept Sell Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPcreateBuyOffer()">Create Buy Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPacceptBuyOffer()">Accept Buy Offer</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPgetOffers()">Get Offers</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPcancelOffer()">Cancel Offer</button>
|
||||
</td>
|
||||
<td valign="top" align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td align="right"> <input type="checkbox" id="operationalDefault" checked="true"/>
|
||||
<label for="operationalDefault">Allow Rippling</label>
|
||||
<button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT URL</td>
|
||||
<td><input type="text" id="operationalTokenUrlField"
|
||||
value = "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf4dfuylqabf3oclgtqy55fbzdi" size="80"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Flags</td>
|
||||
<td><input type="text" id="operationalFlagsField" value="1" size="10"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT ID</td>
|
||||
<td><input type="text" id="operationalTokenIdField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT Offer Index</td>
|
||||
<td><input type="text" id="operationalTokenOfferIndexField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Owner</td>
|
||||
<td><input type="text" id="operationalOwnerField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Authorized Minter</td>
|
||||
<td><input type="text" id="operationalMinterField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Issuer</td>
|
||||
<td><input type="text" id="operationalIssuerField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Destination</td>
|
||||
<td><input type="text" id="operationalDestinationField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Expiration</td>
|
||||
<td><input type="text" id="operationalExpirationField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Transfer Fee</td>
|
||||
<td><input type="text" id="operationalTransferFeeField" value="" size="80"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,501 @@
|
||||
---
|
||||
html: batch-mint-nfts-using-javascript.html
|
||||
parent: nfts-using-javascript.html
|
||||
seo:
|
||||
description: Broker a sale between a sell offer and a buy offer.
|
||||
labels:
|
||||
- Accounts
|
||||
- Quickstart
|
||||
- NFTs
|
||||
- XRP
|
||||
---
|
||||
# Batch Mint NFTs Using JavaScript
|
||||
|
||||
You can create an application that mints multiple NFTs at one time. You can use a `for` loop to send one transaction after another.
|
||||
|
||||
A best practice is to use `Tickets` to reserve the transaction sequence numbers. If you create an application that creates NFTs without using tickets, if any transaction fails for any reason, the application stops with an error. If you use tickets, the application continues to send transactions, and you can look into the reason for any individual failures afterward.
|
||||
|
||||
[](/docs/img/quickstart33-batch-mint.png)
|
||||
|
||||
## Usage
|
||||
|
||||
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 the sample in your own browser.
|
||||
|
||||
## Get an Account
|
||||
|
||||
1. Open `7.batch-minting.html` in a browser.
|
||||
2. Get a test account.
|
||||
1. If you want to use an existing account seed:
|
||||
1. Paste the account seed in the **Seed** field.
|
||||
2. Click **Get Account from Seed**.
|
||||
2. If you do not want to use an existing account seed, click **Get New Standby Account**.
|
||||
|
||||
**Note:** Running this command throws an error in the JavaScript console because the `getAccountsFromSeeds` function in `ripplex1-send-xrp.js` looks for the operational seed field, which is not included in this form. You can ignore the error (or fix it in your own implementation).
|
||||
|
||||
## Batch Mint NFTs
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/tJeDnEMZ7RU?si=mHwKbSRMxQ1cO4Fh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
This example lets you mint multiple NFTs for a single unique item. The NFT might represent "prints" of an original artwork, tickets to an event, or another limited set of unique items.
|
||||
|
||||
To batch mint a non-fungible token objects:
|
||||
|
||||
1. Set the **Flags** field. For testing purposes, we recommend setting the value to _8_. This sets the _tsTransferable_ flag, meaning that the NFT object can be transferred to another account. Otherwise, the NFT object can only be transferred back to the issuing account. See [NFTokenMint](../../../../references/protocol/transactions/types/nftokenmint.md) for information about all of the available flags for minting NFTs.
|
||||
2. Enter the **Token URL**. This is a URI that points to the data or metadata associated with the NFT object. You can use the sample URI provided if you do not have one of your own.
|
||||
3. Enter a **Token Count** of up to 200 NFTs to create in one batch.
|
||||
4. Enter the **Transfer Fee**, a percentage of the proceeds that the original creator receives from future sales of the NFT. This is a value of 0-50000 inclusive, allowing transfer fees between 0.000% and 50.000% in increments of 0.001%. If you do not set the **Flags** field to allow the NFT to be transferrable, set this field to 0.
|
||||
5. Click **Batch Mint**.
|
||||
|
||||
## Get Batch NFTs
|
||||
|
||||
Click **Get Batch NFTs** to get the current list of NFTs for your account.
|
||||
|
||||
The difference between this function and the `getTokens()` function used earlier is that it allows for larger lists of tokens, and sends multiple requests if the tokens exceed the number of objects allowed in a single request.
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
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.
|
||||
|
||||
## Get Account From Seed
|
||||
|
||||
This is a stripped-down version of `getAccountsFromSeeds()` that only gets the Standby account information.
|
||||
|
||||
```javascript
|
||||
async function getAccountFromSeed() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallets.\n'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Use the seed to derive the account.
|
||||
|
||||
```javascript
|
||||
var theSeed = seeds.value
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(theSeed)
|
||||
```
|
||||
|
||||
Get the current XRP balance.
|
||||
|
||||
```javascript
|
||||
const standby_balance = (await client.getXrpBalance(standby_wallet.address))
|
||||
```
|
||||
|
||||
Populate the fields for Standby account.
|
||||
|
||||
```javascript
|
||||
standbyAccountField.value = standby_wallet.address
|
||||
standbyPubKeyField.value = standby_wallet.publicKey
|
||||
standbyPrivKeyField.value = standby_wallet.privateKey
|
||||
standbySeedField.value = standby_wallet.seed
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
}
|
||||
```
|
||||
|
||||
## Get Batch NFTs
|
||||
|
||||
This version of `getTokens()` allows for a larger set of NFTs by watching for a `marker` at the end of each batch of NFTs. Subsequent requests get the next batch of NFTs starting at the previous marker, until all NFTs are retrieved.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// **************** Get Batch Tokens *********************
|
||||
// *******************************************************
|
||||
|
||||
async function getBatchNFTs() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger and get the account.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + net + '...'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected. Getting NFTs...'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Request the `account_nfts`. Set the `limit` to 400, the maximum amount, to retrieve up to 400 records in one batch.
|
||||
|
||||
```javascript
|
||||
results += "\n\nNFTs:\n"
|
||||
let nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress,
|
||||
limit: 400
|
||||
})
|
||||
results += JSON.stringify(nfts,null,2)
|
||||
```
|
||||
|
||||
If the list of `NFTs` exceeds your limit, the result includes a `marker` field that you can use as a parameter for the next `account_nfts` request. The `marker` indicates where the next batch of records starts. While the `marker` field is present, continue to request another batch of NFT records.
|
||||
|
||||
```javascript
|
||||
while (nfts.result.marker)
|
||||
{
|
||||
nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress,
|
||||
limit: 400,
|
||||
marker: nfts.result.marker
|
||||
})
|
||||
results += '\n' + JSON.stringify(nfts,null,2)
|
||||
}
|
||||
```
|
||||
|
||||
Report the final results.
|
||||
|
||||
```javascript
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} //End of getBatchTokens()
|
||||
```
|
||||
|
||||
## Batch Mint
|
||||
|
||||
This script mints multiple copies of the same NFT.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ****************** Batch Mint ***********************
|
||||
// *******************************************************
|
||||
|
||||
async function batchMint() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger and get the account.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallet.'
|
||||
standbyResultField.value = results
|
||||
standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the account information, particularly the `Sequence` number.
|
||||
|
||||
```javascript
|
||||
const account_info = await client.request({
|
||||
"command": "account_info",
|
||||
"account": standby_wallet.address
|
||||
})
|
||||
|
||||
my_sequence = account_info.result.account_data.Sequence
|
||||
results += "\n\nSequence Number: " + my_sequence + "\n\n"
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Next, create ticket numbers for the batch. Without tickets, if one transaction fails, all others in the batch fail. With tickets, there can be failures, but the rest can still succeed, and you can investigate any problems afterward.
|
||||
|
||||
Parse the NFT Count field value to an integer.
|
||||
|
||||
```javascript
|
||||
const nftCount = parseInt(standbyNFTCountField.value)
|
||||
```
|
||||
|
||||
Create the `TicketCreate` transaction hash, automatically filling default values. Provide the `Sequence` number to indicate a starting point for the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
const ticketTransaction = await client.autofill({
|
||||
"TransactionType": "TicketCreate",
|
||||
"Account": standby_wallet.address,
|
||||
"TicketCount": nftCount,
|
||||
"Sequence": my_sequence
|
||||
})
|
||||
```
|
||||
|
||||
Sign and submit the transaction.
|
||||
|
||||
```javascript
|
||||
const signedTransaction = standby_wallet.sign(ticketTransaction)
|
||||
const tx = await client.submitAndWait(signedTransaction.tx_blob)
|
||||
```
|
||||
|
||||
Send the request and wait for the result.
|
||||
|
||||
```javascript
|
||||
let response = await client.request({
|
||||
"command": "account_objects",
|
||||
"account": standby_wallet.address,
|
||||
"type": "ticket"
|
||||
})
|
||||
```
|
||||
|
||||
Populate the `tickets` array variable.
|
||||
|
||||
```javascript
|
||||
let tickets = []
|
||||
|
||||
for (let i=0; i < nftCount; i++) {
|
||||
tickets[i] = response.result.account_objects[i].TicketSequence
|
||||
}
|
||||
```
|
||||
|
||||
Report the function progress.
|
||||
|
||||
```javascript
|
||||
results += "Tickets generated, minting NFTs.\n\n"
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Use a `for` loop to create the NFTs one at a time, up to the number you specified.
|
||||
|
||||
```javascript
|
||||
for (let i=0; i < nftCount; i++) {
|
||||
const transactionBlob = {
|
||||
"TransactionType": "NFTokenMint",
|
||||
"Account": standby_wallet.classicAddress,
|
||||
"URI": xrpl.convertStringToHex(standbyTokenUrlField.value),
|
||||
"Flags": parseInt(standbyFlagsField.value),
|
||||
"TransferFee": parseInt(standbyTransferFeeField.value),
|
||||
"Sequence": 0,
|
||||
```
|
||||
|
||||
Use the loop variable to step through the array. Set the `LastLedgerSequence` to `null`.
|
||||
|
||||
```javascript
|
||||
"TicketSequence": tickets[i],
|
||||
"LastLedgerSequence": null,
|
||||
"NFTokenTaxon": 0
|
||||
}
|
||||
```
|
||||
|
||||
Submit the signed transaction hash.
|
||||
|
||||
```javascript
|
||||
const tx = client.submit(transactionBlob, { wallet: standby_wallet} )
|
||||
}
|
||||
```
|
||||
|
||||
Use the same logic as `getBatchNFTs`, above, to get the list of current NFTs.
|
||||
|
||||
```javascript
|
||||
results += "\n\nNFTs:\n"
|
||||
let nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress,
|
||||
limit: 400
|
||||
})
|
||||
|
||||
results += JSON.stringify(nfts,null,2)
|
||||
while (nfts.result.marker)
|
||||
{
|
||||
nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress,
|
||||
limit: 400,
|
||||
marker: nfts.result.marker
|
||||
})
|
||||
results += '\n' + JSON.stringify(nfts,null,2)
|
||||
}
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += '\n\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\n\nnfts: ' + JSON.stringify(nfts, null, 2)
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of batchMint()
|
||||
```
|
||||
|
||||
## 7.batch-minting.html
|
||||
|
||||
For this form:
|
||||
* The unnecessary script references are removed.
|
||||
* The unused fields and buttons are removed.
|
||||
* The `standbyResultField` capacity is set to the maximum value, 524288.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Token Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex3-mint-nfts.js'></script>
|
||||
<script src='ripplex7-batch-minting.js'></script>
|
||||
<script>
|
||||
if (typeof module !== "undefined") {
|
||||
const xrpl = require('xrpl')
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Token Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="testnet">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="devnet">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountFromSeed()">Get Account From Seed</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "1" maxlength="524,288"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT URL</td>
|
||||
<td><input type="text" id="standbyTokenUrlField"
|
||||
value = "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf4dfuylqabf3oclgtqy55fbzdi" size="80"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Flags</td>
|
||||
<td><input type="text" id="standbyFlagsField" value="8" size="10"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT ID</td>
|
||||
<td><input type="text" id="standbyTokenIdField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
NFT Count
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyNFTCountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Transfer Fee</td>
|
||||
<td><input type="text" id="standbyTransferFeeField" value="" size="80"/></td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td align="left" valign="top">
|
||||
<button type="button" onClick="batchMint()">Batch Mint</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBatchNFTs()">Get Batch NFTs</button>
|
||||
<br/>
|
||||
<p align="left">
|
||||
|
||||
<!-- Note the increased maxlength to hold the most possible NFT info. -->
|
||||
|
||||
<textarea id="standbyResultField" cols="80" rows="20" maxlength="524288"></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
13
docs/tutorials/javascript/modular-tutorials/nfts/index.md
Normal file
13
docs/tutorials/javascript/modular-tutorials/nfts/index.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
html: nfts-using-javascript.html
|
||||
parent: modular-tutorials-in-javascript.html
|
||||
top_nav_grouping: Article Types
|
||||
metadata:
|
||||
indexPage: true
|
||||
---
|
||||
# NFTs Using JavaScript
|
||||
|
||||
Mint and sell NFTs on the XRP Ledger using JavaScript.
|
||||
|
||||
|
||||
{% child-pages /%}
|
||||
@@ -0,0 +1,711 @@
|
||||
---
|
||||
html: mint-and-burn-nfts-using-javascript.html
|
||||
parent: nfts-using-javascript.html
|
||||
seo:
|
||||
description: Mint and burn NFTs.
|
||||
labels:
|
||||
- Quickstart
|
||||
- Tokens
|
||||
- Non-fungible tokens, NFTs
|
||||
---
|
||||
# Mint and Burn NFTs Using JavaScript
|
||||
|
||||
This example shows how to:
|
||||
|
||||
1. Mint new Non-fungible Tokens (NFTs).
|
||||
2. Get a list of existing NFTs.
|
||||
3. Delete (Burn) an NFT.
|
||||
|
||||
[](/docs/img/quickstart8.png)
|
||||
|
||||
# Usage
|
||||
|
||||
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 the sample in your own browser.
|
||||
|
||||
## Get Accounts
|
||||
|
||||
1. Open `3.mint-nfts.html` in a browser.
|
||||
2. Get test accounts.
|
||||
1. If you have existing Testnet account seeds:
|
||||
1. Paste the account seeds in the **Seeds** field.
|
||||
2. Click **Get Accounts from Seeds**.
|
||||
2. If you do not have existing Testnet accounts:
|
||||
1. Click **Get New Standby Account**.
|
||||
2. Click **Get New Operational Account**.
|
||||
|
||||
[](/docs/img/quickstart9.png)
|
||||
|
||||
## Mint an NFT
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qyb_x_GlUDg?si=fow07WIV6DjuHZ3K" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
To mint a non-fungible token object:
|
||||
|
||||
1. Set the **Flags** field. For testing purposes, we recommend setting the value to _8_. This sets the _tsTransferable_ flag, meaning that the NFT object can be transferred to another account. Otherwise, the NFT object can only be transferred back to the issuing account. See [NFTokenMint](../../../../references/protocol/transactions/types/nftokenmint.md) for information about all of the available flags for minting NFTs.
|
||||
2. Enter the **Token URL**. This is a URI that points to the data or metadata associated with the NFT object. You can use the sample URI provided if you do not have one of your own.
|
||||
3. Enter the **Transfer Fee**, a percentage of the proceeds from future sales of the NFT that will be returned to the original creator. This is a value of 0-50000 inclusive, allowing transfer rates between 0.000% and 50.000% in increments of 0.001%. If you do not set the **Flags** field to allow the NFT to be transferrable, set this field to 0.
|
||||
4. Click **Mint NFT**.
|
||||
|
||||
[](/docs/img/quickstart10.png)
|
||||
|
||||
|
||||
## Get Tokens
|
||||
|
||||
Click **Get NFTs** to get a list of NFTs owned by the account.
|
||||
|
||||
[](/docs/img/quickstart11.png)
|
||||
|
||||
## Burn a Token
|
||||
|
||||
The current owner of an NFT can always destroy (or _burn_) an NFT object.
|
||||
|
||||
To permanently destroy an NFT:
|
||||
|
||||
1. Enter the **Token ID**.
|
||||
2. Click **Burn NFT**.
|
||||
|
||||
[](/docs/img/quickstart12.png)
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> archive to examine the code samples.
|
||||
|
||||
## ripplex3-mint-nfts.js
|
||||
<!-- SPELLING_IGNORE: ripplex3 -->
|
||||
|
||||
### Mint Token
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ********************** Mint Token *********************
|
||||
// *******************************************************
|
||||
|
||||
async function mintToken() {
|
||||
```
|
||||
|
||||
Connect to the ledger and get the account wallets.
|
||||
|
||||
```javascript
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
let net = getNet()
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
results += '\nConnected. Minting NFT.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Define the transaction.
|
||||
|
||||
```javascript
|
||||
|
||||
const transactionJson = {
|
||||
"TransactionType": "NFTokenMint",
|
||||
"Account": standby_wallet.classicAddress,
|
||||
```
|
||||
|
||||
Note that the URI field expects a hexadecimal value rather than the literal URI string. You can use the `convertStringToHex` utility to transform the URI in real time.
|
||||
|
||||
```javascript
|
||||
"URI": xrpl.convertStringToHex(standbyTokenUrlField.value),
|
||||
```
|
||||
|
||||
If you want the NFT to be transferable to third parties, set the **Flags** field to _8_.
|
||||
|
||||
|
||||
```javascript
|
||||
"Flags": parseInt(standbyFlagsField.value),
|
||||
```
|
||||
|
||||
The Transfer Fee is a value 0 to 50000, used to set a royalty of 0.000% to 50.000% in increments of 0.001.
|
||||
|
||||
```javascript
|
||||
"TransferFee": parseInt(standbyTransferFeeField.value),
|
||||
```
|
||||
|
||||
The `TokenTaxon` is a required value. It is an arbitrary value defined by the issuer. If you do not have a use for the field, you can set it to _0_.
|
||||
|
||||
|
||||
```javascript
|
||||
"NFTokenTaxon": 0 //Required, but if you have no use for it, set to zero.
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Send the transaction and wait for the response.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(transactionJson, { wallet: standby_wallet} )
|
||||
```
|
||||
|
||||
Request a list of NFTs owned by the account.
|
||||
|
||||
```javascript
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += '\n\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\n\nnfts: ' + JSON.stringify(nfts, null, 2)
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} //End of mintToken()
|
||||
```
|
||||
|
||||
|
||||
### Get Tokens
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ******************* Get Tokens ************************
|
||||
// *******************************************************
|
||||
|
||||
async function getTokens() {
|
||||
```
|
||||
|
||||
Connect to the ledger and get the account.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + net + '...'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected. Getting NFTs...'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Request a list of NFTs owned by the account.
|
||||
|
||||
```javascript
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += '\nNFTs:\n ' + JSON.stringify(nfts,null,2)
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} //End of getTokens()
|
||||
```
|
||||
|
||||
### Burn Token
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ********************* Burn Token **********************
|
||||
// *******************************************************
|
||||
|
||||
async function burnToken() {
|
||||
```
|
||||
|
||||
Connect to the ledger and get the account wallets.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + net + '...'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected. Burning NFT...'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Define the transaction.
|
||||
|
||||
```javascript
|
||||
const transactionBlob = {
|
||||
"TransactionType": "NFTokenBurn",
|
||||
"Account": standby_wallet.classicAddress,
|
||||
"NFTokenID": standbyTokenIdField.value
|
||||
}
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(transactionBlob,{wallet: standby_wallet})
|
||||
```
|
||||
|
||||
Request a list of NFTs owned by the client.
|
||||
|
||||
```javascript
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: standby_wallet.classicAddress
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
Report the results.
|
||||
|
||||
|
||||
```javascript
|
||||
results += '\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\nBalance changes: ' +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
standbyResultField.value = results
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
results += '\nNFTs: \n' + JSON.stringify(nfts,null,2)
|
||||
standbyResultField.value = results
|
||||
client.disconnect()
|
||||
}// End of burnToken()
|
||||
```
|
||||
|
||||
### Reciprocal Transactions
|
||||
|
||||
These transactions are the same as the Standby account transactions, but for the Operational account.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ************** Operational Mint Token *****************
|
||||
// *******************************************************
|
||||
|
||||
async function oPmintToken() {
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
let net = getNet()
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
results += '\nConnected. Minting NFT.'
|
||||
operationalResultField.value = results
|
||||
|
||||
// Note that you must convert the token URL to a hexadecimal
|
||||
// value for this transaction.
|
||||
// ------------------------------------------------------------------------
|
||||
const transactionBlob = {
|
||||
"TransactionType": 'NFTokenMint',
|
||||
"Account": operational_wallet.classicAddress,
|
||||
"URI": xrpl.convertStringToHex(operationalTokenUrlField.value),
|
||||
"Flags": parseInt(operationalFlagsField.value),
|
||||
"TransferFee": parseInt(operationalTransferFeeField.value),
|
||||
"NFTokenTaxon": 0 //Required, but if you have no use for it, set to zero.
|
||||
}
|
||||
|
||||
// ----------------------------------------------------- Submit signed blob
|
||||
const tx = await client.submitAndWait(transactionBlob, { wallet: operational_wallet} )
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: operational_wallet.classicAddress
|
||||
})
|
||||
|
||||
// ------------------------------------------------------- Report results
|
||||
results += '\n\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\n\nnfts: ' + JSON.stringify(nfts, null, 2)
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
operationalResultField.value = results
|
||||
client.disconnect()
|
||||
} //End of oPmintToken
|
||||
|
||||
// *******************************************************
|
||||
// ************** Operational Get Tokens *****************
|
||||
// *******************************************************
|
||||
|
||||
async function oPgetTokens() {
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '...'
|
||||
operationalResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected. Getting NFTs...'
|
||||
operationalResultField.value = results
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: operational_wallet.classicAddress
|
||||
})
|
||||
results += '\nNFTs:\n ' + JSON.stringify(nfts,null,2)
|
||||
operationalResultField.value = results
|
||||
client.disconnect()
|
||||
} //End of oPgetTokens
|
||||
|
||||
// *******************************************************
|
||||
// ************* Operational Burn Token ******************
|
||||
// *******************************************************
|
||||
|
||||
async function oPburnToken() {
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '...'
|
||||
operationalResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected. Burning NFT...'
|
||||
operationalResultField.value = results
|
||||
|
||||
// ------------------------------------------------------- Prepare transaction
|
||||
const transactionBlob = {
|
||||
"TransactionType": "NFTokenBurn",
|
||||
"Account": operational_wallet.classicAddress,
|
||||
"NFTokenID": operationalTokenIdField.value
|
||||
}
|
||||
|
||||
//-------------------------------------------------------- Submit signed blob
|
||||
const tx = await client.submitAndWait(transactionBlob,{wallet: operational_wallet})
|
||||
const nfts = await client.request({
|
||||
method: "account_nfts",
|
||||
account: operational_wallet.classicAddress
|
||||
})
|
||||
results += '\nTransaction result: '+ tx.result.meta.TransactionResult
|
||||
results += '\nBalance changes: ' +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
operationalResultField.value = results
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
results += '\nNFTs: \n' + JSON.stringify(nfts,null,2)
|
||||
operationalResultField.value = results
|
||||
client.disconnect()
|
||||
}
|
||||
// End of oPburnToken()
|
||||
```
|
||||
|
||||
## 3.mint-nfts.html
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Token Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex2-send-currency.js'></script>
|
||||
<script src='ripplex3-mint-nfts.js'></script>
|
||||
<script>
|
||||
if (typeof module !== "undefined") {
|
||||
const xrpl = require('xrpl')
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Token Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="testnet">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="devnet">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT URL</td>
|
||||
<td><input type="text" id="standbyTokenUrlField"
|
||||
value = "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf4dfuylqabf3oclgtqy55fbzdi" size="80"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Flags</td>
|
||||
<td><input type="text" id="standbyFlagsField" value="1" size="10"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT ID</td>
|
||||
<td><input type="text" id="standbyTokenIdField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Transfer Fee</td>
|
||||
<td><input type="text" id="standbyTransferFeeField" value="" size="80"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="left">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP></button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="createTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="sendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="mintToken()">Mint NFT</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getTokens()">Get NFTs</button>
|
||||
<br/>
|
||||
<button type="button" onClick="burnToken()">Burn NFT</button>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()">< Send XRP</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPcreateTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPsendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPmintToken()">Mint NFT</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPgetTokens()">Get NFTs</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPburnToken()">Burn NFT</button>
|
||||
<td valign="top" align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td align="right"> <input type="checkbox" id="operationalDefault" checked="true"/>
|
||||
<label for="operationalDefault">Allow Rippling</label>
|
||||
<button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT URL</td>
|
||||
<td><input type="text" id="operationalTokenUrlField"
|
||||
value = "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf4dfuylqabf3oclgtqy55fbzdi" size="80"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Flags</td>
|
||||
<td><input type="text" id="operationalFlagsField" value="1" size="10"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">NFT ID</td>
|
||||
<td><input type="text" id="operationalTokenIdField" value="" size="80"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Transfer Fee</td>
|
||||
<td><input type="text" id="operationalTransferFeeField" value="" size="80"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
1384
docs/tutorials/javascript/modular-tutorials/nfts/transfer-nfts.md
Normal file
1384
docs/tutorials/javascript/modular-tutorials/nfts/transfer-nfts.md
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,641 @@
|
||||
---
|
||||
html: create-accounts-send-xrp-using-javascript.html
|
||||
parent: send-payments-using-javascript.html
|
||||
seo:
|
||||
description: Create two accounts and transfer XRP between them.
|
||||
labels:
|
||||
- Accounts
|
||||
- Quickstart
|
||||
- Transaction Sending
|
||||
- XRP
|
||||
---
|
||||
# Create Accounts and Send XRP Using JavaScript
|
||||
|
||||
This example shows how to:
|
||||
|
||||
1. Create accounts on the Testnet, funded with 1000 test XRP with no actual value.
|
||||
2. Retrieve the accounts from seed values.
|
||||
3. Transfer XRP between accounts.
|
||||
|
||||
When you create an account, you receive a public/private key pair offline. Your account does not appear on the ledger until it is funded with XRP. This example shows how to create accounts for Testnet, but not how to create an account that you can use on Mainnet.
|
||||
|
||||
[](/docs/img/quickstart2.png)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To get started, create a new folder on your local disk and install the JavaScript library using `npm`.
|
||||
|
||||
```
|
||||
npm install xrpl
|
||||
```
|
||||
|
||||
Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> archive.
|
||||
|
||||
**Note:** Without the Quickstart Samples, you will not be able to try the examples that follow.
|
||||
|
||||
## Usage
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/GX436F-FaV4?si=OyuTUD4zHZ5a0Dgx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
To get test accounts:
|
||||
|
||||
1. Open `1.get-accounts-send-xrp.html` in a browser
|
||||
2. Choose **Testnet** or **Devnet**.
|
||||
3. Click **Get New Standby Account**.
|
||||
4. Click **Get New Operational Account.**
|
||||
5. Copy and paste the **Seeds** field in a persistent location, such as a Notepad, so that you can reuse the accounts after reloading the form.
|
||||
|
||||
[](/docs/img/quickstart3.png)
|
||||
|
||||
You can transfer XRP between your new accounts. Each account has its own fields and buttons.
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/sjYJOcKXZvY?si=IRx_AFMaZarOIOPY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
To transfer XRP from the Standby account to the Operational account:
|
||||
|
||||
1. On the Standby (left) side of the form, enter the **Amount** of XRP to send.
|
||||
2. Copy and paste the **Operational Account** field to the Standby **Destination** field.
|
||||
3. Click **Send XRP>** to transfer XRP from the standby account to the operational account
|
||||
|
||||
To transfer XRP from the Operational account to the Standby account:
|
||||
|
||||
1. On the Operational (right) side of the form, enter the **Amount** of XRP to send.
|
||||
2. Copy and paste the **Standby Account** field to the Operational **Destination** field.
|
||||
3. Click **<Send XRP** to transfer XRP from the Operational account to the Standby account.
|
||||
|
||||
[](/docs/img/quickstart4.png)
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> in the source repository for this website.
|
||||
|
||||
## ripplex-1-send-xrp.js
|
||||
|
||||
This example can be used with any XRP Ledger network, _Testnet_, or _Devnet_. You can update the code to choose different or additional XRP Ledger networks.
|
||||
|
||||
### getNet()
|
||||
<!-- SPELLING_IGNORE: getnet -->
|
||||
|
||||
```javascript
|
||||
// ******************************************************
|
||||
// ************* Get the Preferred Network **************
|
||||
// ******************************************************
|
||||
|
||||
function getNet() {
|
||||
```
|
||||
|
||||
This function uses brute force `if` statements to discover the selected network instance and return the URI.
|
||||
|
||||
```javascript
|
||||
let net
|
||||
if (document.getElementById("tn").checked) net = "wss://s.altnet.rippletest.net:51233"
|
||||
if (document.getElementById("dn").checked) net = "wss://s.devnet.rippletest.net:51233"
|
||||
return net
|
||||
} // End of getNet()
|
||||
```
|
||||
|
||||
### getAccount(type)
|
||||
<!-- SPELLING_IGNORE: getaccount -->
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ************* Get Account *****************************
|
||||
// *******************************************************
|
||||
|
||||
async function getAccount(type) {
|
||||
```
|
||||
|
||||
Get the selected ledger.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
```
|
||||
|
||||
Instantiate a client.
|
||||
|
||||
```javascript
|
||||
const client = new xrpl.Client(net)
|
||||
```
|
||||
|
||||
Use the _results_ variable to capture progress information.
|
||||
|
||||
```javascript
|
||||
results = 'Connecting to ' + net + '....'
|
||||
```
|
||||
Use the default faucet using a _null_ value.
|
||||
|
||||
```javascript
|
||||
let faucetHost = null
|
||||
```
|
||||
|
||||
Report progress in the appropriate results field.
|
||||
|
||||
```javascript
|
||||
if (type == 'standby') {
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
operationalResultField.value = results
|
||||
}
|
||||
```
|
||||
|
||||
Connect to the server.
|
||||
|
||||
```javascript
|
||||
await client.connect()
|
||||
|
||||
results += '\nConnected, funding wallet.'
|
||||
if (type == 'standby') {
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
operationalResultField.value = results
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Create and fund a test account.
|
||||
|
||||
```javascript
|
||||
const my_wallet = (await client.fundWallet(null, { faucetHost })).wallet
|
||||
|
||||
results += '\nGot a wallet.'
|
||||
if (type == 'standby') {
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
operationalResultField.value = results
|
||||
}
|
||||
```
|
||||
|
||||
Get the current XRP balance for the account.
|
||||
|
||||
```javascript
|
||||
const my_balance = (await client.getXrpBalance(my_wallet.address))
|
||||
```
|
||||
|
||||
If this is a standby account, populate the standby account fields.
|
||||
|
||||
```javascript
|
||||
if (type == 'standby') {
|
||||
standbyAccountField.value = my_wallet.address
|
||||
standbyPubKeyField.value = my_wallet.publicKey
|
||||
standbyPrivKeyField.value = my_wallet.privateKey
|
||||
standbyBalanceField.value = (await client.getXrpBalance(my_wallet.address))
|
||||
standbySeedField.value = my_wallet.seed
|
||||
results += '\nStandby account created.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Otherwise, populate the operational account fields.
|
||||
|
||||
```javascript
|
||||
} else {
|
||||
operationalAccountField.value = my_wallet.address
|
||||
operationalPubKeyField.value = my_wallet.publicKey
|
||||
operationalPrivKeyField.value = my_wallet.privateKey
|
||||
operationalSeedField.value = my_wallet.seed
|
||||
operationalBalanceField.value = (await client.getXrpBalance(my_wallet.address))
|
||||
results += '\nOperational account created.'
|
||||
operationalResultField.value = results
|
||||
}
|
||||
```
|
||||
|
||||
Insert the seed values for both accounts as they are created to the **Seeds** field as a convenience. You can copy the values and store them offline. When you reload this form or another in this tutorial, copy and paste them into the **Seeds** field to retrieve the accounts with the `getAccountsFromSeeds()` function.
|
||||
|
||||
```javascript
|
||||
seeds.value = standbySeedField.value + '\n' + operationalSeedField.value
|
||||
```
|
||||
|
||||
Disconnect from the XRP ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getAccount()
|
||||
```
|
||||
|
||||
### Get Accounts from Seeds
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ********** Get Accounts from Seeds ********************
|
||||
// *******************************************************
|
||||
|
||||
async function getAccountsFromSeeds() {
|
||||
```
|
||||
|
||||
Connect to the selected network.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallets.\n'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Parse the **Seeds** field.
|
||||
|
||||
```javascript
|
||||
var lines = seeds.value.split('\n')
|
||||
```
|
||||
|
||||
Get the `standby_wallet` based on the seed in the first line. Get the `operational_wallet` based on the seed in the second line.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(lines[0])
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(lines[1])
|
||||
```
|
||||
|
||||
Get the current XRP balances for the accounts.
|
||||
|
||||
```javascript
|
||||
const standby_balance = (await client.getXrpBalance(standby_wallet.address))
|
||||
const operational_balance = (await client.getXrpBalance(operational_wallet.address))
|
||||
```
|
||||
|
||||
Populate the fields for the standby and operational accounts.
|
||||
|
||||
```javascript
|
||||
standbyAccountField.value = standby_wallet.address
|
||||
standbyPubKeyField.value = standby_wallet.publicKey
|
||||
standbyPrivKeyField.value = standby_wallet.privateKey
|
||||
standbySeedField.value = standby_wallet.seed
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
|
||||
operationalAccountField.value = operational_wallet.address
|
||||
operationalPubKeyField.value = operational_wallet.publicKey
|
||||
operationalPrivKeyField.value = operational_wallet.privateKey
|
||||
operationalSeedField.value = operational_wallet.seed
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getAccountsFromSeeds()
|
||||
```
|
||||
|
||||
### Send XRP
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ******************** Send XRP *************************
|
||||
// *******************************************************
|
||||
|
||||
async function sendXRP() {
|
||||
```
|
||||
|
||||
Connect to your selected ledger.
|
||||
|
||||
```javascript
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
standbyResultField.value = results
|
||||
let net = getNet()
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
|
||||
results += "\nConnected. Sending XRP.\n"
|
||||
standbyResultField.value = results
|
||||
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const sendAmount = standbyAmountField.value
|
||||
|
||||
results += "\nstandby_wallet.address: = " + standby_wallet.address
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Prepare the transaction. This is a Payment transaction from the standby address to the operational address.
|
||||
|
||||
The _Payment_ transaction expects the XRP to be expressed in drops, or 1/millionth of an XRP. You can use the `xrpToDrops()` method to convert the send amount for you (which beats having to type an extra 6 zeroes to send 1 XRP).
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill({
|
||||
"TransactionType": "Payment",
|
||||
"Account": standby_wallet.address,
|
||||
"Amount": xrpl.xrpToDrops(sendAmount),
|
||||
"Destination": standbyDestinationField.value
|
||||
})
|
||||
```
|
||||
|
||||
Sign the prepared transaction.
|
||||
|
||||
```
|
||||
const signed = standby_wallet.sign(prepared)
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
```
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Request the balance changes caused by the transaction and report the results.
|
||||
|
||||
```
|
||||
results += "\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
standbyResultField.value = results
|
||||
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
client.disconnect()
|
||||
} // End of sendXRP()
|
||||
```
|
||||
|
||||
### Reciprocal Transactions
|
||||
|
||||
For each of the transactions, there is an accompanying reciprocal transaction, with the prefix _oP,_ for the operational account. See the corresponding function for the standby account for code commentary.
|
||||
|
||||
```javascript
|
||||
// **********************************************************************
|
||||
// ****** Reciprocal Transactions ***************************************
|
||||
// **********************************************************************
|
||||
|
||||
// *******************************************************
|
||||
// ********* Send XRP from Operational account ***********
|
||||
// *******************************************************
|
||||
|
||||
async function oPsendXRP() {
|
||||
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
operationalResultField.value = results
|
||||
let net = getNet()
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
|
||||
results += "\nConnected. Sending XRP.\n"
|
||||
operationalResultField.value = results
|
||||
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const sendAmount = operationalAmountField.value
|
||||
|
||||
results += "\noperational_wallet.address: = " + operational_wallet.address
|
||||
operationalResultField.value = results
|
||||
|
||||
// ---------------------------------------------------------- Prepare transaction
|
||||
const prepared = await client.autofill({
|
||||
"TransactionType": "Payment",
|
||||
"Account": operational_wallet.address,
|
||||
"Amount": xrpl.xrpToDrops(operationalAmountField.value),
|
||||
"Destination": operationalDestinationField.value
|
||||
})
|
||||
|
||||
// ---------------------------------------------------- Sign prepared instructions
|
||||
const signed = operational_wallet.sign(prepared)
|
||||
|
||||
// ------------------------------------------------------------ Submit signed blob
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
|
||||
results += "\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
operationalResultField.value = results
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
|
||||
client.disconnect()
|
||||
} // End of oPsendXRP()
|
||||
```
|
||||
|
||||
## 1.get-accounts-send-xrp.html
|
||||
|
||||
Create a standard HTML form to send transactions and requests, then display the results.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Token Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script>
|
||||
if (typeof module !== "undefined") {
|
||||
const xrpl = require('xrpl')
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Token Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="testnet">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="devnet">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP></button>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()"><Send XRP</button>
|
||||
</td>
|
||||
<td align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,665 @@
|
||||
---
|
||||
html: create-conditional-escrows-using-javascript.html
|
||||
parent: send-payments-using-javascript.html
|
||||
seo:
|
||||
description: Create, finish, or cancel condition-based escrow transactions.
|
||||
labels:
|
||||
- Accounts
|
||||
- Quickstart
|
||||
- Transaction Sending
|
||||
- XRP
|
||||
---
|
||||
# Create Conditional Escrows Using JavaScript
|
||||
|
||||
This example shows how to:
|
||||
|
||||
1. Create escrow payments that become available when any account enters a fulfillment code.
|
||||
|
||||
2. Complete a conditional escrow transaction.
|
||||
|
||||
3. Cancel a conditional escrow transaction.
|
||||
|
||||
[](/docs/img/conditional-escrow1.png)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> archive.
|
||||
|
||||
## Usage
|
||||
|
||||
### Create Escrow
|
||||
|
||||
You create a condition-based escrow using a fulfillment code associated with a condition code. Create the condition/fulfillment pair using the `five-bells-condition` application.
|
||||
|
||||
Install `five-bells-condition`:
|
||||
|
||||
1. In a terminal window, navigate to your local `Quickstart` directory (for convenience).
|
||||
2. Enter the command `npm install five-bells-condition`.
|
||||
|
||||
To create a condition/fulfillment pair:
|
||||
|
||||
1. In a terminal window, navigate to your `Quickstart` directory.
|
||||
2. Enter the command `node getConditionAndFulfillment.js`.
|
||||
3. Copy and save the generated Condition and Fulfillment pair.
|
||||
|
||||
[](/docs/img/conditional-escrow2.png)
|
||||
|
||||
To get test accounts:
|
||||
|
||||
1. Open `9.escrow-condition.html` in a browser
|
||||
2. Choose **Testnet** or **Devnet**.
|
||||
3. Get test accounts.
|
||||
1. If you have existing account seeds
|
||||
1. Paste account seeds in the **Seeds** field.
|
||||
2. Click **Get Accounts from Seeds**.
|
||||
2. If you do not have account seeds:
|
||||
1. Click **Get New Standby Account**.
|
||||
2. Click **Get New Operational Account**.
|
||||
|
||||
[](/docs/img/conditional-escrow3.png)
|
||||
|
||||
### Create Conditional Escrow:
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/jUQ2nM5JXjc?si=-ajV2EFw8xv4djgG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
When you create a conditional escrow, you need to specify the amount you want to reserve and the `Condition` value you generated above. You can also set a cancel date and time, after which the escrow is no longer available.
|
||||
|
||||
To create a conditional escrow:
|
||||
|
||||
1. Enter an **Amount** to transfer.
|
||||
2. Copy the **Operational Account** value.
|
||||
3. Paste it in the **Destination Account** field.
|
||||
4. Enter the **Escrow Condition** value.
|
||||
5. Enter the **Escrow Cancel (seconds)** value.
|
||||
6. Click **Create Escrow**.
|
||||
7. Copy and save the _Sequence Number_ of the escrow called out in the **Standby Result** field.
|
||||
|
||||
The escrow is created on the XRP Ledger instance, reserving your requested XRP amount plus the transaction cost.
|
||||
|
||||
When you create an escrow, capture and save the _Sequence Number_ so that you can use it to finish the escrow transaction.
|
||||
|
||||
[](/docs/img/conditional-escrow4.png)
|
||||
|
||||
## Finish Conditional Escrow
|
||||
|
||||
Any account can finish the conditional escrow any time before the _Escrow Cancel_ time. Following on the example above, you can use the _Sequence Number_ to finish the transaction once the Escrow Cancel time has passed.
|
||||
|
||||
To finish a time-based escrow:
|
||||
|
||||
1. Paste the sequence number in the Operational account **Escrow Sequence Number** field.
|
||||
2. Enter the `Fulfillment` code for the `Condition`.
|
||||
3. Click **Finish Conditional Escrow**.
|
||||
|
||||
The transaction completes and balances are updated for both the Standby and Operational accounts.
|
||||
|
||||
[](/docs/img/conditional-escrow5.png)
|
||||
|
||||
## Get Escrows
|
||||
|
||||
Click **Get Escrows** for either the Standby account or the Operational account to see their current list of escrows.
|
||||
|
||||
## Cancel Escrow
|
||||
|
||||
When the Escrow Cancel time passes, the escrow is no longer available to the recipient. The initiator of the escrow can reclaim the XRP, less the transaction fees. Any account can cancel an escrow once the cancel time has elapsed. Accounts that try to cancel the transaction prior to the **Escrow Cancel** time are charged the nominal transaction cost (12 drops), but the actual escrow cannot be cancelled until after the Escrow Cancel time.
|
||||
|
||||
## Oh No! I Forgot to Save the Sequence Number!
|
||||
|
||||
If you forget to save the sequence number, you can find it in the escrow transaction record.
|
||||
|
||||
1. Create a new escrow as described in [Create Escrow](#create-escrow), above.
|
||||
2. Click **Get Escrows** to get the escrow information.
|
||||
3. Copy the _PreviousTxnID_ value from the results.
|
||||
|
||||
4. Paste the _PreviousTxnID_ in the **Transaction to Look Up** field.
|
||||
|
||||
5. Click **Get Transaction**.
|
||||
6. Locate the _Sequence_ value in the results.
|
||||
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> in the source repository for this website.
|
||||
|
||||
## getConditionAndFulfillment.js
|
||||
|
||||
To generate a condition/fulfillment pair, use Node.js to run the `getConditionAndFulfillment.js` script.
|
||||
|
||||
```javascript
|
||||
function getConditionAndFulfillment() {
|
||||
```
|
||||
|
||||
Instantiate the `five-bells-condition` and `crypto` libraries.
|
||||
|
||||
```javascript
|
||||
const cc = require('five-bells-condition')
|
||||
const crypto = require('crypto')
|
||||
```
|
||||
|
||||
Create a random 32-byte seed string.
|
||||
|
||||
```javascript
|
||||
const preimageData = crypto.randomBytes(32)
|
||||
```
|
||||
|
||||
Create a fulfillment object.
|
||||
|
||||
```javascript
|
||||
const fulfillment = new cc.PreimageSha256()
|
||||
```
|
||||
|
||||
Generate a fulfillment code.
|
||||
|
||||
```javascript
|
||||
fulfillment.setPreimage(preimageData)
|
||||
```
|
||||
|
||||
Generate the condition value based on the fulfillment value.
|
||||
|
||||
```javascript
|
||||
const condition = fulfillment.getConditionBinary().toString('hex').toUpperCase()
|
||||
```
|
||||
|
||||
Return the condition.
|
||||
|
||||
```javascript
|
||||
console.log('Condition:', condition)
|
||||
```
|
||||
|
||||
Convert the fulfillment code to a hexadecimal string.
|
||||
|
||||
```javascript
|
||||
const fulfillment_hex = fulfillment.serializeBinary().toString('hex').toUpperCase()
|
||||
```
|
||||
|
||||
Return the fulfillment code. Keep it secret until you want to finish the escrow.
|
||||
|
||||
```javascript
|
||||
console.log('Fulfillment:', fulfillment_hex)
|
||||
}
|
||||
getConditionAndFulfillment()
|
||||
```
|
||||
|
||||
## ripplex9-escrow-condition.js
|
||||
|
||||
|
||||
### Create Conditional Escrow
|
||||
|
||||
```javascript
|
||||
async function createConditionalEscrow() {
|
||||
```
|
||||
|
||||
Connect to your preferred ledger.
|
||||
|
||||
```javascript
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
standbyResultField.value = results
|
||||
let net = getNet()
|
||||
results = "Connecting to " + net + "....\n"
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
|
||||
results += "Connected. Creating conditional escrow.\n"
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Instantiate the standby and operational wallets
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
```
|
||||
|
||||
Capture the amount to send in the escrow.
|
||||
|
||||
```javascript
|
||||
const sendAmount = standbyAmountField.value
|
||||
```
|
||||
|
||||
Update the results field.
|
||||
|
||||
```javascript
|
||||
results += "\nstandby_wallet.address: = " + standby_wallet.address
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Create a date value and add your requested number of seconds.
|
||||
|
||||
```javascript
|
||||
let escrow_cancel_date = new Date()
|
||||
escrow_cancel_date = addSeconds(parseInt(standbyEscrowCancelDateField.value))
|
||||
```
|
||||
|
||||
Prepare the `EscrowCreate` transaction.
|
||||
|
||||
```javascript
|
||||
const escrowTx = await client.autofill({
|
||||
"TransactionType": "EscrowCreate",
|
||||
"Account": standby_wallet.address,
|
||||
"Amount": xrpl.xrpToDrops(sendAmount),
|
||||
"Destination": standbyDestinationField.value,
|
||||
"CancelAfter": escrow_cancel_date,
|
||||
"Condition": standbyEscrowConditionField.value
|
||||
})
|
||||
```
|
||||
|
||||
Sign the transaction.
|
||||
|
||||
```javascript
|
||||
const signed = standby_wallet.sign(escrowTx)
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the results and update balance fields.
|
||||
|
||||
```javascript
|
||||
results += "\nSequence Number (Save!): " + JSON.stringify(tx.result.Sequence)
|
||||
results += "\n\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRPL
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
|
||||
} // End of createTimeEscrow()
|
||||
```
|
||||
|
||||
### Finish Conditional Escrow
|
||||
|
||||
Finish the escrow by submitting the condition and fulfillment codes.
|
||||
|
||||
```javascript
|
||||
async function finishConditionalEscrow() {
|
||||
```
|
||||
|
||||
Connect to your preferred XRP Ledger instance.
|
||||
|
||||
```javascript
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
operationalResultField.value = results
|
||||
let net = getNet()
|
||||
results += 'Connecting to ' + getNet() + '....'
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
results += "\nConnected. Finishing escrow.\n"
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Get the standby and operational account wallets.
|
||||
|
||||
```javascript
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const sendAmount = operationalAmountField.value
|
||||
|
||||
results += "\noperational_wallet.address: = " + operational_wallet.address
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Prepare the transaction.
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill({
|
||||
"TransactionType": "EscrowFinish",
|
||||
"Account": operationalAccountField.value,
|
||||
"Owner": standbyAccountField.value,
|
||||
"OfferSequence": parseInt(operationalEscrowSequenceField.value),
|
||||
"Condition": standbyEscrowConditionField.value,
|
||||
"Fulfillment": operationalFulfillmentField.value
|
||||
})
|
||||
```
|
||||
|
||||
Sign the transaction.
|
||||
|
||||
```javascript
|
||||
|
||||
const signed = operational_wallet.sign(prepared)
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += "\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
operationalResultField.value = results
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the XRPL.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
|
||||
} // End of finishEscrow()
|
||||
```
|
||||
|
||||
|
||||
## 9.escrow-condition.html
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Conditional Escrow Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.2.3'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex2-send-currency.js'></script>
|
||||
<script src='ripplex8-escrow.js'></script>
|
||||
<script src='ripplex9-escrow-condition.js'></script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Conditional Escrow Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="tn">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="dn">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Condition
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowConditionField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Cancel (seconds)
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowCancelDateField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Sequence Number
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowSequenceNumberField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="left">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP ></button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/>
|
||||
<button type="button" onClick="createConditionalEscrow()">Create Conditional Escrow</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getStandbyEscrows()">Get Escrows</button>
|
||||
<br/>
|
||||
<button type="button" onClick="cancelEscrow()">Cancel Escrow</button>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()">< Send XRP</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/>
|
||||
<button type="button" onClick="finishConditionalEscrow()">Finish Conditional Escrow</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getOperationalEscrows()">Get Escrows</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getTransaction()">Get Transaction</button>
|
||||
</td>
|
||||
<td valign="top" align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Fulfillment Code
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalFulfillmentField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Sequence Number
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalEscrowSequenceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Transaction to Look Up
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalTransactionField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td align="right">
|
||||
<input type="checkbox" id="operationalDefault" checked="true"/>
|
||||
<label for="operationalDefault">Allow Rippling</label>
|
||||
<button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,829 @@
|
||||
---
|
||||
html: create-time-based-escrows-using-javascript.html
|
||||
parent: send-payments-using-javascript.html
|
||||
seo:
|
||||
description: Create, finish, or cancel time-based escrow transactions.
|
||||
labels:
|
||||
- Accounts
|
||||
- Quickstart
|
||||
- Transaction Sending
|
||||
- XRP
|
||||
---
|
||||
# Create Time-based Escrows Using JavaScript
|
||||
|
||||
This example shows how to:
|
||||
|
||||
|
||||
1. Create escrow payments that become available at a specified time and expire at a specified time.
|
||||
2. Finish an escrow payment.
|
||||
3. Retrieve information on escrows attached to an account.
|
||||
3. Cancel an escrow payment and return the XRP to the sending account.
|
||||
|
||||
|
||||
[](/docs/img/quickstart-escrow1.png)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} -->.
|
||||
|
||||
## Usage
|
||||
|
||||
To get test accounts:
|
||||
|
||||
1. Open `8.escrow.html` in a browser
|
||||
2. Choose **Testnet** or **Devnet**.
|
||||
3. Get test accounts.
|
||||
1. If you have existing account seeds
|
||||
1. Paste account seeds in the **Seeds** field.
|
||||
2. Click **Get Accounts from Seeds**.
|
||||
2. If you do not have account seeds:
|
||||
1. Click **Get New Standby Account**.
|
||||
2. Click **Get New Operational Account**.
|
||||
|
||||
[](/docs/img/quickstart-escrow2.png)
|
||||
|
||||
## Create Escrow
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/mNPSSZxcq7s?si=ZZewy6EKpxSMfxak" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
You can create a time-based escrow with a minimum time to finish the escrow and a cancel time after which the funds in escrow are no longer available to the recipient. This is a test harness: while a practical scenario might express time in days or weeks, this form lets you set the finish and cancel times in seconds so that you can quickly run through a variety of scenarios. (There are 86,400 seconds in a day, if you want to play with longer term escrows.)
|
||||
|
||||
To create a time-based escrow:
|
||||
|
||||
1. Enter an **Amount** to transfer.
|
||||
2. Copy the **Operational Account** value.
|
||||
3. Paste it in the **Destination Account** field.
|
||||
4. Set the **Escrow Finish (seconds)** value. For example, enter _10_.
|
||||
5. Set the **Escrow Cancel (seconds)** value. For example, enter _120_.
|
||||
6. Click **Create Escrow**.
|
||||
7. Copy the _Sequence Number_ of the escrow called out in the **Standby Result** field.
|
||||
|
||||
The escrow is created on the XRP Ledger instance, reserving 100 XRP plus the transaction cost. When you create an escrow, capture and save the **Sequence Number** so that you can use it to finish the escrow transaction.
|
||||
|
||||
[](/docs/img/quickstart-escrow3.png)
|
||||
|
||||
## Finish Escrow
|
||||
|
||||
The recipient of the XRP held in escrow can finish the transaction any time within the time window after the Escrow Finish date and time but before the Escrow Cancel date and time. Following on the example above, you can use the _Sequence Number_ to finish the transaction once 10 seconds have passed.
|
||||
|
||||
To finish a time-based escrow:
|
||||
|
||||
1. Paste the sequence number in the Operational account **Escrow Sequence Number** field.
|
||||
2. Click **Finish Escrow**.
|
||||
|
||||
The transaction completes and balances are updated for both the Standby and Operational accounts.
|
||||
|
||||
[](/docs/img/quickstart-escrow4.png)
|
||||
|
||||
## Get Escrows
|
||||
|
||||
Click **Get Escrows** for either the Standby account or the Operational account to see their current list of escrows. If you click the buttons now, there are no escrows at the moment.
|
||||
|
||||
For the purposes of this tutorial, follow the steps in [Create Escrow](#create-escrow), above, to create a new escrow transaction, perhaps setting **Escrow Cancel (seconds)** field to _600_ seconds to give you extra time to explore. Remember to capture the _Sequence Number_ from the transaction results.
|
||||
|
||||
Click **Get Escrows** for both the Standby and the Operational account. The `account_info` request returns the same `account_object` for both accounts, demonstrating the link between the accounts created by the escrow transaction.
|
||||
|
||||
[](/docs/img/quickstart-escrow5.png)
|
||||
|
||||
|
||||
## Cancel Escrow
|
||||
|
||||
When the Escrow Cancel time passes, the escrow is no longer available to the recipient. The initiator of the escrow can reclaim the XRP, less the transaction fees. If you try to cancel the transaction prior to the **Escrow Cancel** time, you are charged for the transaction, but the actual escrow cannot be cancelled until the time limit is reached.
|
||||
|
||||
You can wait the allotted time for the escrow you created in the previous step, then use it to try out the **Cancel Escrow** button
|
||||
|
||||
To cancel an expired escrow:
|
||||
|
||||
1. Enter the sequence number in the Standby **Escrow Sequence Number** field.
|
||||
2. Click **Cancel Escrow**.
|
||||
|
||||
The funds are returned to the Standby account, less the initial transaction fee.
|
||||
|
||||
[](/docs/img/quickstart-escrow6.png)
|
||||
|
||||
## Oh No! I Forgot to Save the Sequence Number!
|
||||
|
||||
If you forget to save the sequence number, you can find it in the escrow transaction record.
|
||||
|
||||
1. Create a new escrow as described in [Create Escrow](#create-escrow), above.
|
||||
2. Click **Get Escrows** to get the escrow information.
|
||||
3. Copy the _PreviousTxnID_ value from the results.
|
||||
|
||||
4. Paste the _PreviousTxnID_ in the **Transaction to Look Up** field.
|
||||
|
||||
5. Click **Get Transaction**.
|
||||
6. Locate the _Sequence_ value in the results.
|
||||
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} --> in the source repository for this website.
|
||||
|
||||
## ripple8-escrow.js
|
||||
|
||||
This example can be used with any XRP Ledger network, _Testnet_, or _Devnet_. You can update the code to choose different or additional XRP Ledger networks.
|
||||
|
||||
### Add Seconds to Date
|
||||
|
||||
This function accomplishes two things. It creates a new date object and adds the number of seconds taken from a form field. Then, it adjusts the date from the JavaScript format to the XRP Ledger format.
|
||||
|
||||
You provide the _numOfSeconds_ argument, the second parameter is a new Date object.
|
||||
```javascript
|
||||
function addSeconds(numOfSeconds, date = new Date()) {
|
||||
```
|
||||
|
||||
Set the _seconds_ value to the date seconds plus the number of seconds you provide.
|
||||
|
||||
```javascript
|
||||
date.setSeconds(date.getSeconds() + numOfSeconds);
|
||||
```
|
||||
|
||||
JavaScript dates are in milliseconds. Divide the date by 1000 to base it on seconds.
|
||||
|
||||
```javascript
|
||||
date = Math.floor(date / 1000)
|
||||
```
|
||||
|
||||
Subtract the number of seconds in the Ripple epoch to convert the value to an XRP Ledger compatible date value.
|
||||
|
||||
```javascript
|
||||
date = date - 946684800
|
||||
```
|
||||
|
||||
Return the result.
|
||||
|
||||
```javascript
|
||||
return date;
|
||||
}
|
||||
```
|
||||
|
||||
### Create Time-based Escrow
|
||||
|
||||
```javascript
|
||||
async function createTimeEscrow() {
|
||||
```
|
||||
|
||||
Instantiate two new date objects, then set the dates to the current date plus the set number of seconds for the finish and cancel dates.
|
||||
|
||||
```javascript
|
||||
let escrow_finish_date = new Date()
|
||||
let escrow_cancel_date = new Date()
|
||||
escrow_finish_date = addSeconds(parseInt(standbyEscrowFinishDateField.value))
|
||||
escrow_cancel_date = addSeconds(parseInt(standbyEscrowCancelDateField.value))
|
||||
```
|
||||
|
||||
Connect to the ledger.
|
||||
|
||||
```javascript
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
standbyResultField.value = results
|
||||
let net = getNet()
|
||||
results = "Connecting to " + net + "....\n"
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
results += "Connected. Creating time-based escrow.\n"
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the wallet information based on the account seed values.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const sendAmount = standbyAmountField.value
|
||||
results += "\nstandby_wallet.address: = " + standby_wallet.address
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Define the `EscrowCreate` transaction, automatically filling values in common fields.
|
||||
|
||||
```javascript
|
||||
const escrowTx = await client.autofill({
|
||||
"TransactionType": "EscrowCreate",
|
||||
"Account": standby_wallet.address,
|
||||
"Amount": xrpl.xrpToDrops(sendAmount),
|
||||
"Destination": standbyDestinationField.value,
|
||||
"FinishAfter": escrow_finish_date,
|
||||
"CancelAfter": escrow_cancel_date
|
||||
})
|
||||
```
|
||||
|
||||
Sign the escrow transaction definition.
|
||||
|
||||
```javascript
|
||||
const signed = standby_wallet.sign(escrowTx)
|
||||
```
|
||||
|
||||
Submit the transaction.
|
||||
|
||||
```javascript
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += "\nSequence Number (Save!): " + JSON.stringify(tx.result.Sequence)
|
||||
results += "\n\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of createTimeEscrow()
|
||||
```
|
||||
|
||||
### Finish Time-based Escrow
|
||||
|
||||
```javascript
|
||||
async function finishEscrow() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger and get the account wallets.
|
||||
|
||||
```javascript
|
||||
results = "Connecting to the selected ledger.\n"
|
||||
operationalResultField.value = results
|
||||
let net = getNet()
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
const client = new xrpl.Client(net)
|
||||
await client.connect()
|
||||
|
||||
results += "\nConnected. Finishing escrow.\n"
|
||||
operationalResultField.value = results
|
||||
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const sendAmount = operationalAmountField.value
|
||||
|
||||
results += "\noperational_wallet.address: = " + operational_wallet.address
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Define the transaction. The _Owner_ is the account that created the escrow. The _OfferSequence_ is the sequence number of the escrow transaction. Automatically fill in the common fields for the transaction.
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill({
|
||||
"TransactionType": "EscrowFinish",
|
||||
"Account": operationalAccountField.value,
|
||||
"Owner": standbyAccountField.value,
|
||||
"OfferSequence": parseInt(operationalEscrowSequenceField.value)
|
||||
})
|
||||
```
|
||||
|
||||
Sign the transaction definition.
|
||||
|
||||
```javascript
|
||||
const signed = operational_wallet.sign(prepared)
|
||||
```
|
||||
|
||||
Submit the signed transaction to the XRP ledger.
|
||||
|
||||
```javascript
|
||||
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += "\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
operationalResultField.value = results
|
||||
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of finishEscrow()
|
||||
```
|
||||
|
||||
### Get Standby Escrows
|
||||
|
||||
Get the escrows associated with the Standby account.
|
||||
|
||||
```javascript
|
||||
async function getStandbyEscrows() {
|
||||
```
|
||||
|
||||
Connect to the network. The information you are looking for is public information, so there is no need to instantiate your wallet.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
standbyResultField.value = results
|
||||
|
||||
results= "\nGetting standby account escrows...\n"
|
||||
```
|
||||
|
||||
Create the `account_objects` request. Specify that you want objects of the type _escrow_.
|
||||
|
||||
```javascript
|
||||
const escrow_objects = await client.request({
|
||||
"id": 5,
|
||||
"command": "account_objects",
|
||||
"account": standbyAccountField.value,
|
||||
"ledger_index": "validated",
|
||||
"type": "escrow"
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += JSON.stringify(escrow_objects.result, null, 2)
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getStandbyEscrows()
|
||||
```
|
||||
|
||||
### Get Operational Escrows
|
||||
|
||||
This function is the same as `getStandbyEscrows()`, but for the Operational account.
|
||||
|
||||
```javascript
|
||||
async function getOperationalEscrows() {
|
||||
```
|
||||
|
||||
Connect to the network. The information you are looking for is public information, so there is no need to instantiate your wallet.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
operationalResultField.value = results
|
||||
|
||||
results= "\nGetting operational account escrows...\n"
|
||||
```
|
||||
|
||||
Create the `account_objects` request. Specify that you want objects of the type _escrow_.
|
||||
|
||||
```javascript
|
||||
const escrow_objects = await client.request({
|
||||
"id": 5,
|
||||
"command": "account_objects",
|
||||
"account": operationalAccountField.value,
|
||||
"ledger_index": "validated",
|
||||
"type": "escrow"
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += JSON.stringify(escrow_objects.result, null, 2)
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger instance.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getOperationalEscrows()
|
||||
```
|
||||
|
||||
### Get Transaction Info
|
||||
|
||||
```javascript
|
||||
async function getTransaction() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
operationalResultField.value = results
|
||||
|
||||
results= "\nGetting transaction information...\n"
|
||||
```
|
||||
|
||||
Prepare and send the transaction information request. The only required parameter is the transaction ID.
|
||||
|
||||
```javascript
|
||||
const tx_info = await client.request({
|
||||
"id": 1,
|
||||
"command": "tx",
|
||||
"transaction": operationalTransactionField.value,
|
||||
})
|
||||
```
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += JSON.stringify(tx_info.result, null, 2)
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger instance.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getTransaction()
|
||||
```
|
||||
|
||||
### Cancel Escrow
|
||||
|
||||
Cancel an escrow after it passes the expiration date.
|
||||
|
||||
```javascript
|
||||
async function cancelEscrow() {
|
||||
```
|
||||
|
||||
Connect to the XRP Ledger instance.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the account wallets.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
```
|
||||
|
||||
Prepare the EscrowCancel transaction.
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill({
|
||||
"TransactionType": "EscrowCancel",
|
||||
"Account": standby_wallet.address,
|
||||
"Owner": standbyAccountField.value,
|
||||
"OfferSequence": parseInt(standbyEscrowSequenceNumberField.value)
|
||||
})
|
||||
```
|
||||
|
||||
Sign the transaction.
|
||||
```javascript
|
||||
const signed = standby_wallet.sign(prepared)
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the response.
|
||||
|
||||
``` javascript
|
||||
const tx = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += "\nBalance changes: " +
|
||||
JSON.stringify(xrpl.getBalanceChanges(tx.result.meta), null, 2)
|
||||
standbyResultField.value = results
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the XRP Ledger instance.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
}
|
||||
```
|
||||
|
||||
## 8.escrow.html
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Time-based Escrow Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.2.3'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex2-send-currency.js'></script>
|
||||
<script src='ripplex8-escrow.js'></script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Time-based Escrow Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="tn">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="dn">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Finish (seconds)
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowFinishDateField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Cancel (seconds)
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowCancelDateField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Sequence Number
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyEscrowSequenceNumberField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="left">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP ></button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/>
|
||||
<button type="button" onClick="createTimeEscrow()">Create Time-based Escrow</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getStandbyEscrows()">Get Escrows</button>
|
||||
<br/>
|
||||
<button type="button" onClick="cancelEscrow()">Cancel Escrow</button>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()">< Send XRP</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
<br/>
|
||||
<button type="button" onClick="finishEscrow()">Finish Time-based Escrow</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getOperationalEscrows()">Get Escrows</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getTransaction()">Get Transaction</button>
|
||||
</td>
|
||||
<td valign="top" align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Escrow Sequence Number
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalEscrowSequenceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr> <td align="right">
|
||||
Transaction to Look Up
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalTransactionField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td align="right">
|
||||
<input type="checkbox" id="operationalDefault" checked="true"/>
|
||||
<label for="operationalDefault">Allow Rippling</label>
|
||||
<button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,810 @@
|
||||
---
|
||||
html: create-trustline-send-currency-using-javascript.html
|
||||
parent: send-payments-using-javascript.html
|
||||
seo:
|
||||
description: Create Trust Lines and send currency.
|
||||
labels:
|
||||
- Cross-Currency
|
||||
- Payments
|
||||
- Quickstart
|
||||
- Tokens
|
||||
|
||||
---
|
||||
# Create Trust Line and Send Currency Using JavaScript
|
||||
|
||||
This example shows how to:
|
||||
|
||||
1. Configure accounts to allow transfer of funds to third party accounts.
|
||||
2. Set a currency type for transactions.
|
||||
3. Create a trust line between the standby account and the operational account.
|
||||
4. Send issued currency between accounts.
|
||||
5. Display account balances for all currencies.
|
||||
|
||||
[](/docs/img/quickstart5.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.
|
||||
|
||||
**Note:** Without the Quickstart Samples, you will not be able to try the examples that follow.
|
||||
|
||||
## Usage
|
||||
|
||||
Open the Token Test Harness and get accounts:
|
||||
|
||||
1. Open `2.create-trustline-send-currency.html` in a browser.
|
||||
2. Get test accounts.
|
||||
1. If you have existing account seeds
|
||||
1. Paste account seeds in the **Seeds** field.
|
||||
2. Click **Get Accounts from Seeds**.
|
||||
2. If you do not have account seeds:
|
||||
1. Click **Get New Standby Account**.
|
||||
2. Click **Get New Operational Account**.
|
||||
|
||||
## Create Trust Line
|
||||
|
||||
<div align="center">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/HpcyZt1jG3E?si=evreLRsmgF5rrQrW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
To create a trust line between accounts:
|
||||
|
||||
1. Enter a [currency code](https://www.iban.com/currency-codes) in the **Currency** field.
|
||||
2. Enter the maximum transfer limit in the **Amount** field.
|
||||
3. Enter the destination account value in the **Destination** field.
|
||||
4. Click **Create Trustline**. <!-- SPELLING_IGNORE: trustline --><!--{# TODO: update the test harness to spell trust line as two words #}-->
|
||||
|
||||
[](/docs/img/quickstart6.png)
|
||||
|
||||
## Send an Issued Currency Token
|
||||
|
||||
To transfer an issued currency token, once you have created a trust line:
|
||||
|
||||
1. Enter the **Amount**.
|
||||
2. Enter the **Destination**.
|
||||
3. Enter the **Currency** type.
|
||||
4. Click **Send Currency**.
|
||||
|
||||
[](/docs/img/quickstart7.png)
|
||||
|
||||
# Code Walkthrough
|
||||
|
||||
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.
|
||||
|
||||
## ripplex2-send-currency.js
|
||||
<!-- SPELLING_IGNORE: ripplex2 -->
|
||||
|
||||
### Configure Account
|
||||
|
||||
When transferring fiat currency, the actual transfer of funds is not simultaneous, as it is with XRP. If currency is transferred to a third party for a different currency, there can be a devaluation of the currency that impacts the originating account. To avoid this situation, this up and down valuation of currency, known as _rippling_, is not allowed by default. Currency transferred from one account can only be transferred back to the same account. To enable currency transfer to third parties, you need to set the `rippleDefault` value to true. The Token Test Harness provides a checkbox to enable or disable rippling.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// **************** Configure Account ********************
|
||||
// *******************************************************
|
||||
|
||||
async function configureAccount(type, defaultRippleSetting) {
|
||||
```
|
||||
|
||||
Connect to the ledger
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
let resultField = 'standbyResultField'
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
await client.connect()
|
||||
results += '\nConnected, finding wallet.'
|
||||
```
|
||||
|
||||
Get the account wallets.
|
||||
|
||||
```
|
||||
if (type=='standby') {
|
||||
my_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
} else {
|
||||
my_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
resultField = 'operationalResultField'
|
||||
}
|
||||
results += '\nRipple Default Setting: ' + defaultRippleSetting
|
||||
resultField.value = results
|
||||
```
|
||||
|
||||
Prepare the transaction. If the `rippleDefault` argument is true, set the `asfDefaultRipple` flag. If it is false, clear the `asfDefaultRipple` flag.
|
||||
|
||||
```javascript
|
||||
let settings_tx = {}
|
||||
if (defaultRippleSetting) {
|
||||
settings_tx = {
|
||||
"TransactionType": "AccountSet",
|
||||
"Account": my_wallet.address,
|
||||
"SetFlag": xrpl.AccountSetAsfFlags.asfDefaultRipple
|
||||
}
|
||||
results += '\n Set Default Ripple flag.'
|
||||
} else {
|
||||
settings_tx = {
|
||||
"TransactionType": "AccountSet",
|
||||
"Account": my_wallet.address,
|
||||
"ClearFlag": xrpl.AccountSetAsfFlags.asfDefaultRipple
|
||||
}
|
||||
results += '\n Clear Default Ripple flag.'
|
||||
}
|
||||
results += '\nSending account setting.'
|
||||
resultField.value = results
|
||||
```
|
||||
|
||||
Auto-fill the default values for the transaction.
|
||||
|
||||
```javascript
|
||||
const prepared = await client.autofill(settings_tx)
|
||||
```
|
||||
|
||||
Sign the transaction.
|
||||
|
||||
```javascript
|
||||
const signed = my_wallet.sign(prepared)
|
||||
```
|
||||
|
||||
Submit the transaction and wait for the result.
|
||||
|
||||
```javascript
|
||||
const result = await client.submitAndWait(signed.tx_blob)
|
||||
```
|
||||
|
||||
Report the result.
|
||||
|
||||
```javascript
|
||||
if (result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += '\nAccount setting succeeded.'
|
||||
document.getElementById(resultField).value = results
|
||||
} else {
|
||||
throw 'Error sending transaction: ${result}'
|
||||
results += '\nAccount setting failed.'
|
||||
resultField.value = results
|
||||
}
|
||||
client.disconnect()
|
||||
} // End of configureAccount()
|
||||
```
|
||||
|
||||
### Create Trust Line
|
||||
|
||||
A trust line enables two accounts to trade a defined currency up to a set limit. This gives the participants assurance that any exchanges are between known entities at agreed upon maximum amounts.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ***************** Create TrustLine ********************
|
||||
// *******************************************************
|
||||
|
||||
async function createTrustline() {
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the standby and operational wallets.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
```
|
||||
|
||||
Capture the currency code from the standby currency field.
|
||||
|
||||
```javascript
|
||||
const currency_code = standbyCurrencyField.value
|
||||
```
|
||||
|
||||
Define the transaction, capturing the currency code and (limit) amount from the form fields.
|
||||
|
||||
```javascript
|
||||
const trustSet_tx = {
|
||||
"TransactionType": "TrustSet",
|
||||
"Account": standbyDestinationField.value,
|
||||
"LimitAmount": {
|
||||
"currency": standbyCurrencyField.value,
|
||||
"issuer": standby_wallet.address,
|
||||
"value": standbyAmountField.value
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Prepare the transaction by automatically filling the default parameters.
|
||||
|
||||
```javascript
|
||||
const ts_prepared = await client.autofill(trustSet_tx)
|
||||
```
|
||||
|
||||
|
||||
Sign the transaction.
|
||||
|
||||
|
||||
```javascript
|
||||
const ts_signed = operational_wallet.sign(ts_prepared)
|
||||
results += '\nCreating trust line from operational account to standby account...'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
|
||||
```javascript
|
||||
const ts_result = await client.submitAndWait(ts_signed.tx_blob)
|
||||
```
|
||||
|
||||
|
||||
Report the results.
|
||||
|
||||
|
||||
```javascript
|
||||
if (ts_result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += '\nTrustline established between account \n' +
|
||||
standbyDestinationField.value + ' \n and account\n' + standby_wallet.address + '.'
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
results += '\nTrustLine failed. See JavaScript console for details.'
|
||||
document.getElementById('standbyResultField').value = results
|
||||
throw 'Error sending transaction: ${ts_result.result.meta.TransactionResult}'
|
||||
}
|
||||
} //End of createTrustline()
|
||||
|
||||
```
|
||||
|
||||
### Send Issued Currency
|
||||
|
||||
Once you have created a trust line from an account to your own, you can send issued currency tokens to that account, up to the established limit.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// *************** Send Issued Currency ******************
|
||||
// *******************************************************
|
||||
|
||||
async function sendCurrency() {
|
||||
```
|
||||
|
||||
Connect to the ledger.
|
||||
|
||||
```javascript
|
||||
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
document.getElementById('standbyResultField').value = results
|
||||
|
||||
await client.connect()
|
||||
|
||||
results += '\nConnected.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the account wallets.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const currency_code = standbyCurrencyField.value
|
||||
const issue_quantity = standbyAmountField.value
|
||||
|
||||
const send_token_tx = {
|
||||
"TransactionType": "Payment",
|
||||
"Account": standby_wallet.address,
|
||||
"Amount": {
|
||||
"currency": standbyCurrencyField.value,
|
||||
"value": standbyAmountField.value,
|
||||
"issuer": standby_wallet.address
|
||||
},
|
||||
"Destination": standbyDestinationField.value
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Prepare the transaction by automatically filling default values.
|
||||
|
||||
|
||||
```javascript
|
||||
const pay_prepared = await client.autofill(send_token_tx)
|
||||
```
|
||||
|
||||
|
||||
Sign the transaction.
|
||||
|
||||
|
||||
```javascript
|
||||
const pay_signed = standby_wallet.sign(pay_prepared)
|
||||
results += 'Sending ${issue_quantity} ${currency_code} to ' +
|
||||
standbyDestinationField.value + '...'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
|
||||
Submit the transaction and wait for the results.
|
||||
|
||||
|
||||
```javascript
|
||||
const pay_result = await client.submitAndWait(pay_signed.tx_blob)
|
||||
```
|
||||
|
||||
|
||||
Report the results.
|
||||
|
||||
|
||||
```javascript
|
||||
if (pay_result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += 'Transaction succeeded: https://testnet.xrpl.org/transactions/${pay_signed.hash}'
|
||||
standbyResultField.value = results
|
||||
} else {
|
||||
results += 'Transaction failed: See JavaScript console for details.'
|
||||
standbyResultField.value = results
|
||||
throw 'Error sending transaction: ${pay_result.result.meta.TransactionResult}'
|
||||
}
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
getBalances()
|
||||
client.disconnect()
|
||||
} // end of sendCurrency()
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Get Balances
|
||||
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ****************** Get Balances ***********************
|
||||
// *******************************************************
|
||||
|
||||
async function getBalances() {
|
||||
```
|
||||
|
||||
Connect to the ledger.
|
||||
|
||||
```javascript
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
standbyResultField.value = results
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Get the account wallets.
|
||||
|
||||
```javascript
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
results = "\nGetting standby account balances...\n"
|
||||
```
|
||||
|
||||
Define and send the request for the standby account, then wait for the results.
|
||||
|
||||
```javascript
|
||||
const standby_balances = await client.request({
|
||||
command: "gateway_balances",
|
||||
account: standby_wallet.address,
|
||||
ledger_index: "validated",
|
||||
hotwallet: [operational_wallet.address]
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += JSON.stringify(standby_balances.result, null, 2)
|
||||
standbyResultField.value = results
|
||||
```
|
||||
|
||||
Define and send the request for the operational account, then wait for the results.
|
||||
|
||||
```javascript
|
||||
results += "\nGetting operational account balances...\n"
|
||||
const operational_balances = await client.request({
|
||||
command: "gateway_balances",
|
||||
account: operational_wallet.address,
|
||||
ledger_index: "validated"
|
||||
})
|
||||
```
|
||||
|
||||
Report the results.
|
||||
|
||||
```javascript
|
||||
results += JSON.stringify(operational_balances.result, null, 2)
|
||||
operationalResultField.value = results
|
||||
```
|
||||
|
||||
Update the form with current XRP balances.
|
||||
|
||||
```javascript
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
standbyResultField.value = results
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
```
|
||||
|
||||
Disconnect from the ledger.
|
||||
|
||||
```javascript
|
||||
client.disconnect()
|
||||
} // End of getBalances()
|
||||
```
|
||||
|
||||
### Reciprocal Transactions
|
||||
|
||||
For each of the transactions, there is an accompanying reciprocal transaction, with the prefix _oP,_ for the operational account. See the corresponding function for the standby account for code commentary. The `getBalances()` request does not have a reciprocal transaction, because it reports balances for both accounts.
|
||||
|
||||
```javascript
|
||||
// *******************************************************
|
||||
// ************ Create Operational TrustLine *************
|
||||
// *******************************************************
|
||||
|
||||
async function oPcreateTrustline() {
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
operationalResultField.value = results
|
||||
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const trustSet_tx = {
|
||||
"TransactionType": "TrustSet",
|
||||
"Account": operationalDestinationField.value,
|
||||
"LimitAmount": {
|
||||
"currency": operationalCurrencyField.value,
|
||||
"issuer": operational_wallet.address,
|
||||
"value": operationalAmountField.value
|
||||
}
|
||||
}
|
||||
const ts_prepared = await client.autofill(trustSet_tx)
|
||||
const ts_signed = standby_wallet.sign(ts_prepared)
|
||||
results += '\nCreating trust line from operational account to ' +
|
||||
operationalDestinationField.value + ' account...'
|
||||
operationalResultField.value = results
|
||||
const ts_result = await client.submitAndWait(ts_signed.tx_blob)
|
||||
if (ts_result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += '\nTrustline established between account \n' + operational_wallet.address +
|
||||
' \n and account\n' + operationalDestinationField.value + '.'
|
||||
operationalResultField.value = results
|
||||
} else {
|
||||
results += '\nTrustLine failed. See JavaScript console for details.'
|
||||
operationalResultField.value = results
|
||||
throw 'Error sending transaction: ${ts_result.result.meta.TransactionResult}'
|
||||
}
|
||||
} //End of oPcreateTrustline
|
||||
|
||||
// *******************************************************
|
||||
// ************* Operational Send Issued Currency ********
|
||||
// *******************************************************
|
||||
|
||||
async function oPsendCurrency() {
|
||||
let net = getNet()
|
||||
const client = new xrpl.Client(net)
|
||||
results = 'Connecting to ' + getNet() + '....'
|
||||
operationalResultField.value = results
|
||||
|
||||
await client.connect()
|
||||
results += '\nConnected.'
|
||||
operationalResultField.value = results
|
||||
|
||||
const standby_wallet = xrpl.Wallet.fromSeed(standbySeedField.value)
|
||||
const operational_wallet = xrpl.Wallet.fromSeed(operationalSeedField.value)
|
||||
const currency_code = operationalCurrencyField.value
|
||||
const issue_quantity = operationalAmountField.value
|
||||
|
||||
const send_token_tx = {
|
||||
"TransactionType": "Payment",
|
||||
"Account": operational_wallet.address,
|
||||
"Amount": {
|
||||
"currency": currency_code,
|
||||
"value": issue_quantity,
|
||||
"issuer": operational_wallet.address
|
||||
},
|
||||
"Destination": operationalDestinationField.value
|
||||
}
|
||||
|
||||
const pay_prepared = await client.autofill(send_token_tx)
|
||||
const pay_signed = operational_wallet.sign(pay_prepared)
|
||||
results += 'Sending ${issue_quantity} ${currency_code} to ' +
|
||||
operationalDestinationField.value + '...'
|
||||
operationalResultField.value = results
|
||||
const pay_result = await client.submitAndWait(pay_signed.tx_blob)
|
||||
if (pay_result.result.meta.TransactionResult == "tesSUCCESS") {
|
||||
results += 'Transaction succeeded: https://testnet.xrpl.org/transactions/${pay_signed.hash}'
|
||||
operationalResultField.value = results
|
||||
} else {
|
||||
results += 'Transaction failed: See JavaScript console for details.'
|
||||
operationalResultField.value = results
|
||||
throw 'Error sending transaction: ${pay_result.result.meta.TransactionResult}'
|
||||
}
|
||||
standbyBalanceField.value = (await client.getXrpBalance(standby_wallet.address))
|
||||
operationalBalanceField.value = (await client.getXrpBalance(operational_wallet.address))
|
||||
getBalances()
|
||||
client.disconnect()
|
||||
} // end of oPsendCurrency()
|
||||
```
|
||||
|
||||
## 2.create-trustline-send-currency.html
|
||||
|
||||
Update the form to support the new functions.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Token Test Harness</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
|
||||
h1{font-weight: bold;}
|
||||
input, button {padding: 6px;margin-bottom: 8px;}
|
||||
button{font-weight: bold;font-family: "Work Sans", sans-serif;}
|
||||
td{vertical-align: middle;}
|
||||
</style>
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='ripplex1-send-xrp.js'></script>
|
||||
<script src='ripplex2-send-currency.js'></script>
|
||||
<script>
|
||||
if (typeof module !== "undefined") {
|
||||
const xrpl = require('xrpl')
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- ************************************************************** -->
|
||||
<!-- ********************** The Form ****************************** -->
|
||||
<!-- ************************************************************** -->
|
||||
|
||||
<body>
|
||||
<h1>Token Test Harness</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
|
||||
<input type="radio" id="tn" name="server"
|
||||
value="wss://s.altnet.rippletest.net:51233" checked>
|
||||
<label for="testnet">Testnet</label>
|
||||
|
||||
<input type="radio" id="dn" name="server"
|
||||
value="wss://s.devnet.rippletest.net:51233">
|
||||
<label for="devnet">Devnet</label>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
|
||||
<br/>
|
||||
<textarea id="seeds" cols="40" rows= "2"></textarea>
|
||||
<br/><br/>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<td>
|
||||
<button type="button" onClick="getAccount('standby')">Get New Standby Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Standby Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbySeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
|
||||
<td>
|
||||
<input type="checkbox" id="standbyDefault" checked="true"/>
|
||||
<label for="standbyDefault">Allow Rippling</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="standbyCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="left">
|
||||
<textarea id="standbyResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="sendXRP()">Send XRP></button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="createTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="sendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="top">
|
||||
<button type="button" onClick="oPsendXRP()">< Send XRP</button>
|
||||
<br/><br/>
|
||||
<button type="button" onClick="oPcreateTrustline()">Create TrustLine</button>
|
||||
<br/>
|
||||
<button type="button" onClick="oPsendCurrency()">Send Currency</button>
|
||||
<br/>
|
||||
<button type="button" onClick="getBalances()">Get Balances</button>
|
||||
</td>
|
||||
<td valign="top" align="right">
|
||||
<button type="button" onClick="getAccount('operational')">Get New Operational Account</button>
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Operational Account
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAccountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Public Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPubKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Private Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalPrivKeyField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalSeedField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
XRP Balance
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalBalanceField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Amount
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalAmountField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Destination
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalDestinationField" size="40"></input>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td align="right">
|
||||
<input type="checkbox" id="operationalDefault" checked="true"/>
|
||||
<label for="operationalDefault">Allow Rippling</label>
|
||||
<button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Currency
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="operationalCurrencyField" size="40" value="USD"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="right">
|
||||
<textarea id="operationalResultField" cols="80" rows="20" ></textarea>
|
||||
</p>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
html: send-payments-using-javascript.html
|
||||
parent: modular-tutorials-in-javascript.html
|
||||
seo:
|
||||
description: Use a JavaScript test harness to send XRP, trade currencies, and mint and trade NFTs.
|
||||
labels:
|
||||
- Accounts
|
||||
- Cross-Currency
|
||||
- Non-fungible Tokens, NFTs
|
||||
- Payments
|
||||
- Quickstart
|
||||
- Tokens
|
||||
- XRP
|
||||
---
|
||||
# Send Payments Using JavaScript
|
||||
|
||||
The XRP Ledger (XRPL) is a robust, secure, customizable service. You can create your own interface to try out the capabilities and support your specific business needs.
|
||||
|
||||
This quickstart describes a test harness interface you can build to try out the XRP Ledger. The test harness displays multiple accounts, so that you can transfer tokens from one account to the other and see the results in real time. The image below shows the Token Test Harness at the completion of step 4.
|
||||
|
||||
|
||||
|
||||
That is a lot of fields and buttons, all working together to perform some significant practical tasks. But getting _started_ with the XRP Ledger is not that complicated. When you eat the elephant a bite at a time, none of the tasks are difficult to consume.
|
||||
|
||||
Typically, the example functions for interacting with the XRP Ledger involve four steps.
|
||||
|
||||
1. Connect to the XRP Ledger and instantiate your wallet.
|
||||
2. Make changes to the XRP Ledger using transactions.
|
||||
3. Get the state of accounts and tokens on the XRP Ledger using requests.
|
||||
4. Disconnect from the XRP Ledger.
|
||||
|
||||
Each lesson shows you how to build the Token Test Harness one section at a time. Each module lets you try out meaningful interactions with the test ledger, with complete JavaScript and HTML code samples and a code walkthrough. There is also a link to the complete source code for each section that can be modified with a text editor and run in a browser. If you cannot wait, you can follow the prerequisites below, then jump to lesson 4, [Create Conditional Escrows](create-conditional-escrows.md), and try out the complete test harness right away.
|
||||
|
||||
This quickstart tutorial introduces you to the API used to implement features and explore the capabilities of XRP Ledger. It does not represent *all* of the capabilities of the API and this example is not intended for production or secure payment use.
|
||||
|
||||
Much of this is “brute force” code that sacrifices conciseness for readability. Each example builds on the previous examples, adding a new JavaScript file and the supporting UI. We anticipate that the applications you build greatly improve upon these examples. Your feedback and contributions are most welcome.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To get started, create a new folder on your local disk and install the JavaScript library using `npm`.
|
||||
|
||||
```
|
||||
npm install xrpl
|
||||
```
|
||||
|
||||
Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/quickstart/js/)<!-- {.github-code-download} -->.
|
||||
Reference in New Issue
Block a user