Frontend

Framework

The frontend runs on a Next.js server.

To get started, modify the component file at ./frontend/src/pages/index.

Info

If you’re new to Next.js but know React.js, getting used to Next.js is trivial. To learn more about Next.js, read the Next.js docs.

Environment variables

Make sure you have followed the steps in the quickstart.

Note

All environment variable names exposed in client requests should be prefixed with NEXT_PUBLIC_.

Connecting wallets

To connect a wallet, 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 that simplify getting and interacting with a Ethers.js contract instance.

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

Deploying to local test server

The dev command automates everything needed for setting up a local Next.js test server.

Deploying to Vercel

We use Vercel for deployments. Vercel offers free quotas to developers to get started.

To deploy, follow the deployment steps.

With the deploy command, the frontend deployment is fully automated.

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