feat: migrate to dotenv files (#86)

BREAKING CHANGE: aave-ui now recommends using .env config over focker-compose config. This might be breaking for your workflow. Make sure .env variables are correctly set.

.env

@@ -0,0 +1,10 @@
+REACT_APP_SUPPORTED_ETHEREUM_NETWORKS="polygon,mumbai,mainnet,kovan,fuji,avalanche"
+REACT_APP_DEFAULT_ETHEREUM_NETWORK="mainnet"
+REACT_APP_ENABLE_CACHING_BACKEND="true"
+REACT_APP_RATES_HISTORY_ENDPOINT="https://aave-api-v2.aave.com/data/rates-history"
+REACT_APP_ENABLE_NASH="true"
+# REACT_APP_FORTMATIC_KEY_MAINNET=<FORTMATIC_KEY_MAINNET>
+# REACT_APP_FORTMATIC_KEY_TESTNET=<FORTMATIC_KEY_TESTNET>
+# REACT_APP_TRANSAK_API_KEY=<TRANSAK_API_KEY>
+# REACT_APP_ONRAMP_API_KEY=<ONRAMP_API_KEY>
+# REACT_APP_PORTIS_DAPP_ID=<PORTIS_DAPP_ID>

.github/.env.preview

@@ -0,0 +1,7 @@
+REACT_APP_SUPPORTED_ETHEREUM_NETWORKS="kovan,mumbai,fuji,mainnet,polygon,avalanche"
+REACT_APP_DEFAULT_ETHEREUM_NETWORK="mainnet"
+REACT_APP_ENABLE_CACHING_BACKEND="true"
+REACT_APP_RATES_HISTORY_ENDPOINT="https://aave-api-v2.aave.com/data/rates-history"
+REACT_APP_ENABLE_NASH="true"
+# required for ipfs, might be omitted
+PUBLIC_URL="."

.github/.env.production

@@ -0,0 +1,7 @@
+REACT_APP_SUPPORTED_ETHEREUM_NETWORKS="mainnet,polygon,avalanche"
+REACT_APP_DEFAULT_ETHEREUM_NETWORK="mainnet"
+REACT_APP_ENABLE_CACHING_BACKEND="true"
+REACT_APP_RATES_HISTORY_ENDPOINT="https://aave-api-v2.aave.com/data/rates-history"
+REACT_APP_ENABLE_NASH="true"
+# required for ipfs, might be omitted
+PUBLIC_URL="."

.github/.env.staging

@@ -0,0 +1,7 @@
+REACT_APP_SUPPORTED_ETHEREUM_NETWORKS="kovan,mumbai,fuji,mainnet,polygon,avalanche"
+REACT_APP_DEFAULT_ETHEREUM_NETWORK="mainnet"
+REACT_APP_ENABLE_CACHING_BACKEND="true"
+REACT_APP_RATES_HISTORY_ENDPOINT="https://aave-api-v2.aave.com/data/rates-history"
+REACT_APP_ENABLE_NASH="true"
+# required for ipfs, might be omitted
+PUBLIC_URL="."

.github/workflows/deploy.yml

@@ -12,12 +12,6 @@ on:
 jobs:
   deploy_ipfs:
     runs-on: ubuntu-latest
-    env:
-      REACT_APP_SUPPORTED_ETHEREUM_NETWORKS: 'kovan,mumbai,fuji,mainnet,polygon,avalanche'
-      REACT_APP_DEFAULT_ETHEREUM_NETWORK: 'mainnet'
-      REACT_APP_ENABLE_CACHING_BACKEND: 'true'
-      REACT_APP_RATES_HISTORY_ENDPOINT: 'https://aave-api-v2.aave.com/data/rates-history'
-      REACT_APP_ENABLE_NASH: 'true'
     steps:
       - uses: actions/checkout@v2
 
@@ -29,7 +23,13 @@ jobs:
       - name: install
         run: npm ci
 
-      - name: Build and pinata upload
+      - name: prepare env
+        run: cp ${ENV:-'.github/.env.staging'} .env
+
+      - name: build
+        run: npm run build:ipfs
+
+      - name: deploy
         id: deploy
         env:
           PINATA_API_KEY: ${{ secrets.PINATA_API_KEY }}

.github/workflows/deploy_prod.yml

@@ -9,12 +9,6 @@ on:
 jobs:
   deploy_ipfs:
     runs-on: ubuntu-latest
-    env:
-      REACT_APP_SUPPORTED_ETHEREUM_NETWORKS: 'mainnet,polygon,avalanche'
-      REACT_APP_DEFAULT_ETHEREUM_NETWORK: 'mainnet'
-      REACT_APP_ENABLE_CACHING_BACKEND: 'true'
-      REACT_APP_RATES_HISTORY_ENDPOINT: 'https://aave-api-v2.aave.com/data/rates-history'
-      REACT_APP_ENABLE_NASH: 'true'
     steps:
       - uses: actions/checkout@v2
 
@@ -26,7 +20,13 @@ jobs:
       - name: install
         run: npm ci
 
-      - name: Build and pinata upload
+      - name: prepare env
+        run: cp ${ENV:-'.github/.env.production'} .env
+
+      - name: build
+        run: npm run build:ipfs
+
+      - name: Pinata upload
         id: deploy
         env:
           PINATA_API_KEY: ${{ secrets.PINATA_API_KEY }}

.github/workflows/main.yml

@@ -12,13 +12,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       uri: ${{ steps.deploy.outputs.uri }}
-    env:
-      REACT_APP_SUPPORTED_ETHEREUM_NETWORKS: 'kovan,mumbai,fuji,mainnet,polygon,avalanche'
-      REACT_APP_DEFAULT_ETHEREUM_NETWORK: 'mainnet'
-      REACT_APP_ENABLE_CACHING_BACKEND: 'true'
-      REACT_APP_ENABLE_NASH: 'true'
-      REACT_APP_RATES_HISTORY_ENDPOINT: 'https://aave-api-v2.aave.com/data/rates-history'
-      NGINX_MODE: 'staging'
     steps:
       - uses: actions/checkout@v2
 
@@ -30,7 +23,13 @@ jobs:
       - name: install
         run: npm ci
 
-      - name: Build and pinata upload
+      - name: prepare env
+        run: cp ${ENV:-'.github/.env.preview'} .env
+
+      - name: build
+        run: npm run build:ipfs
+
+      - name: deploy
         id: deploy
         env:
           PINATA_API_KEY: ${{ secrets.PINATA_API_KEY }}

.gitignore

@@ -1,4 +1,5 @@
-.env
+/.env.local
+/.env.production
 node_modules/
 package.temp.json
 .expo/*

CONTRIBUTING.md

@@ -1,39 +1,62 @@
 # Contributing
 
-## How to run
+## Running the interface locally
+
+```bash
+npm run start
+```
+
+## Creating a production build
+
+```bash
+npm run build
+```
+
+## How to run (via Docker)
+
 ```bash
   docker-compose up
 ```
 
 Local URL: [http://localhost:19006](http://localhost:19006)
 
-## How to build
+## How to build (via Docker)
+
 This project based on the [create-react-app](https://github.com/facebook/create-react-app), to build using docker-compose:
+
 ```bash
   docker-compose run frontend npm run build
 ```
 
 ## Env parameters
-Available networks: mainnet, ropsten, kovan, polygon, fork (mainnet fork), mumbai, polygon_fork
+
+Environment variables are configured via `.env` files.
+The [.env](https://github.com/aave/aave-ui/blob/master/.env) file in the root contains the defaults.
+You may overwrite them for local development, by creating an additional `.env.local`
+You may overwrite them for the production build, by creating an additional `.env.production`
 
 ### General network
+
 REACT_APP_DEFAULT_ETHEREUM_NETWORK - network selected in the app on the first enter (optional), default value: mainnet
 
 REACT_APP_SUPPORTED_ETHEREUM_NETWORKS - list of supported ethereum networks, comma separated
 
 REACT_APP_ENABLE_CACHING_BACKEND - enable [aave-caching-server](https://github.com/aave/aave-ui-caching-server) support, default value: false
+
 REACT_APP_RATES_HISTORY_ENDPOINT - enable rates history endpoint support, optional
 
 ### Fiat onboard
+
 This interface includes libraries to connect with fiat on-ramp services. They are disabled by default and it is the sole responsibility of the users running the interface to provide credentials in order the run them.
 
 REACT_APP_ONRAMP_API_KEY - [Ramp network](https://ramp.network/) API key, disabled by default (optional)
 
 REACT_APP_TRANSAK_API_KEY - [Transak](https://transak.com/) API key, disabled by default (optional)
 
-REACT_APP_ENABLE_NASH - disabled by default, set true to enable
+REACT_APP_ENABLE_NASH - enabled by default
 
 ### Wallets
+
 REACT_APP_AUTHEREUM_API_KEY - [Authereum wallet](https://authereum.com/) API key, disabled by default (optional)
 
 REACT_APP_PORTIS_DAPP_ID - [Portis wallet](https://www.portis.io/) API key, disabled by default (optional)
@@ -43,14 +66,17 @@ REACT_APP_FORTMATIC_KEY_MAINNET - [Fortmatic wallet](https://fortmatic.com/) pro
 REACT_APP_FORTMATIC_KEY_TESTNET - [Fortmatic wallet](https://fortmatic.com/) development API key(for testnets), disabled by default (optional)
 
 ### Bug tracking and misc
+
 It is possible to configure the interface to integrate with standard bug tracking (Sentry) and analytics services (GTM). Both are disabled by default and **we put emphasis on using them with responsibility, with users' privacy always in mind**.
 
 REACT_APP_GTM_ID - [Google tag manager](https://marketingplatform.google.com/about/tag-manager/) id (optional)
 
 REACT_APP_SENTRY_DSN - [Sentry](https://sentry.io/) dsn url (optional)
 
 ## Connecting to forks
+
 If you want to run the app against a custom fork set corresponding params in the browser localStorage
+
 ```
   forkNetworkId // chainId you will set in metamask
   forkRPCUrl // the url of the http fork RPC
@@ -59,6 +85,7 @@ If you want to run the app against a custom fork set corresponding params in the
 ```
 
 ## Updating GraphQL Schemas
+
 ```bash
   npm run gql-gen
 ```

README.md

@@ -11,28 +11,33 @@
  -/:             :/-  -/:             :/.     ://:         `/////////////-
 ```
 
-
 # Aave protocol interface :ghost:
 
 An open source interface for the decentralized liquidity protocol Aave.
 Enabling users to:
+
 - Manage and monitor their positions on the Aave Protocol, and the overall status of it.
 - Manage and monitor their positions on the Aave Safety module.
 - Participate on the Aave Governance.
 
 ## IPFS deployment
+
 Each commit gets deployed to ipfs automatically.
 There's a github action commenting the appropriate ipfs hash embedded in the cloudflare ipfs gateway after each commit.
 
 For ease of use:
+
 - the DNS of [https://staging.aave.com](https://staging.aave.com) will always point to the latest master ipfs hash with all networks enabled.
 - the DNS of [htpps://app.aave.com](https://app.aave.com) will always point to the latest master ipfs hash with disabled test networks.
 
 ## Contribution
-For instructions on local deployment and configurations, see [Contributing](./CONTRIBUTING.md)
+
+For instructions on local development, deployment and configurations, see [Contributing](./CONTRIBUTING.md)
 
 ## License
+
 [BSD-3-Clause](./LICENSE.md)
 
 ## Credits
+
 To all the Ethereum community

docker-compose.yml

@@ -7,22 +7,5 @@ services:
     working_dir: /app
     volumes:
       - ./:/app
-    environment:
-      #REACT_APP_SUPPORTED_ETHEREUM_NETWORKS: 'polygon,mainnet,avalanche'
-      REACT_APP_SUPPORTED_ETHEREUM_NETWORKS: 'polygon,mumbai,mainnet,kovan,fuji,avalanche'
-      REACT_APP_DEFAULT_ETHEREUM_NETWORK: 'mainnet'
-      REACT_APP_ENABLE_CACHING_BACKEND: 'true'
-      REACT_APP_RATES_HISTORY_ENDPOINT: 'https://aave-api-v2.aave.com/data/rates-history'
-      REACT_APP_ENABLE_NASH: ${ENABLE_NASH}
-      REACT_APP_FORTMATIC_KEY_MAINNET: ${FORTMATIC_KEY_MAINNET}
-      REACT_APP_FORTMATIC_KEY_TESTNET: ${FORTMATIC_KEY_TESTNET}
-      REACT_APP_TRANSAK_API_KEY: ${TRANSAK_API_KEY}
-      REACT_APP_ONRAMP_API_KEY: ${ONRAMP_API_KEY}
-      REACT_APP_PORTIS_DAPP_ID: ${PORTIS_DAPP_ID}
-      PINATA_SECRET_KEY: ${PINATA_SECRET_KEY}
-      PINATA_API_KEY: ${PINATA_API_KEY}
-      CF_DEPLOYMENT_DOMAIN: ${CF_DEPLOYMENT_DOMAIN}
-      CF_ZONE_ID: ${CF_ZONE_ID}
-      CF_API_TOKEN: ${CF_API_TOKEN}
     ports:
       - '19006:3000'

package.json

@@ -95,6 +95,7 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-intl-auto": "^3.3.0",
     "customize-cra": "^1.0.0",
+    "dotenv": "^10.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -112,13 +113,12 @@
     "start": "npm i && sed -i 's/git+ssh/git+https/g' package-lock.json && react-app-rewired start",
     "start:dev": "react-app-rewired start",
     "build": "GENERATE_SOURCEMAP=false react-app-rewired build",
+    "build:ipfs": "REACT_APP_IPFS_MODE=true npm run build",
     "test": "react-app-rewired tests",
     "eject": "react-scripts eject",
     "gql-gen": "graphql-codegen --config codegen.yml",
     "i18n": "NODE_ENV=development node ./scripts/extract-intl-messages.js",
-    "sys:prepare-ipfs-mode": "contents=\"$(jq '.homepage = \".\"' package.json)\" && echo \"${contents}\" > package.json",
-    "build-ipfs": "npm run sys:prepare-ipfs-mode && REACT_APP_IPFS_MODE=true npm run build",
-    "pinata:ipfs-publish": "npm run build-ipfs && node scripts/publish.js"
+    "pinata:ipfs-publish": "node scripts/publish.js"
   },
   "husky": {
     "hooks": {