Merge pull request #374 from cowprotocol/2440/uni-merge

2440/uni merge

.env

@@ -72,3 +72,6 @@ REACT_APP_PATH_REGEX_ENS="/ipfs"
 
 # Enables mock mode (default = true)
 REACT_APP_MOCK=true
+
+# Locales
+REACT_APP_LOCALES="locales"

.env.production

@@ -73,3 +73,6 @@ REACT_APP_PATH_REGEX_ENS="/ipfs"
 
 # Enables mock mode (default = false)
 REACT_APP_MOCK=false
+
+# Locales
+REACT_APP_LOCALES="locales"

.eslintrc.json

@@ -8,21 +8,50 @@
       "jsx": true
     }
   },
-  "ignorePatterns": ["node_modules/**/*", ".github/*", "src/components/RateToggle/index.tsx"],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
+  "ignorePatterns": [
+    "src/lib/",
+    "__fixtures__",
+    ".github/*",
+    "src/components/RateToggle/index.tsx",
+    "src/types/v3",
+    "src/abis/types",
+    "src/locales/**/*.js",
+    "src/locales/**/en-US.po",
+    "src/state/data/generated.ts",
+    "node_modules",
+    "coverage",
+    "build",
+    "dist",
+    ".DS_Store",
+    ".env.local",
+    ".env.development.local",
+    ".env.test.local",
+    ".env.production.local",
+    ".idea/",
+    ".vscode/",
+    "package-lock.json",
+    "yarn.lock"
+  ],
   "extends": [
+    "react-app",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier/@typescript-eslint",
+    "plugin:cypress/recommended",
     "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended"
   ],
+  "plugins": ["simple-import-sort", "unused-imports"],
   "rules": {
+    "unused-imports/no-unused-imports": "error",
+    //    "simple-import-sort/imports": "error",
+    //    "simple-import-sort/exports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off",
@@ -35,10 +64,6 @@
       "error",
       {
         "paths": [
-          {
-            "name": "lodash",
-            "message": "Please import from 'lodash/module' directly to support tree-shaking."
-          },
           {
             "name": "ethers",
             "message": "Please import from '@ethersproject/module' directly to support tree-shaking."

.github/uniswap-original/workflows/integration-tests.yaml

@@ -11,7 +11,7 @@ on:
 jobs:
   integration-tests:
     name: Cypress
-    runs-on: ubuntu-16.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -38,15 +38,14 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - run: yarn cypress install
+
       - run: yarn build
         env:
           CI: false
-          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+          REACT_APP_NETWORK_URL: 'https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847'
           REACT_APP_SERVICE_WORKER: false
 
       - run: yarn integration-test
         env:
           CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-
-

.github/uniswap-original/workflows/lint.yml

@@ -3,15 +3,14 @@ name: Lint
 on:
   push:
     branches:
-      - master
-  pull_request_target:
+      - main
+  pull_request:
     branches:
-      - master
+      - main
 
 jobs:
   run-linters:
     name: Run linters
-    if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.owner.login == github.repository_owner }}
     runs-on: ubuntu-latest
 
     steps:
@@ -35,14 +34,18 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
-      - name: Run linters
-        uses: wearerequired/lint-action@b98b0918aa71490373d2eca9e8e39a9bc1cc2517
+      - name: Run eslint w/ autofix
+        if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.owner.login == github.repository_owner }}
+        uses: wearerequired/lint-action@36c7e6689e80d785d27a22f71d970f3a3b4fcb70
         with:
           github_token: ${{ secrets.github_token }}
           eslint: true
-          eslint_extensions: js,jsx,ts,tsx,json
+          eslint_args: "-c .eslintrc.json"
           auto_fix: true
+
+      - name: Run eslint
+        if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.owner.login != github.repository_owner }}
+        run: yarn eslint .

.github/workflows/bundle.yaml

@@ -0,0 +1,40 @@
+name: Widgets
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+          registry-url: https://registry.npmjs.org
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn widgets:build

.github/workflows/ci.yml

@@ -145,10 +145,15 @@ jobs:
       - name: Run linters
         uses: wearerequired/lint-action@v1
         with:
-          eslint: true
-          prettier: true
           github_token: ${{ secrets.github_token }}
+          eslint: true
+          eslint_args: "-c .eslintrc.json ."
           auto_fix: ${{ github.event_name == 'pull_request' }}
+          prettier: true
+
+      - name: Run eslint
+        if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.owner.login != github.repository_owner }}
+        run: yarn eslint .
 
   build:
     name: Build apps

.gitignore

@@ -3,10 +3,14 @@
 # generated contract types
 /src/types/v3
 /src/abis/types
+/src/lib/locales/**/*.js
+/src/lib/locales/**/en-US.po
+/src/lib/locales/**/pseudo.po
 /src/locales/**/*.js
 /src/locales/**/*.ts
 /src/locales/**/*.json
 /src/locales/**/en-US.po
+/src/locales/**/pseudo.po
 /src/state/data/generated.ts
 
 # dependencies
@@ -15,11 +19,10 @@
 # testing
 /coverage
 
-# production
+# builds
 /build
-
-# bundle
 /dist
+/dts
 
 # misc
 .DS_Store

cosmos.config.json

@@ -1,7 +1,8 @@
 {
-  "staticPath": "public",
   "watchDirs": ["src"],
   "webpack": {
-    "configPath": "./cosmos.webpack.config"
-  }
+    "configPath": "react-scripts/config/webpack.config",
+    "overridePath": "cosmos.override.js"
+  },
+  "port": 5001
 }

cosmos.override.js

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { DefinePlugin } = require('webpack')
+
+// Renders the cosmos fixtures in isolation, instead of using public/index.html.
+module.exports = (webpackConfig) => ({
+  ...webpackConfig,
+  plugins: webpackConfig.plugins.map((plugin) => {
+    if (plugin instanceof HtmlWebpackPlugin) {
+      return new HtmlWebpackPlugin({
+        templateContent: '<body></body>',
+      })
+    }
+    if (plugin instanceof DefinePlugin) {
+      return new DefinePlugin({
+        ...plugin.definitions,
+        'process.env': {
+          ...plugin.definitions['process.env'],
+          REACT_APP_IS_WIDGET: true,
+          REACT_APP_LOCALES: '"../locales"',
+        },
+      })
+    }
+    return plugin
+  }),
+})

cypress-custom/integration/swapMod.ts

@@ -2,35 +2,47 @@ describe('Swap (mod)', () => {
   beforeEach(() => {
     cy.visit('/swap')
   })
+
+  it('starts with an Native/USDC swap and quotes it', () => {
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
+    cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'WETH')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'USDC')
+  })
+
   it('can enter an amount into input', () => {
     cy.get('#swap-currency-input .token-amount-input')
+      .clear()
       .type('0.001', { delay: 400, force: true })
       .should('have.value', '0.001')
   })
 
   it('zero swap amount', () => {
     cy.get('#swap-currency-input .token-amount-input')
+      .clear()
       .type('0.0', { delay: 400, force: true })
       .should('have.value', '0.0')
   })
 
   it('invalid swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input').type('\\', { delay: 400, force: true }).should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input')
+      .clear()
+      .type('\\', { delay: 400, force: true })
+      .should('have.value', '')
   })
 
-  it.skip('can enter an amount into output', () => {
+  it('can enter an amount into output', () => {
     cy.get('#swap-currency-output .token-amount-input')
+      .clear()
       .type('0.001', { delay: 400, force: true })
       .should('have.value', '0.001')
   })
 
   it('zero output amount', () => {
-    cy.get('#swap-currency-output .token-amount-input')
-      .type('0.0', { delay: 400, force: true })
-      .should('have.value', '0.0')
+    cy.get('#swap-currency-output .token-amount-input').clear().type('0.0', { delay: 400 }).should('have.value', '0.0')
   })
 
-  it.skip('can swap ETH for DAI', () => {
+  it('can swap Native for DAI', () => {
     cy.get('#swap-currency-output .open-currency-select-button').click()
     cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').should('be.visible')
     cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click({ force: true })
@@ -55,16 +67,16 @@ describe('Swap (mod)', () => {
       cy.get('#confirm-expert-mode').click()
     })
 
-    it.skip('add a recipient is visible', () => {
+    it('add a recipient is visible', () => {
       cy.get('#add-recipient-button').should('be.visible')
     })
 
-    it.skip('add a recipient', () => {
+    it('add a recipient', () => {
       cy.get('#add-recipient-button').click()
       cy.get('#recipient').should('exist')
     })
 
-    it.skip('remove recipient', () => {
+    it('remove recipient', () => {
       cy.get('#add-recipient-button').click()
       cy.get('#remove-recipient-button').click()
       cy.get('#recipient').should('not.exist')

cypress-custom/support/commands.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="cypress" />
+/// <reference types="Cypress" />
 
 declare namespace Cypress {
   interface Chainable<Subject> {

cypress/fixtures/feeTierDistribution.json

@@ -5,6 +5,11 @@
     }
   },
   "asToken0": [
+    {
+      "feeTier": "100",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "3"
+    },
     {
       "feeTier": "500",
       "totalValueLockedToken0": "0",
@@ -13,7 +18,7 @@
     {
       "feeTier": "3000",
       "totalValueLockedToken0": "0",
-      "totalValueLockedToken1": "7"
+      "totalValueLockedToken1": "4"
     },
     {
       "feeTier": "10000",

cypress/integration/add-liquidity.test.ts

@@ -57,7 +57,7 @@ describe('Add Liquidity', () => {
       cy.wait('@feeTierDistributionQuery')
 
       cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
-      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '70%')
+      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40%')
     })
   })
 })