Awesome
⛔️ This app is now deprecated
We have launched a new UI for the Balancer protocol, which is available at https://balancer.fi. The source code for the new UI is available at https://github.com/balancer/frontend-v3.
Note, there is an exception where by the veBAL page is still available at https://app.balancer.fi/vebal. We will continue to maintain the veBAL page of this UI until we migrate that functionality to the new UI.
Development
To setup the development environment first clone the repo:
git clone https://github.com/balancer/frontend-v2.git && cd frontend-v2
Local env
Install dependencies:
npm install
Start the app:
npm run dev
The app should be live at http://localhost:8080
Testing
Run unit tests:
npm run test:unit
Run unit tests in watch mode:
npm run test:unit:watch
Run unit tests with coverage:
npm run test:unit:coverage
Run unit tests with only lcov coverage (useful when doing exploratory testing):
npm run test:unit:silent:coverage
Build
Run build:
npm run build
Preview build:
npm run preview
Run build in watch mode:
npm run build:watch
This mode is useful when you need to reproduce/fix bugs/issues in a production-like environment.
Docker
If you'd rather spin up the app in a docker container, first install dependencies to you local folder:
docker-compose build
docker-compose run --rm web npm i
and start the app:
docker-compose up
The app should be live at http://localhost:8080
If you are on Apple Silicon, try this:
export DOCKER_DEFAULT_PLATFORM=linux/amd64
One Click Deploys
The frontend can easily be deployed to any static host. Use the buttons below to spin up an instance. You will be prompted to provide your Infura Project ID, Alchemy Key, and Blocknative Dapp ID as these are required for the frontend to work correctly.
Vite setup
This app is powered by vite, which:
Both tools above rely on native ES modules but our app also depends on libraries like ethers.js which use Node.js built-in modules (like Buffer, stream or crypto) that require browser polyfills. Thats why our vite.config.ts uses node-pollyfills and rollup-plugin-polyfill-node.
unplugin-vue magic 🪄
We use some Vite plugins to improve the Vue developer experience.
Auto imports components located in src/components/_global so that they are available from every other component in the application (and from vitest).
(It also auto generates a d.ts file for the auto imported components).
Analyze bundle
Analyze and visualize the bundle dependencies:
npm run build:analyze