15-lippo/balancer-app

Balancer Frontend App (v2)

Official frontend app for the Balancer protocol (v2).

Development

To setup the development environment first clone the repo:

git clone https://github.com/balancer-labs/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

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

source: https://stackoverflow.com/questions/65612411/forcing-docker-to-use-linux-amd64-platform-by-default-on-macos

Self-Hosting

As we believe in decentralization at all layers, we've made it easy to host your own Balancer Frontend.

Docker Production Image

We've created a production ready docker image runs a pre-built version of Balancer Frontend-v2 using nginx. You'll need your own Infura, Alchemy, and Blocknative API keys in order to fetch data and execute transactions.

Here's an example of how to run the container. This can also be found in scripts/run-docker.sh.

docker run \
  -e INFURA_PROJECT_ID=   \ # Required
  -e ALCHEMY_KEY=         \ # Required
  -e BLOCKNATIVE_DAPP_ID= \ # Required
  balancerfi/frontend-v2

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:

• Runs a development dev server with esbuild.
• Builds production bundle with Rollup.

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 vite-plugin-node-stdlib-browser and rollup-plugin-polyfill-node.

unplugin-vue magic 🪄

We use some Vite plugins to improve the Vue developer experience.

unplugin-vue-components:

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 by adding these env vars to your .env file before running the build:

# Local .env file
VITE_BUILD_ANALIZE=true
VITE_BUILD_VISUALIZE=true