I developed a simple Ether Faucet Smart Contract using solidity. The ethereum smart contract has a few functionalities. For example, the owner of the smart contract can add funding to the deployed smart contract address. Other people, who has Metamask wallet installed on browser, may request for x amount of free ether for every x hours.
To interact with the smart contract, I developed the web frontend using ReactJS.
Connect to Metamask wallet
Select one of the the options to get free ether
Your wallet is successfully funded with ether
Show an error if the funding request timing is invalid
Ethereum Rinkeby Test Network and ReactJS Web Frontend
For Demo, I have deployed the smart contract to Ethereum Rinkeby Test Network.
You may use the Ether Faucet Web to interact with the ethereum smart contract.
Ether Faucet Project Planning, Setup and Source Code
When I first started to plan this project, I knew that I will use ReactJS to develop the web frontend for smart contract interaction. I could either develop it with 2 different source code repositories (1 for smart contract, another for ReactJS). Since it is just a simple project, I decided that both smart contract and ReactJS will share one single code source code repository. It can be easily started using Truffle React Box.
Using Truffle React Box, it is very convenient as initial project configurations and dependencies have been setup for me. I only have to add a few additional dependencies (eg: “styled-components”, “@metamask/detect-provider”) that I need like.
To test the smart contract, I could either use Solidity or JavaScript. I chose JavaScript. Here are the test cases:-
Contract: Faucet
when deploying
✓ returns a contract address
when topping up
✓ should allow to topup balance (187ms)
when trying to get fund
✓ should show faucet depleted error (67ms)
✓ should allow to get fund (153ms)
✓ should disallow to get fund (360ms)
when trying to empty fund
✓ allows creator to empty fund (81ms)
✓ disallows user to empty fund (67ms)
As for ReactJS project, I am using Redux to keep the global states. For local states, I decided to use React Functional Components with React Hooks instead of React Class Components because the code is cleaner and shorter.
The complete source code is available at: Ether Faucet Source Code.
Leave a Reply