How to Build a Transparent and Secure Lottery DApp with NextJs, Solidity, and CometChat
Tags: web3, nextjs, dapp, cometchat
Published: 2023-04-12 21:49:23

What you will be building, see the [live](https://web3-dappbnb.web.app/) [demo](https://dapplottery.vercel.app/) and the [git repo](https://github.com/Daltonic/dapplottery).

![Purchasing a Ticket](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681335351201_DappLottery+Ticket+Purchase.gif)

![CometChat One-to-many chat](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681335403178_DappLottery+Chat+View.gif)

# Introduction

If you're looking to build a cutting-edge decentralized application that combines the power of blockchain technology, real-time communication, and user-generated content, then this tutorial on building a Lottery DApp with NextJs, Solidity, and [**CometChat**](https://try.cometchat.com/oj0s7hrm5v78) is for you. 

Whether you're an experienced developer or just starting out, this step-by-step guide will walk you through the process of creating a fair and transparent lottery system on the blockchain. So why not start building your own Lottery DApp today and disrupt the traditional gambling industry? 

And if you're interested in learning more about Web3 development, don't forget to [**subscribe to my YouTube channel**](https://www.youtube.com/@dappmentors?sub_confirmation=1) and [**check out my premium web3 content and services**](https://dappmentors.org/).

Now, let’s jump into this tutorial.


## Prerequisites

You will need the following tools installed to build along with me:


- Nodejs (Important)
- EthersJs
- Hardhat
- Redux toolkit
- Yarn
- Metamask
- NextJs
- Tailwind CSS
- CometChat SDK

To set up your Metamask for this project, I recommend that you can watch the video below.


{% embed https://www.youtube.com/watch?v=texAhgmqcps %}



## Installing Dependencies

Clone the starter kit and open it in VS Code using the command below: 


    git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
    cd <PROJECT_NAME>


{% gist https://gist.github.com/Daltonic/c53d1b279ada26fd480dadefe0791a67 %}


Now, run `**yarn install**`  on the terminal to have all the dependencies for this project installed.


## Configuring CometChat SDK

Follow the steps below to configure the [**CometChat SDK**](https://try.cometchat.com/oj0s7hrm5v78); at the end, you must save these keys as an environment variable.

**STEP 1:**
Head to [**CometChat**](https://try.cometchat.com/daltonic) Dashboard and create an account.

![Register a new CometChat account if you do not have one](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681309764225_Screenshot+2023-04-12+at+3.29.17+PM.png)


**STEP 2:**
Log in to the [**CometChat**](https://try.cometchat.com/daltonic) dashboard, only after registering.


![Log in to the CometChat Dashboard with your created account](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681309812176_Screenshot+2023-04-12+at+3.30.06+PM.png)


**STEP 3:**
From the dashboard, add a new app called **Dapp****Lottery.**


![Create a new CometChat app - Step 1](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681310398372_Screenshot+2023-04-12+at+3.39.28+PM.png)

![Create a new CometChat app - Step 2](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681310434828_Screenshot+2023-04-11+at+10.12.01+AM.png)



**STEP 4:**
Select the app you just created from the list.

![Select your created app](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681311094560_Screenshot+2023-04-12+at+3.49.52+PM.png)



**STEP 5:**
From the Quick Start copy the `APP_ID`, `REGION`, and `AUTH_KEY`, to your `.env.local` file. See the image and code snippet.

![Copy the the APP_ID, REGION, and AUTH_KEY](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681310795240_Screenshot+2023-04-11+at+10.12.41+AM.png)



Replace the `REACT_COMET_CHAT` placeholder keys with their appropriate values.


    REACT_APP_COMETCHAT_APP_ID=****************
    REACT_APP_COMETCHAT_AUTH_KEY=******************************
    REACT_APP_COMETCHAT_REGION=**

The `.env.local` file should be created at the root of your project.


## Configuring the Hardhat script

At the root of this project, open the `hardhat.config.js` file and replace its content with the following settings.


{% gist https://gist.github.com/Daltonic/9835ea96de898ed417acc446aa746922 %}


The above script instructs hardhat on these two important rules.


- **Networks**: This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts.


- **Solidity**: This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into `bytecodes` and `abi`.


## Configuring the Deployment Script

Navigate to the scripts folder and then to your `deploy.js` file and paste the code below into it. If you can't find a script folder, make one, create a **deploy.js** file, and paste the following code into it.


{% gist https://gist.github.com/Daltonic/5c3c5bb137549729d9ba374d15737741 %}


When run as a Hardhat deployment command, the above script will deploy your specified smart contract to the network of your choice.

If you are struggling with a low spec computer, or you want to do some web3 coding on the fly, check out this video to learn how to properly set up a web3 project with Gitpod.


{% embed https://www.youtube.com/watch?v=SZcYfZ6GY7I %}

## The Smart Contract File

Now that we've completed the initial configurations, let's create the smart contract for this project. Create a new folder called `**contracts**` in your project's root.

Create a new file called `**Dapp**``**Lottery.sol**` within this contracts' folder; this file will contain all the logic that governs the smart contract. 

Copy, paste, and save the following codes into the `**Dapp**``**Lottery.sol**` file. See the complete code below.


{% gist https://gist.github.com/Daltonic/7168988d836d3260cba8deb9d19325d4 %}


I have a book to help you master the web3 language (Solidity), [**grab your copy here**](https://dappmentors.org/links/zewcyq).


![Capturing Smart Contract Development](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679056023593_0b_CDn4V.png)


Now, let's go over some of the details of what's going on in the smart contract above. We have the following items:

This is a Solidity smart contract named "DappLottery" that enables the creation of a lottery where users can purchase tickets and participate in a chance to win a prize. The smart contract has several functions that perform different tasks:


1. `**Ownable**`: This is an imported contract from OpenZeppelin that provides a basic access control mechanism to restrict access to certain functions to the contract owner only.
    
2. `**Counters**`: This is an imported contract from OpenZeppelin that provides a way to keep track of the total number of lotteries created.
    
3. `**LotteryStruct**`: This is a struct that defines the properties of a lottery, such as `**id**`, `**title**`, `**description**`, `**image**`, `**prize**`, `**ticketPrice**`, `**participants**`, `**drawn**`, `**owner**`, `**createdAt**`, and `**expiresAt**`.
    
4. `**ParticipantStruct**`: This is a struct that defines the properties of a participant, such as `**account**`, `**lotteryNumber**`, and `**paid**`.
    
5. `**LotteryResultStruct**`: This is a struct that defines the properties of a lottery result, such as `**id**`, `**completed**`, `**paidout**`, `**timestamp**`, `**sharePerWinner**`, and an array of `**winners**`, which are of type `**ParticipantStruct**`.
    
6. `**servicePercent**` and `**serviceBalance**`: These are state variables that represent the percentage of service fee charged per lottery and the total balance earned from service fees, respectively.
    
7. `**lotteries**`, `**lotteryParticipants**`, `**lotteryLuckyNumbers**`, `**luckyNumberUsed**`, and `**lotteryResult**`: These are mappings used to store and retrieve data related to lotteries, their participants, lucky numbers, lottery results, and whether a lucky number has been used.
    

The following are the functions provided by this smart contract:


1. `**constructor(uint256 _servicePercent)**`: This is the constructor function that initializes the `**servicePercent**` variable with the percentage of service fee charged per lottery.
    
2. `**createLottery()**`: This function allows the creation of a new lottery with a `**title**`, `**description**`, `**image**`, `**prize**`, `**ticketPrice**`, and `**expiresAt**`. It also checks for some conditions before creating the lottery such as ensuring that the `**title**`, `**description**`, and `**image**` are not empty, `**prize**` and `**ticketPrice**` are not zero, and `**expiresAt**` is in the future.
    
3. `**importLuckyNumbers()**`: This function allows the owner of a lottery to import a list of `**luckyNumbers**` that will be used to select the winners of the lottery. It checks for some conditions before importing the list, such as ensuring that the `**luckyNumbers**` are not empty, and that the lottery does not have any participants yet.
    
4. `**buyTicket()**`: This function allows users to buy tickets for a lottery by specifying the `**id**` of the lottery and the `**luckyNumberId**` they want to use. It checks for some conditions before allowing the purchase, such as ensuring that the lucky number has not been used before and that the user has provided enough funds to purchase the ticket.
    
5. `**randomlySelectWinners()**`: This function selects the winners of a lottery randomly from the list of participants using the Fisher-Yates algorithm. It checks for some conditions before selecting the winners, such as ensuring that the lottery has not been completed, and that the number of winners selected does not exceed the number of participants.
    
6. `**payLotteryWinners()**`: This is an internal function that pays out the winners of a lottery by calculating the share of the prize each winner is entitled to, and then transferring the appropriate amount of funds to each winner's account.

Overall, this smart contract provides a simple and secure way to create and manage lotteries on the Ethereum blockchain. It ensures transparency and fairness in the selection of winners, and automates the payment process to reduce the risk of fraud or errors.

Next, run the commands below to deploy the smart contract into the network.


    yarn hardhat node # Terminal #1
    yarn hardhat run scripts/deploy.js # Terminal #2


![Activities of Deployment on the Terminal](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681314007681_0RFvAh6Q.png)


If you need further help to configure Hardhat or deploying your Fullstack DApp, watch this video. It will teach you how to do an Omini-chain deployment.


{% embed https://www.youtube.com/watch?v=BlTdsNFCsQY %}

## Developing the Frontend

Now that we have our smart contract on the network and all of our artifacts (bytecodes and ABI) generated, let's get the front end ready with React.


## Components

In the root directory, create a new folder called `**components**` to house all the NextJs components for this project. *For each one of the components below, you will have to create their respective files in the components' folder.*


## Header and Sub-header components
![Header Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681314331031_Screenshot+2023-04-12+at+4.45.26+PM.png)

![Sub-header Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681314451853_Screenshot+2023-04-12+at+4.47.27+PM.png)


This component contains the logo, dummy navigational elements, and a connect wallet button, see the code below.


{% gist https://gist.github.com/Daltonic/0ab3c49ed7af33359a8b03560b2cab12 %}


Within the component's folder, create two files, `Header.jsx` and `SubHeader.jsx` respectively, and paste the above codes into it.


## Jackpots Component
![Jackpot component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681321755550_Screenshot+2023-04-12+at+6.48.57+PM.png)


This component was built to display the cards in grid view, as can be seen in the image above, see the codes below to understand how to recreate it.


{% gist https://gist.github.com/Daltonic/9c50a3e54b3eb69f3c5548143e1eb76c %}



## Countdown Component
![Countdown Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681322139412_Screenshot+2023-04-12+at+6.55.35+PM.png)


This component accepts a timestamp and renders a countdown that counts from days to seconds. See the codes below.


{% gist https://gist.github.com/Daltonic/079e7a012145d8f06aa7f1cb17870b90 %}

## Draw Time Component
![The Draw Time Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681322468350_Screenshot+2023-04-12+at+7.01.04+PM.png)


This component displays the details of a lottery, some buttons to generate lottery numbers, create group chat with, see the lottery result page, and login to the chat interface. Lastly, it contains a table to render all generated lottery numbers. See the codes below.


{% gist https://gist.github.com/Daltonic/329e81961d5cf2dca22e7322354663aa %}

## Generator Component
![The Generator Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681322906269_Screenshot+2023-04-12+at+7.08.21+PM.png)


This component helps us to generate and send a specific number of strings to the smart contract. These generated numbers will then be put on display for users to buy as tickets for participating in the lottery. See the code snippet below.


{% gist https://gist.github.com/Daltonic/1cac8d0343748372c7f41fbf60d2d599 %}

## Auth Chat Component
![The Chat Authentication Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681323273039_Screenshot+2023-04-12+at+7.14.29+PM.png)


This component authenticates users before they can chat with our platform. The [CometChat](https://try.cometchat.com/oj0s7hrm5v78) SDK is used here under the hood to perform an authentication with the connected user's wallet. See the code below.


{% gist https://gist.github.com/Daltonic/8acce3de74be6a9da7d6ce7793e96fdb %}



## Chat Component
![The Chat Interface](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681323777520_Screenshot+2023-04-12+at+7.22.52+PM.png)


This component utilizes the CometChat SDK to perform anonymous one-to-many chat among all authenticated users who have also joined the group. Here is the code for its implementation.


{% gist https://gist.github.com/Daltonic/3b3c8a4981cd4e6fb02fad197b170e6a %}



## Winners Component
![The Winners Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681324552153_Screenshot+2023-04-12+at+7.35.49+PM.png)


This component is activated when the perform draw button is clicked. It allows you to enter the number of winners you want. See the snippet below.


{% gist https://gist.github.com/Daltonic/f18ddf6455a19b7c3cf73c914b541408 %}



## Result Component
![The Result Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681324095322_Screenshot+2023-04-12+at+7.28.10+PM.png)


Almost as similar as the Draw time component, this component displays some statistics about the just concluded lottery, the winners and the losers, what the winners took home, and what the losers lost. The component also includes a button to perform the draw, which is only enabled once the countdown is at zero. See the coded implementation below.


{% gist https://gist.github.com/Daltonic/bc8cc89b57a5891a2e8effb53bb9324e %}



## CometChatNoSSR Component

This is a special component created to help us load the CometChat module to the browsers window since NextJs is a server side rendering framework. See the code below.


{% gist https://gist.github.com/Daltonic/74571a6b1f49f3056454c4f43971618f %}


Here is a free full video tutorial that can watch to help you learn how to build a decentralized NFT minting platform on [**my YouTube channel**](https://www.youtube.com/@dappmentors?sub_confirmation=1).


{% embed https://www.youtube.com/watch?v=QN3wb_mXBjY %}

## The Pages Components

In this section, let’s go through all the codes that makes for each one of the pages in this project. *Please take not that these various pages must be created in the pages folder in the root directory of your project.*


## Home Page
![The Home Page Component](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681325107750_Screenshot+2023-04-12+at+7.45.03+PM.png)


This page contains the Header and Jackpots components, take a look at its simple implementation below. It uses a SSR (Server Side Rendering) technique to retrieve all lotteries from the blockchain without requiring a user to connect their wallet or be on a specifc chain.


{% gist https://gist.github.com/Daltonic/708dd22c8755e4896c9a989ac69421b6 %}

## Create Lottery Page
![Create Lottery Page](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681325474281_Screenshot+2023-04-12+at+7.51.10+PM.png)


This page enables a user create to a lottery, of course, it collects information about the lottery such as the lottery title, description, image url, prize to be won, ticket cost, and the expiration data for the lottery. It is important to note that for creating a lottery, a user’s wallet must be connected and and the right chain/network. See the code below. 


{% gist https://gist.github.com/Daltonic/0d15c149e6a70fb4a24cc4b78659700a %}



## The Jackpots Page
![The Jackpots Page](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681326119917_Screenshot+2023-04-12+at+8.01.55+PM.png)


Listen up, the way you create this page is quite different as to how the other pages have been created since its a dynamic component.

First, create a folder called `jackpots` inside the pages directory. Next, create a file called `[jackpotId].jsx` exactly in this format just created and paste the codes below inside of it. See the codes below.


{% gist https://gist.github.com/Daltonic/5fccc6632952e32b15f1bc9b6d56ede1 %}


Again, this page as the Home page utilizes the NextJs server side rendering technique to retrieive the lottery information from the chain without requiring users to login with their wallet address.


## The Results Page
![The Results Page](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681326879917_Screenshot+2023-04-12+at+8.14.35+PM.png)


This page like the Jackpots page uses the NextJs dynamic routing technique to see the result for each one of the lottery. Head to the pages directory and create a folder called `jackpots` , inside of this new folder create a file in this format called `[resultId].jsx` and past the codes below inside and save.


{% gist https://gist.github.com/Daltonic/4d63e7f5869379d9dfe496155dd0151a %}



## The _app.tsx file

This is an entry file that comes pre-configured with NextJs which you will find within the pages folder of your project. Open it and replace its codes with the one below.


{% gist https://gist.github.com/Daltonic/403bb67952fc7f831385dcff78310879 %}



## State Management Files

Now, it must be brought to your notice that this project uses the redux-toolkit package to keep the shared data used across this application in a central location. Follow the steps below to replicate. Before proceeding to the step below, create a folder at the root of this project called `store` and create the following file within it.

**Redux States** 
This file will help us keep together all the states of the variables we are using in this application together. Within this **store** directory create another folder called `states` and inside of it create a file called `global_states.js` and paste the codes below inside and save. 


{% gist https://gist.github.com/Daltonic/fff1a3ffb690e909813f9079411a40ff %}


**Redux Actions**
Next, create another folder in the **store** directory called `actions` and inside of it create a file called `global_actions.js` and paste the codes below inside and save. 


{% gist https://gist.github.com/Daltonic/e7efdfa4d8b4a595c89c494334ea6f14 %}


**Redux Reducer**
Let’s create a ruducer or a redux slice that will help us manage everything that has to do with out global states and actions recently created. Within the `store` folder, create a file named `global_reducer.js` and save. See the codes below.


{% gist https://gist.github.com/Daltonic/bb93acff7f9898fdb3de68b04eeb7606 %}


Lastly, let’s bundle up and help us manage all the reducers/slices in our store. Within this store folder create another file named `index.js`, paste the codes below inside of it and save.


{% gist https://gist.github.com/Daltonic/9a0b4f2bd4aa5ffe34124c3085f215d5 %}


We can include as many reducers as possible here in this `store/index` file.


## Services

We have three services used here in this application which you will create in a folder called `services` in the root of this project. 

The blockchain, blockchain.ssr, and the chat services. The blockchain services deals with all functions that sends information to our smart contract, while the blockchain ssr file reads data stored in our smart contract. This is extremely important and it ssr file ensures that we can retrieve data from the blockchain without needing to first connect our wallet to Metamask. 

We also have a chat service which helps us communicate with the CometChat SDK. See the codes below and be sure to create each one of these files in the **services** folder.


{% gist https://gist.github.com/Daltonic/a083fa992dde823f712d10b343a790d1 %}


Fantastic, now let’s include the essential assets used in this project.


## Static Assets

At the root off your application, create a folder called `assets`, download the images found in [this location](https://github.com/Daltonic/dapplottery/tree/main/assets) and store them in the assets directory. 

Also, don’t forget to instruct NextJs to allow your application to load images from any location. At the root of your application, create a file named `next.config.js` and paste the code below in it and save.


{% gist https://gist.github.com/Daltonic/9cc4046a44918031bf7baff3d5d08a6b %}


And there you have it, congratulations you have successfully created a web3 lottery app, you just need to run the following commands on your terminal to see it live on your browers.


    yarn dev #terminal 2

The two commands above will spin up your project online and can be visited on the browser on **localhost:3000**.

If you're confused about web3 development and want visual materials, [**get my Fullstack NFT Marketplace and Minting courses**](https://dappmentors.org/links/uyvexy).


![Fullstack NFT Minting (Course)](https://firebasestorage.googleapis.com/v0/b/fir-cdeeb.appspot.com/o/Dapp%20Mint%20Photo.png?alt=media&token=57ca0d08-c91c-4877-b1b2-ff90dfc73ee5)


Take the first step towards becoming a highly sought-after smart contract developer by enrolling in my courses on NFTs Minting and Marketplace. [**Enroll now and let's embark on this exciting journey together!**](https://dappmentors.org/)

## Conclusion

To conclude, this technology presents an exciting opportunity to revolutionize the traditional gambling industry. 

The use of blockchain technology ensures transparency, security, and immutability in the lottery system, while also eliminating the need for intermediaries. This tutorial on building a Lottery DApp with NextJs, Solidity, and CometChat is a valuable resource for developers who want to create cutting-edge decentralized applications. 

By following the step-by-step guide, we have learned how to create a fair and transparent lottery system on the blockchain. So why not start building your own Lottery DApp today and disrupt the traditional gambling industry? Don't forget to subscribe to the YouTube channel.

See you next time!


## About the Author

Gospel Darlington is a full-stack blockchain developer with `7+` years of experience in the software development industry.

By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks.

His stacks include `JavaScript`, `React`, `Vue`, `Angular`, `Node`, `React Native`, `NextJs`, `Solidity`, and more.

For more information about him, kindly visit and follow his page on [Twitter](https://twitter.com/idaltonic), [Github](https://github.com/Daltonic), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125), or his [website](https://daltonic.github.io/).