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.
This project was created with create-react-app. Refer to their docs for advanced usage.
- Make a copy of the prod env file
cp .env.prod .env
- Install all the dependencies
yarn install
- Start the app in development mode on localhost:3000
yarn start
- Navigate to https://localhost:3000/. The changes you make locally should live-reload in the app.
Run unit tests in watch mode
yarn test
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.
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
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
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.
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'
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'
Index UI is MIT licensed.