Frontend

Node version

Node >v16.14.x is supported, although Node v18.x.x is recommended.

A .nvmrc has been provided if you use nvm. You can use this by:

nvm use # in ./frontend

Framework

The frontend runs on a Next.js server. If you're new to Next.js but know React.js, getting used to Next.js would be trivial. To get started, modify the component file at ./frontend/src/pages/index.

To learn more about Next.js, read their docs.

Environment variables

Before you start, you need to setup the environment variables. Look at the .env.example to know what to setup. Env variables required are:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="" 

Note, all env variable names which are supposed to be exposed used in client requests should be prefixed with NEXT_PUBLIC_.

Connecting wallet

To connect user wallets, Web3Modal v3 has been integrated and pre-configured for you.

Use the provided useWallet hook to interact with Web3Modal and wallets. This contains utilities to simplify anything you need related to wallets.

Sending transactions to smart contracts

To send transactions to either a locally deployed smart contract or a smart contract on a prod chain, use the useSmartContract hook. This contains utilities to simplify getting and interacting with a Ethers.js contract instance.

When deploying to local or production, this hook will automatically use the correct chain and contracts.

Deploying to local test server

The dev command automates everything for you to setup a local Next.js test server.

Deploying to Vercel

To deploy this, follow the Deploying guide.

With the deploy command, the Frontend deployment is fully automated. Vercel is used for deployments. Vercel offers free quotas to developers to get started.

No pre-configuration is necessary to run the deploy command. You'll be taken through all relevant steps upon running it.