mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
Add tooltips, separate CSS file
This commit is contained in:
Dennis Dawson
139
_code-samples/account-configurator/account-configurator.css
Normal file
139
_code-samples/account-configurator/account-configurator.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -3,37 +3,8 @@
|
||||
<head>
|
||||
<title>Account Configurator</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
padding: 20px;
|
||||
background: #abe2ff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<link href="account-configurator.css" rel = 'stylesheet'>
|
||||
|
||||
<script src='https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js'></script>
|
||||
<script src='account-configurator.js'></script>
|
||||
<script>
|
||||
@@ -51,7 +22,9 @@
|
||||
<body>
|
||||
<h1>Account Configurator</h1>
|
||||
<form id="theForm">
|
||||
Choose your ledger instance:
|
||||
<span class="tooltip" tooltip-data="Choose the XRPL host server for your account.">
|
||||
Choose your ledger instance:
|
||||
</span>
|
||||
|
||||
<input type="radio" id="mn" name="server" value="wss://xrplcluster.com/">
|
||||
<label for="mainnet">Mainnet</label>
|
||||
@@ -67,7 +40,9 @@
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
Account
|
||||
<span class="tooltip" tooltip-data="Address of your account.">
|
||||
Account
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="accountField" size="40"></input>
|
||||
@@ -78,7 +53,9 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Seed
|
||||
<span class="tooltip" tooltip-data="Seed value of your account.">
|
||||
Seed
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="seedField" size="40"></input>
|
||||
@@ -100,7 +77,9 @@
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Preset configurations you can choose for your account.">
|
||||
Account Configuration Templates:
|
||||
</span>
|
||||
|
||||
<input type="radio" id="hd" name="accountType" value="hd" onclick="setHolder()">
|
||||
<label for="hd" background="green">Holder</label>
|
||||
@@ -126,48 +105,50 @@
|
||||
<table>
|
||||
<tr valign="top">
|
||||
<td align="right">
|
||||
<span class="tooltip" tooltip-data="Web address where your TOML file resides.">
|
||||
Domain
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="domainField" size="40"></input>
|
||||
</td>
|
||||
<td>
|
||||
A web address.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Transfer Rate
|
||||
<span class="tooltip" tooltip-data="A value between 1000000000 and 2000000000, inclusive.">
|
||||
Transfer Rate
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="transferRateField" size="40"></input>
|
||||
</td>
|
||||
<td>
|
||||
A value between 1000000000 and 2000000000, inclusive.
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Tick Size
|
||||
<span class="tooltip" tooltip-data="Valid values are 3 to 15, inclusive, or 0 to disable.">
|
||||
Tick Size
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="tickSizeField" size="40"></input>
|
||||
</td>
|
||||
<td>
|
||||
Valid values are 3 to 15, inclusive, or 0 to disable.
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Signer1 Account
|
||||
<span class="tooltip" tooltip-data="Signer to authorize account transactions.">
|
||||
Signer1 Account
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="signer1AccountField" size="40"></input>
|
||||
</td>
|
||||
<td>Signer1 Weight
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Relative value of the signer's vote on approvals.">
|
||||
Signer1 Weight</span>
|
||||
|
||||
<input type="text" id="signer1WeightField" size="5"></input>
|
||||
</td>
|
||||
<td>
|
||||
@@ -176,22 +157,34 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Signer2 Account
|
||||
<span class="tooltip" tooltip-data="Signer to authorize account transactions.">
|
||||
Signer2 Account
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="signer2AccountField" size="40"></input>
|
||||
</td>
|
||||
<td>Signer2 Weight
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Relative value of the signer's vote on approvals.">
|
||||
Signer2 Weight
|
||||
</span>
|
||||
|
||||
<input type="text" id="signer2WeightField" size="5"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
Signer3 Account</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Signer to authorize account transactions.">
|
||||
Signer3 Account
|
||||
</span>
|
||||
<td>
|
||||
<input type="text" id="signer3AccountField" size="40"></input>
|
||||
</td>
|
||||
<td>Signer3 Weight
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Relative value of the signer's vote on approvals.">
|
||||
Signer3 Weight
|
||||
</span>
|
||||
|
||||
<input type="text" id="signer3WeightField" size="5"></input>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -200,103 +193,129 @@
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
<td>Signer Quorum
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Minimum sum of signer weights required to approve a transaction.">
|
||||
Signer Quorum
|
||||
</span>
|
||||
<input type="text" id="signerQuorumField" size="5"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<tr>
|
||||
<div id="account_flags">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
defaultRipple
|
||||
<span class="tooltip" tooltip-data="Allow rippling on trust lines by default.">
|
||||
defaultRipple
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type='checkbox' id="defaultRipple"></input></br>
|
||||
</td>
|
||||
<td>
|
||||
Allow rippling on trust lines by default.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
allowTrustLineClawback
|
||||
<span class="tooltip" tooltip-data="Allow clawback of tokens on trust lines to the account.">
|
||||
allowTrustLineClawback
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type='checkbox' id='allowTrustLineClawback'></input></br>
|
||||
</td>
|
||||
<td>
|
||||
Allow clawback of tokens on trust lines to the account.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
depositAuth
|
||||
<span class="tooltip" tooltip-data="Use Deposit Authorization to deny payments from unknown third parties.">
|
||||
depositAuth
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type='checkbox' id='depositAuth'></input></br>
|
||||
</td>
|
||||
<td>
|
||||
Use Deposit Authorization to deny payments from unknown third parties.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
disableMasterKey
|
||||
<span class="tooltip" tooltip-data="Disable the account master key pair.">
|
||||
disableMasterKey
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type='checkbox' id='disableMasterKey'></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Disable the account master key pair.
|
||||
<span class="tooltip" tooltip-data="Prevent other accounts from sending checks to the account.">
|
||||
disallowIncomingCheck
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disallowIncomingCheck</td>
|
||||
<td><input type='checkbox' id='disallowIncomingCheck'></input></td>
|
||||
<td>Prevent other accounts from sending checks to the account.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disallowIncomingNFTokenOffer</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Prevent other accounts from sending NFT buy or sell offers to the account.">
|
||||
disallowIncomingNFTokenOffer
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='disallowIncomingNFTokenOffer'></input></td>
|
||||
<td>Prevent other accounts from sending NFT buy or sell offers to the account.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disallowIncomingPayChan</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Prevent other accounts from creating payment channels to the account.">
|
||||
disallowIncomingPayChan
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='disallowIncomingPayChan'></input></td>
|
||||
<td>Prevent other accounts from creating payment channels to the account.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disallowIncomingTrustline</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Prevent other accounts from creating trust lines to the account.">
|
||||
disallowIncomingTrustline
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='disallowIncomingTrustline'></input></td>
|
||||
<td>Prevent other accounts from creating trust lines to the account.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disallowIncomingXRP</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Prevent other accounts from sending XRP to the account. (This is advisory, and not enforced at the protocol
|
||||
level.)">
|
||||
disallowIncomingXRP
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='disallowIncomingXRP'></input></td>
|
||||
<td>Prevent other accounts from sending XRP to the account. (This is advisory, and not enforced at the protocol
|
||||
level.)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>globalFreeze</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Freeze all tokens issued by the account.">
|
||||
globalFreeze
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='globalFreeze'></input></td>
|
||||
<td>Freeze all tokens issued by the account.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>noFreeze</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="Permanently remove the ability to freeze individual trust lines or end a global freeze.">
|
||||
noFreeze
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='noFreeze'></input></td>
|
||||
<td>Permanently remove the ability to freeze individual trust lines or end a global freeze.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>requireAuthorization</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="The account requires authorized trust lines for other accounts to hold tokens it issues.">
|
||||
requireAuthorization
|
||||
</span>
|
||||
</td>
|
||||
<td><input type='checkbox' id='requireAuthorization'></input></td>
|
||||
<td>The account requires authorized trust lines for other accounts to hold tokens it issues.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>requireDestinationTag</td>
|
||||
<td>
|
||||
<span class="tooltip" tooltip-data="The account requires a destination tag on all payments it receives.">
|
||||
requireDestinationTag
|
||||
</span></td>
|
||||
<td><input type='checkbox' id='requireDestinationTag'></input></td>
|
||||
<td>The account requires a destination tag on all payments it receives.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
|
||||
@@ -281,33 +281,35 @@ async function configureAccount() {
|
||||
const signedAccount = my_wallet.sign(preparedAccount)
|
||||
const resultAccount = await client.submitAndWait(signedAccount.tx_blob)
|
||||
resultField.value += JSON.stringify(resultAccount, null, 2)
|
||||
my_signers= {
|
||||
"Flags": 0,
|
||||
"TransactionType": "SignerListSet",
|
||||
"Account": my_wallet.address,
|
||||
"Fee": "12",
|
||||
"SignerQuorum": parseInt(signerQuorumField.value),
|
||||
"SignerEntries": [
|
||||
{"SignerEntry":
|
||||
{"Account": signer1AccountField.value,
|
||||
"SignerWeight": parseInt(signer1WeightField.value)
|
||||
}},
|
||||
{"SignerEntry":
|
||||
{"Account": signer2AccountField.value,
|
||||
"SignerWeight": parseInt(signer2WeightField.value)}
|
||||
},
|
||||
{"SignerEntry":
|
||||
{"Account": signer3AccountField.value,
|
||||
"SignerWeight": parseInt(signer3WeightField.value)
|
||||
if(signer1AccountField.value!=""){
|
||||
my_signers= {
|
||||
"Flags": 0,
|
||||
"TransactionType": "SignerListSet",
|
||||
"Account": my_wallet.address,
|
||||
"Fee": "12",
|
||||
"SignerQuorum": parseInt(signerQuorumField.value),
|
||||
"SignerEntries": [
|
||||
{"SignerEntry":
|
||||
{"Account": signer1AccountField.value,
|
||||
"SignerWeight": parseInt(signer1WeightField.value)
|
||||
}},
|
||||
{"SignerEntry":
|
||||
{"Account": signer2AccountField.value,
|
||||
"SignerWeight": parseInt(signer2WeightField.value)}
|
||||
},
|
||||
{"SignerEntry":
|
||||
{"Account": signer3AccountField.value,
|
||||
"SignerWeight": parseInt(signer3WeightField.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const preparedSigner = await client.autofill(my_signers)
|
||||
const signedSigner = my_wallet.sign(preparedSigner)
|
||||
const resultSigner = await client.submitAndWait(signedSigner.tx_blob)
|
||||
resultField.value += JSON.stringify(resultSigner, null, 2)
|
||||
]
|
||||
}
|
||||
|
||||
const preparedSigner = await client.autofill(my_signers)
|
||||
const signedSigner = my_wallet.sign(preparedSigner)
|
||||
const resultSigner = await client.submitAndWait(signedSigner.tx_blob)
|
||||
resultField.value += JSON.stringify(resultSigner, null, 2)
|
||||
}
|
||||
}
|
||||
client.disconnect()
|
||||
if(!document.getElementById("is").checked) {
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user