Use Bootstrap containers

This commit is contained in:
Dennis Dawson
2025-02-14 15:30:10 -08:00
parent 6a2cf2560d
commit ae14f34d2a

View File

@@ -23,55 +23,13 @@ To learn more, see [Multi-purpose Tokens](../../concepts/tokens/fungible-tokens/
The MPT Generator utility lets you experiment with an MPT configuration in a sandbox environment. When you are satisfied with the settings, you can generate the transaction code required to create your MPT on Mainnet. The MPT Generator utility lets you experiment with an MPT configuration in a sandbox environment. When you are satisfied with the settings, you can generate the transaction code required to create your MPT on Mainnet.
In practice, you want to use an Issuer account configuration to issue an MPT, but you can try the form below with a new account and the transaction works fine. See [Creating a US Treasury Bill](#creating-a-us-treasury-bill) for a full description of the issuance process. The form is populated with sample values, but you can change the parameters for your own experiments. In practice, you want to use an Issuer account configuration to issue an MPT, but you can try the form below with a new account and the transaction works fine. See [Creating a US Treasury Bill](#creating-a-us-treasury-bill) for a full description of the issuance process. The form is populated with sample values, but you can change the parameters for your own experiments. A T-bill is just one example of the many types of asset you can create and trade on the XRP Ledger.
<div style="background-color:#abe2ff"> <hr/>
<div>
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
<script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script> <script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script>
<!--
<style>
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
.tooltip:before {
content: attr(tooltip-data);
position: absolute;
width: 250px;
background-color: #006aff;
color: #fff;
text-align: center;
padding: 15px;
line-height: 1.1;
border-radius: 5px;
z-index: 1;
opacity: 0;
transition: opacity .5s;
bottom: 125%;
left: 50%;
margin-left: -60px;
font-size: 0.70em;
visibility: hidden;
}
.tooltip:after {
content: "";
position: absolute;
bottom: 75%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
opacity: 0;
transition: opacity .5s;
border-color: #000 transparent transparent transparent;
visibility: hidden;
}
.tooltip:hover:before,
.tooltip:hover:after {
opacity: 1;
visibility: visible;
}
</style> -->
<script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script> <script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script>
<script> <script>
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
@@ -130,7 +88,7 @@ function getNet() {
let v_flags = 0 let v_flags = 0
if (clawbackSlider.checked) {v_flags+=64} if (clawbackSlider.checked) {v_flags+=64}
if (lockSlider.checked) {v_flags+=2} if (lockSlider.checked) {v_flags+=2}
if (authTokensSlider.checked) {v_flags +=4} if (authTokenSlider.checked) {v_flags +=4}
if (txrSlider.checked) {v_flags += 32} if (txrSlider.checked) {v_flags += 32}
if (tradeSlider.checked) {v_flags += 16} if (tradeSlider.checked) {v_flags += 16}
if (escrowSlider.checked) {v_flags+=8} if (escrowSlider.checked) {v_flags+=8}
@@ -148,7 +106,7 @@ async function sendTransaction() {
let v_flags = 0 let v_flags = 0
if (clawbackSlider.checked) {v_flags+=64} if (clawbackSlider.checked) {v_flags+=64}
if (lockSlider.checked) {v_flags+=2} if (lockSlider.checked) {v_flags+=2}
if (authTokensSlider.checked) {v_flags +=4} if (authTokenSlider.checked) {v_flags +=4}
if (txrSlider.checked) {v_flags += 32} if (txrSlider.checked) {v_flags += 32}
if (tradeSlider.checked) {v_flags += 16} if (tradeSlider.checked) {v_flags += 16}
if (escrowSlider.checked) {v_flags+=8} if (escrowSlider.checked) {v_flags+=8}
@@ -178,175 +136,136 @@ const transactionJson = {
</script> </script>
<div> <div>
<hr/> <link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
<h1>MPT Generator</h1> <script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script>
<form> <!-- Required meta tags -->
<table width="100%" border-color= "#006aff"> <meta charset="utf-8">
<tbody> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<tr> <!-- Bootstrap CSS -->
<td valign="top"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table> <div class="container">
<tbody> <div class="row">
<tr valign="top"> <div class="col align-self-start">
<td align="right"> <b>1. Choose your preferred network.</b>
<font color="red"><b>1.</b></font> Choose your ledger instance. </div>
</td> <div class="col align-self-center">
<td> <input type="radio" id="tn" name="server"
<input type="radio" id="tn" name="server" value="wss://s.altnet.rippletest.net:51233">
value="wss://s.altnet.rippletest.net:51233" > <label for="testnet">Testnet</label>
<label for="testnet">Testnet</label> <br/>
<br/> <input type="radio" id="dn" name="server"
<input type="radio" id="dn" name="server" value="wss://s.devnet.rippletest.net:51233" checked>
value="wss://s.devnet.rippletest.net:51233" checked> <label for="devnet">Devnet</label>
<label for="devnet">Devnet</label><br /> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col align-self-start">
<td align="right"> <b>2. Get a new account or retrieve one from its seed.</b><br/>
<font color="red"><b>2.</b></font> Get a new account or one from a seed.<br/> </div>
</td> <div class="col align-self-start">
</tr> Account: <input type="text" id="accountField" size="40"></input>
<tr> Seed: <input type="text" id="seedField" size="40"></input>
<td align="right"> </div>
Account <div class="col align-self-start">
</td> <button type="button" id="getNewAccountButton" class="btn btn-primary">Get New Account</button><br/><br/>
<td> <button type="button" id="getAccountFromSeedButton" class="btn btn-primary">Get Account From Seed</button>
<input type="text" id="accountField" size="40"></input> </div>
</td> </div>
<td> <p>
<button type="button" id="getNewAccountButton" style="background-color: #006aff; <div class="row">
-webkit-text-fill-color: white;">Get New <div class="col align-self-start">
Account</button> <b>3. Enter parameter values for your new MPT.</b>
</td> </div>
</tr> </div>
<tr> <div class="row">
<td align="right"> <div class="col align-right">
Seed Asset Scale:
</td> </div>
<td> <div class="col align-self-start">
<input type="text" id="seedField" size="40"></input> <input type="text" size="10" id="assetScaleField" value="2"/>
</td> </div>
<td> </div>
<button type="button" id="getAccountFromSeedButton" style="background-color: #006aff; -webkit-text-fill-color: white;"> <div class="row">
Get Account From Seed <div class="col align-right">
</button> Maximum Tokens:
</td> </div>
</tr> <div class="col align-self-start">
<tr> <input type="text" size="10" id="maximumAmountField" value="1000000"/>
<td> </div>
<font color="red"><b>3.</b></font> Set fields for your new MPT.<br/> </div>
</td> <div class="row">
</tr> <div class="col align-right">
<tr> Transfer Fee:
<td align="right"> </div>
Asset Scale <div class="col align-self-start">
</td> <input type="text" size="10" id="transferFeeField" value="314"/>
<td> </div>
<input type="text" size="10" id="assetScaleField" value="2"/> </div>
</td> <div class="row"><p></div>
</tr> <div>
<tr> <div class="row">
<td align="right"> <div class="col align-self-start">
Maximum Tokens <b>4. Set flags for your new MPT.</b>
</td> </div>
<td> </div>
<input type="text" size="10" id="maximumAmountField" value="1000000"/> <div class="row">
</td> <div class="col align-self-start">
</tr> Clawback
<tr> </div>
<td align="right"> <div class="col align-self-start">
Transfer Fee <input type="checkbox" id="clawbackSlider">
</td> </div>
<td> </div>
<input type="text" size="5" id="transferFeeField" value="314"/> <div class="row">
</td> <div class="col align-self-start">
</tr> Lock
<tr> </div>
<td></td> <div class="col align-self-start">
</tr> <input type="checkbox" id="lockSlider">
<tr> </div>
<td> </div>
<font color="red"><b>4.</b></font> Set flags for your new MPT.<br/> <div class="row">
</td> <div class="col align-self-start">
</tr> Require Authorization
<tr> </div>
<td align="right"> <div class="col align-self-start">
Clawback <input type="checkbox" id="authTokenSlider">
</td> </div>
<td align="left"> </div>
<label class="switch"> <div class="row">
<input type="checkbox" id="clawbackSlider" checked> <div class="col align-self-start">
<span class="slider round"></span> Can Transfer
</label> </div>
</td> <div class="col align-self-start">
</tr> <input type="checkbox" id="txrSlider" checked>
<tr> </div>
<td align="right"> </div>
Lock <div class="row">
</td> <div class="col align-self-start">
<td align="left"> Can Trade
<label class="switch"> </div>
<input type="checkbox" id="lockSlider" name="lockSlider"> <div class="col align-self-start">
<span class="slider round"></span> <input type="checkbox" id="tradeSlider">
</label> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col align-self-start">
<td align="right"> Can Escrow
Require Authorization </div>
</td> <div class="col align-self-start">
<td align="left"> <input type="checkbox" id="escrowSlider">
<label class="switch"> </div>
<input type="checkbox" id="authTokensSlider" checked> </div>
<span class="slider round"></span> <div class="row">
</label> <div class="col align-self-start">
</td> <b>5. Enter the token metadata.</b>
</tr> </div>
<tr> </div>
<td align="right"> <div class="row">
Can Transfer <div class="col align-self-start">
</td> <b>Token Metadata</b>
<td align="left"> <textarea id="metadataTextArea" rows="18" cols="30"
<label class="switch"> value='{
<input type="checkbox" id="txrSlider" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td align="right">
Can Trade
</td>
<td align="left">
<label class="switch">
<input type="checkbox" id="tradeSlider" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td align="right">
Can Escrow
</td>
<td align="left">
<label class="switch">
<input type="checkbox" id="escrowSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<br/><br/><p>
<font color="red"><b>5.</b></font> Copy and paste the metadata for your token (or use sample provided).
</p>
</td>
</tr>
<tr>
<td>
<b>Token Metadata</b>
<textarea id="metadataTextArea" rows="25" cols="30"
value='{
"Name": "US Treasury Bill Token", "Name": "US Treasury Bill Token",
"Identifier": "USTBT", "Identifier": "USTBT",
"Issuer": "US Treasury", "Issuer": "US Treasury",
@@ -360,38 +279,36 @@ const transactionJson = {
"RegulatoryCompliance": "SEC Regulations", "RegulatoryCompliance": "SEC Regulations",
"SecurityType": "Treasury Bill", "SecurityType": "Treasury Bill",
"ExternalUrl": "https://example.com/t-bill-token-metadata.json" "ExternalUrl": "https://example.com/t-bill-token-metadata.json"
}' }'> </textarea>
> </div>
</textarea> <div class="col-align-items-left">
</td> <p><b>6.</b> Click <b>Generate Transaction</b><br/>
<td align="center" width="10%"> <button type="button" id="generateCodeButton" class="btn btn-primary">Generate Transaction</button>
<font color="red"><b>6.</b></font> Click <b>Generate Transaction</b><br/> </p>
<button type="button" id="generateCodeButton" style="background-color: #006aff; <p><b>7.</b> Click <b>Send Transaction</b><br/>
-webkit-text-fill-color: white;">Generate Transaction</button> <button type = "button" id="sendTransactionButton" class="btn btn-primary">Send Transaction</button>
<br/><br/> </p>
<p> <p>
<font color="red"><b>7.</b></font> Click <b>Send Transaction</b><br/> <b>8. Follow the URL to your new T-bill.</b>
<button type = "button" id="sendTransactionButton" style="background-color: #006aff; </p>
-webkit-text-fill-color: white;">Send Transaction</button></p> </div>
</td> <div class="col-align-self-start">
<td align="left"> <p align="right"><b>MPToken Create Transaction</b></p>
<b>MPToken Create Transaction</b> <textarea id="codeTextArea" rows="18" cols="30"></textarea>
<textarea id="codeTextArea" rows="25" cols="30"></textarea> </div>
</td> </div>
</tr>
</tbody>
</table>
</tbody>
</table>
</form>
</div> </div>
<hr /> </div>
</div> </div>
</div>
<hr/>
## Creating a US Treasury Bill ## Creating a US Treasury Bill
A US Treasury bill (T-bill) is a short-term debt security issued by the US government. T-bills are considered a safe investment because they're backed by the US government. T-bills are appealing to investors in American states that have high income tax because the interest earned is exempt from state and local taxes. See [Treasury Bills In Depth](https://www.treasurydirect.gov/research-center/history-of-marketable-securities/bills/t-bills-indepth/). A US Treasury bill (T-bill) is a short-term debt security issued by the US government. T-bills are considered a safe investment because they're backed by the US government. T-bills are appealing to investors in American states that have high income tax because the interest earned is exempt from state and local taxes. See [Treasury Bills In Depth](https://www.treasurydirect.gov/research-center/history-of-marketable-securities/bills/t-bills-indepth/).
A T-bill is just one of the many asset-backed tokens you can create and trade as an MPT on the XRP Ledger.
### Creating an Issuing Account ### Creating an Issuing Account
You can use the Account Configurator to experiment with the settings for a T-bill issuing account in a sandbox environment. When you are satisfied with your configuration, you can create an account on XRPL Mainnet to begin trading. You can use the Account Configurator to experiment with the settings for a T-bill issuing account in a sandbox environment. When you are satisfied with your configuration, you can create an account on XRPL Mainnet to begin trading.