React Wallet 🪙

Tecnhical test consisting of a simple React app that allows users to manage their wallet using Ethereum and MetaMask.

Previous knowdlege with these technologies is assumed in order to use the app and follow this document.

Table of contents

• Features ✨
• Demo 🕹️
• Installation 💻
  • Prerequisites
  • Steps
• Usage 🤹
  • Login/Register
  • Wallet
  • Deposit
  • Transfer
  • Logout
  • Light/Dark mode theme
  • Responsive design
• Tech stack 📦
• Tech features ⚙️
  • Monorepo pattern
  • Code generation with Nx
  • Task caching and orchestration with Nx
  • Project graph with Nx
• Possible improvements 🆙
  • Internationalization (i18n)
  • Lazy-loading
  • SSR
  • Better error handling and edge-case control
  • Improve reusability
  • More testing
• Project Management

Features ✨

• Login (fake)
• Register (also fake)
• Wallet
• Deposit
• Transfer
• Integration with MetaMask
• Dark/Light theme mode
• Routes protected by auth
• Fully responsive and mobile first
• “Not found” page

Demo 🕹️

Visit the live Demo here: https://ivnosing.github.io/react-wallet.

Note: Make sure to follow the installation process below to set up Ganache and Metamask.

Installation 💻

Prerequisites

Download, install and configure these:

• Node.js v18 and npm v9
• Truffle
• Ganache
• Metamask

Steps

1. Clone the repo

   git clone https://github.com/Ivnosing/react-wallet.git
   

2. Start Ganache with a sample workspace. Make sure the address is http://127.0.0.1:7545. In the workspace configuration, add the Truffle project to the workspace (e.g. /react-wallet/projects/truffle/truffle-config.js)

3. Navigate to the projects/truffle folder and run the migration into Ganache. You should see the updates in Ganache.

   cd projects/truffle
   truffle migrate
   

4. Install the dependencies in the root of the workspace.

   npm install
   

5. Serve the application. You should be able to see the app running at http://localhost:4200.

   npm start
   

Usage 🤹

Login/Register

Both the Login and Register pages consist of an HTML form with validation. Since they are fake, you can use any credentials. The username must be at least 6 characters long, and the password must be at least 8 characters and must include lowercase, uppercase and numbers (e.g. Password0).

You must authenticate in order to utilize the rest of the application.

Wallet

The Wallet page displays the balance and the account of the user. This data comes from MetaMask, so you will be prompted to login and select an account.

Deposit

The Deposit page displays a form to deposit some amount of Ether into the contract. It also displays the user and contract info.

Transfer

The Transfer page displays a form to send a transaction from the user's address (sender) to a specific address (receiver).

Logout

The Logout button in the navbar ends the user session and redirects the user to the Login.

Light/Dark mode theme

The Dark/Light button in the navbar toggles the current theme for the entire app. This setting is persisted in the user's browser.

Responsive design

The app is built with mobile-first principles and keeping responsiveness in mind.

Tech stack 📦

• React 18.2
• TypeScript
• Vite
• Nx
• Jest
• React Testing Library
• React Router
• Redux
• Hooks
• Chakra UI
• HTML Forms
• web3.js
• Truffle
• Ganache
• Metamask

Deployments:

• GitHub Actions
• GitHub Pages

Other:

• Prettier
• ESLint
• VSCode
• Git
• Conventional Commits

Tech features ⚙️

Monorepo pattern

This project follows the monorepo pattern using Nx as the build system. The code is splitted in different projects and libraries, generally by domain, following strategic design.

Then each lib scope can be further broken down into smaller pieces following this patterne:

• feature: complex components with feature logic,
• ui: scoped pure components,
• data-access: data-access layer (HTTP requests and others),
• utils: helpers and utilities for coding,
• store: Redux-related code,

Code generation with Nx

With Nx we have built-in code generators for React, the workspace and other. It makes it easy to generate libraries, components, tests, etc.

Task caching and orchestration with Nx

Nx caches the result of tasks, making subsequent runs of the same task fast. For example, the shared-ui lib is a publishable lib, so it can be built on its own, cached and then excluded from future builds of the dependant projects.

Project graph with Nx

Possible improvements 🆙

With these, the application could be further improved but they are left out of scope due to time limitations.

Internationalization (i18n)

Include support for different languages and locales.

Lazy-loading

Lazily load the different features (wallet, transfer, deposit...).

SSR

An improvement to SEO and performance would be to render the application in the server, as opposed to the current rendering in the client.

Better error handling and edge-case control

Some basic error handling was included (HTML Forms and catch-error displays) but it could be further improved, especially with knowdledge of the Web3 domain.

Improve reusability

Even with reusable libraries in the workspace some code is duplicated and it could be optimized. Some examples are repeating layout elements and styles and test utilites.

More testing

Some basic testing using Jest and React Testing Library was included but greater coverage should be the goal.

Project Management

Notion was used for tracking development and taking notes.