generate faucet account client side

assets/js/test-net.js

@@ -1,90 +1,138 @@
 async function wait_for_seq(network_url, address) {
-  const api = new xrpl.Client(network_url)
+  const api = new xrpl.Client(network_url);
-  await api.connect()
+  await api.connect();
   let response;
   while (true) {
     try {
       response = await api.request({
         command: "account_info",
         account: address,
-        ledger_index: "validated"
+        ledger_index: "validated",
-      })
+      });
-      break
+      break;
     } catch (e) {
-      await new Promise(resolve => setTimeout(resolve, 1000))
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     }
   }
-  console.log(response)
+  console.log(response);
-  $("#sequence").html('<h3>Sequence Number</h3> '+response.result.account_data.Sequence)
+  $("#sequence").html(
-  api.disconnect()
+    "<h3>Sequence Number</h3> " + response.result.account_data.Sequence
+  );
+  $("#balance").html(
+    "<h3>Balance</h3> " +
+      (Number(response.result.account_data.Balance) * 0.000001).toLocaleString(
+        "en"
+      ) +
+      " XRP"
+  );
+  api.disconnect();
 }
 
-
 function rippleTestNetCredentials(url, altnet_name) {
+  const credentials = $("#your-credentials");
+  const address = $("#address");
+  const secret = $("#secret");
+  const balance = $("#balance");
+  const sequence = $("#sequence");
+  const loader = $("#loader");
 
-  const credentials = $('#your-credentials')
+  const test_wallet = xrpl.Wallet.generate();
-  const address = $('#address')
-  const secret = $('#secret')
-  const balance = $('#balance')
-  const sequence = $('#sequence')
-  const loader = $('#loader')
 
   //reset the fields initially and for re-generation
-  credentials.hide()
+  credentials.hide();
-  address.html('')
+  address.html("");
-  secret.html('')
+  secret.html("");
-  balance.html('')
+  balance.html("");
-  sequence.html('')
+  sequence.html("");
-  loader.css('display', 'inline')
+  loader.css("display", "inline");
-
 
   //call the alt-net and get key generations
   $.ajax({
     url: url,
-    type: 'POST',
+    type: "POST",
-    dataType: 'json',
+    contentType: "application/json; charset=utf-8",
+    data: JSON.stringify({
+      destination: test_wallet.address,
+    }),
+    dataType: "json",
     success: function (data) {
       //hide the loader and show results
+      console.log("data", data);
       loader.hide();
-      credentials.hide().html('<h2>Your '+altnet_name+' Credentials</h2>').fadeIn('fast')
+      credentials
-      address.hide().html('<h3>Address</h3> ' +
+        .hide()
-        data.account.address).fadeIn('fast')
+        .html("<h2>Your " + altnet_name + " Credentials</h2>")
-      secret.hide().html('<h3>Secret</h3> ' +
+        .fadeIn("fast");
-        data.account.secret).fadeIn('fast')
+      address
-      balance.hide().html('<h3>Balance</h3> ' +
+        .hide()
-        Number(data.balance).toLocaleString('en') + ' XRP').fadeIn('fast')
+        .html("<h3>Address</h3> " + test_wallet.address)
-      sequence.html('<h3>Sequence</h3> <img class="throbber" src="assets/img/xrp-loader-96.png"> Waiting...').fadeIn('fast')
+        .fadeIn("fast");
+      secret
+        .hide()
+        .html("<h3>Secret</h3> " + test_wallet.seed)
+        .fadeIn("fast");
+      balance
+        .hide()
+        .html(
+          "<h3>Balance</h3> " +
+            Number(data.amount).toLocaleString("en") +
+            " XRP"
+        )
+        .fadeIn("fast");
+      sequence
+        .html(
+          '<h3>Sequence</h3> <img class="throbber" src="assets/img/xrp-loader-96.png"> Waiting...'
+        )
+        .fadeIn("fast");
       if (altnet_name == "Testnet") {
-        wait_for_seq("wss://s.altnet.rippletest.net:51233", data.account.address)
+        wait_for_seq(
+          "wss://s.altnet.rippletest.net:51233",
+          test_wallet.address
+        );
       } else if (altnet_name == "NFT-Devnet") {
-        wait_for_seq("wss://xls20-sandbox.rippletest.net:51233", data.account.address)
+        wait_for_seq(
+          "wss://xls20-sandbox.rippletest.net:51233",
+          test_wallet.address
+        );
       } else {
-        wait_for_seq("wss://s.devnet.rippletest.net:51233", data.account.address)
+        wait_for_seq(
+          "wss://s.devnet.rippletest.net:51233",
+          test_wallet.address
+        );
       }
-
     },
     error: function () {
       loader.hide();
-      alert("There was an error with the "+altnet_name+" faucet. Please try again.");
+      alert(
-    }
+        "There was an error with the " +
-  })
+          altnet_name +
+          " faucet. Please try again."
+      );
+    },
+  });
 }
 
 $(document).ready(function () {
   function testnet_click(evt) {
-    rippleTestNetCredentials("https://faucet.altnet.rippletest.net/accounts",
+    rippleTestNetCredentials(
-      "Testnet")
+      "https://faucet.altnet.rippletest.net/accounts",
+      "Testnet"
+    );
   }
   function devnet_click(evt) {
-    rippleTestNetCredentials("https://faucet.devnet.rippletest.net/accounts",
+    rippleTestNetCredentials(
-      "Devnet")
+      "https://faucet.devnet.rippletest.net/accounts",
+      "Devnet"
+    );
   }
   function nftnet_click(evt) {
-    rippleTestNetCredentials("https://faucet-nft.ripple.com/accounts",
+    rippleTestNetCredentials(
-      "NFT-Devnet")
+      "https://faucet-nft.ripple.com/accounts",
+      "NFT-Devnet"
+    );
   }
 
-  $('#testnet-creds-button').click(testnet_click)
+  $("#testnet-creds-button").click(testnet_click);
-  $('#devnet-creds-button').click(devnet_click)
+  $("#devnet-creds-button").click(devnet_click);
-  $('#nftnet-creds-button').click(nftnet_click)
+  $("#nftnet-creds-button").click(nftnet_click);
-})
+});