CONTRIBUTING.md

Contributing

We use Github issues for tracking new features, bug fixes, and enhancements related to the Aave Interface. We are currently working on a UI/UX Integrations framework for integrating third-party services and entities within the Aave Interface. Please stay tuned for new information around this.

Pre-Requisites

Install Node

We are using a Next.js application, which relies on Node. You must have Node installed and set to use the specified version in .nvmrc. You can potentially use other versions, but we don’t recommend differing here.

You can download from the NodeJS website, but we recommend installing nvm and running the following command at root, after cloning or downloading the repo.

nvm use

Install Dependencies

Download Yarn Package Manager and install the dependencies.

yarn install

Setup Environment Variables

There are a few environment variables that we store for the interface. Before starting development, copy over the environment variables from the provided dummy file to a local copy.

cp .env.example .env.local

Get Up & Running Locally

Once you’ve completed the pre-requisites above, you should be able to start running the interface locally. There are several variations of running locally.

Development Mode

Development builds are run with a watcher and an open server listening on localhost:3000.

yarn dev

Production Mode

Production-based builds are great for usage on serverless & container-based hosting platforms like Vercel or Heroku. To compile the source files into minified, production-ready asset bundles, run the build command.

yarn build

There is also the option to build the application for usages as a static site on platforms like IPFS, AWS, Vercel, etc. This essentially builds the application as above and additionally uses the next export command. More information around Next’s export command can be found here.

yarn build:static

To start the server in production mode and use these bundled, minified assets, run the following command. This will start the web server listening on localhost:3000.

yarn start

You can also serve up the static site assets with the following command, which can be viewable on localhost:3000.

yarn serve:static

Test Mode

The integration test suite runs against Tenderly forks of various networks. To setup the local environment, you’ll first need to create an account and obtain an access key. Then fill in the three environment variables accordingly:

TENDERLY_KEY=<your access key>
TENDERLY_ACCOUNT=<your account/organization name>
TENDERLY_PROJECT=<your project name>

For running the integration test suite, you’ll need to have the application running locally in a separate terminal. You may choose to either run it in development mode via yarn dev or against a static production build via yarn build:static & yarn serve:static. The caveat to running in development mode is that it will be more resource-intensive, since the application will be built on the fly.

# open interactive cypress test suite
yarn test:open

# run all tests in headless mode
yarn test:headless

Environment Variables

Some environment variables can be adjusted to suite your needs during development, depending on the scenarios you want to test or build in.

# setting the environment to 'staging' will enable testnet markets, disabling governance, staking, and production markets
NEXT_PUBLIC_ENV=prod

# you can also disable staking & governance by altering
NEXT_PUBLIC_ENABLE_GOVERNANCE=true
NEXT_PUBLIC_ENABLE_STAKING=true

Running Against a Chain Fork

You can run the UI locally against a forked chain network, similar to what the tests do with Tenderly. This will allow you to build and interact with the UI without spending actual funds. This is very useful for testing many protocol scenarios.

First, you’ll need to create a fork of a network, which can be done with a few different tools. We suggest using the one created by Bored Ghost Labs, where you can follow the steps and get set up here.

Second, you’ll need to tell the local application which fork to run against. The easiest way to do this is to copy/paste the following statements. With the application running locally, open up the console in the browser and copy/paste the following with the appropriate values.

localStorage.setItem('forkEnabled', 'true');
localStorage.setItem('forkBaseChainId', <chainId>); // the ID for the chain you are forking, in numeric format
localStorage.setItem('forkNetworkId', '3030'); // the ID of the new forked network
localStorage.setItem('forkRPCUrl', <rpcUrl>);

Since localStorage changes are not not observed, you’ll need to reload after setting the parameters. After reloading, the market selection should show forked markets for all the markets that run on forkBaseChainId. To make actual transactions on the fork, you’ll need to setup your wallet to use the same rpcUrl you provided as forkRPCUrl. This will require you to setup your wallet by adding in the new fork network and connecting to the app with it.

If you are using MetaMask, make sure to configure the Tenderly fork RPC URL into a new network configuration. Give it a network name, and you'll want to use the same values that you copied into localStorage for the other fields. See below as an example:

Once you have both copied over the values into localStorage and have saved the new network configuration in MetaMask (or any other browser wallet), switch to the network in your wallet.

Next, reload the page. The new forked network should appear in the dropdown list for markets in the application.

Finally, switch to the market pertaining to the fork in the dropdown list. Now you are able to interact with the Aave Protocol via the UI without spending any real funds!

NOTE: Always double check the selected network in your wallet provider to make sure transactions are executed only on the fork network.

Token Additions

To add a new token to the app, the process is pretty simple. All you’ll need to do is add a new token icon SVG to the public/icons/tokens directory. The only requirement is that the name of the SVG file is equal to the asset’s symbol in all lowercase. If you want a custom name to appear alongside the icon, you can alter src/ui-config/reservePatches.ts accordingly.

Translations

Aave uses Crowdin for translation management and internationalization. We only update strings within the app. Everything else is downloaded from Crowdin. For more information, such as installing their CLI tool, read their documentation.

To upload strings:

crowdin upload sources

To download strings:

crowdin download

If you would like to add support for a new language across the app, please open up an issue and add the i18n label to it. This helps us categorize, and it will also help to gauge public interest for the new language. If the community decides to go forward with your preferred language, you may open up a pull request. Please follow the template of this PR.

Feel free to reach out to us on Discord to become a translator!