Wonderland Frontend Challenge

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First you need to create a .env.local file and set a Wallet Connect Project ID

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=yourProjectId

To install packages and run the program, we recommend using pnpm

pnpm install
# then
pnpm dev

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

Testing

To run unit tests:

pnpm test:unit

To run e2e tests

This project uses synpress, which requires a Metamask wallet. The e2e flow will open a browser window, install Metamask and configure the wallet with the given 12 words. This wallet will need some Sepolia Eth to run the tests.

You need to add the following to .env.local

SECRET_WORDS="twelve words of the wallet to run tests from"
NETWORK_NAME=sepolia

PLEASE USE A WALLET THAT IS SOLELY FOR TESTING

You also need to create a file named test-config.js which exports the address you are going to be transfering funds and setting allowance to. This address needs to be a different address than the one providing the words.

/tests/e2e/test-config.js:

export const TARGET_WALLET = "0xReceivingWallet";

After that, run the project (if it's not running already) with

pnpm dev

and run the tests with

pnpm test:e2e

Features

• Transfer, mint and set allowance for WT6_USDC and WT18_DAI
• Last transaction confirmation on screen
• Fetch balances and allowances only when needed and on transaction completion
• Built-in a11y improvements from the Radix library
• Mobile support
• Full TypeScript support (including ABIs)
• Wrong Network detection and huminized balances/allowances

This app was built and tested with Metamask, however, other wallets that accept the Testnet Sepolia should be usable through Rainbowkit/WalletConnect