Ropsten Ethereum Faucet: Web App

0
52

This series of tutorial documents my process of building an Ethereum faucet on the Ropsten Testnet. This is the 4th article of the series and it explains the codes behind the Faucet Web App. The Faucet Web App allows requesters to provide their Wallet address to let the faucet dish out free ETH to them.

  1. Ropsten Ethereum Faucet: How it works
  2. Ropsten Ethereum Faucet: Smart Contract
  3. Ropsten Ethereum Faucet: JSON Web Service
  4. Ropsten Ethereum Faucet: Web App

The source codes for this project are in the project’s Github repository and the faucet smart contract is accessible here.

Photo by Kirsten Marie Ebbesen on Unsplash

Not a DApp

By design, the Faucet Web App is not a Decentralized Application (DApp). It doesn’t connect directly to a Blockchain and it does not integrate with an Ethereum Wallet; rightly so because as I have explained in Part 1, ETH requesters who wants free ETH aren’t likely to already own ETHs in their wallet. So a faucet needs to not only give out free ETH, but also be able to fund the transactions on the Ethereum Blockchain to do so.

This Faucet Web App simply makes web service calls to the Faucet JSON Web Service to execute ETH transfer from my faucet wallet, to the requester’s wallet.

The Codes

My codes are found in my GitHub repository here.

function serverURL(){
return "https://resonant-backpack.glitch.me";
}

Lines 46 to 48 tells the Web App where the JSON web service is. My JSON web service is running in Glitch.

$( document ).ready(function() {
$("#btnGo").bind("click", function () {
go();
     });
$("#loader").hide();
eth();

});

Lines 54 to 62 make calls to 2 JavaScript functions go() and eth(). go() runs when the user clicks the btnGo button to initiate a transfer of ETH from faucet to his wallet. eth() runs when the page loads for the first time.

function eth(){
var url = serverURL() + "/ethers";
     $.ajax({
type: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
dataType: 'json',
success: function (arr) {
_ethResult(arr);
},
error: function () {
validationMsg();
}
});
}
function _ethResult(arr) {
$("#faucetvalue").text("Faucet: " + arr.ethbalance + " ETH");
}

Lines 65 to 85 send a request to the JSON Web Service /ethers to find out how much ETHs the faucet has. It then update the #faucentvalue div with the ETH value that the Web Service returns.

function go() {
$("#message").text("");
$("#loader").show();
var url = serverURL() + "/sendethers";
walletaddress = $("#walletaddress").val();
myrequest = $("#myrequest").val();

var JSONObject = {
"receiver": walletaddress,
"request": myrequest
};

$.ajax({
type: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
dataType: 'json',
data: JSONObject,
success: function (arr) {
_goResult(arr);
},
error: function () {
validationMsg();
}
});
}
function _goResult(arr) {
$("#message").text("OK");
eth()
$("#loader").hide();
}

Lines 87 to 119 define the function go() which makes a request to the faucet through the JSON Web Service.

It constructs a JSONObject by providing the requester's wallet address (walletaddress) and the amount of ETH that he wishes to receive (myrequest).

A web service call to /sendethers was made by providing the JSONObject. The requester then waits on while the web service returns to tell the requester that his ETH request has been fulfilled.

What’s Next?

The source codes for this projects can be found in my Github repository.

This complete the Ethereum Faucet series of tutorial, thank you for hanging out and my sincere apologies for taking close to 10 months to complete this series!

If you enjoyed this tutorial, perhaps you may also wish to read:

Also, Read

Get Best Software Deals Directly In Your Inbox

Ropsten Ethereum Faucet: Web App was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.