DEV Community: Ernesto

How to build a Liquidity Pool Smart Contract Using ERC-4626

Ernesto — Tue, 22 Oct 2024 13:08:39 +0000

In this tutorial we will walk you through how to build a functional liquidity pool which leverages the ERC-4626 standard for tokenized vaults, we will be using the ERC20 standard for the underlying token. This contract will allow users to deposit ERC20 tokens into a liquidity pool and receive Liquidity Pool tokens in return which represents their share of the pool.

Prerequisite

You should have a basic understanding of Solidity
You should have a basic knowledge of React Js.
You should have Nodejs and Foundry installed on your PC.

Project Setup and Installation For Solidity

Run the command below to initiate a foundry project, we will be using foundry framework to build the smart contract.

 forge init vault

Open the vault folder on Vscode or your favorite code editor, and delete the scripts/counter.s.sol, src/counter.sol, and test/counter.t.sol.

Install all dependencies

    forge install foundry-rs/forge-std --no-commit && forge install OpenZeppelin/openzeppelin-contracts --no-commit

Overview of the Liquidity Pool Contract

The contract will allow:

Users to deposit the allowed underlying token into the vault
Users to get liquidity tokens when they make deposits
Users to withdraw deposits and interest or yield generated
Owner to add yield to the vault.

Code Overview

The complete code for the smart contract can be found here . The Vault contract is deployed on sepolia-0xfB3F6E30e0A79d6D2213A91cfbc819e81E4757Af.

You can also check out the live dapp here

ERC-4626 (Tokenized Vault Standard)

ERC-4626 is a standard on Ethereum that defines a tokenized vault for yield-bearing tokens, aimed at improving the efficiency and uniformity of DeFi protocols.

It is an extension of the ERC-20 token standard, specifically designed to make it easier to create vaults that accept ERC-20 tokens as deposits and automatically generate yield on those assets.

It allows assets to be wrapped and tokenized, enabling depositors to receive yield-bearing shares. It provides functions to deposit and withdraw assets, and track total assets in the vault.

ERC-20 (Fungible Token Standard)

ERC-20 is a widely used standard for creating fungible tokens on the Ethereum blockchain.

Fungible tokens are interchangeable, meaning that one token is equivalent to another of the same type (like how 1 US dollar is equal to another dollar).

The ERC-20 standard provides a set of rules that developers must follow to ensure that tokens are compatible with the broader Ethereum ecosystem, including wallets, exchanges, and decentralized applications (dApps).

Imports

We import three contracts from OpenZeppelin:

** ERC20**: Standard implementation for fungible tokens.
ERC4626: Implements the tokenized vault functionality.
Ownable: Provides the access control mechanism for the owner.

 import "lib/openzeppelin-contracts/contracts/token/ERC20/ERC20.sol";
    import "lib/openzeppelin-contracts/contracts/token/ERC20/extensions/ERC4626.sol";
    import "lib/openzeppelin-contracts/contracts/access/Ownable.sol";

State Variables

IERC20 public underlyingToken

This stores the ERC-20 token that users will deposit into the liquidity pool.

Constructor

The constructor initializes the liquidity pool and sets the underlying ERC-20 token. The vault’s name is set to "Liquidity Pool Token" (LPT). The contract inherits from ERC4626, which will handle vault shares. It also inherits from Ownable to restrict certain functions (like adding yield) to the owner.

  // ERC4626 constructor: Underlying token, Vault Token (e.g., "LP Token", "LPT")
        constructor(address _underlyingToken)
            ERC4626(IERC20(_underlyingToken))
            ERC20("Liquidity Pool Token", "LPT")
            Ownable(msg.sender)
        {
            underlyingToken =  IERC20(_underlyingToken);
        }

Deposit Function

Users can deposit ERC-20 tokens into the liquidity pool by calling the deposit() function. The function checks that the user is depositing more than zero tokens. After depositing, the user will receive vault tokens representing their share of the pool.

  // Function to deposit tokens into the pool
        function deposit(uint256 assets, address receiver) public override returns (uint256) {
            require(assets > 0, "Cannot deposit 0 assets");
            return super.deposit(assets, receiver);
        }

Withdraw Function

Users can withdraw their deposited ERC-20 tokens by calling the withdraw() function. This burns their vault tokens and transfers the corresponding amount of the underlying tokens back to them.

  // Function to withdraw tokens from the pool
        function withdraw(uint256 assets, address receiver, address owner) public override     returns (uint256) {
            return super.withdraw(assets, receiver, owner);
        }

Add Yield Function

The addYield() function allows the contract owner to manually add yield (extra tokens) to the pool. This simulates the generation of interest or returns on the underlying assets. Only the contract owner can call this function.

// Example function: Simulate adding yield to the pool
        function addYield(uint256 amount) external onlyOwner {
            underlyingToken.transferFrom(msg.sender, address(this), amount);
        }

Total Assets Function

This function returns the total number of ERC-20 tokens currently held in the pool. It overrides the ERC-4626 totalAssets() function to reflect the pool's holdings.

    // Returns the total amount of underlying assets (ERC20 tokens) in the pool
        function totalAssets() public view override returns (uint256) {
            return underlyingToken.balanceOf(address(this));
        }

Project Setup and Installation For React.js

Run the command below and follow the prompt to initiate a React project, we will be using react.js to build the frontend for the Liquidity Pool platform.

  npm create vite@latest

Install the necessary dependencies.

  npm install npm install ethers react-toastify

App.js Overview

Imports

App.css - contains styling for the components.

tokenABI and vaultABI - These JSON files contain the ABI (Application Binary Interface) definitions of the token and vault contracts, respectively, which are necessary for interacting with the contracts via ethers.js.

ethers.js - A JavaScript library that allows interactions with the Ethereum blockchain. It is used to create contract instances, send transactions, and interact with smart contracts.

react-toastify - A notification system used to display messages to users, such as transaction success or failure.

    import './App.css'
    import tokenABI from "../abi/token.json";
    import vaultABI from "../abi/vault.json";
    import { ethers } from "ethers";
    import { toast } from "react-toastify";
    import { useState, useRef, useEffect } from "react";
    import "react-toastify/dist/ReactToastify.css";

State and Refs

useRef: Used to track form input values for deposit, withdrawal, and yield operations.

useState: Manages different states such as user address, wallet balance, token allowances, and vault asset data.

    const amountRef = useRef();
      const amountRef2 = useRef();
      const amountRef3 = useRef();
      const receiverRef = useRef();
      const receiverRef2 = useRef();

      const [address, setAddress] = useState("");
      const [balance, setBalance] = useState(0);
      const [allowance, setAllowance] = useState(0);
      const [totalA, setTotalAsset] = useState(0);
      const [UserA, setUSerAsset] = useState(0);
      const [amount, setAmount] = useState(0);

Contract Creation Functions

These functions create instances of the token and vault contracts, enabling read and write operations on the blockchain.

createWriteContractToken: Returns a token contract instance that can send transactions.
createGetContractToken: Returns a token contract instance for reading values without modifying blockchain state.
createWriteContractVault: Returns a vault contract instance for sending transactions.
createGetContractVault: Returns a vault contract instance for reading data.

    const createWriteContractToken = async () => {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum)
        const signer = await provider.getSigner();
        const tokenContract = new ethers.Contract(tokenAddress, tokenABI.abi, signer);
        return tokenContract;
      };

This function uses the ethereum injected into the browser by Metamask, this allows the dapp to interact with ethereum provider and allows users to connect to the blockchain with metamask, the signer represents the user account and enables the contract to send transaction on behalf of the user. The tokenContract instantiates the smart contract using the ABI, contract address, and signer/provider.

Approve Function

The approve function allows the user to give permission to the vault contract to spend their tokens. This function allows the vault to spend tokens on the user’s behalf, it uses the parseEther function to convert amount entered by the user into wei. The function also displays a loading message when the transaction is still loading.


    const approve = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContractToken();
        const id = toast.loading("Approval in progress..");
        try {
          const tx = await contract.approve(vaultAddress, ethers.utils.parseEther(amountRef.current.value));
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };

Deposit and Withdraw Functions

These functions allow users to deposit tokens into the vault and withdraw their share of the pool's assets.

Deposit: Transfers the specified amount of tokens to the vault contract and assigns vault shares to the user.
Withdraw: Redeems the user's shares for the underlying token.

The deposit function:

Calls the vault contract's deposit function.
Transfers the tokens from the user to the vault.
The user receives shares representing ownership of a portion of the vault's assets.

The withdraw function:

Calls the vault contract's withdraw function.
Transfers the tokens from the vault to the user.

 const deposit = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContractVault();
        const id = toast.loading("Deposit in progress..");
        try {
          const tx = await contract.deposit(ethers.utils.parseEther(amountRef.current.value), receiverRef.current.value);
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };
      const withdraw = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContractVault();
        const id = toast.loading("Withdrawal in progress..");
        try {
          const tx = await contract.withdraw(ethers.utils.parseEther(amountRef2.current.value), receiverRef2.current.value, address);
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };

Add Yield Function

This is an administrative function that allows the contract owner to add yield to the vault, increasing the overall pool assets. This means users can have more assets based on the shares they have in the pool.

 const addYield = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContractVault();
        const id = toast.loading("Add Yield in progress..");
        try {
          const tx = await contract.addYield(ethers.utils.parseEther(amountRef3.current.value));
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };

Fetching Data and State

getBalance: This function fetches the user’s wallet balance, total assets in the vault, and the user’s share of the assets.

    const getBalance = async () => {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum);
        const contract = await createGetContractVault();
        const signer = await provider.getSigner();
        const address = await signer.getAddress()
        const balance = await provider.getBalance(address);
        const total = await contract.totalAssets();
        setTotalAsset(Number(total));
        const userAsset = await contract.maxWithdraw(address);
        setBalance(Number(balance));
        setUSerAsset(Number(userAsset));
        setAddress(address);

getAllowance: This function checks if the user has already approved the vault to spend their tokens.

    const getAllowance = async () => {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = await provider.getSigner();
        const taddress = await signer.getAddress()
        const contract = await createGetContractToken();
        const allow = await contract.allowance(taddress, vaultAddress);
        setAllowance(allow);
      };

User Interface

The UI consists of multiple sections where users can:

View their current balance and shares in the liquidity pool.
Deposit tokens into the vault.
Withdraw their shares from the vault.
Admins can add yield to the vault.

Each function is linked to a button that triggers the appropriate smart contract interaction. Notifications are handled by react-toastify, providing feedback on whether transactions succeed or fail.

Conclusion

In this tutorial we covered how to build a Liquidity pool platform with Solidity and React, we explored creating a vault, depositing into the liquidity pool, adding yield to the pool, withdrawing assets from the pool, and viewing information about users and the liquidity pool. We now have a functional liquidity pool that runs on the ethereum blockchain.

This setup can be further extended to include more complex yield strategies, tokenomics, and governance systems.

How to build a Lottery App with Solidity, Chainlink VRF V2.5 and React.js(Vite)

Ernesto — Tue, 22 Oct 2024 11:06:39 +0000

In this tutorial, we will walk through how to build a decentralized lottery system using Solidity and Chainlink VRF.

The Smart Lottery contract allows users to create and enter lotteries, with a winner chosen at random after the lottery ends. To ensure fairness and transparency, we’ll leverage Chainlink's Verifiable Random Function (VRF) for random number generation, which guarantees a tamper-proof selection process.

By the end of this tutorial, you’ll have a comprehensive understanding of the contract structure and how to integrate Chainlink VRF for secure randomness in smart contracts.

Chainlink VRF Overview

Chainlink VRF is a decentralized oracle solution that provides verifiable randomness to smart contracts. In the context of the lottery, it ensures that the winner is chosen randomly, and the process is tamper-proof. Chainlink's VRF uses cryptographic proofs to guarantee the integrity of the random number used in the lottery.

Key Features

Multiple Lotteries: The contract allows for multiple lotteries, each with its own ID, entry fee, start time, and end time.
Random Winner Selection: Chainlink VRF ensures that a provably random winner is selected for each lottery.
Secure Fund Distribution: After the lottery ends, the winner can withdraw the pooled funds.

Prerequisite

You should have a basic understanding of Solidity
You should have a basic knowledge of React Js.
You should have Nodejs and Foundry installed on your PC.

Project Setup and Installation For Solidity

Run the command below to initiate a foundry project, we will be using foundry framework to build the smart contract.

 forge init lottery

Open the lottery folder on Vscode or your favorite code editor, and delete the scripts/counter.s.sol, src/counter.sol, and test/counter.t.sol.

Install all dependencies

  forge install foundry-rs/forge-std --no-commit && forge install smartcontractkit/chainlink-brownie-contracts --no-commit

Code Overview

If your style learning is code first, you can find the code for the smart contracts here(Frontend can be found here). This dapp is also deployed live and you can interact with it here
The smart contract is deployed on sepolia - 0x62251FD8F91e7D4D09dB5251bD9fBC0fB92A16f5

Imports and Interfaces

VRFConsumerBaseV2Plus.sol: is the base contract that the contract inherits from. It provides the necessary functions and structure to interact with Chainlink’s VRF V2.5.

By inheriting from this, the contract can securely request and receive random numbers from Chainlink's VRF service, which ensures that the random numbers used (for picking lottery winners, in this case) are provably fair and tamper-proof.

VRFV2PlusClient.sol : contains the low-level functions and data structures required to interact with the Chainlink VRF V2.5 service. It helps handle the details of submitting randomness requests, managing gas limits, and other settings for the VRF process.

In this context, it ensures that the lottery can request random numbers with parameters like gas limits and request confirmations, and securely retrieve those numbers from Chainlink’s nodes.

  import "lib/chainlink-brownie-contracts/contracts/src/v0.8/dev/vrf/VRFConsumerBaseV2Plus.sol";
    import "lib/chainlink-brownie-contracts/contracts/src/v0.8/dev/vrf/libraries/VRFV2PlusClient.sol";

State variables

vrfCoordinator: The address of the Chainlink VRF coordinator, which is responsible for handling the random number request.

s_subscriptionId: Chainlink VRF subscription ID, which allows the contract to fund and receive VRF services.

keyHash: A unique identifier for the VRF key associated with the subscription.

requestConfirmations, callbackGasLimit, numWords: These parameters specify how the Chainlink VRF will handle the random number request, including the number of confirmations, gas limits, and words (numbers) returned.

lotteryId: Tracks the current lottery being managed by the contract.

       address vrfCoordinator = 0x9DdfaCa8183c41ad55329BdeeD9F6A8d53168B1B;
        uint256 s_subscriptionId;
        bytes32 keyHash = 0x787d74caea10b2b357790d5b5247c2f63d1d91572a9846f780606e4d953677ae;
        uint16 requestConfirmations = 3;
        uint32 callbackGasLimit = 100000;
        uint32 numWords = 1;
        uint256 public lotteryId = 0;

Lottery Struct

The Lottery struct models the data for each individual lottery, including:

LotteryId: A unique identifier for each lottery.
players: An array that stores the addresses of participants.
entryFee: The amount of ETH required to enter the lottery.
winner: The address of the randomly selected winner.
lotteryStartTime and lotteryEndTime: The timestamps for when the lottery starts and ends.
s_requestId: The request ID associated with the Chainlink VRF service call for random number generation.
creator: The address of the user who created the lottery.

 struct Lottery {
            uint256 LotteryId;
            address[] players;
            uint256 entryFee;
            address winner;
            uint256 lotteryStartTime;
            uint256 lotteryEndTime;
            uint256 s_requestId;
            address creator;
        }

Events

Events are used to log significant occurrences within the contract. In this contract, the following events are defined:

LotteryCreated: Emitted when a new lottery is created.

LotteryEntered: Emitted when a player enters the lottery.

WinnerPicked: Emitted when a winner is selected.

RequestFulfilled: Emitted when a random number request is fulfilled by Chainlink VRF.

        event LotteryCreated(uint256 indexed lotteryId);
        event LotteryEntered(address indexed player);
        event WinnerPicked(address indexed winner);
        event RequestFulfilled(uint256 requestId, uint256[] randomWords);

Mappings

Mappings are used for key-value storage in Solidity. This contract uses mappings for:

idToLottery: Maps a lottery ID to the corresponding Lottery struct, allowing the contract to manage multiple lotteries at once.
RequestIdToId: Maps the Chainlink VRF request ID to the specific lottery ID, ensuring that the random number returned is linked to the correct lottery.


       // Mapping
        mapping(uint256 => Lottery) public idToLottery;
        mapping(uint256 => uint256) public RequestIdToId;

Constructor

The constructor is called once when the contract is deployed. It initializes the Chainlink VRF subscription ID and sets up the necessary configurations for interacting with Chainlink’s random number service.

     constructor(uint256 subscriptionId) VRFConsumerBaseV2Plus(vrfCoordinator) {
            s_subscriptionId = subscriptionId;
        }

Core Functions

createLottery

This function allows users to create a new lottery. The creator specifies the entry fee, start time, and end time. This function stores the relevant details in the idToLottery mapping.

    // Create a Lottery
        function createLottery(uint256 entryFee, uint256 startTime, uint256 endTime) public payable {
            idToLottery[lotteryId].LotteryId = lotteryId;
            idToLottery[lotteryId].entryFee = entryFee;
            idToLottery[lotteryId].lotteryStartTime = startTime;
            idToLottery[lotteryId].lotteryEndTime = endTime;
            idToLottery[lotteryId].creator = msg.sender;
            emit LotteryCreated(lotteryId);
            lotteryId++;
        }

enterLottery

This function allows users to participate in a lottery by paying the required entry fee. This function checks if the lottery is ongoing and if the correct amount of ETH is provided before adding the player to the list of participants.

    // Enter the lottery by paying the entry fee
        function enterLottery(uint256 id) public payable {
            require(id < lotteryId, "Lottery does not exists");
            require(idToLottery[id].lotteryStartTime < block.timestamp, "Lottery still ongoing");
            require(idToLottery[id].lotteryEndTime > block.timestamp, "Lottery has ended");
            require(msg.value >= idToLottery[id].entryFee, "Not enough ETH to enter");
            idToLottery[id].players.push(msg.sender);
            emit LotteryEntered(msg.sender);
        }

DrawLotteryWinner

This function is used to initiate the process of selecting a winner once the lottery has ended. This function calls Chainlink VRF’s requestRandomWords to get a random number.

  function DrawLotteryWinner(uint256 id) external returns (uint256 requestId) {
            require(msg.sender == idToLottery[id].creator, "Only Lottery creator can draw lottery");
            require(idToLottery[id].lotteryEndTime < block.timestamp, "Lottery still ongoing");
            requestId = s_vrfCoordinator.requestRandomWords(
                VRFV2PlusClient.RandomWordsRequest({
                    keyHash: keyHash,
                    subId: s_subscriptionId,
                    requestConfirmations: requestConfirmations,
                    callbackGasLimit: callbackGasLimit,
                    numWords: numWords,
                    extraArgs: VRFV2PlusClient._argsToBytes(VRFV2PlusClient.ExtraArgsV1({nativePayment: false}))
                })
            );
            RequestIdToId[requestId] = id;
            return requestId;
        }

fulfillRandomWords
This internal function is triggered automatically when Chainlink VRF returns the random number. It calculates the winner by taking the modulo of the random number and the number of participants, to ensure fairness.

  function fulfillRandomWords(uint256 _requestId, uint256[] memory _randomWords) internal override {
            uint256 id = RequestIdToId[_requestId];
            uint256 winnerIndex = _randomWords[0] % idToLottery[id].players.length;
            idToLottery[id].winner = idToLottery[id].players[winnerIndex];
            emit RequestFulfilled(_requestId, _randomWords);
        }

withdrawWinnings

This function allows the winner to withdraw the prize, which is the total of all the entry fees pooled together.

   function withdrawWinnings(uint256 id) public {
            require(msg.sender == idToLottery[id].winner, "You are not the winner");
            address payable winner = payable(idToLottery[id].winner);
            uint256 amount = idToLottery[id].players.length * idToLottery[id].entryFee;
            (bool sent, bytes memory data) = winner.call{value: amount}("");
            require(sent, "Failed to send Ether");
        }

Project Setup and Installation For React.js

Run the command below and follow the prompt to initiate a React project, we will be using react.js to build the frontend for the Lottery App.

 npm create vite@latest

Install the necessary dependencies.

  npm install npm install ethers react-toastify

App.js Overview

Imports

App.css - contains styling for the components.
lotteryABI - The JSON files contain the ABI (Application Binary Interface) definitions of the smart contracts, which is necessary for interacting with the contracts via ethers.js.
ethers.js - A JavaScript library that allows interactions with the Ethereum blockchain. It is used to create contract instances, send transactions, and interact with smart contracts.

    import './App.css'
    import { ethers } from "ethers";
    import lotteryABI from "../abi/lottery.json";

State, UseEffect and Refs

They are used to manage state and refer to user input. The lottery data (list, gId, lot, winner, etc.) is stored in state, while useRef references HTML input elements like the start and end time for lotteries.

The useEffect is used to triggers the retrieval of past lottery data (getLastLottery) and fetches real-time information whenever the user changes the selected lottery ID.

     const startRef = useRef();
      const endRef = useRef();
      const entryRef = useRef();
      const selectRef = useRef();
      const selectRef2 = useRef();
      const selectRef3 = useRef();

      const [list, setList] = useState([]);
      const [gId, setGID] = useState(0);
      const [gId2, setGID2] = useState(0);
      const [lot, setLot] = useState({});
      const [winner, setWinner] = useState("0x");

     useEffect(() => {
        getlastLottery();
        getLottery();
        getWinner();
      }, [gId, gId2]);

Smart Contract Interaction

createWriteContract

This function sets up a connection to the contract via a Web3 provider using the current user's wallet (Metamask), allowing them to interact with the contract in a writable (state-changing) manner.

  const createWriteContract = async () => {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = await provider.getSigner();
        const priceContract = new ethers.Contract(lotteryAddress, lotteryABI.abi, signer);
        return priceContract;
      }

createGetContract

This function creates a read-only connection to the contract, enabling the frontend to fetch data from the blockchain without altering its state.

   const createGetContract = async () => {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum)
        const priceContract = new ethers.Contract(lotteryAddress, lotteryABI.abi, provider);
        return priceContract;
      }

createLottery

The createLottery function allows users to create a new lottery by providing three inputs: the entry fee, start date, and end date. These values are captured from the input fields, converted to appropriate formats (e.g., Ether to Wei for the entry fee and UNIX timestamps for dates), and then sent to the smart contract. The blockchain transaction is processed asynchronously, with real-time feedback provided to the user using react-toastify notifications.

const createLottery = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContract();
        const id = toast.loading("Creating Lottery....");
        try {
          const start = Math.floor(new Date(startRef.current.value).getTime() / 1000);
          const end = Math.floor(new Date(endRef.current.value).getTime() / 1000);
          const entry = ethers.utils.parseEther(entryRef.current.value);
          const tx = await contract.createLottery(entry, start, end);
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };

getlastLottery

This function fetches the total number of lotteries created by querying the smart contract’s lotteryId() function and updates the state with the list of lotteries available for selection. Each lottery is displayed as an option in a dropdown menu.

const getlastLottery = async () => {
        const contract = await createGetContract();
        const lotteryCount = await contract.lotteryId();
        let arr = [];
        for (let i = 0; i < Number(lotteryCount); i++) {
          arr.push({ lotteryId: i, lotteryName: "Lottery " + i })
        }
        setList(arr);
      };

getLottery

This function fetches details (start time, end time, entry fee) of the currently selected lottery from the blockchain using its ID (gId).

 const getLottery = async () => {
        const contract = await createGetContract();
        const lottery = await contract.idToLottery(gId);
        let obj = {
          startTime: Number(lottery.lotteryStartTime),
          endTime: Number(lottery.lotteryEndTime),
          entryFee: Number(lottery.entryFee),
        }
        setLot(obj);
      };

getWinner

The lottery winner is determined through the smart contract, which uses Chainlink's Verifiable Random Function (VRF) for randomness. Once a lottery is concluded, users can check the winner by selecting a lottery ID (gId2), and the winner’s Ethereum address is fetched from the blockchain using the contract’s idToLottery() function.

 const getWinner = async () => {
        const contract = await createGetContract();
        const lottery = await contract.idToLottery(gId2);
        setWinner(lottery.winner);
      };

withdrawWinning

Winners can withdraw their earnings using the withdrawWinning function, which interacts with the smart contract’s withdrawWinnings() function. The user's wallet signs the transaction, and upon success, the winnings are transferred to the winner’s account.

 const withdrawWinning = async (evt) => {
        evt.preventDefault();
        const contract = await createWriteContract();
        const id = toast.loading("Withdrawing....");
        try {
          const tx = await contract.withdrawWinnings(selectRef3.current.value);
          await tx.wait();
          setTimeout(() => {
            window.location.href = "/";
          }, 10000);
          toast.update(id, {
            render: "Transaction successfull",
            type: "success",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        } catch (error) {
          console.log(error);
          toast.update(id, {
            render: `${error.reason}`,
            type: "error",
            isLoading: false,
            autoClose: 10000,
            closeButton: true,
          });
        }
      };

Frontend UI

The UI is divided into four main sections:

Create Lottery: Users can input the entry fee, start date, and end date for a new lottery, which is then created on the blockchain.
Enter Lottery: Displays the available lotteries, including details like entry fees, start and end dates, fetched from the smart contract and users can participate in a lottery.
Check Winner: After selecting a lottery, users can see the address of the winner for concluded lotteries.
Withdraw Winnings: If the user is the winner, they can withdraw their winnings by selecting the appropriate lottery and initiating the withdrawal process.

Conclusion

This tutorial demonstrates how to build a lottery app with solidity, chainlink VRF 2.5 and react.js. This guide covers the essential components of creating a secure and transparent lottery system by integrating smart contracts, randomness via Chainlink VRF (Verifiable Random Function), and a responsive user interface with React.js.

Solidity enables you to write the smart contract logic that governs the lottery, ensuring fairness and immutability. Chainlink VRF guarantees a tamper-proof randomness source for selecting winners, ensuring that no entity, including developers, can influence the outcome.

React.js offers an intuitive interface for users to interact with the smart contract, submit transactions, and retrieve data in real time. Using ethers.js to bridge the blockchain with the frontend, users can seamlessly participate in the lottery, check results, and withdraw winnings.