Yassin Mahmud Abdul Quddus, Author at Be on the Right Side of Change

Prompt Engineering with Llama 2 (Full Course)

Yassin Mahmud Abdul Quddus — Sat, 04 Nov 2023 20:19:20 +0000

This Llama 2 Prompt Engineering course helps you stay on the right side of change. Our course is meticulously designed to provide you with hands-on experience through genuine projects.

Llama 2 Academy Course – Get Your PDF Certificate

Prompt Engineering with Llama 2: Four Practical Projects using Python, Langchain, and Pinecone

You’ll delve into practical applications such as book PDF querying, payroll auditing, and hotel review analytics.

These aren’t just theoretical exercises; they’re real-world challenges that businesses face daily.

By studying these projects, you’ll gain a deeper comprehension of how to harness the power of Llama 2 using Python, Langchain, Pinecone, and a whole stack of highly practical tools of exponential coders in a post-ChatGPT world.

Specifically, you’ll learn these topics (ToC):

This knowledge can be your foundation in creating solutions that have tangible value for real people. Equip yourself with the expertise to keep pace with technological change and be a proactive force in shaping it.

Llama 2 Academy Course – Get Your PDF Certificate

The post Prompt Engineering with Llama 2 (Full Course) appeared first on Be on the Right Side of Change.

How I Built My Own ERC-20 Token (2/2)

Yassin Mahmud Abdul Quddus — Tue, 21 Feb 2023 20:33:55 +0000

In the first part, we connected the front end with Metamask but couldn’t fetch the balance. Let’s try to fetch the balance from the wallet this time. But first, install the ether.js library to communicate with the smart contract.

npm install --save ethers

Import ether.js library to App.js.

import {ethers} from "ethers";

Now we need to import the contract ABI.

The contract ABI is the JSON format of the contract that saves the bytecode of the deployed contract.

Create a contracts folder inside the source folder. Inside this contracts folder, create a JSON file called SilverToken.json.

Copy the ABI of the contract from the Remix IDE and paste it inside the JSON file. Now import the ABI from the JSON file to the app.js.

import contractABI from "./contracts/SilverToken.json";

Create a variable for the contract address.

const contractAddress = "0xC16322799f2645D5b7a1287392072aA668F8144B";

We need to create a contract instance to get access to the methods of our deployed smart contract. We need three things to create an instance of the contract. Those are the provider, signer, and contract ABI.

We already imported the ABI. So, let’s create state variables for the provider, signer, and contract and initially keep all the values null.

const [provider, setProvider] = useState(null);
const [signer, setSigner] = useState(null);
const [contract, setContract] = useState(null);

Inside the connectMetamask button define provider, signer, and contract.

const provider = new Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(
                               contractAddress,
                               contractABI,
                               signer);
setProvider(provider);
setContract(contract);
setSigner(signer);

We defined the provider with the help of the Web3Provider method of the ethers library. In our case, the provider would be Metamask.

I was unable to access the providers library of ethers for some unknown reason. That’s why I imported the providers library from the npm Ethereum providers. You can use this link if you need it.

First, install and then import the providers library.

npm i @ethersproject/providers

since we will use the Web3Provider from the providers library, we will import this only.

import { Web3Provider } from "@ethersproject/providers";

We are committing a transaction, so we must need a signer. We called the signer by using the getSigner() method of the provider.

Then we created an instance of our smart contract with the contract() method of the ethers library.

This contract() method takes the contract address, ABI, and the signer as the parameters.

Now the provider, signer, and contract are defined. So, we need to change the state of these three that we have defined as null earlier.

Now let’s console.log the contract to check if all changes occurred.

console.log(contract);

As you can see in my console, the contract’s state was initially null. But now it returns the contract address that we are connected to.

Get Wallet Balance

Create a getBalance() method to get the balance from the address.

  const getBalance = async () => {
    const balanceInBig = await contract.balanceOf(activeAccount);
    const balanceInNum = Number(balanceInBig) / 100;
    setTokenBalance(balanceInNum);
  };

We are using the balanceOf method of the contract to get the balance of our address. The balance will be returned as a bigInteger number. Read more about BigInt here.

In the 2nd line, we converted the big integer number to a readable format.

To initiate the getBalance() function, we can use React‘s useEffect() hook.

useEffect(() => {
    if (contract != null) {
      getBalance();
    }
  }, [contract]);

The useEffect() hook will trigger the getBalance method if a contract is available. The useEffect() hook will render the page again whenever the contract is changed.

Transfer the Balance

Now to transfer the balance, we need a form where we will input the address of the account to which we will be transferring the amount. Let’s do this part in a separate functional component.

Let’s create a components folder inside the source folder and create a new file called Transaction.js.

Inside this file, create a component structure by pressing “rsc” on the keyboard. If the autocompletion doesn’t work, no need to worry. Write the code manually.

I will create a simple form using custom codes from flowbite. You can check it out or make your own custom one. Inside the return function, paste the following.

  return (
    
      
        
          
            Receiver Address
          
          
        
        
          
            Transfer Amount
          
          
        
        
        
          {transactionHash}
        
      
    
  );

We created two input fields inside the form. One is text type for the receiver address, and another is a number type for the amount that would be sent to the receiver.

The id of each input filed is changed to “address” and “amount” respectively.

A transactionHandler() function will be triggered whenever you click on the send button. This function will collect the info from the input fields and do something further.

Let’s define the transactionHandler() function.

const transactionHandler = async (event) => {
    event.preventDefault();
    let receiverAddress = event.target.address.value;
    let sendAmount = event.target.amount.value;
    let transferAmount = sendAmount * 100;
    let trans = await contract.transfer(receiverAddress, transferAmount);
    console.log(trans);
    setTransactionHash("Transaction confirmed with hash:" + trans.hash);
  };

The transactionHandler() is an async await function that will trigger an event. The preventDefault() method will prevent the function from reloading automatically for changes.

The transferAmount and receiverAddress variables will collect the info from the input fields. “event.target” will access the input fields by using the id of the input field “amount” and “address.”

We need to use the transfer method of the contract to commit the transaction. To access the contract state, we need to pass it as a prop from the app.js file.

Call the transaction.js component from the app.js file and pass the contract as props.

We are using the “contract.transfer” method to commit the transaction. This method will take the receiver address and the send amount as parameters.

We will get a transaction hash as a transfer confirmation when the transaction is done. We can store this transaction hash as a state variable to display it on the user interface.

Let’s create a new account on the Goerli testnet. This will be our receiver account.

Now use this address and send an amount of 50 tokens from the main wallet. We need to multiply the amount by 100 to get the exact value, as we used a two-digit return in the decimals function of the smart contract.

Now if you check this transaction hash on the Etherscan website, you will get the complete transaction details. You will also receive the token balance on the Metamask receiver wallet.

This is the screenshot of my recent transaction. To get your transaction details, just use the transaction hash in the search bar. Make sure you choose the Goerli testnet as the network.

That’s all for today. Thanks for the reading!

Github: https://github.com/finxter/silver_wallet

The post How I Built My Own ERC-20 Token (2/2) appeared first on Be on the Right Side of Change.

How I Built My Own ERC-20 Token (1/2)

Yassin Mahmud Abdul Quddus — Mon, 20 Feb 2023 17:06:38 +0000

Project Scenario

In this 2-part series, I’ll show you how I built my own ERC-20 token like ETH in this project. I share this because you may want to do the same and learn from my experience.

Recommended: How I Built My Own ERC-20 Token (2/2)

I use Solidity to write a smart contract for my ERC-20 token, and then the contract will be deployed on a test net, for starters.

The token balance will be displayed on the user interface along with the wallet address. The front end will be formed with React & Tailwind CSS.

In the next part of this series, I’ll show you how to transfer tokens with the help of the ether.js library. You’ll be able to check the details regarding the transaction by using the transaction hash on the Etherscan website.

Create the Smart Contract

We will use the Openzeppelin framework to build our ERC-20 token.

Recommended: How Does the ERC-20 Token Work?

OpenZeppelin is a secured open-source framework that is used to build, manage, and inspect all aspects of software development for decentralized applications. OpenZeppelin’s ERC-20 solidity file contains all the code to build the token.

Move to the Remix IDE and create a solidity file inside the contract folder. I am naming it as “SilverToken.sol”. Declare the solidity version number in the first line.

So, import Openzeppelin’s ERC-20 Solidity file.

pragma solidity  >= 0.5.0 < 0.9.0;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

If you want to learn more about the OpenZeppelin implementation, you can follow this link.

Now create the contract named SilverToken. This token inherits the token structure from the ERC-20 implementation of Openzeppelin.

contract SilverToken is ERC20 {
    constructor (uint256 initialSupply) ERC20("silver", "SLV"){
        _mint(msg.sender, initialSupply);
    }
    function decimals() public pure override returns (uint8) {
        return 2;
    }
}

As our token is a child of the ERC-20 class, we can access the different methods of that class now. We are calling the constructor method first. This method asks for the initial supply amount to the contract.

We called the base contractor ERC-20 with name and symbol parameters. This will pass the name and symbol of our token to the parent constructor. Silver is the name of our token, and SLV is the symbol.

To create the initial supply, we started minting tokens. The initial supply of the token will be minted to the msg.sender which is the address of the person who deploys the contract.

We usually can see the 18^th decimal of precession for the ETH value. But here, for simplicity, we override that decimal function. We will get up to 2 decimal values.

Deploy the Smart Contract

Let’s compile the contract and move to the deployment section.

We will deploy this on the Goerli testnet. It would be best if you had the goerli test network added to your browser.

If you don’t have the goerli test network on your browser, then move to the “add network” option of the Metamask and add the goerli test net from the networks option.

The configuration for the goerli network is given below:

Network name: Goerli test network
New RPC URL: https://goerli.infura.io/v3/
Chain ID: 5
Currency symbol: GoerliETH
Block explorer URL (Optional): https://goerli.etherscan.io

Goerli testnet must be added to your browser by this time.

You can create a new account by clicking the create account option of Metamask.

We need some goerli Eth in your wallet for the deployment cost. You can quickly get some free goerli eth from goerliFaucet.com.

You may need to sign up in Alchemy to avail the opportunity. Just sign up on Alchemy and create an app. Move back to the goerli faucet and transfer some ETH to your wallet. It’s that simple.

Now get back to the Remix IDE. Choose the “Injected provider- Metamask” option from the environment dropdown menu. Make sure you are logged into the goerli testnet in Metamask.

You must see the goerli wallet address on the account section if you get connected to Remix IDE. Choose any account. You have to set an initial amount to supply at this address.

I am setting the initial supply amount as a million goerli ETH. Deploy the contract, and you will see all the functions and data types available under the menu.

If you want to check the balance, you can check it from the balanceOf menu. Just enter the wallet address and press the menu. The current token balance will be displayed there.

If you don’t see the token balance in the Metamask, move to the assets option In the Metamask and click on the import tokens option. Then paste the contract address from the Remix IDE, and the tokens will be automatically imported.

You will get the contract address from the deployed contracts section of the Remix IDE.

So, our simple, smart contract is ready. Now let’s build the front end to do transactions to other accounts.

Create a React App and Tailwind CSS

We will use React and Tailwind CSS to build our front end. So, create our react app first.

Open the command prompt from your directory. Then type

npx create-react-app silver_wallet

Now the react is installed. But before initializing react, move to the installed directory and install the tailwind CSS for react.

cd silver_wallet
npm install -D tailwindcss
npx tailwindcss init

Inside the tailwind.config.js file, configure the template paths

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

And inside the index.css file, add the tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind is installed.

Now initiate the React App.

npm start

The React app should be running on the browser in the port 3000.

Now move to the app.js file and clear it for writing the contracts.

Connect to Metamask

The first thing we need to do is to establish a connection with the Metamask wallet.

Create a button and a container to show the account address to which we would be connected. The wallet’s address will be shown in the UI when connected to the wallet.

Let’s apply some styles also at the same time when we proceed. Get a nice button from the Flowbite website. Flowbite is one of the open-source UI libraries that will help us to build a front-end design faster.


      
        
{errorMessage}

      
      
        Wallet Address: {activeAccount}

Our button is visible in the UI, and we need to add some functionalities to the connectMetamask event handler to make it work.

const connectMetamask = async () => {
    try {
      if (window.ethereum) {
        await window.ethereum
          .request({ method: "eth_requestAccounts" })
          .then((result) => {
            setActiveAccount(result[0]);
          });
      } else {
        console.log("Need to install Metamask");
      }
    } catch (error) {
      console.log(error);
    }
  };

An “if-else” condition is introduced to confirm if the Metamask is injected into the browser.

Inside the if condition, the eth_requestAccounts method of the Ethereum library is used to request the accounts of the Metamask. From the results, we choose the results[0], that is, the connected account of Metamask.

We need to declare a state variable outside the event handler to show our account address to the UI. A useState hook of React would be helpful here. Import useState from React.

import React, { useState } from "react";

Now create a state variable to store the value of the active account address.

const [activeAccount, setActiveAccount] = useState(null);

Now set the results[0] as the active account.

If the event handler fails to connect to Metamask, It will throw an error message in the console.

Now if you run the code you must get the wallet address displayed on the User Interface.

At the same time, we need to show the token balance. Under the address section, we can create another

container to show the balance of that wallet address. Let’s do this.


        Token Balance: {tokenBalance}

Create another state variable outside the function to show balance in the UI.

const [tokenBalance, setTokenBalance] = useState(null);

Our balance state variable is ready, but we need to connect with the contract to fetch the balance from the wallet.

We get connected with the smart contract and transfer some balance into a specific account in the next part:

Recommended: How I Built My Own ERC-20 Token (2/2)

Github: https://github.com/finxter/silver_wallet

The post How I Built My Own ERC-20 Token (1/2) appeared first on Be on the Right Side of Change.

I Created a React Decentralized App to Sell eBooks – Here’s How (4/4)

Yassin Mahmud Abdul Quddus — Sat, 14 Jan 2023 12:27:05 +0000

We completed a transaction in the last part, but the transaction data had yet to be seen. In this part, we will drive the smart contract data to the user interface. The user’s data and the transaction time will be displayed on the user interface.

This is part 4 of our four-tutorial series on creating a decentralized web app to sell ebooks:

Part 1: I Created a React Decentralized App to Sell eBooks – Here’s How (1/4)
Part 2: I Created a React Decentralized App to Sell eBooks – Here’s How (2/4)
Part 3: I Created a React Decentralized App to Sell eBooks – Here’s How (3/4)
Part 4: I Created a React Decentralized App to Sell eBooks – Here’s How (4/4)

Move to the Receipt component and import the ethers library. Set the state that we created on the app.js file as props. Here again, we need to connect the smart contract with the frontend. So, destruct the contract from the state.

const Receipts = ({ state }) => {
  const { contract } = state;
  const [receipts, setReceipts] = useState([]);
  useEffect(() => {
    const receiptsInfo = async () => {
      const contractReceipts = await contract.getReceipts();
      setReceipts(contractReceipts);
    };
    contract && receiptsInfo();
  }, [contract]);
  return (
    <>
    
  );
};
export default Receipts;

Again we used the useEffect() hook of the react to write all our codes inside.

Inside the useEffect() hook, we created an async receiptsInfo() function to collect the information on the receipts. It is also an async await function.

You must remember we have created a receipts array in the smart contract to store all the transaction receipts together. At the same time, we also created a getReceipts() function inside the contract to fetch all the information regarding the transaction. Here, we created a receipts constant and called the getReceipts method from the contract instance.

To show the receipts info on the user interface, we created a receipts state variable with the help of useState hook. At last, we have set the receipts as the receipts we got from the contract.

We need to initiate the function. Otherwise, the code will not work. I initiated the contract and the receiptsInfo() function at the same time.

Ultimately, we add the contract as a dependency of the useEffect() hook. That means every time you bring some changes to the contract, the page will render again.

Display Data on the Browser

Now we have all the receipts in our hands. To show these receipts, we will map through the receipts and display them in a table format.

We need a table with five columns, so visit the flow bite website again. Why do you waste time doing the front end? If you like, you can use your CSS code, also. But for the fast demonstration, those ready-to-use codes are my favorites.

Now create a

tag inside the return function for a heading that will remain on top of the table. “Recent Subscribers” is a good heading, I think.

return (
    
      
        RECENT SUBSCRIBERS
      
      
        
          {receipts.map((receipt) => {
            return (
              
            );
          })}
        
          
            
              
                BUYER
              
              
                BOOK
              
              
                WRITER
              
              
                ADDRESS
              
              
                TIME
              
            
          

                
                  {receipt.name}
                  {receipt.book}
                  {receipt.writer}
                  {receipt.buyer}
                  {String(receipt.timestamp)}
                
              
      
    
  );
};

BUYER	BOOK	WRITER	ADDRESS	TIME
{receipt.name}	{receipt.book}	{receipt.writer}	{receipt.buyer}	{String(receipt.timestamp)}

Create a new

then. Inside the

, pass the code of the table structure that we copied from the flowbite website.

From the table structure, just keep a row of the table data and delete others. We will pass dynamic content on the table structure. So, the rows will be generated automatically.

If we start mapping through the receipt, the table header will be repeated with the dynamic code. So, we should map the receipts from where the table header is finished. But first, change the captions of the columns.

I changed the five columns’ captions to buyer, book, writer, address, and time.

Now we can map through the receipts array. We will only map through the table body and insert each buyer’s info in each row.

By mapping through the array, we are iterating over the receipts. Apart from this, we are getting the info on each receipt simultaneously.
We can access each receipt’s data now, and from the receipt, we can collect dynamic data like receipt.name, receipt.book, receipt.writer, receipt.buyer and receipt.timestamp. In the Solidity smart contract, we created a struct for all those data. Now we are fetching the input data, the buyer’s account address, and the transaction timing from the contract.
Now insert these dynamic data on each of the table data tag () of the table row. When a new buyer subscribes, automatically, a new row for this buyer will be created on display.
The recipt.timestamp will return an object. To get the readable format convert it into a string.

Send Ethers from Buyer to Owner

Now our dapp is ready. But for a long time, we have been using the same account for receiving and sending ethers.

Now let’s create a different account on the Goerli test net. You can easily do this from the Metamask wallet. Just move to “my accounts” section, and you will find create a new account option. Create a new account there. Then send some Goerli eth on your empty account from the Goerli faucet.

Assume that the second account is the buyer, who will buy a subscription now.

The first address is obviously the bookstall owner, as we deployed the contract from the first address. Connect the second account with the browser. You can do this manually from the wallet. Now input the required information in the form and hit subscribe button. When the Metamask appears, confirm the transaction.

If your dapp is active, you should see the transaction confirmation notification after some time. You can check the transaction status on the Etherscan website by clicking on that notification. You will see the transaction details, including the receiver and sender addresses, from there.

My transaction details are here for you. You can see the amount that has been transferred along with the transaction fee. The sender and receiver addresses and the contract address are mentioned there.

You can confirm the transaction in another way. Just check the Metamask wallet of the buyer and the owner. You must see that the owner’s account is credited with 0.001 eth. The buyer’s account must be debited with the subscription and transaction fees. All the buyers will bear the cost of the transaction.

If you reload the browser, the last buyer’s data should be added to the table in a new row. Our bookstall project is accomplished if you get the correct data in the user interface.

You can check the video for the live demonstration of the transaction. I beautified the front end a little with the help of Tailwind CSS, and you can get the code from the GitHub link attached below.

Thanks!

That was all for my bookstall dapp. You are always appreciated for creating new dapp by taking the ideal concept out of this. Thanks for reading.

GitHub: https://github.com/finxter/bookSell

Also, check out our academy courses on smart contract development such as this one:

The post I Created a React Decentralized App to Sell eBooks – Here’s How (4/4) appeared first on Be on the Right Side of Change.

I Created a React Decentralized App to Sell eBooks – Here’s How (3/4)

Yassin Mahmud Abdul Quddus — Sat, 14 Jan 2023 11:30:42 +0000

This is part 3 of our four-tutorial series on creating a decentralized web app to sell ebooks:

Part 1: I Created a React Decentralized App to Sell eBooks – Here’s How (1/4)
Part 2: I Created a React Decentralized App to Sell eBooks – Here’s How (2/4)
Part 3: I Created a React Decentralized App to Sell eBooks – Here’s How (3/4)
Part 4: I Created a React Decentralized App to Sell eBooks – Here’s How (4/4)

We will connect the front end with the smart contract in this part of the series. The interaction with the smart contract will be done using ether.js.

Move to the app.js file inside the source folder. We need to import the ethers library and the ABI of the smart contract.

This ABI or Application Binary Interface is nothing but the JSON format of the smart contract. This JSON format will allow us to talk to the smart contract from the front end. By using this ABI, we can call all the functions of the smart contract we have created.

Whenever you deploy the smart contract, a JSON format of the contract should have been created inside the artifacts folder. Just move to the artifacts folder, copy the file and paste it inside the source folder.

Now, React will be able to locate the directory of the smart contract. If the JSON file stays outside the source folder, it will not be accessible.

import Heading from "./components/Heading";
import abi from ".BookSell.json";
import { ethers } from "ethers"; 
import { useEffect, useState } from "react";

We will use the provider, signer, and contract variables regularly on the React dapp. That’s why it is better to store all these as an object inside a state variable. It will refrain us from creating those variables individually on the code, meanwhile saving our time.

We will use the useState() hook of React to implement this.

  const [state, setState] = useState({
    provider: null,
    signer: null,
    contract: null,
  });

We have created an object inside the useState() hook. This object takes the provider, signer, and the contract as keys. I am keeping the initial values for all the variables null.

To initialize all these variables, we will use the useEffect() hook of the React. Inside this useEffect() hook, first, we will create a connectMetamask() function to establish a connection with the Metamask.

But try to fetch the contract address and the contract ABI first. If you forget the contract address, move to the Etherscan website and insert the Goerli account address, you will get the contract address info in the latest transaction section.

const contractAddress = "0xede6825532dc2f6a8ac5b8dfc6874e80ae872dd4";
const contractABI = abi.abi;

Let’s create a try-catch method that will throw an error if the Metamask is not connected to the browser. Inside the try method, create a constant for the Ethereum object. You can consider the window as the Metamask. This Metamask injects an object called Ethereum into the browser that helps the browser interact with the blockchain.

const { ethereum } = window;

Now create an if else condition to check if the Metamask browser is detected. If the Metamask browser is injected, then it will ask for the account from Metamask. Otherwise, it will throw an error.

useEffect(() => {
    const connectMetamask = async () => {
      const contractAddress = "0xede6825532dc2f6a8ac5b8dfc6874e80ae872dd4";
      const contractABI = abi.abi;
      try {
        const { ethereum } = window;
        if (ethereum) {
          const account = await ethereum.request({
            method: "eth_requestAccounts",
          });

          const provider = new ethers.providers.Web3Provider(ethereum);
          const signer = provider.getSigner();
          const contract = new ethers.Contract(
            contractAddress,
            contractABI,
            signer
          );
          setState({ provider, signer, contract });
        } else {
          alert("Please install metamask");
        }
      } catch (error) {
        console.log(error);
      }
    };
    connectMetamask();
  }, []);

Inside the if condition, “eth_requestAccounts method” of the Ethereum library is used to request the account from the Metamask wallet.

We defined the provider with the help of the Web3Provider method of the ethers library. In our case, the provider would be Metamask.

We are committing a transaction, and for that, we must need a signer. We called the signer by using the getSigner() method of the provider.

Then we created an instance of our smart contract Contract() method of the library. This contract() method takes the Contract address, ABI and the signer as the parameters.

Now the provider, signer and contract are defined. So, we need to change the state of these three that we have defined as null earlier. With the help of setState(), we applied the changes.

If Metamask is not installed in the browser, then the else condition will show an alert, “Please install Metamask”, on the browser.

Our connectMetamask() function is ready. In the last line, we called the function to be activated.

Now let’s console.log the state to check if all the changes occur and the Metamask is connected to the browser.

console.log(state);

Now reload the React web page. If everything works well, you should get the provider, signer, and the contract on the console.

As you can see in my console, the state of the provider, signer, and contract was initially null. But now it returns the injected web3Provider as the provider, and our contract and signer state is also changed.

Create Components

Now we will create two functional components to write the codes for buying the book and fetching the receipts.

Create two components called Book.js and Receipt.js. Import react on those files and just type rsc. A component structure will be created automatically. If it doesn’t, then you can create the structure manually. Not a big deal.

We need to call the smart contract instance for the interaction. In the app.js file, we already created a state by which we can access the provider, signer, and contract instance. We will pass the state props from the app.js.

Inside the return function of the app.js, create a

and initiate the Book and Receipt components. Pass the state as props so we can access the state from the components file. Don’t forget to import the components in the app.js file.

return (
    
      
      
      
    
  );

Now move to the Book component. Pass the state props inside the fat arrow function. We need to create a form to collect the data of the buyers. The buyer will input the required data on that form and then submit it. I will use the flowbite website again to get some ready-made tailwind form components.

We need to customize the form that we are bringing from the website. We need to create three text input fields for the buyer’s name, the book name and the writer’s name. You can add some placeholder to make it looks nice. At the bottom, we need a submit button to submit the information. That is our simple form.

Create a formData() function that will be triggered when the form is submitted. We have created an onSubmit event handler on the form already.

Inside the formData() function, We need to destructor the contract instance from the state props so that we can call the different functions of the smart contract.

Now we want to collect the data from the form. To do that, we need to access the DOM elements.

Info: DOM elements are the individual parts of a web page, such as text, images, and videos, that are represented as objects in a web browser’s Document Object Model (DOM). These objects can be manipulated by JavaScript to dynamically change the web page’s content, structure, and styling.

We can access DOM elements using the document.queryselector() method of JavaScript. But we should take advantage of React by using the useRef() hook. With the help of useRef() hook, we can access the particular data of the input field.

import { ethers } from "ethers";
import React, { useRef } from "react";

const Book = ({ state }) => {
  const form = useRef();
  const formData = async (event) => {
    event.preventDefault();
    const { contract } = state;
    const name = form.current.name.value;
    const book = form.current.book.value;
    const writer = form.current.writer.value;
    const amount = { value: ethers.utils.parseEther("0.001") };
    const transaction = await contract.buyBook(name, book, writer, amount);
    await transaction.wait();
    event.target.reset();
  };
  return (
    
      
        SUBSCRIBE HERE
      
      
        
          
            Your Name
          
          
        
        
          
            Book Name
          
          
        
        
          
            Writer Name
          
          
        

        
          
        
      
    
  );
};

I created a ref attribute for the form inside the return function, i.e., (ref = {form}). We also added a name attribute on each of the input fields. Using the name attribute, we can access each property’s input value with the help of useRef().

Form data is an async await function that triggers an event. Event.preventDefault() is used to prevent the unnecessary loading of the data.

We need to get the current properties of the input fields. That’s why we used “form.current” method to access the current input value of each input field.

We console.log the name, book, writer and contract just to check if our code is working.

Now we will access the buyBook function of the smart contract. If you can remember, we have already created a buyBook function for the transaction purpose. The buyBook() function will take the name, book, writer and amount as parameters. The first three are already defined inside the formData() function; we need to define the amount here.

We used the utils module of the ethers library to fix the transaction amount as 0.001 ETH.

We need to wait for some time for the transaction to take place. If the transaction is completed, “transaction is done” will be shown on the console.

Now move to the browser and refresh the page. Enter the buyer’s name, book and writer’s name in the input field. Then click on the buy button.

Metamask will pop up, asking for the confirmation of the transaction. Confirm the transaction and wait for some time. A transaction-confirmed notification will pop up after a while. In the console, you should get “transaction is done” written.

You can confirm the transaction by checking it on the Etherscan website. Just insert the Metamask account address of the Goerli wallet, and the transaction details will be displayed there.

Thanks for Reading — Keep it Up!

That’s all for today. In the next part, we will try to bring the buyer’s info in to the user interface. Hope this will be interesting.

GitHub: https://github.com/finxter/bookSell

The post I Created a React Decentralized App to Sell eBooks – Here’s How (3/4) appeared first on Be on the Right Side of Change.

I Created a React Decentralized App to Sell eBooks – Here’s How (2/4)

Yassin Mahmud Abdul Quddus — Sat, 14 Jan 2023 10:11:17 +0000

This is part 2 of our four-tutorial series on creating a decentralized web app to sell ebooks:

Part 1: I Created a React Decentralized App to Sell eBooks – Here’s How (1/4)
Part 2: I Created a React Decentralized App to Sell eBooks – Here’s How (2/4)
Part 3: I Created a React Decentralized App to Sell eBooks – Here’s How (3/4)
Part 4: I Created a React Decentralized App to Sell eBooks – Here’s How (4/4)

In the previous part, we built the smart contract and deployed it on the hardhat node for testing.

Now it’s time to deploy the contract on the testnet.

But before that, let’s install the react app first. Open the command prompt from your directory. Then type

npx create-react-app frontend

Now, the React framework is installed. But before initializing react, move to the installed directory and install the tailwind CSS for react.

cd frontend
npm install -D tailwindcss
npx tailwindcss init

Inside the tailwind.config.js file, configure the template paths

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

And inside the index.css file add the tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Info: Tailwind directives are CSS classes generated by Tailwind CSS that add custom styles to your web projects quickly and easily. With their help, you can create custom design systems with minimal effort while still being able to customize the look and feel of your website. Tailwind directives are incredibly flexible and customizable, so you can use them to create complex and unique designs.

Now initiate the React.

npm start

The react app should be running on the browser in the port:3000.

Now it’s time to deploy the contract. Earlier, we deployed the contract on the hardhat blockchain node, but this time we will deploy it to the testnet.

Info: We will use the famous Goerli testnet for the deployment. Goerli is a cross-client Ethereum testnet designed for developers, service providers, and users. It is an alternative to Ropsten, featuring Clique Proof of Authority as its consensus mechanism for faster block times and greater reliability. Goerli is composed of nodes from Geth, Parity, Nethermind, and Besu, offering greater security and more options for developers.

Create a new javascript file, “goerliDeploy“, inside the script folder to deploy the contract on the test net.

Connect Hardhat with Goerli Testnet

We did not install our dotenv file yet. So, let’s install it first.

npm install dotenv

Now create a .env file in the bookSell folder. Inside the dotenv file, we will secure the Goerli URL, Goerli API key, and the private key that will be acquired from the Metamask wallet. You must have known the importance of the dotenv file.

When we deploy the code on GitHub, this dotenv file will remain in the local directory, thus making it difficult for hackers to infiltrate the private keys.

To connect the hardhat with the goerli test net, we need to bring some changes on the hardhat.config.js file.

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;
/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
  solidity: "0.8.17",
  networks: {
    goerli: {
      URL: GOERLI_URL,
      accounts: [PRIVATE_KEY],
    },
  },
};

We imported a dotenv file to keep the private key and the Goerli testnet URL safe.

This private key is the account’s private key that will bear the transaction cost for deploying the smart contract on the blockchain.

Inside the “module.exports” you need to mention the network you are using. Since we are using the Goerli testnet, we mentioned the Goerli URL and the account we are using. You need to input the private key of your account; the system will fetch the account you belong to on the Goerli test net.

Now, where will you get this info? You will get those from the test net. You can connect to a Goerli test net via an Infura node or alchemy.

In my other videos in this series, I have shown how you can connect with the Goerli blockchain. Today we will try to connect to goerli test net via alchemy.

After signing in to alchemy, you will reach a dashboard. Click on the “Create app” option on the dashboard. A form will appear.

You need to feel it up with Ethereum as a chain and Goerli as the network. You can give it any name you want. Click on the create app button. Your app will be created.

Now the app is created, and you click on the view key option. You will get the API key and the URL of the goerli testnet. Just copy and paste this on the dotenv file. As we all know, the keys will be secured inside the dotenv file because this file won’t be sent to GitHub with the other codes.

To collect the private key, we need to go to the Metamask extension. You must be connected to the Goerli testnet.

If you are not, move to the add network option and add Goerli as a test network. In the Metamask, click on the add network option and move to the networks option. From the networks, select the Goerli testnet to add to your network.

If you want to recharge your Goerli account with some free test ETH, move to the Goerli faucet website and insert your Metamask wallet address. You can collect 0.2 fake ETH per day from the Goerli wallet for testing purposes.

In the Metamask wallet, just beside the account name, click on the three vertical dots and go for the account details. You will get the option to export the private key. Copy the key and paste it to the dotenv file.

All the requirements are fulfilled. Move to the goerliDeploy.js file.

Create an instance of the contract as we did earlier on the deploy.js file. Write the code to deploy the contract. To make sure the contract is deployed, ask for the contract address. Just “console.log” the contract address after the deployment.

const hre = require("hardhat");
async function main() {
  const bookSell = await hre.ethers.getContractFactory("BookSell");
  const contract = await bookSell.deploy();
  await contract.deployed();
  console.log("Contract Address:", contract.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

Finally, it’s time to deploy the contract on the goerli test net. In the terminal type:

npx hardhat run -–network goerli scripts/goerliDeploy.js

Remember to mention the directory of the file you want to deploy. You would get the contract address as a return if the smart contract was deployed.

In my terminal, I got this contract address. Copy the address and move to the Etherscan website to check if the contract is really deployed. You will get the details of the transaction hash and the deployment time on the website.

We need to copy the contract address and save it somewhere. We will require this address after some time when we call the smart contract from the front end.

Create Functional Components in React

We have initialized react but have not done anything yet. Let’s create a components folder inside the source folder.

Create a heading.js file for making a simple heading component. Get inside the folder and press “RSC” on the keyboard. A functional component structure will be ready. If you don’t have the required plug-in installed, then there is no need to worry. You can make it manually.

I will not waste much time on the front end as this is not our main focus.

Instead, we will import some ready-to-use templates from the flowbite website. Move to the flowbite and collect a colorful heading that you love. Then customize the code in your own way. If you like, you can build on my own code.

const Heading = () => {
  return (
    
      
        
          BOOK STALL
        
      
      
        FOR THE BOOK LOVERS TO READ YOUR FAVORITE BOOKS.
      
      
        THE BEST BOOK SUBSCRIPTION SERVICE IS HERE.
      
    
  );
};

Here I have introduced a heading and then written a couple of lines. Then just did a little edit. You are always welcome to make your custom code.

That’s all for today. In the next part, we will start interacting with the smart contract with the help of ether.js. Hope that will be an interesting one.

GitHub: https://github.com/finxter/bookSell

The post I Created a React Decentralized App to Sell eBooks – Here’s How (2/4) appeared first on Be on the Right Side of Change.

I Created a React Decentralized App to Sell eBooks – Here’s How (1/4)

Yassin Mahmud Abdul Quddus — Fri, 13 Jan 2023 19:44:07 +0000

Welcome to another project of a decentralized dapp with React and ether.js.

This is part 1 of our four-tutorial series on creating a decentralized web app to sell ebooks:

Part 1: I Created a React Decentralized App to Sell eBooks – Here’s How (1/4)
Part 2: I Created a React Decentralized App to Sell eBooks – Here’s How (2/4)
Part 3: I Created a React Decentralized App to Sell eBooks – Here’s How (3/4)
Part 4: I Created a React Decentralized App to Sell eBooks – Here’s How (4/4)

Project Scenario

We will build an ebook stall from which anyone can buy an ebook on a monthly subscription basis.

The buyer will submit his name, the book’s name, and the writer’s name at the time of buying the subscription. When he pays for the subscription, the subscription fee will be added to the bookstall owner’s account, and at the same time, the system will debit the transaction fee from the buyer’s account.

Apart from this, the details info of the buyer will be displayed on the user interface. The information includes the buyer’s name, wallet address, transaction time, book, and writer’s name.

Technology

We will use react.js and tailwind CSS in the frontend, Solidity for writing the smart contract, Ether.js for interacting with the smart contract, and the hardhat for smooth development.

Initiate Hardhat

Hardhat is arguably the best Ethereum development environment to compile your contracts and run them on a development network. To install the hardhat, open the vscode terminal and just type

npm install –save-dev hardhat

Hardhat will be installed on the directory. Now run hardhat.

npx hardhat

The command prompt will ask for creating a JavaScript project. Approve it. You need to install some dependencies to run the project. Copy this from the terminal and run. All the extra dependencies will be installed.

Create a new Solidity file inside the contract folder. “bookSell.sol“. We will be writing all the code here.

Build Solidity Smart Contract

I will create a simple and quick smart contract. This smart contract is basically for inputting the name, Book name, writer’s name, buyer address, the timing of issuing the order, etc.

pragma solidity  >= 0.5.0 < 0.9.0;
contract BookSell{
    address payable owner;
    constructor(){
        owner = payable(msg.sender);
    }
    struct Receipt{
        uint256 timestamp ;
        string name;
        address buyer;
        string book;
        string writer;
    }
    Receipt[] receipts;
    function buyBook(string memory name, string memory book, string memory writer) public payable{
        require(msg.value>0,"Payment is not acceptable");
        owner.transfer(msg.value);
        receipts.push(Receipt(block.timestamp, name, msg.sender,book, writer));
    }
    function getReceipts() public view returns(Receipt[] memory) {
        return receipts;
    }
}

First, we need to confirm the address of the owner of the bookstall. This address will be payable cause it will receive the money of the buyers.

Create a constructor for the owner. “msg.sender” will be the owner in this case. msg.sender is normally the address that is used to deploy the contract. The person or the account that deploys the contract is normally the contract owner and will receive the transaction on his account.

Create a struct “Receipt” with three strings, that is,

“name” for the buyer’s name,
“book” for the book buyers want to buy, and
“writer” for the writer of the book.

The timestamp would be an unsigned integer to note down the time and an address to collect the buyer’s account address.

To store the data of several buyers, I created a “receipts” array. It is a dynamic array, which means whenever a new buyer inputs his information, the receipt will be added dynamically to the receipts array.

Create a function to buy the book. This buyBook function will take the information of the buyer as the parameters. The information includes the buyer’s name, book, and writer’s name. This function will also be payable cause we will use this to transfer money to the owner’s address.

Buyers must not pay zero eth as an amount. That’s why we added a condition with the “require” method. “msg.value” is the amount the buyer spends to buy the book.

“owner.transfer(msg.value)” is used to transfer the fund to the stall owner’s account.

When the transaction is done, add the transaction receipt to the receipts array with the help of the push method. Since the receipts array is a struct type of array, you can input the required fields as the parameter of receipt.

To get the information from the receipts, we created a getReceipts() function. This returns the receipt of each buyer when we call the function.

Test the Smart Contract

Before deploying the contract, we need to check if all the functionalities of the smart contract are working properly or not. Hardhat has its own node and tools for checking the smart contract. We will first deploy our smart contract on the hardhat node to check its functionality and then deploy it to our testnet.

Move inside the deploy.js. We will create several functions here for different purposes.

We need to generate some accounts for the transaction. Inside the async main() function, generate account addresses with the help of the getSigners() method of ether.js. One account is for the contract owner, and the other three are for different buyers.

const [owner, buyer1, buyer2, buyer3] = await hre.ethers.getSigners();

Hardhat will generate four accounts with the help of ether modules. Each account will have 1000 eth by default. We can use that at the time of the transaction for testing purposes.

Create an addresses array to store all the addresses together.

const addresses = [
    owner.address,
    buyer1.address,
    buyer2.address,
    buyer3.address,
  ];

Now to get the balances of those addresses, we will create obtainBalance() function outside the main function()

const obtainBalance = async (address) => {
  const balanceBigInt = await hre.ethers.provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
};

This obtainBalance() function will take an address from the addresses array, and it will use the getBalance() method of the ethers.provider to get the balance.

We will get the output as a Big Int object, and we need to convert it to get the actual number. The formatEther() method of the utils library converts the big int object into a readable format.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

Now we will create another function to loop through the addresses, and it will also show the balances on the console.

const printBalances = async (addresses) => {
  let id = 0;
  for (const address of addresses) {
    console.log(`Account ${id} Balance:`, await obtainBalance(address));
    id++;
  }
};

The “for” loop is used to loop through all the addresses of the array. While looping, the obtainBalance() function will get the balance from each account. An id variable is used to mark each account with a unique id.

Apart from that, we want to see the receipt for each buyer. Let’s create a printReceipt() function to get the receipt.

const printReceipts = async (receipts) => {
  for (const receipt of receipts) {
    const timestamp = receipt.timestamp;
    const name = receipt.name;
    const buyer = receipt.buyer;
    const book = receipt.book;
    const writer = receipt.writer;
    console.log(
      `Buyer Details: Name:${name},Book:${book},Writer:${writer},Address:${buyer},Time:${timestamp}`
    );
  }
};

The printReceipts() function initiates a for loop that will loop through all the receipts of the receipts array. Then it will show all the buyer’s details from the receipt that will be called.

Now we need to call the receipts array from the smart contract. Otherwise, it won’t be possible to get data from the contract. Create an instance of the smart contract inside the main() function.

  const bookSell = await hre.ethers.getContractFactory("BookSell");
  const contract = await bookSell.deploy(); //instance of the contract

With the first line of code, we called smart contract with the getContractFactory() method of the ethers library. Then we created an instance of the smart contract in the second line.

Now we can call the functions of the smart contract from here.

Let’s say we want to check the accounts’ balances first. Let’s console log the balance on the terminal with the help of printBalance() method that we created earlier.

  console.log("Initial Balance:");
  printBalances(addresses);

Assume we want to send some balance to the owner’s address for buying books. Fix the amount we want to transfer

  const amount = { value: hre.ethers.utils.parseEther("1") };
  await contract
    .connect(buyer1)
    .buyBook("Adam", "Miracle Morning", "Hal Elrod", amount);
  await contract
    .connect(buyer2)
    .buyBook("Mike", "The Slight Edge", "Jeff Olson", amount);
  await contract
    .connect(buyer3)
    .buyBook("Peter", "Loving what is", "Byron Katie", amount);

We fixed an amount, one eth, to transfer from all the buyer’s addresses. We used the parseEther() method of the utils library to fix the value.

In the next few lines, we called the contract and established a connection with the buyer’s address. We also called the buyBook method of the smart contract to buy the books.

Inside the buyBook function we passed the buyer address, the book name, the writer name, and the amount as the parameter. For simplicity, we are sending the same amount from all the buyer’s accounts.

To check the balances after buying the book, we will call the printBalance() method again.

  console.log("Last Balance:");
  await printBalances(addresses);

We forgot to call the receipts array from the smart contract. We will use the getReceipts() methods from the smart contract to get the receipts.

  const receipts = await contract.getReceipts();
  printReceipts(receipts);
}

Now. Let’s deploy the contract on the hardhat and check how it works.

  await contract.deployed();
  console.log("Contract Address:", contract.address);

I deployed the contract in the first line and then asked for the contract address.

Let’s move to the terminal and run the script.

npx hardhat run scripts/deploy.js

Don’t forget to mention the directory of the file on the code.

I got these results on my terminal after running the scripts. You can see from here that initially, the balances of all the accounts were 10000 eth. But after the transaction, more than one eth was deducted from each of the last three accounts.

It took more than one eth because of the transaction fee. At the same time, we can see the owner’s account (Account 0) is credited with exactly three eth.

In the last part, we also gathered all the info from the buyer’s receipt, including the time of the transaction and the address of the buyer.

Thanks for Reading

That’s all for today. You have learned how to build and test a smart contract. In the next part, we will deploy the smart contract on a testnet.

GitHub: https://github.com/yassesh/bookSell

The post I Created a React Decentralized App to Sell eBooks – Here’s How (1/4) appeared first on Be on the Right Side of Change.

I Created a Counter Smart Contract with Ether.js — Here’s How

Yassin Mahmud Abdul Quddus — Mon, 26 Dec 2022 09:43:00 +0000

One of the presiding JavaScript libraries for interacting with the Ethereum blockchain is ether.js.

The ether.js library, only 88 KB compressed in size, is remarkably smaller than the web3.js library. Because of that, web apps load more quickly if you use the ether.js API. This constantly improving library has already been popular among developers for its developer-friendly modules.

Today we will see how ether.js interacts with the blockchain and the smart contract. We will not go for the theoretical explanation of ether.js.

Instead, we will deal with some practical use cases of ether.js.

Interacting with the Blockchain

Connecting to blockchain:

We need to connect to a node first to interact with the blockchain.

Today we will use Infura, a powerful suite of high-availability blockchain APIs and developer tools. If you still need to make an account in Infura, then just sign up.

After signing in, click the “create new key” button to create a new project. Select the network as web3 API and enter the project name as you wish. A new page will open, and you need to move to the “get started with the web3 Ethereum” option. Just copy the main net link from there.

Then move to the visual studio code. Make a new folder and install node modules and ether.js.

npm init -y
npm install –-save ethers

Create a new javascript file for writing our codes. I am naming it as “etherBlockchain.js”.

Now import ether.js inside the javascript file.

const { ethers } = require("ethers");

Now to read data from the blockchain, we need to fix the provider.

const provider = new ethers.providers.JsonRpcProvider(  "https://mainnet.infura.io/v3/3148ece387d84a40b4a8c883b07c33c0"
);

We have pasted the Infura URL as the parameter for JSON RPC provider. This will connect us with the Infura node.

Get the current block:

Using the Infura mainnet, we can get the current block number with the help of ether.js provider.

const interactBlockchain = async () => {
  const currentBlock = await provider.getBlockNumber();
  console.log("You are using the block: ", currentBlock);

};

We have created an async await function to identify the block number. getBlockNumber() method of the provider will help us to get the block number. In the vscode terminal, run the script.

node etherBlockchain.js

If everything runs fine, you should get the block number on the screen. Now to verify if it is genuine, visit the etherscan.io website. The current block number must be displayed under the Latest Blocks section.

Get the Balance:

To get the balance, we will use the provider.getBalance() method of ether.js. You need to put the address of any Ethereum account to get the balance of that account.

const balance = await provider.getBalance(
    "0xF977814e90dA44bFA03b6295A0616a897441aceC"
  );
console.log(“Account Balance: ”, balance);

All the codes should be kept inside the async await function.

When you run the script, you will get a BigNumber object as a return. Ethereum runs many operations on numbers outside the range of safe values to use in javascript.

A BigNumber is an object which safely allows mathematical operations on numbers of any magnitude.

Reference: https://docs.ethers.org/v5/api/utils/bignumber/

You need to convert this big number object to a readable format to get the balance of the account.

We will use the formatEther method of the utils library of the ether.js to get the balance in ether.

const balanceInEther = ethers.utils.formatEther(balance);
console.log("Account balance in ether:", balanceInEther);

Now, if you run the script, you should get the account balance in ether.

This utils library of the ether.js is a vast one. You can do so many things with that.

Reference: https://docs.ethers.org/v5/api/utils/

Now to convert the balance in wei again, we will use this utils library.

const balanceInWei = ethers.utils.parseEther(balanceInEther);
console.log("Account balance in wei:", balanceInWei);

When you run the script, You will get the balance in wei.

In this way, you can run any query on the blockchain by using the methods of ether.js. We need to see how we can interact with a smart contract using ether.js.

Interacting with Smart Contracts

We have our simple smart contract ready for deployment on the Remix IDE.

I have made a simple Counter contract that will increase the count by ten whenever you call the increment function.

The getCount() method will return the count whenever you call the getCount() method. We will call those methods from the node terminal of vscode.

pragma solidity >= 0.5.0 < 0.9.0;
contract Counter {
    uint count = 0;

    function setCount(uint _count) public {
        count=_count;
    }

    function increment() public {
    count = count + 10;
    }

    function getCount() public view returns (uint) {
    return count;
    }
}

We need to deploy the smart contract in a blockchain.

We will use the Goerli testnet to deploy the contract, and the Metamask will be used to establish communication with the testnet.

We need some money on the goerli account to bear the Gas fee cost for the smart contract deployment. If you need to learn how to add the goerli test network on the Meatamask wallet and how to add some free goerli eth on the Metamask wallet, then watch some videos on youtube. It is very easy to add some free eth through the goerli faucet.

Now back to Remix IDE. After doing the compilation, you move to the “DEPLOY AND RUN TRANSACTIONS” section of the Remix IDE. Select the environment as “Injected Provider-Metamask”.

Now click on the deploy button. Metamask will pop up and ask to confirm the transaction. You can even check the transaction on the etherscan if you want.

We need the smart contract address and ABI afterward to create an instance of the smart contract on the node terminal.

For this part, we need to use React as the frontend. This frontend will establish a connection with Metamask. Open the command prompt and type the following to initiate a react app in your directory.

npx create-react-app ether_smart_contract

A react app on localhost:3000 must be running on your browser. Now, move to the app.js on vscode, clear the code, and import ether.js first.

import { ethers } from "ethers";

We need to use useEffect() hook of the react. Inside the useEffect, create an async await function to write the codes to call the smart contract.

Now again, call the provider; in this case, our provider would be Metamask.

const provider = new ethers.providers.Web3Provider(window.ethereum);

The test goerli network on our Metamask is using the Infura node. Hence, we don’t need to connect to the Infura network manually.

This is one of the privileges of using Metamask. With Metamask wallet, you can connect to different networks easily.

Difference between provider and signer:

We need to introduce a signer for our contract. What is the difference between the provider and the signer?

The provider is required whenever you are reading any data from blockchain or smart contract, but you are not changing the state of something on the smart contract; whenever you are changing the state of something on the smart contract, you need to use the signer.

Actually, when you write something on the smart contract, you are changing the state of something. Whenever you bring some change to the smart contract, you have to bear a cost for the transaction.

The signer will sign a transaction on your behalf to validate the transaction. Every time you click the confirm transaction button on the Metamask, a signer automatically signs a transaction on the backend and validates the transaction.

const signer = provider.getSigner();

Create two variables for the contract ABI and the contract address.

ContractAddress = “Input the contract address”;
ContractABI = “Input the contract ABI”;

Now we can create an instance of the smart contract with the help of contractABI and contractAddress.

const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

This ethers. The contract method requires the contract address, contract ABI, and the signer as a parameter to create an instance of the smart contract.

Calling the constant methods:

Now our contract instance is ready. Using the contract instance, we can call the readable methods from the smart contracts.

const count = await contract.getCount();
console.log(count);

We have called the getCount() function of the smart contract, which returns a big number. We need to convert it to string. For that,

console.log("Current count is:", String(count));

Calling the non-constant methods:

Now we should get the count in a readable format. We can set the count as we desire by calling the setCount() method from the smart contract.

await contract.setCount(20);

The count must be set as 20. You can call the getCount() methods again to check the count.

Now, if we want to increment the count by ten, then we can call the increment() function with the help of contract.current() method.

const tx = await contract.connect(signer).increment();
await tx.wait();

As we change the blockchain state, we need to connect the signer to approve the transaction. We did it here.

The transaction will take some time to be mined on the blockchain. So, you have to wait a bit to see the count increase.

If you call the getCount() method again after some time, I hope you will see the count has increased by 10.

So that are some ways you can connect to a blockchain and query data from it. You have also seen the way smart contract interacts with ether.js. That’s all for today. Thanks for the reading.

The post I Created a Counter Smart Contract with Ether.js — Here’s How appeared first on Be on the Right Side of Change.

I Sent My First SOL with Solana’s Phantom Wallet and web3.js: Here’s How

Yassin Mahmud Abdul Quddus — Thu, 22 Dec 2022 16:40:47 +0000

Solana, one of the blockchains that offer an incredibly low transaction fee, is well known for its speed and efficiency. Compared to Ethereum‘s 15 transactions per second, Solana’s network can handle about 3,400 transactions per second.

Attention: There is no free lunch — Solana sacrifices decentralization to accomplish this speed.

Still — many freelancing clients will ask us to create Solana “decentralized” apps for them, so today, we will try out a transaction on Solana.

We will use Solana web3.js, which provides the interface for the developers to interact with the Solana blockchain using JavaScript. We will create two accounts on the phantom wallet. Then airdrop some balance on the first account, and we will send a transaction to the second account. All the things will be done from scratch in JavaScript.

Reference

Here’s an example project description where this practical project would be useful. If you just want to know how it is done, feel free to skip the “Project Description”.

Example Project Description

This project will involve sending and receiving SOL tokens (Solana) over the Solana blockchain. The goal of this project is to facilitate a secure, fast, and reliable transfer of SOL tokens between two parties.

First, the two parties involved in the transaction will need to set up Solana wallets in order to store and send SOL tokens. The wallets will need to be integrated with the Solana blockchain and will need to be used to create an address for each party. Each party will then need to securely store their wallet’s address and private key for safekeeping.

Second, the two parties will need to agree on the amount of SOL tokens to be transferred. Once agreed upon, the sender will need to enter the recipient’s address in the wallet’s send interface, enter the amount of SOL tokens to be sent, and click ‘send’. The wallet will then generate a transaction on the Solana blockchain and broadcast it to the entire network.

Third, the Solana blockchain will validate the transaction and add it to the blockchain ledger. After a few seconds, the transaction will be confirmed and the recipient will receive the SOL tokens in their wallet. The transaction will then be visible on the Solana blockchain explorer.

Finally, the two parties will need to keep track of the transaction by checking their wallets and the Solana blockchain explorer to ensure that the transaction has been completed successfully.

Summary: This project will enable the two parties to securely, quickly, and reliably send and receive SOL tokens over the Solana blockchain.

Step 1: Create a Phantom Wallet

A very popular wallet for the Solana blockchain is the phantom wallet. The phantom extension is available for chrome, firefox, ios and other androids. Just add the extension on your browser if it still needs to be installed. Since we will build on a testing environment, we will change the network to devnet.

Now we need two create two wallets for the transaction purpose. Go to settings and click on the “add wallet” option to add a wallet. We use wallet 2 as our sender wallet and wallet 3 as our receiver wallet.

Step 2: Set up Solana-web3.js

First, create a folder and import node modules and package.json on it.

npm init -y

Now install Solana web3.js.

npm install @solana/web3.js

Now visit the package.json file to check if the dependencies of the Solana web3 are installed properly. You will get the version number for the Solana web3 included there.

Just add (“type”: “module”) in the dependencies list inside the “package.json” file. Otherwise, you will face problems in importing modules.

Create a soltransaction.js file which will be used to write all the codes.

Inside the soltransaction.js file, import web3.

import solanaweb3 from "@solana/web3.js";
import bs58 from "bs58";

We must import bs58, the javaScript component, to compute base 58 encoding. We will require this thing soon.

Step 3: Connect with My Phantom Wallet

To establish a connection with the phantom wallet, we will call the Connection object of the web3.js. This Connection object will establish a connection with RPC API. Let’s create the connection instance.

const connection = new solanaweb3.Connection("https://api.devnet.solana.com");

We used the devnet API URL as we will commit our transaction in the devnet network of the phantom wallet.

To commit the transaction on the Solana blockchain, we need to generate a keypair for the accounts. We need to generate Key pairs with public and private keys (used for signed transactions).

There are two ways to obtain a Keypair.

Either you can generate a new Keypair with the help of solanaweb3, or
You can obtain a new Keypair using a secret key.

We will use the private key of our wallets to generate Keypair. Move to the phantom wallet extension. You will get an export private key option if you click on the wallet. Just copy the private key from there.

The “Keypair.fromSecretKey” method of solanaweb3 will help us to generate Keypair from the private key.

Bs58 will decode the uint8Array from the private key of our wallets.

Reference

Let’s create two variables, senderWallet and receiverWallet, for our wallet2 and wallet3, respectively.

let senderWallet = solanaweb3.Keypair.fromSecretKey(
  bs58.decode(
    "4g2ij8ML3Jd42LJv33apPpQtFkyK5XV9dq3PGa7LiR6LL33ZmraXYbMg7kCQvTAXd7tJRp7mYL1LQ6HEvHL2DhQF"
  )
);
let receiverWallet = solanaweb3.Keypair.fromSecretKey(
  bs58.decode(
    "5MYvQVLAxJH9FWGf1feCPGC4PagBYcLecW5W8YAJoLLakR47iHVZW16aW2C6Pq6Zo8BHvdh1iCYigM9dUEU7RwyD"
  )
);

Now our sender and receiver wallet is ready. So we can get the balance from each account.

Step 4: Get the Balance From My Wallets

(async () => {
  let senderBalance = await connection.getBalance(senderWallet.publicKey);
  let receiverBalance = await connection.getBalance(receiverWallet.publicKey);

  console.log(
    `Sender Balance: ${senderBalance / solanaweb3.LAMPORTS_PER_SOL} SOL`
  );
  console.log(
    `Receiver Balance: ${receiverBalance / solanaweb3.LAMPORTS_PER_SOL} SOL`
  );
})();

These senderBalance and receiverBalance variables inside the async await function will use the getBalance() method of the solanaweb3 to extract the balance from the sender and receiver accounts.

The getBalance method will take the public key of the wallet addresses as the parameter.

Then we “console.log” the sender and receiver balance to see It on the terminal. To express the balance in short, we used LAMPORTS_PER_SOL. Lamport is the smallest unit of Solana. A Lamport has a value of 0.000000001 SOL.

Now, if we run the script on the visual studio code terminal. We should get the balance of the two wallets.

node soltransaction.js

Step 5: Airdrop Solana in Sender Account

Now we will airdrop some balance to the sender account using the web3.js library through the devnet network.

Again, we will create an async await function and use the requestAirdrop() method of the web3 to request an airdrop on the sender account.

(async()=>{
let txhash = await connection.requestAirdrop(senderWallet.publicKey, 1e9));
console.log(`Transaction hash : ${txhash}`)
})()

The “connection.requestAirdrop” method will take two parameters. The first one is the public key of the account that will be receiving the airdrop and the second one is the amount it will be receiving as an airdrop.

In this case, it will receive a billion lamport equal to a Solana.

This txhash variable will provide us with a transaction hash that we can track down later on the blockchain explorer, such as Solana beach or solscan or Solana explorer etc.

Then just run the script to get the transaction hash on the terminal.

Copy the transaction hash from the terminal and move to “explorer.solana.com“. Check the cluster is switched to devnet as we are using the devnet network. Now paste the transaction hash on the search query. You will get all the details of the transaction, and the sender account must be credited with one sol.

You can visit the phantom wallet and check wallet 2. It must be credited with one sol. Now, if you want to airdrop more sol on the wallet2, you can change the figure on the requestAirdrop code and run the script again.

Step 6: Transfer Solana from one account to another

We have airdropped some balance in our sender wallet; now, Let’s try to transfer some sol from the sender wallet to the receiver wallet. Again we need to wrap all the function calls inside an async() function.

(async () => {
  let transaction = new solanaweb3.Transaction().add(
    solanaweb3.SystemProgram.transfer({
      fromPubkey: senderWallet.publicKey,
      toPubkey: receiverWallet.publicKey,
      lamports: 2 * solanaweb3.LAMPORTS_PER_SOL,
    })
  );
  transaction.feePayer = senderWallet.publicKey;
  let transactionHash = await connection.sendTransaction(transaction, [
    senderWallet,
    receiverWallet,
  ]);
  console.log(`${transactionHash}`);
})();

We need to create a new transaction first, and then we need to initiate the “SystemProgram.transfer” method.

SystemProgram is one of the native programs of Solana that is a handful for creating new accounts, allocating account data, assigning accounts to own programs, transferring lamports from System Program-owned accounts and paying transaction fees.

We will utilize the transfer method of the SystemProgram to transfer sol from the sender wallet to the receiver wallet.

Reference

This “SystemProgram.transfer” method asks for three parameters. They are the public key of the wallet that will be used for sending sol, the public key of the wallet that will receive the amount, and the amount of lamports you ask to transfer.

We need to confirm the feepayer for the transaction. Otherwise, the transaction will not take place. In this case, the sender wallet will pay the fee for the transaction.

Now we need to send this transaction to the devnet cluster. For that, we will call the sendTransaction method of the solanaweb3 that takes two parameters. One is the transaction itself, and the next is an array consisting of the sender and receiver Keypair. This will return a transaction hash again when you “console.log” on the terminal.

Before running the node, you need to bring the airdrop section under the comment or delete the portion if you want. Otherwise, this airdrop will again start executing. Let’s call the node on the terminal.

Copy the transaction hash from the terminal and paste it on the Solana explorer. You can see the transfer from the sender’s wallet to the receiver’s wallet.

Now, you move to the phantom wallet extension. Check the balance of wallet 2 and wallet 3. You must see that your wallet 3 is credited with two sol. And if you check wallet 2, you will see the transfer balance and the transfer fee have been debited from the wallet.

So that’s all for today. You have seen how the Solana blockchain interacts with the Solana web3.js and how the transaction takes place on the Solana blockchain. I hope you enjoyed the tutorial. Thanks for being with me.

Reference

The post I Sent My First SOL with Solana’s Phantom Wallet and web3.js: Here’s How appeared first on Be on the Right Side of Change.

Learn to Build Smart Contracts in React with web3.js: Here’s How! (2/2)

Yassin Mahmud Abdul Quddus — Wed, 14 Dec 2022 10:40:55 +0000

Welcome to the second part of the series. In the first part, we have seen how web3.js helped the react frontend to connect to the smart contract.

We explored the power of the “web3.eth” attribute to call the data from the smart contract. But this time, we are not using React.

In this part, we will connect to localhost from Remix IDE using web3.js. We will create our simple smart contract and deploy it from the Remix IDE. Then we will call the functions and methods from our deployed smart contracts.

Write the Smart Contract

First, we need to create our smart contract and move to “remix.ethereum.org“, the Remix online IDE for web-based development.

Move to the contract folder and create a new Solidity file named “summation.sol”. In the Solidity file, we will introduce a simple summation smart contract after declaring the Solidity version.

Inside our smart contract, we will create some functions that we will try to call afterward from the node.js terminal of the visual studio code. Web3 will again work as the mediator to establish a connection between Remix IDE and the locally running test blockcha i n ganache.

First, declare three unsigned integers x, y and z. But let’s make it clear what our smart contract will do. The purpose of the smart contract is to add two numbers, x and y. After summing up, the result will be stored as the z variable. We will use two functions, set() and get(), to set the numbers and to get the result, respectively.

The set() function will take two integers, i and j, as parameters. These i and j will be the value of the x and y variables. The sum of x and y will be published as z.

We need to return the result as an integer to display it on the terminal. That’s why we created the get() function. The get() function will return the value of z, which stores the sum of x and y.

In short, we are adding two numbers to the smart contract.

We can set the numbers as we like from the node terminals of the visual studio code. Then we will get the result from the contract by accessing the get() function of the smart contract.

We will not set the numbers from the Remix IDE; instead, we will be using the node terminal to access the smart contract with the help of web3.

Deploy the Smart Contract in the Localhost

Before deploying the smart contract, you need to compile the Solidity file.

To do that, move to the SOLIDITY COMPILER section of the Remix IDE. You will get a “Compile summation.sol” option available. Just click on that.

The compiler will compile the contract automatically if your code is correct. Otherwise, some red exclamation warning will appear on your contract with the possible solution for the mistakes of your codes. Just try to solve the issues.

Otherwise, the solidity compiler will not allow you to deploy the contract. Since there will be no chance to change the state of the contract once it is deployed, it is important to recheck the codes several times.

To deploy our smart contract in ganache, we need to connect our Remix IDE with Ganache first. Move to the deploy option and select the ganache provider from the environment drop-down.

An external node request window will pop up and ask for the Web3 provider endpoint. Here we will provide the URL of our Ganache local host.

If the Ganache is appropriately connected, you will be able to see all the accounts of ganache under the ACCOUNT drop-down. Now ganache is connected. Let’s deploy the contract by clicking the deploy menu.

Just under the environment drop-down, you can see the custom network is 5777. That is the network ID of the ganache. It also indicates that you are connected with the correct local host.

Calling the Functions from Node Using Web3

Let’s move to the visual studio code and open the terminal. Make sure you are in the directory where web3 is installed already. To activate the node terminal just type:

Node

You will get the node version number in return. Now the node terminal is running, and we will import our web3 now.

let Web3 = require ("web3");

Let’s create an instance of the web3 and connect to ganache with the HTTP provider.

let web3 = new Web3(new Web3.providers.HttpProvider(http://127.0.0.1:7545));

Now again, we will create an instance of the contract with the help of web3.eth.contract method. This will take the ABI and address of the contract as the parameter. To get the ABI, move to the Remix IDE and visit the “solidity compiler” section.

You will get the ABI at the bottom left corner. Move to the “deploy and run transactions” section for the contract address. You will get the contract address under the deployed contracts. Just copy the ABI and address to use it for building the contract instance.

const contract = new web3.eth.Contract(ABI, Address);

I did not write the ABI and contract address from the code as it is too long to copy. You must replace the code with your own ABI and contract address.

A copy of our deployed smart contract is available now. We can call the methods and functions from the contracts now. “contracts.method” attribute will help us to call the functions we want.

Now we will set the value of x and y by calling the set() function from the contract.

contract.methods.set(90,10).send({from:"0x367Ea75b206ECfc52712154CCd18c88488a465cA"});

We set the value for x and y as 90 and 10, respectively. The send method mentions the account address we use for the transaction. This account address is mainly required to bear the gas price cost for the transaction.

You can use any account of the ganache for the transaction. It should not cause any problems.

Now, if everything works well, you can call the get() function from the contract and check what it returns.

contract.methods.get().call().then(console.log);

After calling the get() function through “contract.methods()” you need to “console.log” the output. Otherwise, the terminal will return a promise.

If the terminal returns 100, then it means our function is working well.

Let’s try to get the value of the x integer from the smart contract. Again we will use the “contract.methods” attribute to call the variable from the smart contract.

contract.methods.x().call().then(console.log);

If everything works well, then you will get 90 as an output. So, you can easily estimate the power of the “contract.methods” attribute of the web3 in case of fetching data from the smart contract. It is really easy to call any method or function by using web3.js.

That concludes the two-part series. You have learned how the smart contract interacts with the node terminal and how web3 helps us to communicate with the smart contract. thanks for being with me.

Reference: https://web3js.readthedocs.io/en/v1.2.11/web3-eth-contract.html#id26

The post Learn to Build Smart Contracts in React with web3.js: Here’s How! (2/2) appeared first on Be on the Right Side of Change.