Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPT use case using an embedded MPT generator #2997

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

MPT use case using an embedded MPT generator #2997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6a2cf25
MPT use case using an embedded MPT generator
DennisDawson Feb 12, 2025
ae14f34
Use Bootstrap containers
DennisDawson Feb 14, 2025
b5007e4
stack fields to fit margins
DennisDawson Feb 15, 2025
d596a30
change textarea class for form-control
DennisDawson Feb 15, 2025
9e9483c
Remove Bootstrap style link, minor text adjustment
DennisDawson Feb 18, 2025
06aeca8
Consistent bold steps.
DennisDawson Feb 18, 2025
32f6766
Move buttons below fields in step 2
DennisDawson Feb 18, 2025
0e61d7d
Use label elements per suggestion from Rome
DennisDawson Feb 18, 2025
7175caf
Add a submission progress message
DennisDawson Feb 19, 2025
cb1fb8c
update screenshots and sample code
DennisDawson Feb 26, 2025
a1d8cb1
fix static value
DennisDawson Feb 28, 2025
09826b9
Incorporate MPT Use Case 2 with Use Case 1
DennisDawson Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions _code-samples/mpt-generator/mpt-generator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
body {
font-family: "Inter", sans-serif;
padding: 20px;
background: #abe2ff;
}

h1 {
font-weight: bold;
}

td {
padding-left: 25px;
vertical-align: top;
}

input,
button {
padding: 6px;
margin-bottom: 8px;
border: none
}

button {
font-weight: bold;
font-family: "Work Sans", sans-serif;
background-color: #006aff;
-webkit-text-fill-color: white;
}

td {
vertical-align: middle;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background-color: #2196F3;
}

input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
.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;
}
219 changes: 219 additions & 0 deletions _code-samples/mpt-generator/mpt-generator.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<html>

<head>
<title>MPT Generator</title>
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
<link href="mpt-generator.css" rel="stylesheet">
<script src='https://unpkg.com/[email protected]/build/xrpl-latest.js'></script>

<script src='mpt-generator.js'></script>
<script>
if (typeof module !== "undefined") {
const xrpl = require("xrpl")
}
</script>

</head>

<body>
<h1>MPT Generator</h1>
<form>
<table width="100%">
<tr>
<td valign="top">
<table>
<tr>
<td>
<table>
<tr valign="top">
<td colspan="3">
<span class="tooltip" tooltip-data="Choose the XRPL host server for your account.">
Choose your ledger instance:
</span>
&nbsp;&nbsp;
<input type="radio" id="tn" name="server"
value="wss://s.altnet.rippletest.net:51233" >
<label for="testnet">Testnet</label>
&nbsp;&nbsp;
<input type="radio" id="dn" name="server"
value="wss://s.devnet.rippletest.net:51233" checked>
<label for="devnet">Devnet</label><br />

</td>
</tr>
<tr>
<td align="right">
<div class="container">
<span class="tooltip" tooltip-data="The issuing account address.">Account
</span>
</div>
</td>
<td>

<input type="text" id="accountField" size="40"></input>
</td>
<td>
<button type="button" onClick="getAccount()">Get New
Account</button>
</td>

</tr>
<tr>
<td align="right">
<span class="tooltip" tooltip-data="The issuing account seed.">Seed
</span>
</td>
<td>

<input type="text" id="seedField" size="40"></input>
</td>
<td>
<button type="button" onClick="getAccountFromSeed()">Get Account
From Seed</button>
</td>
</tr>
<table>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="An asset scale is the difference, in orders of magnitude, between a standard unit and a corresponding fractional unit.">
Asset Scale
</span>
</td>
<td>
<input type="text" size="10" id="assetScaleField" />
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="The maximum number of tokens to be issued.">
Maximum Tokens
</span>
</td>
<td>
<input type="text" size="10" id="maximumAmountField" />
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="Fee collected when MPT is transferred.">
Transfer Fee
</span>
</td>
<td>
<input type="text" size="5" id="transferFeeField" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="Issuer can claw back value from holders.">
Clawback
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="clawbackSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="MPT can be locked individually and globally.">
Lock
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="lockSlider" name="lockSlider">

<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="Individual holders must be authorized.">
Require Authorization
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="authTokensSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="MPTs can be transferred to other accounts.">
Can Transfer
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="txrSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="MPT can be traded.">
Can Trade
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="tradeSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<span class="tooltip" tooltip-data="MPT can be used in an escrow.">
Can Escrow
</span>
</td>
<td align="middle">
<label class="switch">
<input type="checkbox" id="escrowSlider">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<b>Token Metadata</b>
</td>
</tr>
<tr>
<td colspan="3">
<textarea id="metadataTextArea" rows="25" cols="75"></textarea>
</td>
</tr>
</table>
</td>
<td>
<h2>MPToken Create Transaction</h2>
<p><button type="button" onclick="generateCode()">Generate Transaction</button>
&nbsp;&nbsp;<button type = "button" onclick="sendTransaction()">Send Transaction</button></p>
<span class="tooltip" tooltip-data="Follow this link to see the MPT Issuance entry on the Explorer.">
Link to Explorer entry for MPT Issuance.
</span>
<p><input type="text" id="urlField" size="50"></p>
<textarea id="codeTextArea" rows="25" cols="75"></textarea>
</td>
</tr>
</table>
</form>
</body>

</html>
Loading