Oguzhan Peker

home
contact me

Lottery Application with React

To create a project directory, execute the following commands in the terminal.

1. sudo npm install -g create-react-app
2. create-react-app lottery-react

After the project has been created, you can launch the web server using the following command. Then, you can access it through a web browser at the address http://localhost:3000.

npm run start

To install the web3 library to the project, run the following command.

npm install web3
  • Import the Source Code

Download the source code from the provided GitHub link and save it in your project directory.

https://github.com/oguzhanpeker/lottery-react.git

  • Deploy the Contract on Sepolia Test Network

To create an API key for testing on the Sepolia network, log in or sign up at the Infura website (https://app.infura.io/) and follow the necessary steps.

To create a new API key, click on the ‘CREATE NEW API KEY’ button located on the homepage.

Choose the Ethereum Sepolia Network and copy the URL from the Infura API. Then, open the ‘deploy.js’ file in your project directory and input your API key along with your Metamask Mnemonic.

const provider = new HDWalletProvider(
  "YOUR_MNEMONIC",
  // remember to change this to your own phrase!
  "YOUR_INFURA_URL"
  // remember to change this to your own endpoint!
);
  • Deploying the Contract

Open the terminal and execute the following command.

node deploy.js

After deploying the contract, you will receive the deployed contract address and ABI. Copy both and input them into the ‘lottery.js’ file.

const address = "YOUR CONTRACT ADDRESS";
const abi = "YOUR CONTRACT ABI";
  • Running the Web Server

Open your web browser, where your Metamask wallet is installed and connect to localhost:3000.

  • Entering the Lottery

Enter the Ether amount of 0.11 for testing purposes and click the ‘Enter’ button. The Metamask wallet will appear to confirm the transaction.

Following the Metamask confirmation, the execution will take approximately 20-30 seconds, depending on the Sepolia test network traffic. Subsequently, a message stating “You have been entered!” will appear. You may then refresh the page to view the current status of the contract.

NOTE: You need to ensure that Metamask wallet which we used the MNEMONIC has enough Ether to deploy the contract. You can request 0.1 Ether daily from alchemy faucet.

Ethereum Sepolia Faucet (alchemy.com)

  • Picking a Winner

Click the ‘Pick a winner!’ button. Although no Ether is being sent to the contract, Metamask will request confirmation due to the Gas costs incurred. Once you confirm the transaction in Metamask and the transaction is executed, a message stating “A winner has been picked!” will appear.

If you refresh the page after the winner has been selected, you will notice that the contract status resets to “There are currently 0 people entered, competing to win 0 ether!”.