Ethereum Blockchain App using Ganache and Web3.js

What is Blockchain

A blockchain is a decentralized and distributed digital ledger that is used to record transactions across many computers in a way that is secure, transparent, and tamper-resistant.

Each block in the chain contains a cryptographic hash of the previous block, a timestamp, and transaction data.

Once a block is added to the chain, it cannot be altered without altering all subsequent blocks, making the blockchain an immutable record of all transactions.

What is Ethereum Blockchain

Ethereum is an open-source blockchain-based decentralized platform that enables developers to build and deploy smart contracts and decentralized applications (DApps).

It was launched in 2015 by Vitalik Buterin and has since become one of the most popular blockchain networks in the world.

Ethereum’s blockchain is unique in that it allows developers to create and deploy smart contracts, which are self-executing contracts that can be programmed to automatically execute the terms of an agreement.

These smart contracts can be used for various applications, from finance and healthcare to gaming and social media.

Ethereum’s native cryptocurrency is Ether (ETH), which is used to pay transaction fees and reward miners for processing transactions on the network.

The Ethereum blockchain also allows for the creation of new tokens, which can be used as digital assets or currencies within DApps built on the platform.

Overall, the Ethereum blockchain offers a flexible and powerful platform for developers to build and deploy decentralized applications while providing a secure and transparent environment for users to interact with these applications.

What is Ganache Blockchain

Ganache is a personal blockchain for Ethereum development, which allows developers to test and deploy smart contracts on a local blockchain environment.

It provides a simple and easy-to-use graphical user interface (GUI) and command-line interface (CLI) for developers to create and manage local Ethereum networks.

Ganache allows developers to simulate network conditions and test scenarios, such as debugging and deployment, without the need for an actual Ethereum network.

It also provides various tools for testing and debugging smart contracts, such as gas management and contract debugging.

Ganache is widely used by Ethereum developers for local development and testing, and it has become an essential tool for building decentralized applications (DApps) on the Ethereum blockchain.

You can download ganache from the official site

What is Web3.js

Web3.js is a JavaScript library that enables developers to interact with Ethereum blockchain-based applications through a user’s web browser.

It allows users to interact with decentralized applications (DApps) that are built on top of Ethereum, such as buying and selling tokens, transferring funds, and executing smart contracts.

Web3.js provides a simple and easy-to-use interface to access the Ethereum network and communicate with smart contracts. It provides an essential tool for developers looking to build decentralized applications on the Ethereum blockchain.

Here we will access Ganache with Web3.js

using Web3.js

We can use Web3.js in different ways

npm npm-install web3
yarn year add web3
pure js download and put on a folder and access it
use CDN

Here we will use CDN to use Web3.js

Reading Blockchain Account Numbers using Web3.js

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.8.2/web3.min.js"
    integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
  <script>
    let web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');
   
    //accessing all accounts
    window.addEventListener('load', async () => {
      await web3.eth.getAccounts().then(accounts => {
        console.log(accounts);
        accounts.forEach((account, index) => {
          $("#address").last().append("<tr><td>" + index + "</td>" + "<td>" + account + "</td></tr>");
        });
      });
    });
  </script>
  <h2>Blockchain Account Details </h2>
  <table id="address" border="1px">
    <tr>
      <th>Sr No</th>
      <th>Account No</th>
    </tr>
  </table>
</body>
</html>

<html>

<head>

integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="

crossorigin="anonymous" referrerpolicy="no-referrer"></script>

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

</head>

<body>

let web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');

//accessing all accounts

window.addEventListener('load', async () => {

await web3.eth.getAccounts().then(accounts => {

console.log(accounts);

accounts.forEach((account, index) => {

$("#address").last().append("<tr><td>" + index + "</td>" + "<td>" + account + "</td></tr>");

});

</script>

<h2>Blockchain Account Details </h2>

<tr>

<th>Account No</th>

</tr>

</table>

</body>

</html>

Fig: Reading Blockchain Account Details in Web3.js

Reading Blockchain Account Numbers with Balance using Web3.js

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.8.2/web3.min.js"
    integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
  <script>
    var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');
    console.log("Web 3 Version : " + web3.version);
    //accessing all accounts with balance
    window.addEventListener('load', async () => {
      let accounts = await web3.eth.getAccounts();
      accounts.forEach((account, index) => {
        web3.eth.getBalance(account).then((balanceInWei) => {
          balance = web3.utils.fromWei(balanceInWei);
          $("#address").last().append("<tr><td>" + index + "</td><td>" + account + "</td><td>" + balanceInWei + "</td><td>" + balance + "</td></tr>");
        });
      });
    });
  </script>
</head>
<body>
  <h2>Blockchain Account Details </h2>
  <table id="address" border="1px">
    <tr>
      <th>Sr No</th>
      <th>Account No</th>
      <th>Balance in ETH</th>
      <th>Balance in WEI</th>
    </tr>
  </table>
</body>
</html>

<html>

<head>

integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="

crossorigin="anonymous" referrerpolicy="no-referrer"></script>

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');

console.log("Web 3 Version : " + web3.version);

//accessing all accounts with balance

window.addEventListener('load', async () => {

let accounts = await web3.eth.getAccounts();

accounts.forEach((account, index) => {

web3.eth.getBalance(account).then((balanceInWei) => {

balance = web3.utils.fromWei(balanceInWei);

$("#address").last().append("<tr><td>" + index + "</td><td>" + account + "</td><td>" + balanceInWei + "</td><td>" + balance + "</td></tr>");

});

</script>

</head>

<body>

<h2>Blockchain Account Details </h2>

<tr>

<th>Account No</th>

<th>Balance in ETH</th>

<th>Balance in WEI</th>

</tr>

</table>

</body>

</html>

Fig: Reading Blockchain Account Numbers with Balance using Web3.js

Transferring Amont in Blockchain using Web3.js

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.8.2/web3.min.js"
    integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<script>
  var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');
  console.log("Web 3 Version : " + web3.version);
  //accessing all accounts
  async function transfer() {
    $("#transactionDetails").html("");
    let senderId = $("#senderId").val();
    let receiverId = $("#receiverId").val();
    let amount = $("#amount").val();
    console.log("senderId " + senderId + " receiverId " + receiverId + " amount " + amount);
    web3.eth.sendTransaction({
      from: senderId,
      to: receiverId,
      value: web3.utils.toWei(amount, "ether"),
    }, function (err, transactionHash) {
      if (err) {
        console.log(err);
        $("#transactionDetails").html("Error " + err);
      } else {
        console.log(transactionHash);
        $("#transactionDetails").html("Transaction id " + transactionHash);
      }
    });
  };
</script>
<body>
  <h2>Transfer Amount</h2>
  <div>
    Sender Id :<input type="text" name="sender" id="senderId" style="width:360px"><br /><br />
  </div>
  <div>
    Receiver Id :<input type="text" name="receiver" id="receiverId" style="width:360px"><br /><br />
  </div>
  <div>
    Amount :<input type=number name="amount" id="amount" value="1">ETH <br/><br />
  </div>
  <div>
    <input type="submit" value="Transfer" onclick="transfer()" /> 
  </div>
</body>
<div id="info">
  <p id="transactionDetails">
    
  </p>
</div>
</html>

<html>

<head>

integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="

crossorigin="anonymous" referrerpolicy="no-referrer"></script>

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

</head>

var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');

console.log("Web 3 Version : " + web3.version);

//accessing all accounts

async function transfer() {

$("#transactionDetails").html("");

let senderId = $("#senderId").val();

let receiverId = $("#receiverId").val();

let amount = $("#amount").val();

console.log("senderId " + senderId + " receiverId " + receiverId + " amount " + amount);

web3.eth.sendTransaction({

from: senderId,

to: receiverId,

value: web3.utils.toWei(amount, "ether"),

}, function (err, transactionHash) {

if (err) {

console.log(err);

$("#transactionDetails").html("Error " + err);

} else {

console.log(transactionHash);

$("#transactionDetails").html("Transaction id " + transactionHash);

}

});

};

</script>

<body>

<h2>Transfer Amount</h2>

<div>

Sender Id :<input type="text" name="sender" id="senderId" style="width:360px"><br /><br />

</div>

<div>

Receiver Id :<input type="text" name="receiver" id="receiverId" style="width:360px"><br /><br />

</div>

<div>

Amount :<input type=number name="amount" id="amount" value="1">ETH <br/><br />

</div>

<div>

</div>

</body>

</p>

</div>

</html>

Transferring Account in Blockchain using Web3.js

Transferring Account in Blockchain using Web3.js in Ganache

Showing Transaction details using Web3.js

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.8.2/web3.min.js"
    integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<script>
  var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');
  console.log("Web 3 Version : " + web3.version);
  //accessing all accounts
  window.addEventListener('load', async () => {
    getAccounts();
  });
  async function getAccounts() {
    let accounts = [];
    accounts = await web3.eth.getAccounts();
    let optionValue = "";
    let senderId = $("#senderId").html("");
    let receiverId = $("#receiverId").html("");
    accounts.forEach((account, index) => {
      web3.eth.getBalance(account).then((balanceInWei) => {
        balance = web3.utils.fromWei(balanceInWei);
        $("#address").last().append("<tr><td>" + index + "</td><td>" + account + "</td><td>" + balanceInWei + "</td><td>" + balance + "</td></tr>");
        optionValue = '<option value="' + account + '" selected="selected">' + account + "| $" + balance + '</option>';
        $("#senderId").append(optionValue);
        $("#receiverId").append(optionValue);
      });
    });
  }
  //accessing all accounts
  async function transfer() {
    let senderId = $("#senderId").val();
    let receiverId = $("#receiverId").val();
    let amount = $("#amount").val();
    if (senderId == receiverId) {
      alert("Sender and receiver id can not be same");
      return;
    }
    if (amount == 0) {
      alert("Provide amount greater than 0");
      return;
    }
    console.log("senderId " + senderId + " receiverId " + receiverId + " amount " + amount);
    web3.eth.sendTransaction({
      from: senderId,
      to: receiverId,
      value: web3.utils.toWei(amount, "ether"),
    }, function (err, transactionHash) {
      if (err) {
        console.log(err);
      } else {
        console.log(transactionHash);
        $("#transactionId").html("Transaction id " + transactionHash);
        web3.eth.getTransaction(transactionHash).then((transaction) => {
          console.log(transaction);
          $("#blockHash").text(transaction.blockHash);
          $("#blockNumber").text(transaction.blockNumber);
          $("#from").text(transaction.from);
          $("#gas").text(transaction.gas);
          $("#gasPrice").text(transaction.gasPrice);
          $("#input").text(transaction.input);
          $("#nonce").text(transaction.nonce);
          $("#value").text(transaction.value);
        });
      }
    });
    getAccounts();
  };
</script>
<body>
  <h2>Select Account to Transfer Amount</h2>
  <div>
    Sender Id :<select id="senderId" style="width:400px"></select> <br />
  </div>
  <div>
    Receiver Id <select id="receiverId" style="width:400px"></select><br />
  </div>
  <div>
    Amount :<input type=number name="amount" id="amount" value="1"><br />
  </div>
  <div>
    <input type="submit" value="Transfer" onclick="transfer()" />
  </div>
</body>
<div id="info">
  Transaction id: <span id="transactionId"></span><br/>
  <div id="transactionDetail">
   Block Hash: <span id="blockHash"></span><br/>
    Block Number: <span id="blockNumber"></span><br/>
    From: <span id="from"></span><br/>
    Gas: <span id="gas"></span><br/>
    Gas Price<span id="gasPrice"></span><br/>
    Input: <span id="input"></span><br/>
    Nonce: <span id="nonce"></span><br/>
    Value: <span id="value"></span><br/>
  </div>
</div>
</html>

100

<html>

<head>

integrity="sha512-Ls8WO4Esu7Jb9a92BfIp1Ftgl9t5Ncaa/6zKzpOkTGXW+dPcJcI4Yz2HR7cXY0YcfIAsL7R9Gqfbw8ERX8iYaA=="

crossorigin="anonymous" referrerpolicy="no-referrer"></script>

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

</head>

var web3 = new Web3(Web3.givenProvider || 'HTTP://127.0.0.1:7545');

console.log("Web 3 Version : " + web3.version);

//accessing all accounts

window.addEventListener('load', async () => {

getAccounts();

});

async function getAccounts() {

let accounts = [];

accounts = await web3.eth.getAccounts();

let optionValue = "";

let senderId = $("#senderId").html("");

let receiverId = $("#receiverId").html("");

accounts.forEach((account, index) => {

web3.eth.getBalance(account).then((balanceInWei) => {

balance = web3.utils.fromWei(balanceInWei);

$("#address").last().append("<tr><td>" + index + "</td><td>" + account + "</td><td>" + balanceInWei + "</td><td>" + balance + "</td></tr>");

optionValue = '<option value="' + account + '" selected="selected">' + account + "| $" + balance + '</option>';

$("#senderId").append(optionValue);

$("#receiverId").append(optionValue);

});

}

//accessing all accounts

async function transfer() {

let senderId = $("#senderId").val();

let receiverId = $("#receiverId").val();

let amount = $("#amount").val();

if (senderId == receiverId) {

alert("Sender and receiver id can not be same");

return;

}

if (amount == 0) {

alert("Provide amount greater than 0");

return;

}

console.log("senderId " + senderId + " receiverId " + receiverId + " amount " + amount);

web3.eth.sendTransaction({

from: senderId,

to: receiverId,

value: web3.utils.toWei(amount, "ether"),

}, function (err, transactionHash) {

if (err) {

console.log(err);

} else {

console.log(transactionHash);

$("#transactionId").html("Transaction id " + transactionHash);

web3.eth.getTransaction(transactionHash).then((transaction) => {

console.log(transaction);

$("#blockHash").text(transaction.blockHash);

$("#blockNumber").text(transaction.blockNumber);

$("#from").text(transaction.from);

$("#gas").text(transaction.gas);

$("#gasPrice").text(transaction.gasPrice);

$("#input").text(transaction.input);

$("#nonce").text(transaction.nonce);

$("#value").text(transaction.value);

});

}

});

getAccounts();

};

</script>

<body>

<h2>Select Account to Transfer Amount</h2>

<div>

Sender Id :<select id="senderId" style="width:400px"></select> <br />

</div>

<div>

Receiver Id <select id="receiverId" style="width:400px"></select><br />

</div>

<div>

Amount :<input type=number name="amount" id="amount" value="1"><br />

</div>

<div>

</div>

</body>

Transaction id: <span id="transactionId"></span><br/>

Block Hash: <span id="blockHash"></span><br/>

Block Number: <span id="blockNumber"></span><br/>

From: <span id="from"></span><br/>

Gas: <span id="gas"></span><br/>

Gas Price<span id="gasPrice"></span><br/>

Input: <span id="input"></span><br/>

Nonce: <span id="nonce"></span><br/>

Value: <span id="value"></span><br/>

</div>

</html>

Fig: Reading Transaction details in Web3.js

I hope you learned the basics of Blockchain and how to connect and access using Web3.js