In this tutorial, we will learn how to create an NFT lottery smart contract along with a front-end to let the user buy the tickets.<h2 style="margin-left:0px;">Step 1: Developing the NFT lottery Smart Contract</h2>To create the smart contract, we need to define a few common properties of the lotteries, such as start_time, end_time, ticket price, and the contract address and tokenId of the NFT. We can store these details as follows:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*wC5eu-1LeKM7X8bwqEwRvA.png" alt="" loading="lazy"></figure>We then need to create a function for users to start a lottery. This function should take the user’s NFT address, start and end times, and ticket price, and transfer the NFT from the user to the lottery contract. as follows.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*Rt_ODj8a5iV2gL3fmG8blQ.png" alt="" loading="lazy"></figure>We also need to create a function for users to buy a ticket for the NFT lottery.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*XwIH5v7AfhukGr4Mc6tXQA.png" alt="" loading="lazy"></figure>Since blockchains are not self-executing, we need to create a function to end the lottery. We first check that we have reached the end time for the lottery, then use a random function to generate a number to determine the winner of the NFT. The NFT is then transferred to the winner, and the creator of the lottery receives the total payout that is paid by the participants.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*kosatJEle2Oe7etos65ufA.png" alt="" loading="lazy"></figure>Putting everything together here final smart contract:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*X6-N58__jx3NyqWCNaGMqA.png" alt="" loading="lazy"></figure>For any smart contract to receive NFTs, it has to inherit the ERC712Holder.sol contract as shown above.<h2 style="margin-left:0px;">Step 2: Getting up the infra needed to deploy and test our smart contract</h2>Most commonly public Testnet such as the Goreli, and Sepolia Testnet are used for projects. However, we will be using Buildbear to create our own Testnet, as one of our users recently shared their win at EthDenver using BuildBear. You can read their article <a href="https://medium.com/@thomas_90087/a-thank-you-to-buildbear-5873b8394da5">here</a>2.1. Visit the <a href="https://buildbear.io/">BuildBear App</a>. Once you login with your Github or Google Account, you will see a page similar to the image added below:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*mTUhvnUzZJPwfpk_hPVRfg.png" alt="" loading="lazy"></figure>2.3. Create your private node forking from the Ethereum Mainnet, feel free to fork any Chain where you own an NFT so that we don’t need to redeploy any NFT smart contract while creating a lottery.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*MtjhFs9GG7gctvLR7F_yKQ.png" alt="" loading="lazy"></figure>2.4. Add your Private Testnet to your MetaMask wallet by using the “Add to Metamask” button:<figure class="image image_resized" style="width:615.994px;"><img src="https://miro.medium.com/v2/resize:fit:621/1*5excYtbQuYyPgmQ0U461jw.png" alt="" loading="lazy"></figure>2.5. Click on Open Faucet you will be redirected to Faucet Pages, and then Mint native Tokens to pay for gas for the transactions.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*MbjoKtSqVCU-wB7s6MPaZw.png" alt="" loading="lazy"></figure><h2 style="margin-left:0px;">Step 3: Deploying the Smart Contract</h2>For contract deployment, we will be using Remix.3.1. Navigate to the <a href="https://remix.ethereum.org/">Remix Online IDE</a> website and accept the terms and conditions.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*jRVGQTBBHSVTda8kySVgMQ.png" alt="" loading="lazy"></figure>3.2. Create a new contract and paste the Smart Contract Code, available over here 👉 <a href="https://github.com/BuildBearLabs/Tutorials/blob/main/nftlottery/NFTLottery.sol">GitHub Link</a>3.3. Compile the Smart Contract.<figure class="image image_resized" style="width:355.996px;"><img src="https://miro.medium.com/v2/resize:fit:359/1*k6MuRv2BzTdAi6WV86TZYg.png" alt="" loading="lazy"></figure>Please note that the ABI of the Contract is available only once the Contract is compiled. You can see in the above image the ABI which can be copied. Please keep this handy. We will need it momentarily.3.4. Select the “Deploy and Run Transactions” tab: and deploy the contract as follows:<figure class="image image_resized" style="width:442.987px;"><img src="https://miro.medium.com/v2/resize:fit:447/1*fPuq6GTgtvAqO7gob3t-Hw.png" alt="" loading="lazy"></figure><ul><li>Make sure that you update the Environment to “Injected provider — MetaMask” | CRITICAL,</li></ul>3.5. Click on the “transact” button to deploy the contract to your private node network; once done, you will see something similar to the following:<figure class="image image_resized" style="width:375px;"><img src="https://miro.medium.com/v2/resize:fit:378/1*jrcmr1NnEYM1uJRZrF7Cug.png" alt="" loading="lazy"></figure>3.6. Copy the address of the Contract and visit the Blockchain Explorer for your personal forked Testnet (link available on the dashboard page at <a href="http://home.buildbear.io/">home.buildbear.io</a>) and locate your contract.3.6.1. Submitting the ABI of the contract for ease of interactionYou can visit your contract page on BuildBear’s Blockchain Explorer and then visit the Contract tab. You should see something similar to the following:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*-K2A2alqQ4L0ty3-mPr8TQ.png" alt="" loading="lazy"></figure>Submit the ABI that we copied from Step 3.3; once done, you should see the Read and Write Contract buttons made available to you on the Contract Page:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*Bpt17gT9Yt4ZOp1e5ffv7Q.png" alt="" loading="lazy"></figure>WOOT WOOT 🎉 🎉Let’s create a lotteryMove to the Write contract section and connect your wallet, enter the details lottery id, start time, end time, (Use <a href="https://www.epochconverter.com/">https://www.epochconverter.com/</a> to get in the epoch time)NFT contract address, NFT ID, and ticket price. and click on write.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*vjTD6fVP_oeYRO1e_jJhiw.png" alt="" loading="lazy"></figure>After the transaction is successful move to the Read contract section and enter your lottery Id to see the Lottery details.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*OGkmEcLnY5_V6ViJSy7rlA.png" alt="" loading="lazy"></figure>Let’s move to the front-end development. we will be using Next.js<h2 style="margin-left:0px;">Step 4: Next.js App</h2>Installation and SetupThe easiest way to create a new Next.js application is by using the <code>create-next-app</code> CLI tool. You can install it via <code>npm</code>:<pre><code class="language-plaintext">$ npm install create-next-app</code></pre>Once installed, you can initialize a new Next.js application by calling the tool and supplying a name for your project:<pre><code class="language-plaintext">$ npx create-next-app nft-app</code></pre>Note: If you don’t already have <code>create-next-app</code> installed - <code>npx</code> will prompt you to install it automatically.Once the tool finished initializing a skeleton project, let’s move to the directory and take a peek inside:<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/0*3WQzYgQIm-TmIZZv.png" alt="" loading="lazy"></figure>The standard <code>package.json</code>, <code>package-lock.json</code> and <code>node_modules</code> are there, however, we've also got the <code>/pages</code>, <code>/public</code> and <code>/styles</code> directories, as well as a <code>next.config.js</code> file!Let’s take a look at what these are.Features of Next.jsNext.js is ultimately an extension for React, and it does introduce a couple of new things that make React application development simpler and faster — starting with Next.js pages.PagesNext.js makes creating multi-page applications with React ridiculously easy with its default file-system-based router. You don’t need to install any additional packages, such as <code>react-router-dom</code>, or configure a router at all.All Next.js projects include a default <code>/pages</code> directory, which is the home of all of the React components you'll be using. For each component - a router will serve a page based on that component.Next.js project setup is done<h2 style="margin-left:0px;">Step 5: Connecting our application with the blockchain and UI</h2>we need something that connects our client to one of these nodes of blockchain so they can start using the full power of the blockchain, that’s exactly what ether.js is it’s a library written in javascript that lets as create any javascript application that talks to the blockchain so we can use and create many applications which are going to be based on decentralized application (daps). It’s the bridge that essentially that takes your client and it allows it to connect to the blockchain.Ether.js Modules<ul><li>Ether.js consists of some important modules that can be used to interact with blockchain nodes easily, and get the transaction data as required. To get started with the modules of Ehter.js, let’s take an overview of all the Ether.js modules.</li><li>Ethers.Provider: In this module it lets you initialize a connection with the Ethereum blockchain, and it provides you the features to issue queries and send signed transactions. Managing the state of the blockchain is also possible through this module.</li><li>Ethers.Contract: In this module, you can deploy and interact with smart contracts, during the deployment part of smart contracts and to make it successful is part of Ethers.Contract module. It also offers some unique packs of functions that let the developer “listen” to smart contract events and after listening to the contracts you can also get information about them.</li><li>Ethers.Utils: This module lets you process the user data inputs and format them according to your requirements. Ether. utils make it easy to build decentralized applications.</li><li>Ethers.Wallet: As the name suggests it provides a way to connect to any co-existing Ethereum address to a proper wallet. It also has important features like it lets you create new wallets and also make sign transactions too.</li></ul>Installing<pre><code class="language-plaintext">npm install --save ethers</code></pre>Let’s Create a Connectwallet function that connects our application with Metmask wallet. This checks if the wallet is installed if so then MetaMask will pop up to connect.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/0*z8Y99oFywOJGx8_N.png" alt="" loading="lazy"></figure>Our focus will not be on elaborate UI design, instead, we will utilize simple HTML to present Lottery details and enable users to purchase tickets as shown below.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*ql2KC41J4xyoFCGDp5r_EQ.png" alt="" loading="lazy"></figure>To facilitate ticket purchases, we will utilize the following code. By using the ethers.contract as previously described, we can interact with the contract and initiate the participate function with the required amount of Ether for the ticket price. To execute this function, the User simply has to click the buy button.<figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*K5yyckvzug6IPH9oJfyEqQ.png" alt="" loading="lazy"></figure>Start the Website by running the cmd <code>npx run dev</code> in Your Terminal.<code>npx run dev</code><figure class="image image_resized" style="width:679.997px;"><img src="https://miro.medium.com/v2/resize:fit:706/1*HHjJLOFwqqxHSAM70UzUSQ.png" alt="" loading="lazy"></figure>We have successfully built the NFT Lottery!!! 🎉🎉🎉Share your project on Twitter and LinkedIn as tag BuildBear.If you appreciate what we are doing, please follow us on <a href="https://twitter.com/_BuildBear">Twitter</a>, and L<a href="https://www.linkedin.com/company/build-bear/">inkedIn</a> and <a href="https://t.me/+6mjOnBFUR9xjN2U1">Join the Telegram</a> group if you haven’t done yet.And please give us a clap 👏 if you like our work.About BuildBear:BuildBear is a platform for testing dApps at scale, for teams. It provides users with their own private Testnet to test their smart contracts and dApps, which can be forked from any EVM chain. It also provides a Faucet, Explorer, and RPC for testing purposes.BuildBear aims to build an ecosystem of tools for testing dApps at scale for the teams.Authors: <a href="https://twitter.com/chandan1_">Chandan</a>

lottery.png

In this tutorial, we will learn how to create an NFT lottery smart contract along with a front-end to let the user buy the tickets.

Building an NFT Lottery: Step-by-Step Guide for Creating a Smart Contract and Frontend

BUILDBEAR // TUTORIALS

Building an NFT Lottery: Step-by-Step Guide for Creating a Smart Contract and Frontend

Let’s get started then, Shall we?

Let’s get started then, Shall we?

Test DApps at Scale.