978/config file (gnosis#987)

* Bumping dex-js to include Tcr contract bindings

* Addeding config types

* Moving TCR config to global config file

* Added TheGraph and DexPriceEstimator configs

* Add config loader

* Move jest config to it's own file and add CONFIG global

* Add config as a yaml file

* Refactor apis to use global config

* Add config tests

* Make TCR optional

* Expose global config using webpack

* Disable annoying error of eslint analyising JS files

* Update yarn lock

* Do not fail with global

* Fix issues in config test

* Rename app name

* Fix issue with globals

* Fix issue with globals

* Small hack to make it work, however added some fixmes to review later!

* Use appName

* Simplify set creation

Co-authored-by: Velenir <[email protected]>

* Apply Dimas suggestions to fix issues with the declarations

* Use interface instead of type

* Simplify parsing config

* Make app name mandatory

* Rename default config

* Add a WARN to not override

* Improve extenssion checking

* Don't read a file if the extenssion is unsupported

* Improve definition of tcrApi

* Simplify config extraction

* Removing uncessary config from webpack

* Moving env vars from Define to Environment plugin

* Allowing custom config files of different formats

* Do not load custom config when testing

* Added logoPath as config option

* Added test for new config `logoPath`

* Checking for files with given extension instead of checking every file
on custom folder

* Adding templatePath to default config

* Added Eth node config

* fix type inference

* Removing unused import after cherry-pick

Co-authored-by: Leandro Boscariol <[email protected]>
Co-authored-by: Anxo Rodriguez <[email protected]>
Co-authored-by: Velenir <[email protected]>
Co-authored-by: Velenir <[email protected]>

Author: 4 people

.eslintrc.js

@@ -26,6 +26,15 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },
+  overrides: [
+    {
+      files: ['**/*.js'],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 0,
+        '@typescript-eslint/no-var-requires': 0,
+      },
+    },
+  ],
   plugins: ['react-hooks'],
   settings: {
     react: {

README.md

@@ -109,12 +109,41 @@ import About from 'pages/About'
 // will try resolving from custom/ first and failing that from src/
 ```
 
-If you also need to change contents of `index.html`, you will have to modify `webpack.config.babel.js`:
+## Config
 
-```js
-new HtmlWebPackPlugin({
-  template: './src/html/index.html',
-  title: ...
+### TCR (Optional)
+
+Tokens are dynamically loaded from the contract, but it might not be desirable to display everything in the interface.
+
+To dynamically control which tokens are displayed without the need of a redeployment, it's possible to use a Token Curated Registry (TCR) contract per network.
+
+The only requirement is that this contract implements the following method:
+
+```sol
+function getTokens(uint256 _listId) public view returns (address[] memory)
+```
+
+For a sample implementation, refer to [dxDAO's TCR](https://github.com/nicoelzer/dxDAO-Token-Registry/blob/master/contracts/dxTokenRegistry.sol).
+
+<!-- TODO: use a central place for all configs https://github.com/gnosis/dex-react/issues/978 -->
+
+Add the relevant config to [this file](./src/api/index.ts).
+
+Config format:
+
+```ts
+{
+  <networkId>: {
+    listId: 4
+    contractAddress: '0xa2d...'
+  }
+}
 ```
 
-A good idea would be to conditionally change `template` path based on external config or an env variable.
+Where:
+
+- `<networkId>` is a number, such as `1` for Mainnet, `4` for Rinkeby and so on.
+- `listId` is optional and defaults to `0`
+- `contractAddress` the address of the contract deployed in network `<networkId>`
+
+**Note**: For networks where a TCR contract is not provided, the tokens will not be filtered.

config-default.yaml

@@ -0,0 +1,63 @@
+#######################################################################################
+##                                  DEFAULT CONFIG                                   ##
+#######################################################################################
+# - Defines the default configuration
+# - **WARNING**: Do not modify this file
+#   - For custom config create a new file "custom/config.yaml"
+#   - You can override in the custom file any config that is defined here
+#   - For redefining components, or for more information, follow the instructions in Github:
+#       https://github.com/gnosis/dex-react
+
+# TODO: Rename Dapp into Gnosis Protocol DApp
+name: Mesa - Gnosis Protocol DApp
+
+logoPath: './src/assets/img/logo.svg'
+
+templatePath: './src/html/index.html'
+
+# Whitelisted tokens from Gnosis Contract retrieved from a smart contract
+tcr:
+  type: 'multi-tcr' # json-file, kleros, multi-tcr, none (for full list, it's not the default)
+  config:
+    lists:
+      - networkId: 1
+        listId: 1
+        contractAddress: '0x1854dae560abb0f399d8badca456663ca5c309d0'
+
+      - networkId: 4
+        contractAddress: '0xBb840456546496E7640DC09ba9fE06E67C157E1b'
+
+# Gets a price estimation for a given volume
+dexPriceEstimator:
+  type: 'dex-price-estimator' # dex-price-estimator, the-graph
+  config:
+    - networkId: 1
+      url: https://dex-price-estimator.gnosis.io
+
+    - networkId: 4
+      url: https://dex-price-estimator.rinkeby.gnosis.io
+
+# Subgraph abstraction, used for getting the last price
+theGraphApi:
+  type: 'the-graph' # json-file, kleros, multi-tcr, none (for full list, it's not the default)
+  config:
+    - networkId: 1
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol
+
+    - networkId: 4
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol-rinkeby
+
+# Eth node config
+defaultProviderConfig:
+  type: 'infura' # Choices: infura | url
+  config:
+    # It'll be appended to `ethNodeUrl`
+    infuraId: 607a7dfcb1ad4a0b83152e30ce20cfc5
+    # Eth node websocket url to use.
+    # When `infuraId` not set, is used as is
+    infuraEndpoint: wss://mainnet.infura.io/ws/v3/
+  #
+  # Example for type `url`
+  # type: 'url'
+  # config:
+  #   ethNodeUrl: <local eth node>

jest.config.js

@@ -0,0 +1,27 @@
+const config = require('./src/loadConfig')(true)
+
+module.exports = {
+  roots: ['<rootDir>/test'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: ['<rootDir>/test/setupEnzyme.ts'],
+  moduleNameMapper: {
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/mocks/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/test/mocks/fileMock.js',
+  },
+  globalSetup: '<rootDir>/test/globalSetup.ts',
+  globals: {
+    CONFIG: config,
+    'ts-jest': {
+      diagnostics: {
+        warnOnly: true,
+      },
+    },
+  },
+}

package.json

@@ -21,38 +21,6 @@
       "pre-commit": "npm run verify"
     }
   },
-  "jest": {
-    "roots": [
-      "<rootDir>/test"
-    ],
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
-    "moduleDirectories": [
-      "node_modules",
-      "src"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/setupEnzyme.ts"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/mocks/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/test/mocks/fileMock.js"
-    },
-    "globalSetup": "<rootDir>/test/globalSetup.ts"
-  },
   "author": "",
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.12",
@@ -154,6 +122,7 @@
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "webpack-dev-server": "^3.10.1",
+    "yaml": "^1.9.2"
   }
 }

src/api/dexPriceEstimator/DexPriceEstimatorApi.ts

@@ -1,6 +1,5 @@
 import BigNumber from 'bignumber.js'
 import { assert, TEN_BIG_NUMBER, ONE_BIG_NUMBER } from '@gnosis.pm/dex-js'
-import { Network } from 'types'
 import { ORDER_BOOK_HOPS_DEFAULT, ORDER_BOOK_HOPS_MAX } from 'const'
 
 export interface DexPriceEstimatorApi {
@@ -42,32 +41,23 @@ interface GetPriceResponse {
   sellAmountInQuote: string
 }
 
-export interface Params {
-  networkIds: number[]
+export interface PriceEstimatorEndpoint {
+  networkId: number
+  url: string
 }
 
-function getDexPriceEstimatorUrl(networkId: number): string {
-  const basePath = 'api/v1/'
+export type DexPriceEstimatorParams = PriceEstimatorEndpoint[]
 
-  switch (networkId) {
-    case Network.Mainnet:
-      return `https://dex-price-estimator.gnosis.io/${basePath}`
-    case Network.Rinkeby:
-      return `https://dex-price-estimator.rinkeby.gnosis.io/${basePath}`
-    default:
-      throw new Error(`dex-price-estimator not available for network ${networkId}`)
-  }
+function getDexPriceEstimatorUrl(baseUlr: string): string {
+  return `${baseUlr}${baseUlr.endsWith('/') ? '' : '/'}api/v1/`
 }
 
 export class DexPriceEstimatorApiImpl implements DexPriceEstimatorApi {
-  private urlsByNetwork: { [networkId: number]: string }
-
-  public constructor(params: Params) {
-    const { networkIds } = params
+  private urlsByNetwork: { [networkId: number]: string } = {}
 
-    this.urlsByNetwork = {}
-    networkIds.forEach(networkId => {
-      this.urlsByNetwork[networkId] = getDexPriceEstimatorUrl(networkId)
+  public constructor(params: DexPriceEstimatorParams) {
+    params.forEach(endpoint => {
+      this.urlsByNetwork[endpoint.networkId] = getDexPriceEstimatorUrl(endpoint.url)
     })
   }
 

src/api/dexPriceEstimator/DexPriceEstimatorApiProxy.ts

@@ -1,11 +1,11 @@
 import { CacheMixin } from 'api/proxy'
 import { PRICES_CACHE_TIME } from 'const'
-import { DexPriceEstimatorApiImpl, Params, DexPriceEstimatorApi } from './DexPriceEstimatorApi'
+import { DexPriceEstimatorApiImpl, DexPriceEstimatorParams, DexPriceEstimatorApi } from './DexPriceEstimatorApi'
 
 export class DexPriceEstimatorApiProxy extends DexPriceEstimatorApiImpl {
   private cache: CacheMixin
 
-  public constructor(params: Params) {
+  public constructor(params: DexPriceEstimatorParams) {
     super(params)
 
     this.cache = new CacheMixin()

src/api/index.ts

@@ -17,7 +17,7 @@ import { TheGraphApiProxy } from './thegraph/TheGraphApiProxy'
 import { DexPriceEstimatorApi } from './dexPriceEstimator/DexPriceEstimatorApi'
 import { DexPriceEstimatorApiProxy } from './dexPriceEstimator/DexPriceEstimatorApiProxy'
 import { TcrApi } from './tcr/TcrApi'
-import { TcrApiProxy } from './tcr/TcrApiProxy'
+import { MultiTcrApiProxy } from './tcr/MultiTcrApiProxy'
 import {
   tokenList,
   exchangeBalanceStates,
@@ -114,39 +114,54 @@ function createTokenListApi(): TokenList {
 }
 
 function createTheGraphApi(): TheGraphApi {
-  const urls = {
-    [Network.Mainnet]: 'https://api.thegraph.com/subgraphs/name/gnosis/protocol',
-    [Network.Rinkeby]: 'https://api.thegraph.com/subgraphs/name/gnosis/protocol-rinkeby',
+  const { type, config } = CONFIG.theGraphApi
+  let theGraphApi: TheGraphApi
+  switch (type) {
+    case 'the-graph':
+      theGraphApi = new TheGraphApiProxy(config)
+      break
+
+    default:
+      throw new Error('Unknown implementation for TheGraphApi: ' + type)
   }
 
-  const theGraphApi = new TheGraphApiProxy({ urls })
-
   window['theGraphApi'] = theGraphApi
-
   return theGraphApi
 }
 
 function createDexPriceEstimatorApi(): DexPriceEstimatorApi {
-  const networkIds = [Network.Mainnet, Network.Rinkeby]
-
-  const dexPriceEstimatorApi = new DexPriceEstimatorApiProxy({ networkIds })
+  const { type, config } = CONFIG.dexPriceEstimator
+  let dexPriceEstimatorApi: DexPriceEstimatorApi
+  switch (type) {
+    case 'dex-price-estimator':
+      dexPriceEstimatorApi = new DexPriceEstimatorApiProxy(config)
+      break
+
+    default:
+      throw new Error('Unknown implementation for DexPriceEstimatorApi: ' + type)
+  }
 
   window['dexPriceEstimatorApi'] = dexPriceEstimatorApi
-
   return dexPriceEstimatorApi
 }
 
-function createTcrApi(web3: Web3): TcrApi {
-  // TODO: load config from config file
-  const config = {
-    1: { listId: 1, contractAddress: '0x1854dae560abb0f399d8badca456663ca5c309d0' },
-    4: { contractAddress: '0xBb840456546496E7640DC09ba9fE06E67C157E1b' },
+function createTcrApi(web3: Web3): TcrApi | undefined {
+  const { type } = CONFIG.tcr
+  let tcrApi: TcrApi | undefined
+  switch (CONFIG.tcr.type) {
+    case 'none':
+      tcrApi = undefined
+      break
+    case 'multi-tcr':
+      const multiTcrApiConfig = CONFIG.tcr
+      tcrApi = new MultiTcrApiProxy({ web3, ...multiTcrApiConfig.config })
+      break
+
+    default:
+      throw new Error('Unknown implementation for DexPriceEstimatorApi: ' + type)
   }
 
-  const tcrApi = new TcrApiProxy({ web3, config })
-
   window['tcrApi'] = tcrApi
-
   return tcrApi
 }
 
@@ -165,4 +180,4 @@ export const exchangeApi: ExchangeApi = createExchangeApi(erc20Api, injectedDepe
 export const tokenListApi: TokenList = createTokenListApi()
 export const theGraphApi: TheGraphApi = createTheGraphApi()
 export const dexPriceEstimatorApi: DexPriceEstimatorApi = createDexPriceEstimatorApi()
-export const tcrApi: TcrApi = createTcrApi(web3)
+export const tcrApi: TcrApi | undefined = createTcrApi(web3)