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

Prerequisites

The following tools are required to be installed:

• Node.js - Version 24 (LTS).

Optional development tools

The following tools are optional but can help ensure a consistent development environment and improve the workflow.

NVM

nvm allows you to quickly install and use different versions of node via the command line.

Example:

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

Simple as that!

To specify the required Node.js version for the project, you can create a .nvmrc file in the root directory of your project. This file should contain the version number of Node.js that you want to use. For example, to use Node.js version 22, you would create a .nvmrc file with the following content:

22

Once the .nvmrc file is in place, you can run nvm use to switch to the specified Node.js version. This ensures that everyone working on the project uses the same Node.js version, which helps to avoid compatibility issues.

Getting Started

To get started with the project, follow these steps:

1. Clone the repository:

git clone https://github.com/RootstockCollective/dao-frontend.git
cd dao-frontend

2. Use the correct Node.js version (Optional):

nvm use

This command will read the .nvmrc file and switch to the specified Node.js version.

3. Install the dependencies:

npm install

4. Update the .env file with the correct data from the respective files:

.dev
.testnet
.mainnet
.fork

The chosen set of variables depends on the targeted contract versions you plan to work with. .dev is similar to the .testnet versions of the contract, with the exception of reduced wait times for votingDelay, votingPeriod, and timelockMinDelay for automation purposes. .testnet and .mainnet versions are aligned on time but target respective chains (chainIds 31 and 30). .fork uses a local fork of Rootstock Mainnet (via Anvil) for testing swap functionality without spending real funds - see Fork Setup Guide for details. For details on the Envio indexer integration (proposals data), deployment configuration, and troubleshooting, see Envio Integration.

5. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

6. Choose the environment using the PROFILE environment variable, such as:

export PROFILE=testnet

The value must correspond to one of the .env. file endings.

Note

‼️ Warning: DO NOT USE IN PRODUCTION!

To avoid CORS errors when running against testnet from localhost, you can proxy the calls to the RIF Wallet Services via a local loop that strips the CORS headers on the way out and adds the expected response ones on the way in. This can be achieved by setting the testnet.local PROFILE: PROFILE=testnet.local npm run dev

Fork Environment: Use PROFILE=fork to test swap functionality on a local fork of Rootstock Mainnet without spending real funds. See Fork Setup Guide for setup instructions.

Envio Indexer: Envio is the primary data source for proposals. See Envio Integration for architecture details and troubleshooting.

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Environments

The following table describes the different environments files that the teams interact with it and where they are deployed.

All environment files are prefixed with .env.

Environment	Team	Deployed URL	Configuration	Notes
.mainnet	DAO - CR	https://app.rootstockcollective.xyz	DAO CR	-
.dev	DAO - CR	https://dev.app.rootstockcollective.xyz	DAO	Requires VPN
.testnet.local	CR	http://localhost:3000	DAO CR	-
.cr.qa	CR	https://qa.cr.rootstockcollective.xyz	DAO CR	Requires VPN
.dao.qa	DAO	https://qa.dao.rootstockcollective.xyz	DAO CR	-
.release-candidate-testnet	DAO - CR	https://release-candidate-testnet.app.rootstockcollective.xyz	DAO CR	Requires VPN
.release-candidate-mainnet	DAO - CR	https://release-candidate-mainnet.app.rootstockcollective.xyz	DAO CR	Requires VPN

CR: Rootstock Collective Rewards squad
DAO: Rootstock DAO squad

API Route Handlers

In route handlers (src/app/api/**/route.ts), use the native Web Response API by default:

export async function GET() {
  return Response.json({ data })
}

Only use NextResponse from next/server when you need its extended capabilities (redirects, rewrites, cookie manipulation). See the Next.js Route Handlers docs for details.

For the request side, NextRequest is fine when you need access to cookies, headers helpers, or other Next.js-specific extensions.

Sentry Error Tracking

Installation status: Installed but disabled by default.

Sentry is integrated for error tracking, performance monitoring, and session replay. It is controlled via a feature flag and does not send data until explicitly enabled.

Configuration Options

Sentry parameters used in the project:

Parameter	Value	Scope	Description
dsn	NEXT_PUBLIC_SENTRY_DSN	Client, Server, Edge	Data Source Name for receiving events
tracesSampleRate	1	Client, Server, Edge	100% of transactions sampled
enableLogs	true	Client, Server, Edge	Enable Sentry logs
environment	NEXT_PUBLIC_ENV	Client, Server, Edge	Environment label (e.g. testnet, mainnet)
replaysSessionSampleRate	0.1	Client	10% of sessions recorded for replay (when replay enabled)
replaysOnErrorSampleRate	1.0	Client	100% of sessions with errors recorded (when replay enabled)
integrations	replayIntegration, browserTracingIntegration	Client	Replay controlled by NEXT_PUBLIC_ENABLE_FEATURE_SENTRY_REPLAY; browser tracing always on when error tracking enabled
tunnelRoute	'/monitoring'	Build	Next.js rewrite to bypass ad-blockers
widenClientFileUpload	true	Build	Upload more source maps for stack traces
org, project	SENTRY_ORG, SENTRY_PROJECT	Build	Organization and project for source map uploads

Environment Variables

Variable	Required	Description
NEXT_PUBLIC_ENABLE_FEATURE_SENTRY_ERROR_TRACKING	Yes	Feature flag. Set to true to enable error tracking
NEXT_PUBLIC_ENABLE_FEATURE_SENTRY_REPLAY	No	Feature flag. Set to true to enable session replay (default: false)
NEXT_PUBLIC_SENTRY_DSN	Yes (when enabled)	Sentry Data Source Name for receiving events
SENTRY_ORG	Yes (for builds)	Sentry organization slug (e.g. rootstock-labs)
SENTRY_PROJECT	Yes (for builds)	Sentry project name (e.g. rootstock-dao-frontend)
SENTRY_AUTH_TOKEN	No (optional)	Auth token for uploading source maps. Without it, stack traces stay minified/unreadable. Keep secret.

How to Enable When Ready

1. Obtain your DSN from the Sentry dashboard (see Sentry Setup Guide)
2. Set NEXT_PUBLIC_ENABLE_FEATURE_SENTRY_ERROR_TRACKING=true in your .env.* file
3. Ensure NEXT_PUBLIC_SENTRY_DSN, SENTRY_ORG, and SENTRY_PROJECT are set
4. For source map uploads during build, set SENTRY_AUTH_TOKEN (via CI secrets, not in committed files)
5. Optionally set NEXT_PUBLIC_ENABLE_FEATURE_SENTRY_REPLAY=true to enable session replay (records user sessions when errors occur)

See SENTRY_SETUP_GUIDE.md for detailed setup instructions.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Sample Health Check

A health check has been created to verify that your instance is running.

Go to /health to see a "Page is OK!" text rendered.

Deployments

Storybook GitHub pages (can vary): https://vigilant-guacamole-p8v5w3k.pages.github.io/

Main APP URL: https://frontend.testnet.dao.rif.technology

Backend URL: https://dao-backend.testnet.rifcomputing.net/api-docs

Storybook

This project contains storybook installed in it, which is a tool to render UI components and test them visually.

Page used for installation: Storybook Getting Started

How to run Storybook

In order to run storybook, just do:

npm run storybook

The deployer will launch an instance of storybook in Localhost Port 6000

Notes

Storybook has been configured to use Tailwind CSS.

Z-Index Convention

This project uses semantic z-index classes instead of arbitrary values. Defined in src/theme/base.css and src/app/globals.css:

Class	Value	Usage
z-base	1	Local element stacking
z-dropdown	100	Dropdown menus
z-sticky	200	Sticky headers, sidebars, drawers
z-modal	500	Modal dialogs
z-tooltip	1000	Tooltips, popovers

Do not use raw z-index values like z-10, z-50, or z-[999]. Use the semantic classes above.

TypeScript Type Conventions

Use interface for object shapes (enforced by @typescript-eslint/consistent-type-definitions). Use type for unions, intersections, and mapped types.

Unit testing

The repository is configured to use Jest as the Testing Framework. Please refer to the Next.js official guide for information on how to integrate Jest.

To run the unit tests, use the following command:

npm run test

This will execute all the unit tests in the project.

To run the unit tests in watch mode, which automatically re-runs the tests whenever a file changes, use the following command:

npm run test:watch

This is useful during development when you want to continuously run the tests as you make changes to your code.

E2E Testing with Cypress

Cypress is a tool to help you execute tests on a functional website.

It has been installed as the default test suite for all of our end-to-end test necessities.

The default baseUrl that it'll use is http://localhost:3000, this can change in the future.

Open cypress together with Next.js

You can open both instances at the same using the following command:

npm run e2e-open

This should start up Next.js server using npm run dev and then npm run cypress open --e2e

This command will open cypress and will allow you to choose the desired browser for testing purposes.

Run cypress tests

You can run the tests using:

npm run e2e-test

This will start Next.js, and cypress, and will then automatically execute the *.cy files in the project.

If everything is successfully, you'll get a "All specs passed!" green message.

Default file

A default file health-spec.cy.ts has been created to make sure that cypress is running accordingly.

This can be removed in the future.

GitHub Workflows

End-to-end testing (e2e)

This workflow uses https://github.com/cypress-io/github-action

How to run the dApp locally

Prerequisites

You need to have the repository https://github.com/RootstockCollective/dao-backend-services running locally.

Steps

Setup frontend

• nvm use (Optional)
• npm i
• Create .env.local file
• Carry over what is in .env.dev to .env.local
• Replace NEXT_PUBLIC_RIF_WALLET_SERVICES env var with your localhost url:port, like: NEXT_PUBLIC_RIF_WALLET_SERVICES=http://localhost:3001
• npm run dev

Setup backend

You need to have the repository https://github.com/RootstockCollective/dao-backend-services running locally.

npm i

For mac:

EXPORT PROFILE=dao

For windows

SET PROFILE=dao

Find a file named httpsApi.ts and locate the line where app.use(cors()) is being called. Replace the condition with true:

this.app.use(
  cors({
    origin: (origin, callback) => {
      if (true) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by cors'))
      }
    },
  }),
)

npm start

Optional:

In order to get the prices, you need a coin market cap api key. After you get it, set it in the .env.dao COIN_MARKET_CAP_KEY=your_key

Develop branch out of service (~2025-04)

The develop branch has been decommissioned and now the branch that is in place is main.

Adjustments had to be made to the workflows in order to account for this change.