feat: merge branch 'main' into v2-v3-migration

Author: satanworker

.github/workflows/build-test-deploy.yml

@@ -256,6 +256,7 @@ jobs:
       matrix:
         scoupe:
           - settings
+          - mobile
     steps:
       - uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # v3.0.2
 

.github/workflows/test-deploy-fork.yml

@@ -237,6 +237,7 @@ jobs:
       matrix:
         scoupe:
           - settings
+          - mobile
     steps:
       - uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # v3.0.2
 

CONTRIBUTING.md

@@ -1,14 +1,54 @@
-# 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
+# Objective of the Aave Interface
+
+The website-hosted user interface at app.aave.com (the “Interface”) is provided by the Aave Companies, a group of software development companies that build open source, blockchain-based software. The Interface is hosted on the Interplanetary File System (“IPFS”), is open source and provides information to users regarding the (a) the Aave Protocol, a decentralized, non-custodial liquidity protocol on the Ethereum blockchain that allows users to supply or borrow cryptoassets and earn interest on supplied assets (the “Aave Protocol”); (b) the Aave Safety Module, the primary mechanism for securing the Aave Protocol (the “Aave Safety Module”); and (c) Aave Governance, the mechanism through which AAVE token holders collectively discuss, propose, and vote on upgrades to the Aave Protocol (“Aave Governance”).
+
+The Interface serves as an informational gateway, which allows users to:
+- Monitor their positions on the Aave Protocol;
+- Monitor their positions on the Aave Safety Module; and
+- Monitor and coordinate participation in Aave Governance.
+
+Given the nature of decentralized blockchain technology, the Aave Prococol can either be accessed though the Interface, directly through smart contracts, or through third party protocol integrators. The Interface is a public good, along with the hundreds of other, unaffiliated on-ramps into the Aave Protocol.  Our aim, in the interest of decentralization, is transparency and contributions from all community members only enhance the Aave Protocol ecosystem. This document and the below guidelines will constantly evolve – including with input from the community – but will endeavor to provide you with information about navigating the Interface smoothly.
+
+# Aave Team Responsibilities on the Aave Interface
+The Aave team has certain responsibilities with respect to the Aave Interface. This includes the following:
+- Review all PRs that get created on any repositories that fall under Aave Interface;
+  - aave/interface
+  - aave/aave-utilities
+- Determine the roadmap of features that will be included on the Aave Interface; and
+- Maintaining the security, usability, and style of the codebase, including any integrations with third party services
+
+# Reporting New Features, Improvements & Bugs
+The “Issues List” in GitHub keeps track of all work on the Interface. If you would like to report a bug or an improvement to the Interface, please use the existing templates after making sure that the discovered bug doesn’t already exist. To report a new issue, follow these steps:
+1. Go to https://github.com/aave/interface/issues/new/choose;
+2. Choose the category for the issue - Bug Report or Feature Request;
+3. If reporting a bug, include as much information as possible in your PR, and follow the steps in the template, as they are pretty self-explanatory;
+4. If reporting a new feature, do the same; and
+5. Once the issue is created, it will get a “New Issue” label, which is a helpful indication for the Interface Team to triage the new request.
+
+# Picking up an issue for work
+Whether you’re a first time or existing contributor to the Interface and/or the Aave ecosystem, you may engage by picking up any issue that is labelled “Looking for Help,” as this will be the right place to start. These issues will have been triaged already by the Interface Team.
+Once you’ve identified an issue that you want to pick up, you should:
+  1. Comment on the issue expressing interest. A member of the Interface Team will assign it to you.
+      <aside> 💡 In order to mitigate issues from becoming stale, we may reassign or un-assign an issue after an extended period of time if we see that no commits are occurring on it. We will reach out to the original assignee in these instances
+      </aside>
+  2. Fork the repo if you haven’t done so already.
+  3. Create a branch for the issue by clicking Create a branch in the Development section on the Issue page. We follow Conventional Commits and follow the branch naming convention of [verb]/[issue number]-[branch name]. Some examples of branch names are:
+      - fix/123-squashed-bug
+      - feat/321-my-new-feature
+  4. Please add a comment on the issue so other people know it is being worked on.
+  5. Commit work using conventional commit formatting. There is a pre-commit hook with Husky that will enforce this. See the Running the UI Locally section for how to get the project running locally.
+  6. Create a pull request by using the single PR template. Fill out the list of major changes that are happening in the codebase. These bullet points should be a high-level overview / at-a-glance of the major changes to ease reviews. Go over the `Author Checklist` items in the template, and ensure all of them have been met before opening for review.
+  7. Code review. We might request you to make changes and iterate until we feel the code is ready.
+  8. QA and design review. If anything comes up during testing, or if there are any UI/UX items that need to be addressed, we’ll let you know.
+  9. Once there are two approvals, the Pull Request can be merged.
+
+## Develoment Prerequisites
 
 ### 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](https://nodejs.org/en/download/), but we recommend installing nvm and running the following command at root, after cloning or downloading the repo.
+You can download it from the [NodeJS website](https://nodejs.org/en/download/), but we recommend installing nvm and running the following command at root, after cloning or downloading the repo.
 
 ```bash
 nvm use
@@ -32,7 +72,7 @@ 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.
+Once you’ve completed the prerequisites above, you should be able to start running the interface locally. There are several variations of running locally.
 
 ### Development Mode
 
@@ -90,7 +130,7 @@ 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.
+Some environment variables can be adjusted to suit your needs during development, depending on the scenarios you want to test or build in.
 
 ```bash
 # setting the environment to 'staging' will enable testnet markets, disabling governance, staking, and production markets
@@ -116,7 +156,7 @@ localStorage.setItem('forkNetworkId', '3030'); // the ID of the new forked netwo
 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.
+Since `localStorage` changes are 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:
 
@@ -128,7 +168,7 @@ Next, reload the page. The new forked network should appear in the dropdown list
 
 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_.
+__NOTE:__ _Always double-check the selected network in your wallet provider to make sure transactions are executed only on the fork network_.
 
 
 ## Token Additions

README.md

@@ -35,6 +35,10 @@ yarn dev
 
 For instructions on local development, deployment, configurations & feature proposals, see [Contributing](./CONTRIBUTING.md)
 
+Also, contributors with at least one pull request that has been merged into the main branch are eligible for a unique GitPOAP. Visit [gitpoap.io](https://www.gitpoap.io/gp/638) to claim it. 
+
+<img src="https://www.gitpoap.io/_next/image?url=https%3A%2F%2Fassets.poap.xyz%2Fgitpoap3a-2022-aave-protocol-interface-contributor-2022-logo-1668012040505.png&w=2048&q=75" width="164">
+
 ## IPFS deployment
 
 Each commit gets deployed to IPFS automatically

cypress/configs/mobile.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'cypress';
+
+const folder = `./cypress/e2e/2-settings/`;
+
+export default defineConfig({
+  viewportWidth: 375,
+  viewportHeight: 812,
+  defaultCommandTimeout: 40000,
+  pageLoadTimeout: 120000,
+  video: false,
+  watchForFileChanges: false,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  e2e: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    setupNodeEvents(on, config) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      return require('../plugins/index.js')(on, config);
+    },
+    specPattern: [folder + 'mobile.cy.ts'],
+  },
+});

cypress/configs/settings.config.ts

@@ -8,5 +8,6 @@ export default defineConfig({
   ...defaultConfig,
   e2e: {
     specPattern: [folder + '**/*.*'],
+    excludeSpecPattern: ['/**/mobile.cy.ts'],
   },
 });

cypress/e2e/0-v2-markets/0-main-v2-market/swap.aave-v2.cy.ts

@@ -40,7 +40,7 @@ const testData = {
   },
 };
 
-describe.skip('SWAP, AAVE V2 MARKET, INTEGRATION SPEC', () => {
+describe('SWAP, AAVE V2 MARKET, INTEGRATION SPEC', () => {
   const skipTestState = skipState(false);
   configEnvWithTenderlyMainnetFork({});
 

cypress/e2e/1-v3-markets/2-avalanche-v3-market/e-mode.avalanche-v3.cy.ts

@@ -55,7 +55,7 @@ describe('E-MODE SPEC, AVALANCHE V3 MARKET', () => {
     borrow(testData.testCases.borrow, skipTestState, true);
     supply(testData.testCases.deposit2, skipTestState, true);
     borrow(testData.testCases.borrow, skipTestState, true);
-    checkDashboardHealthFactor({ valueFrom: 1.0, valueTo: 1.07 }, skipTestState);
+    checkDashboardHealthFactor({ valueFrom: 1.0, valueTo: 1.08 }, skipTestState);
   });
   describe('Turn on E-Mode and verify increase of health factor', () => {
     emodeActivating(
@@ -69,7 +69,7 @@ describe('E-MODE SPEC, AVALANCHE V3 MARKET', () => {
   });
   describe('Turn off E-mode and verify decrease of health factor', () => {
     emodeActivating({ turnOn: false, multipleEmodes: true }, skipTestState, true);
-    checkDashboardHealthFactor({ valueFrom: 1.0, valueTo: 1.07 }, skipTestState);
+    checkDashboardHealthFactor({ valueFrom: 1.0, valueTo: 1.08 }, skipTestState);
   });
   describe('Turn off E-mode blocked with low health factor', () => {
     emodeActivating(

cypress/e2e/2-settings/mobile.cy.ts

@@ -0,0 +1,43 @@
+import { configEnvWithTenderlyMainnetFork } from '../../support/steps/configuration.steps';
+
+const checkWidthOfText = (maxWidth: number) => {
+  cy.get('[data-cy="vote-info-body"]').invoke('width').should('be.lt', maxWidth);
+};
+
+const checkContent = (name: string, link: string) => {
+  cy.get('[data-cy="mobile-menu"]').contains(name).should('have.attr', 'href', `${link}`);
+};
+
+const doFindMobileMenuElement = (value: string) => {
+  return cy.get('[data-cy="mobile-menu"]').find(value).click();
+};
+
+describe('MOBILE RESOLUTION SPEC, AAVE V2 MARKET', () => {
+  configEnvWithTenderlyMainnetFork({});
+  describe('CASE1:Check mobile menu', () => {
+    it('Check content on menu', () => {
+      cy.get('#settings-button-mobile').click();
+      checkContent('Markets', '/markets/');
+      checkContent('Governance', '/governance/');
+      checkContent('Stake', '/staking/');
+    });
+  });
+  describe('CASE2:Check proposal pages', () => {
+    const _maxResolution = 312;
+    it('Verify width of proposal body with long text', () => {
+      doFindMobileMenuElement('[data-cy="menuGovernance"]');
+      cy.get('a[href*="/governance/proposal/109/"]')
+        .contains('Whitelist Balancer’s Liquidity Mining Claim')
+        .click();
+      cy.contains('Proposal overview');
+      checkWidthOfText(_maxResolution);
+    });
+    it('Verify width of latest proposal body with long text', () => {
+      cy.contains('Go Back').click();
+      cy.get('a[href*="/governance/proposal/113/"]')
+        .contains('Chaos Labs Risk Platform Proposal')
+        .click();
+      checkWidthOfText(_maxResolution);
+    });
+  });
+});

pages/governance/proposal/[proposalId].governance.tsx

@@ -166,7 +166,7 @@ export default function ProposalPage({
       <ContentContainer>
         <Grid container spacing={4}>
           <Grid item xs={12} md={8}>
-            <Paper sx={{ px: 6, pt: 4, pb: 12 }}>
+            <Paper sx={{ px: 6, pt: 4, pb: 12 }} data-cy="vote-info-body">
               <Typography variant="h3">
                 <Trans>Proposal overview</Trans>
               </Typography>