Table of Contents
As a big fan of blockchain technology I wanted to learn to make decentralized applications and this is my first approach to this. I learned Solidity to create a smart contract so that I could use blockchain as a server and a database, and achieve verifiable consensus without the need for a trusted third party such as a payment processors in this case.
The app allows the user to participate in a lottery by contributing 0.1 ETH to the smart contract, after he succesfully connected his wallet. If the balance of the contract is bigger or equal to 0.5 ETH a function that picks winner is invoked and full balance of the contract is sent to randomly picked participant of the lottery. You can see the list of addresses of the players that are currently taking part in the lottery as well as addresses of the winners of previous lotteries. By clicking on each of them you get redirected to etherscan so you can check on that player.
The backend part of the app is built using Ethereum, which is a blockchain that was developed to support scripting and the creation of decentralized applications and 'smart contracts' through its virtual machine (EVM). Ethereum's native token, Ether (ETH) is a cryptocurrency used to pay for the processing power of the EVM in order to run smart contracts or other Dapps, in what is called 'gas'. Since we have to pay has fees before each transaction modifying the blockchain it would be very expensive to test the smart contract, because the gas fees cost real money. Obviously I didn't want to spend money when I was just testing my smart contract, that's why I used a testnet that provides free cryptocurrency I could use to pay for gas fees (this free tokens doesn't have any value and we can't use it on mainnet). In short, testnets are like mocks in that they are used to test the protocol in a controlled environment.
Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs which govern the behaviour of accounts within the Ethereum state. I used solidity to create my lottery smart contract that has the logic of the dApp.
Hardhat is an environment I used to compile and deploy my dApp on the Rinkeby testnet
Ethers is a library I used to interact with the Ethereum Blockchain on the frontend part on my dApp.
React is a JS library I used to build the user interface
In order to use the app you need to have Metamask installed. Its function is to inject a JavaScript library called web3.js into the namespace of each page your browser loads, so that you can interact with the dApp.
In order to install metamask you need to:
- Go to Metamask web browser extension on Chrome Web Store
- Check the number of downloads to make sure that the legitimate MetaMask is being installed, as hackers might try to make clones of it
- Click the Add to Chrome button
- Once installation is complete this page will be displayed. Click on the Get Started button
- This is the first time creating a wallet, so click the Create a Wallet button. If there is already a wallet then import the already created using the Import Wallet button
- Click I Agree button to allow data to be collected to help improve MetaMask or else click the No Thanks button. The wallet can still be created even if the user will click on the No Thanks button.
- Create a password for your wallet. This password is to be entered every time the browser is launched and wants to use MetaMask. A new password needs to be created if chrome is uninstalled or if there is a switching of browsers. Agree to Terms of Use
- Click on the dark area which says Click here to reveal secret words to get your secret phrase
- This is the most important step. Back up your secret phrase properly. Do not store your secret phrase on your computer. Please read everything on this screen until you understand it completely before proceeding. The secret phrase is the only way to access your wallet if you forget your password. Once done click the Next button
- Click the buttons respective to the order of the words in your seed phrase. In other words, type the seed phrase using the button on the screen. If done correctly the Confirm button should turn blue
- Click the Confirm button. Please follow the tips mentioned
- You can access MetaMask in the browser by clicking the Foxface icon on the top right. If the Foxface icon is not visible, then click on the puzzle piece icon right next to it
Great, you have a fully functioning cryptocurrency wallet! Now you need to change your network from default Ethereum Mainnet to Rinkeby Testnet and get some free coins we talked about earlier so that you can pay the fee and perform operations on the blockchain.
- Open the Metamask browser extension
- Click "Ethereum Mainnet" button and if your test networks don't show you need to click Show/hide test networks button
- Enable showing test networks
- Choose Rinkeby Test Network from the list
- Go to Chainlink Faucet, make sure you are connected to the right network, click "Send request" and enjoy your tokens!
- You need to repeat step 5 and claim additional 0.1 ETH, because the ticket to the lottery costs 0.1 ETH and you need to have some more money on the side to pay for the fees associated with this operation:)
After you successfully connected to your metamask and claimed some free ETH, you can connect your wallet with this app and join the lottery!
To run the project locally, you need to perform following operations:
- Clone the repo
git clone https://github.com/your_username_/Project-Name.git
- Switch to client directory
cd ./client - Install NPM packages
npm install
- Run the app
npm start