feat(tokens)!: token lists refactoring (#3189)

* feat(tokens): tokens and token lists library

* refactor: refactor tokens state

* refactor: refactor tokens lib structure

* chore: fix import

* chore: refactor tokens lib

* chore: fix build

* refactor(tokens): clean up token consts and use TokenWithLogo (#3190)

* feat(tokens): tokens list, search and management ui (#3191)

* refactor(tokens): remove excessive types and consts (#3196)

* refactor(tokens): integrate TokenLogo component (#3197)

* refactor(tokens): wire up components to new hooks (#3198)

* refactor(tokens): remove Uniswap currency entities usage (#3199)

* refactor(tokens): use new tokens UI and logic by default (#3200)

* fix(tokens): fix e2e tests for tokens updates (#3193)

* refactor(tokens): remove legacy code (#3194)

* fix(tokens): fix tokens list loading state (#3201)

* chore: update yarn lock

* feat(tokens): migrate user added data from legacy state (#3267)

apps/cowswap-frontend-e2e/src/e2e/fee.test.ts

@@ -50,40 +50,6 @@ function _assertFeeData(fee: GetQuoteResponse): void {
   expect(fee.quote).to.have.property('feeAmount')
 }
 
-/* Fee not currently being saved in local so commenting this out
- * for now - may be re-implemented in the future so keeping
-
-function _getLocalStorage(): Cypress.Chainable<Storage> {
-  return cy.window().then(window => window.localStorage)
-}
-
-function _getChainFeeStorage(
-  networkKey: string,
-  token?: string
-): Cypress.Chainable<{ [t: string]: FeeInformationObject }> {
-  return (
-    _getLocalStorage()
-      .its(FEE_QUOTES_LOCAL_STORAGE_KEY)
-      // To properly return this we need .should and an expectation
-      .should(feeQuotesStorage => {
-        expect(JSON.parse(feeQuotesStorage)).to.have.property(networkKey)
-        token && expect(JSON.parse(feeQuotesStorage)[RINKEBY]).to.have.property(token)
-      })
-      .then(fee => JSON.parse(fee)[networkKey])
-  )
-}
-
-function _assertFeeFetched(token: string): Cypress.Chainable {
-  return _getChainFeeStorage(RINKEBY, token).then(feeQuoteData => {
-    expect(feeQuoteData).to.exist
-    expect(feeQuoteData).to.have.property(token)
-
-    // THEN: The quote has the expected information
-    const fee = feeQuoteData[token].fee
-    _assertFeeData(fee)
-  })
-} */
-
 describe('Fee endpoint', () => {
   it('Returns the expected info', () => {
     const params = {
@@ -129,7 +95,7 @@ describe('Fee: Complex fetch and persist fee', () => {
 
     // GIVEN: user visits app, selects 0.1 WETH as sell, DAI as buy
     // and goes AFK
-    cy.visit('/#/swap')
+    cy.visit('/#/5/swap')
     cy.swapSelectOutput(DAI)
     cy.swapEnterInputAmount(DEFAULT_SELL_TOKEN.address, INPUT_AMOUNT)
 
@@ -173,7 +139,7 @@ describe('Fee: simple checks it exists', () => {
     })
     // GIVEN: A user loads the swap page
     // WHEN: Select DAI token as output and sells 0.1 WETH
-    cy.visit('/#/swap')
+    cy.visit('/#/5/swap')
     cy.swapSelectOutput(DAI)
     cy.swapEnterInputAmount(DEFAULT_SELL_TOKEN.address, INPUT_AMOUNT)
 
@@ -185,7 +151,7 @@ describe('Fee: simple checks it exists', () => {
 describe('Swap: Considering fee', () => {
   beforeEach(() => {
     // GIVEN: an initial selection of WETH-DAI
-    cy.visit('/#/swap')
+    cy.visit('/#/5/swap')
   })
 
   it("Uses Uniswap price, if there's no tip", () => {

apps/cowswap-frontend-e2e/src/e2e/lists.test.ts

@@ -5,7 +5,7 @@ describe('Lists', () => {
 
   it('change list', () => {
     cy.get('#output-currency-input .open-currency-select-button').click()
-    cy.get('.list-token-manage-button').click()
+    cy.get('#list-token-manage-button').click()
     cy.get('#tokens-lists-table > div').should('have.length.greaterThan', 1)
   })
 })

apps/cowswap-frontend-e2e/src/e2e/swapMod.ts → apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts

@@ -2,7 +2,7 @@ const GNO = '0x02ABBDbAaa7b1BB64B5c878f7ac17f8DDa169532'
 
 describe('Swap (mod)', () => {
   beforeEach(() => {
-    cy.visit('/#/swap')
+    cy.visit('/#/5/swap')
   })
 
   it('starts with wrapped native selected', () => {
@@ -62,10 +62,7 @@ describe('Swap (mod)', () => {
   it('can find GNO and swap Native for GNO', () => {
     cy.get('#output-currency-input .open-currency-select-button').click()
     cy.get('#token-search-input').type('GNO')
-    cy.get(`.token-item-${GNO}`).should('be.visible')
-    cy.get(`.token-item-${GNO}`).click({ force: true })
-    cy.get('#input-currency-input .token-amount-input').should('be.visible')
-    cy.get('#input-currency-input .token-amount-input').type('{selectall}{backspace}{selectall}{backspace}').type('0.5')
+    enterInputAmount(GNO, '0.5')
     cy.get('#output-currency-input .token-amount-input').should('not.equal', '')
     cy.get('#swap-button').should('contain.text', 'Swap').click()
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')

apps/cowswap-frontend-e2e/src/support/commands.ts

@@ -74,11 +74,11 @@ declare namespace Cypress {
      * @example cy.stubResponse({ url: '/api/v1/someEndpoint/', alias: 'endpoint', body: { foo: 'foo' } })
      */
     stubResponse({
-                   method,
-                   url,
-                   alias,
-                   body,
-                 }: {
+      method,
+      url,
+      alias,
+      body,
+    }: {
       method: 'GET' | 'POST' | 'DELETE'
       url: string
       alias?: string
@@ -92,10 +92,11 @@ function _clickOnToken(inputOrOutput: string) {
 }
 
 function _selectTokenFromSelector(tokenAddress: string, inputOrOutput: string) {
-  cy.get('.token-item-' + tokenAddress)
+  cy.get(`#tokens-list button[data-address="${tokenAddress.toLowerCase()}"]`)
     .scrollIntoView()
     .should('be.visible')
-    .click({force: true})
+    .click({ force: true })
+
   cy.get(`#${inputOrOutput}-currency-input .token-amount-input`).should('be.visible')
 }
 
@@ -128,16 +129,17 @@ function selectInput(tokenAddress: string) {
 function pickToken(symbol: string, role: string) {
   cy.get(`#${role}-currency-input .open-currency-select-button`).click()
   cy.get('#token-search-input').type(symbol)
-  cy.get('#currency-list').get('div').contains(symbol).click({force: true})
+  cy.get('#currency-list').get('div').contains(symbol).click({ force: true })
 }
 
 function enterInputAmount(tokenAddress: string, amount: number | string, selectToken = false) {
   // Choose whether to also select token
   // or just input amount
   if (selectToken) {
-    selectOutput(tokenAddress)
+    selectInput(tokenAddress)
   }
-  cy.get('#input-currency-input .token-amount-input').type(amount.toString(), {force: true, delay: 400})
+
+  cy.get('#input-currency-input .token-amount-input').type(amount.toString(), { force: true, delay: 400 })
 }
 
 function enterOutputAmount(tokenAddress: string, amount: number | string, selectToken = false) {
@@ -146,16 +148,21 @@ function enterOutputAmount(tokenAddress: string, amount: number | string, select
   if (selectToken) {
     selectOutput(tokenAddress)
   }
-  cy.get('#input-currency-input .token-amount-output').type(amount.toString(), {force: true, delay: 400})
+  cy.get('#input-currency-input .token-amount-output').type(amount.toString(), { force: true, delay: 400 })
 }
 
-function stubResponse({method, url, alias = 'stubbedResponse', body}: {
-  method: string,
-  url: string,
-  alias?: string,
+function stubResponse({
+  method,
+  url,
+  alias = 'stubbedResponse',
+  body,
+}: {
+  method: string
+  url: string
+  alias?: string
   body?: any
 }) {
-  cy.intercept({method, url}, _responseHandlerFactory(body)).as(alias)
+  cy.intercept({ method, url }, _responseHandlerFactory(body)).as(alias)
 }
 
 Cypress.Commands.add('swapClickInputToken', clickInputToken)

apps/cowswap-frontend-e2e/src/support/ethereum.ts

@@ -5,28 +5,30 @@ import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
 
+const CHAIN_ID = 5
+const CHAIN_NAME = 'goerli'
+
 const INTEGRATION_TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
 assert(INTEGRATION_TEST_PRIVATE_KEY, 'INTEGRATION_TEST_PRIVATE_KEY env missing')
 
 const INTEGRATION_TESTS_INFURA_KEY = Cypress.env('INTEGRATION_TESTS_INFURA_KEY')
-assert(INTEGRATION_TESTS_INFURA_KEY, 'INTEGRATION_TEST_PRIVATE_KEY env missing')
 
-// address of the above key
-export const TEST_ADDRESS_NEVER_USE = new Wallet(INTEGRATION_TEST_PRIVATE_KEY).address
+const NETWORK_URL = Cypress.env('REACT_APP_NETWORK_URL_' + CHAIN_ID)
 
-export const TEST_ADDRESS_NEVER_USE_SHORTENED = `${TEST_ADDRESS_NEVER_USE.substr(
-  0,
-  6
-)}...${TEST_ADDRESS_NEVER_USE.substr(-4, 4)}`
+const PROVIDER_URL = NETWORK_URL || `https://${CHAIN_NAME}.infura.io/v3/${INTEGRATION_TESTS_INFURA_KEY}`
 
-// Mod
-const chainId = 5
-const chainName = 'goerli'
+assert(
+  PROVIDER_URL,
+  `PROVIDER_URL is empty, NETWORK_URL=${NETWORK_URL}, INTEGRATION_TESTS_INFURA_KEY=${INTEGRATION_TESTS_INFURA_KEY}`
+)
+
+// address of the above key
+export const TEST_ADDRESS_NEVER_USE = new Wallet(INTEGRATION_TEST_PRIVATE_KEY).address
 
 // Redefined bridge to fix a supper annoying issue making some contract calls to fail
 //  See https://github.com/ethers-io/ethers.js/issues/1683
 class CustomizedBridge extends Eip1193Bridge {
-  chainId = chainId // Mod
+  chainId = CHAIN_ID
 
   async sendAsync(...args: any[]) {
     console.debug('sendAsync called', ...args)
@@ -56,9 +58,9 @@ class CustomizedBridge extends Eip1193Bridge {
     }
     if (method === 'eth_chainId') {
       if (isCallbackForm) {
-        callback(null, { result: `0x${chainId}` })
+        callback(null, { result: `0x${CHAIN_ID}` })
       } else {
-        return Promise.resolve(`0x${chainId}`)
+        return Promise.resolve(`0x${CHAIN_ID}`)
       }
     }
     try {
@@ -106,7 +108,7 @@ class CustomizedBridge extends Eip1193Bridge {
   }
 }
 
-const provider = new JsonRpcProvider(`https://${chainName}.infura.io/v3/${INTEGRATION_TESTS_INFURA_KEY}`, chainId) // Mod
+const provider = new JsonRpcProvider(PROVIDER_URL, CHAIN_ID)
 const signer = new Wallet(INTEGRATION_TEST_PRIVATE_KEY, provider)
 
 export const injected = new CustomizedBridge(signer, provider)