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,174 +136,135 @@ 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><br /> <label for="devnet">Devnet</label>
</td> </div>
</tr> </div>
<tr> <div class="row">
<td align="right"> <div class="col align-self-start">
<font color="red"><b>2.</b></font> Get a new account or one from a seed.<br/> <b>2. Get a new account or retrieve one from its seed.</b><br/>
</td> </div>
</tr> <div class="col align-self-start">
<tr> Account: <input type="text" id="accountField" size="40"></input>
<td align="right"> Seed: <input type="text" id="seedField" size="40"></input>
Account </div>
</td> <div class="col align-self-start">
<td> <button type="button" id="getNewAccountButton" class="btn btn-primary">Get New Account</button><br/><br/>
<input type="text" id="accountField" size="40"></input> <button type="button" id="getAccountFromSeedButton" class="btn btn-primary">Get Account From Seed</button>
</td> </div>
<td> </div>
<button type="button" id="getNewAccountButton" style="background-color: #006aff; <p>
-webkit-text-fill-color: white;">Get New <div class="row">
Account</button> <div class="col align-self-start">
</td> <b>3. Enter parameter values for your new MPT.</b>
</tr> </div>
<tr> </div>
<td align="right"> <div class="row">
Seed <div class="col align-right">
</td> Asset Scale:
<td> </div>
<input type="text" id="seedField" size="40"></input> <div class="col align-self-start">
</td>
<td>
<button type="button" id="getAccountFromSeedButton" style="background-color: #006aff; -webkit-text-fill-color: white;">
Get Account From Seed
</button>
</td>
</tr>
<tr>
<td>
<font color="red"><b>3.</b></font> Set fields for your new MPT.<br/>
</td>
</tr>
<tr>
<td align="right">
Asset Scale
</td>
<td>
<input type="text" size="10" id="assetScaleField" value="2"/> <input type="text" size="10" id="assetScaleField" value="2"/>
</td> </div>
</tr> </div>
<tr> <div class="row">
<td align="right"> <div class="col align-right">
Maximum Tokens Maximum Tokens:
</td> </div>
<td> <div class="col align-self-start">
<input type="text" size="10" id="maximumAmountField" value="1000000"/> <input type="text" size="10" id="maximumAmountField" value="1000000"/>
</td> </div>
</tr> </div>
<tr> <div class="row">
<td align="right"> <div class="col align-right">
Transfer Fee Transfer Fee:
</td> </div>
<td> <div class="col align-self-start">
<input type="text" size="5" id="transferFeeField" value="314"/> <input type="text" size="10" id="transferFeeField" value="314"/>
</td> </div>
</tr> </div>
<tr> <div class="row"><p></div>
<td></td> <div>
</tr> <div class="row">
<tr> <div class="col align-self-start">
<td> <b>4. Set flags for your new MPT.</b>
<font color="red"><b>4.</b></font> Set flags for your new MPT.<br/> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col align-self-start">
<td align="right">
Clawback Clawback
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch"> <input type="checkbox" id="clawbackSlider">
<input type="checkbox" id="clawbackSlider" checked> </div>
<span class="slider round"></span> </div>
</label> <div class="row">
</td> <div class="col align-self-start">
</tr>
<tr>
<td align="right">
Lock Lock
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch"> <input type="checkbox" id="lockSlider">
<input type="checkbox" id="lockSlider" name="lockSlider"> </div>
<span class="slider round"></span> </div>
</label> <div class="row">
</td> <div class="col align-self-start">
</tr>
<tr>
<td align="right">
Require Authorization Require Authorization
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch"> <input type="checkbox" id="authTokenSlider">
<input type="checkbox" id="authTokensSlider" checked> </div>
<span class="slider round"></span> </div>
</label> <div class="row">
</td> <div class="col align-self-start">
</tr>
<tr>
<td align="right">
Can Transfer Can Transfer
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch">
<input type="checkbox" id="txrSlider" checked> <input type="checkbox" id="txrSlider" checked>
<span class="slider round"></span> </div>
</label> </div>
</td> <div class="row">
</tr> <div class="col align-self-start">
<tr>
<td align="right">
Can Trade Can Trade
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch"> <input type="checkbox" id="tradeSlider">
<input type="checkbox" id="tradeSlider" checked> </div>
<span class="slider round"></span> </div>
</label> <div class="row">
</td> <div class="col align-self-start">
</tr>
<tr>
<td align="right">
Can Escrow Can Escrow
</td> </div>
<td align="left"> <div class="col align-self-start">
<label class="switch">
<input type="checkbox" id="escrowSlider"> <input type="checkbox" id="escrowSlider">
<span class="slider round"></span> </div>
</label> </div>
</td> <div class="row">
</tr> <div class="col align-self-start">
<tr> <b>5. Enter the token metadata.</b>
<td> </div>
<br/><br/><p> </div>
<font color="red"><b>5.</b></font> Copy and paste the metadata for your token (or use sample provided). <div class="row">
</p> <div class="col align-self-start">
</td>
</tr>
<tr>
<td>
<b>Token Metadata</b> <b>Token Metadata</b>
<textarea id="metadataTextArea" rows="25" cols="30" <textarea id="metadataTextArea" rows="18" cols="30"
value='{ value='{
"Name": "US Treasury Bill Token", "Name": "US Treasury Bill Token",
"Identifier": "USTBT", "Identifier": "USTBT",
@@ -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> </div>
</tbody> </div>
</table> </div>
</tbody>
</table>
</form>
</div> </div>
<hr/> <hr/>
</div>
## 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.