• Skip to main content
  • Skip to primary sidebar
  • Home
  • About
  • My Portfolio
  • Contact

mobileoop

I am a Senior iOS developer based on Singapore. Developing iOS Mobile apps for about 8 years now.

  • Home
  • About
  • Portfolio
  • Contact Me

Ether Faucet Smart Contract and React

November 23, 2020 by Ricky Leave a Comment

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.

Filed Under: ethereum, smart contract, solidity

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search This Website

About Me

profile for Ricky at Stack Overflow, Q&A for professional and enthusiast programmers
I have been developing iOS mobile apps for about 8 years now. Currently, I am working as a Senior iOS Developer at a company based in Singapore.

mobileoop.com is a website that I share my thoughts on the latest technology particularly on the mobile apps and its ecosystems. Sometimes, I also write my experience in working on various iOS projects (my online portfolio).

This is my Github profile.

You may connect to me via LinkedIn: My LinkedIn.

Recent Posts

  • Ether Faucet Smart Contract and React
  • MVVM and RxSwift – iOS Apps Development
  • hotspot – Mobile Apps for Singapore Tourists
  • Nestia – Lifestyle Mobile Apps in Singapore
  • Watch Over Me Version 6.0
  • Chan Wu – Audio and Video Freelance iOS App Project
  • Getting Location Updates for iOS 7 and 8 when the App is Killed/ Terminated/ Suspended
  • Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard
  • How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development
  • The Comparison Between Swift and Objective-C Programming Language

Copyright © 2021 mobileoop.com