Revise payment tutorials, add/remove screenshots #3091
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| // ****************************************************** | ||
| // ************* Get the Preferred Network ************** | ||
| // ****************************************************** | ||
|
|
||
| function getNet() { | ||
| 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/" | ||
| const client = new xrpl.Client(net) | ||
| return net | ||
| } // End of getNet() | ||
|
|
||
| // ******************************************************* | ||
| // ************* Get Account ***************************** | ||
| // ******************************************************* | ||
|
|
||
| async function getAccount() { | ||
| let net = getNet() | ||
| const client = new xrpl.Client(net) | ||
| await client.connect() | ||
| let results = `\nConnected to ${net}.` | ||
| let faucetHost = null | ||
| const my_wallet = (await client.fundWallet(null, { faucetHost})).wallet | ||
| const newAccount = [my_wallet.address, my_wallet.seed] | ||
| return (newAccount) | ||
| client.disconnect() | ||
| } // End of getAccount() | ||
|
|
||
| async function getNewAccount1() { | ||
| account1address.value = "Getting new account." | ||
| const accountInfo= await getAccount() | ||
| account1address.value = accountInfo[0] | ||
| account1seed.value = accountInfo[1] | ||
| } | ||
|
|
||
| async function getNewAccount2() { | ||
| account2address.value = "Getting new account." | ||
| const accountInfo= await getAccount() | ||
| account2address.value = accountInfo[0] | ||
| account2seed.value = accountInfo[1] | ||
| } | ||
|
|
||
| // ***************************************************** | ||
| // ********** Get Account from Seed ******************** | ||
| // ***************************************************** | ||
|
|
||
| async function getAccountFromSeed(my_seed) { | ||
| const net = getNet() | ||
| const client = new xrpl.Client(net) | ||
| await client.connect() | ||
| let results = '\nConnected, finding wallet.\n' | ||
| resultField.value = results | ||
| const wallet = xrpl.Wallet.fromSeed(my_seed) | ||
| // ----------------------Populate the fields for left and right accounts. | ||
| const address = wallet.address | ||
| client.disconnect() | ||
| return (address) | ||
| } // End of getAccountFromSeed() | ||
|
|
||
| // ***************************************************** | ||
| // ********** Get Account from Seed1 ******************* | ||
| // ***************************************************** | ||
|
|
||
| async function getAccountFromSeed1() { | ||
| account1address.value = await getAccountFromSeed(account1seed.value) | ||
| } | ||
|
|
||
| // ***************************************************** | ||
| // ********** Get Account from Seed2 ******************* | ||
| // ***************************************************** | ||
|
|
||
| async function getAccountFromSeed2() { | ||
| account2address.value = await getAccountFromSeed(account2seed.value) | ||
| } | ||
|
|
||
| // ***************************************************** | ||
| // ************ Gather Account Info ******************** | ||
| // ***************************************************** | ||
|
|
||
| function gatherAccountInfo() { | ||
| let accountData = account1name.value + "\n" + account1address.value + "\n" + account1seed.value + "\n" | ||
| accountData += account2name.value + "\n" + account2address.value + "\n" + account2seed.value | ||
| resultField.value = accountData | ||
| } | ||
|
|
||
| // ***************************************************** | ||
| // ********** Distribute Account Info ****************** | ||
| // ***************************************************** | ||
|
|
||
| function distributeAccountInfo() { | ||
| let accountInfo = resultField.value.split("\n") | ||
| account1name.value = accountInfo[0] | ||
| account1address.value = accountInfo[1] | ||
| account1seed.value = accountInfo[2] | ||
| account2name.value = accountInfo[3] | ||
| account2address.value = accountInfo[4] | ||
| account2seed.value = accountInfo[5] | ||
| } | ||
maria-robobug marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| // ***************************************************** | ||
| // ************ Populate Active Form 1 ***************** | ||
| // ***************************************************** | ||
|
|
||
| function populate1() { | ||
| accountNameField.value = account1name.value | ||
| accountAddressField.value = account1address.value | ||
| accountSeedField.value = account1seed.value | ||
| getXrpBalance() | ||
| } | ||
|
|
||
| // ***************************************************** | ||
| // ************ Populate Active Form 2 ***************** | ||
| // ***************************************************** | ||
|
|
||
| function populate2() { | ||
| accountNameField.value = account2name.value | ||
| accountAddressField.value = account2address.value | ||
| accountSeedField.value = account2seed.value | ||
| getXrpBalance() | ||
| } | ||
|
|
||
| // ******************************************************* | ||
| // **************** Get Xrp Balance ********************* | ||
| // ******************************************************* | ||
|
|
||
| async function getXrpBalance() { | ||
| const net = getNet() | ||
| const client = new xrpl.Client(net) | ||
| await client.connect() | ||
| xrpBalanceField.value = await client.getXrpBalance(accountAddressField.value) | ||
| client.disconnect() | ||
| } // End of getXrpBalance() | ||
|
|
||
| // ******************************************************* | ||
| // ************** Get Token Balance ********************* | ||
| // ******************************************************* | ||
|
|
||
| async function getTokenBalance() { | ||
| let net = getNet() | ||
| const client = new xrpl.Client(net) | ||
| results = 'Connecting to ' + getNet() + '....' | ||
| resultField.value = results | ||
| await client.connect() | ||
| results += '\nConnected.' | ||
| resultField.value = results | ||
| const wallet = xrpl.Wallet.fromSeed(accountSeedField.value) | ||
| results= "\nGetting account balance...\n" | ||
| const balance = await client.request({ | ||
| command: "gateway_balances", | ||
| account: wallet.address, | ||
| ledger_index: "validated", | ||
| }) | ||
| results += JSON.stringify(balance.result, null, 2) | ||
| resultField.value = results | ||
| xrpBalanceField.value = (await client.getXrpBalance(wallet.address)) | ||
| client.disconnect() | ||
| } // End of getTokenBalance() | ||
|
|
||
DennisDawson marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
There was a problem hiding this comment. Can we also add a button to fund an existing account with additional XRP? There was a problem hiding this comment. I don't know of an easy way to do that using the faucet. If I want to add XRP to an account, I can just create another account and send some XRP. Accounts that run out of XRP should try sending smaller amounts when testing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| <html> | ||
| <head> | ||
| <title>XRPL Base Module</title> | ||
| <link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'> | ||
| <link href="modular-tutorials.css" rel="stylesheet"> | ||
| <script src='https://unpkg.com/xrpl@4.1.0/build/xrpl-latest.js'></script> | ||
| <script src="account-support.js"></script> | ||
| <script src='send-xrp.js'></script> | ||
| </head> | ||
|
|
||
| <!-- ************************************************************** --> | ||
| <!-- ********************** The Form ****************************** --> | ||
| <!-- ************************************************************** --> | ||
|
|
||
| <body> | ||
| <h1>XRPL Base Module</h1> | ||
| <form id="theForm"> | ||
| <span class="tooltip" tooltip-data="Choose the XRPL host server for your account."> | ||
| Choose your ledger instance: | ||
| </span> | ||
| | ||
| <input type="radio" id="dn" name="server" value="wss://s.devnet.rippletest.net:51233" checked> | ||
| <label for="dn">Devnet</label> | ||
| | ||
| <input type="radio" id="tn" name="server" value="wss://s.altnet.rippletest.net:51233"> | ||
| <label for="tn">Testnet</label> | ||
| <br /><br /> | ||
| <table> | ||
| <tr> | ||
| <td> | ||
| <button type="button" onClick="getNewAccount1()">Get New Account 1</button> | ||
| </td> | ||
| <td> | ||
| <button type="button" onClick="getAccountFromSeed1()">Get Account 1 From Seed</button> | ||
| </td> | ||
| <td> | ||
| <button type="button" onClick="getNewAccount2()">Get New Account 2</button> | ||
| </td> | ||
| <td> | ||
| <button type="button" onClick="getAccountFromSeed2()">Get Account 2 From Seed</button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Arbitrary human-readable name for the account."><label for="account1name">Account 1 Name</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account1name" size="40"></input> | ||
| </td> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Arbitrary human-readable name for the account."> | ||
| <label for="account2name">Account 2 Name</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account2name" size="40"></input> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Identifying address for the account."> | ||
| <label for="account1address">Account 1 Address</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account1address" size="40"></input> | ||
| </td> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Identifying address for the account."> | ||
| <label for="account2address">Account 2 Address</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account2address" size="40"></input> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Seed for deriving public and private keys for the account."> | ||
| <label for="account1seed">Account 1 Seed</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account1seed" size="40"></input> | ||
| </td> | ||
| <td> | ||
| <span class="tooltip" tooltip-data="Seed for deriving public and private keys for the account."> | ||
| <label for="account2seed">Account 2 Seed</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="account2seed" size="40"></input> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <hr /> | ||
| <table> | ||
| <tr valign="top"> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="Name of the currently selected account."> | ||
| <label for="accountNameField">Account Name</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="accountNameField" size="40" readonly></input> | ||
| <input type="radio" id="account1" name="accounts" value="account1"> | ||
| <label for="account1">Account 1</label> | ||
| </td> | ||
| </tr> | ||
| <tr valign="top"> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="Address of the currently selected account."> | ||
| <label for="accountAddressField">Account Address</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="accountAddressField" size="40" readonly></input> | ||
| <input type="radio" id="account2" name="accounts" value="account2"> | ||
| <label for="account2">Account 2</label> | ||
| </td> | ||
| </tr> | ||
| <tr valign="top"> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="Seed of the currently selected account."> | ||
| <label for="accountSeedField">Account Seed</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="accountSeedField" size="40" readonly></input> | ||
| <br> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="XRP balance for the currently selected account."> | ||
| <label for="xrpBalanceField">XRP Balance</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="xrpBalanceField" size="40" readonly></input> | ||
| </td> | ||
| <td> | ||
| <button type="button" onClick="sendXRP()">Send XRP</button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="Amount of XRP to send."> | ||
| <label for="amountField">Amount</label> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="amountField" size="40"></input> | ||
| <br> | ||
| </td> | ||
| <td align="left" valign="top"> | ||
| <button type="button" onClick="getXrpBalance()">Get XRP Balance</button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="right"> | ||
| <span class="tooltip" tooltip-data="Destination account address where XRP is sent."> | ||
| <lable for="destinationField">Destination</lable> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <input type="text" id="destinationField" size="40"></input> | ||
| <br> | ||
| </td> | ||
| <td align="left" valign="top"> | ||
| <button type="button" onClick="getTokenBalance()">Get Token Balance</button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="2"> | ||
| <p align="right"> | ||
| <textarea id="resultField" cols="80" rows="20"></textarea> | ||
| </p> | ||
| </td> | ||
| <td align="left" valign="top"> | ||
| <button type="button" onClick="gatherAccountInfo()">Gather Account Info</button><br/> | ||
| <button type="button" onClick="distributeAccountInfo()">Distribute Account Info</button> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </form> | ||
| </body> | ||
| <script> | ||
| const radioButtons = document.querySelectorAll('input[type="radio"]'); | ||
| radioButtons.forEach(radio => { | ||
| radio.addEventListener('change', function() { | ||
| if (this.value === 'account1') { | ||
| populate1() | ||
| } else if (this.value === 'account2') { | ||
| populate2() | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| </html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This suggestion applies to all instances that add to the result field. I think it's worth keeping a log of all actions that take place, so ensuring all results are
+=and not overridden with=. It'd also like to see a more pronounced headers to identify the type of function that's being called to help differentiate info in the logs. So for an offer create transaction, it starts with something like===Creating Offer===and then has a line break for subsequent metadata.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made these changes.