The challenge

Daoism Systems Front-end Engineer Technical Challenge

This technical challenge will evaluate:

• best practices for React
• ability to implement web3 technologies such as calling a Solidity contract from UI or minting a token

Overview

The applicant will be tasked with the creation of a simple React app that connects to a Metamask wallet and calls a Solidity contract function with the help of useDapp hook.

Requirements

• a component should either display a wallet address and a token balance if the user is connected to the wallet, or display a "connect to wallet" button
• a component that contains a form with 2 inputs: "to" (address) and "amount" that allows for a token to be sent to the specified address
• a component that contains a form with 2 inputs: "to" (address) and "amount" that allows generating tokens for the set address
• https://create-react-app.dev/ may be used as a boilerplate or similar
• using any CSS framework is a plus
• error handling
• tests (optional, but a big plus)
• any token can be used or 0x9ed2135850920ba65566d010b947b49e88651675

Solution

Can be viewed at https://daoism.luxumbra.dev

• Project was bootstrapped with create-next-app.
• CSS framework used is Chakra UI
• Using Chakra UIs Toast for giving feedback to the user or logging errors to the console. Would like to hook into Sentry or HoneyBadger for catching & tracking exceptions.
• <Mint /> & <Transfer /> components in place with forms & validation using Formik library.
  • The token used is called dApp, on Rinkeby. I created it using ThirdWeb. Contract: 0x85DEf9F64609DF4ef0c2b88D0aEC8298C78156F9.
• Github actions for Continuous Integration, deploying to Fleek IPFS
• Uses `@react/testing-library and Jest - Some basic tests written
• Coveralls integration - coverage of tests can be seen on the Coveralls project page
• Snyk Security integration for vulnerability checking of dependencies.

Issues I had

I have not used testing libraries before and really wanted to take this opportunity to learn an important skill I have not gotten to learning yet. I ran into issues with even the simplest test not passing in most files - I am pretty sure it is a typescript / jest config issue I spent hours trawling SO and googling for solutions and turns out NextJS can be a pain when testing ESM. A friend took a look at my config, couldn't see any issues and suggested trying Vite. So I stripped out NextJS and the app now uses Vite with the basic tests I have added now running without issue.

Thanks for the opportunity to do this. Successful or not in my application, the process has been amazing and while trying to get some bonus points (and probably taking too long), I have fallen down a new rabbithole 🐰 and look forward to seeing my coverage go from red to green. 💚

Getting started

First, install the things:

yarn

Fire up the app

yarn ui:dev

Open http://localhost:3000 with your browser to see the result.

Run build

The build runs tsc to lint the code before running vite build to bundle the app in esm, cjs & iife formats. Note: The production build from Vite is taking a while for such a smol project.

yarn ui:build

Happy coding

Run the linter (it runs for the previews but good to run before you make a PR)

yarn lint:scripts
yarn lint:scripts:fix
yarn format:scripts
yarn format

Run tests

yarn test
yarn test:watch
yarn test:coverage

Run pre-commit checks with Husky

yarn prepare

Deployed on Vercel Fleek Netlify

All PR previews, develop & prod now deploy to Netlify. Once I dropped Vercel I wanted to use Fleek for the IPFS / decentralisation ascpects but a) they don't do PR previews on more than one branch and b) their service has been down for the last 18 hours, so I went to Netlify. 😅