Index UI

Index UI is a simple front-end used to interact with Index. This front-end describes Index and consolidates relevant links to onboard users onto the protocol's basic functionalities. It also allows users to stake, unstake, and claim INDEX tokens during the initial distribution + liquidity mining phase of the protocol's launch.

Local development

This project was created with create-react-app. Refer to their docs for advanced usage.

Prerequisites

1. Install Node 14+
2. Install yarn
3. Fork this repo
4. Clone your fork locally

Steps

1. Make a copy of the prod env file

   cp .env.prod .env

2. Install all the dependencies

   yarn install

3. Start the app in development mode on localhost:3000

   yarn start

4. Navigate to http://localhost:3000/. The changes you make locally should live-reload in the app.

---

Testing

Unit tests

Run unit tests in watch mode

yarn test

Run E2E Tests with Cypress

To run e2e test with Cypress, first you must serve a local instance

yarn start

Once that is served, in another terminal, navigate to the repo and run

yarn run e2e

This will kick off Cypress to run headlessly.

Writing and Debugging Cypress Tests

If you wish to write a test, or debug yours, you can do so with the help of the Cypress tool by running

yarn run cypress:open

This will allow you to see and select items on page, more easily obtaining their IDs, selectors, etc. More information on this can be found on the Cypress docs

Helpful Commands

Build the app for production in the build folder.

yarn build

Eject the app from create-react-app rails.

yarn eject

This project uses browserslist. We need to regularly update browser data via

npx browserslist --update-db

Contributing

The main purpose of this repository is to continually serve the needs of Index, making it faster, simpler, and easier to use. As new proposals are submitted and the scope of Index's governance evolves, we anticipate this tool will change as well.

We greatly encourage any community contribution that may help Index reach more users and promote greater adoption, so be sure to check out our Contribution Guidelines for ways to get involved with our project.

Style Guide

Absolute imports

Prefer absolute imports over relative imports because this is a loose codebase convention. Refer to Configuring React Absolute Imports For TypeScript if your editor isn't picking up absolute imports.

// Good
import Page from 'components/Page'

// Bad
import Page from '../../components/Page'

Import ordering

Order library imports at the top of the file, then a newline separator, then imports for exported members that are defined in this package.

// Good
import React, { useEffect } from 'react'
import { Container, Spacer } from 'react-neu'

import Page from 'components/Page'
import Explanation from 'components/Explanation'

// Bad
import React, { useEffect } from 'react'
import Page from 'components/Page'
import { Container, Spacer } from 'react-neu'
import Explanation from 'components/Explanation'

License

Index UI is MIT licensed.