Creating a Defi Dapp that allows the sender to send Goerli ethers and a message. In my project, the users are to send memes. All the entries are recorded and displayed on the screen.
Setting Up the Project:
Create a new directory for the project and initialize an npm project.
Install Hardhat using npm.
Generate a sample project using Hardhat.
Verify that the project setup is successful by running the sample tests.
Creating the Solidity file. (.sol)
The contract stores memos when someone sends ethers and emits an event for each new memo. This memo is where the user can send his/her memes.
It allows users to send their memes by sending Ether and leaving a meme.
The contract's owner can withdraw the accumulated ethers.
Key functions used:
getMemos(): Retrieves all stored memos which not are nothing but the memes.
``````````sendEthers**(_name, _message)**`: Allows users to send ether and leave a meme as a message.
withdrawTips(): Sends the contract's balance to the owner.
Deploying on Goerli:
By deploying the contract on Goerli, we can verify its behaviour, test the contract's functions, simulate transactions, and ensure that it operates as intended. It provides a realistic environment for interacting with the smart contract and allows for comprehensive testing before moving to production on the Ethereum mainnet.
In this case, we need to connect our development environment, such as Hardhat to the Goerli network by specifying the network configuration details (like the network ID and RPC endpoint) in the hardhat.config.js file.
Front End with Replit and Ethers.js:
We use Replit IDE as is allows to-
See the code of a Next.js web application
Get access to a console, a terminal shell, and a preview of the README.md file
View a hot-reloading version of your dapp
Screenshots:
You can already see from the above screenshot that when you first visit the Dapp, it will check if you have MetaMask installed and whether your wallet is connected to the site. You will not be connected the first time you visit, so a button will appear asking you to Connect your wallet.
After you click Connect your Wallet, a MetaMask window will pop up asking if you want to confirm the connection by signing a message. This message signing does not require any gas fees or costs.
Once the signature is complete, the website will acknowledge your connection and you will be able to see the field from where you can send ethers any of the previous memes left behind by other visitors.