This is a simple Client side Next.js App w/ Typescript for you to wrap/unwrap ETH on Arbitrum. You can also visit here if you don't want to set it up locally yourself.
Some of the notable packages that were used:
- Next.js - mega react framework
- TailwindCSS - de facto css framework
- RainbowKit - plug and play wallet connect
- Axiom - for logging, metrics and collection
- Viem.sh - simplistic interaction with on chain RPC calls
- Wagmi.sh - react hooks for various of things
- React Testing Library - cover the test for react components
- Vitest + v8 - test runner and coverage
- Iconify - free icons
- Make sure this is on node >= 20.x and pnpm >= 9.x
- Run
cp .env.example .envand fill in your own config for the node - Run
pnpm installthenpnpm dev
This code is 100% test covered (except view, hooks and constants), and you can check the test by running pnpm test and coverage by running pnpm coverage. Each component test suites are under their corresponding folders, and for util functions are in /tests.
There are also build pipelines that runs over github actions
- A
README.mdthat provides instructions for how to run the application and anything else. - A user can connect a wallet (please use RainbowKit).
- A user can wrap and unwrap the native asset on Arbitrum.
- A user should see a confirmation UI that their wrap (or unwrap) transaction was successful.
- A user can press a link to view the transaction on a block explorer like Arbiscan.
- A user should have the ability to wrap (and unwrap) again after successfully completing a wrap (or unwrap).
- A few tests that provide confidence in the app (we recommend react-testing-library).