feat(explorer): update project and migrate to vite

apps/cowswap-frontend/src/lib/i18n.tsx

@@ -81,7 +81,7 @@ const plurals: LocalePlural = {
 export async function dynamicActivate(locale: SupportedLocale) {
   i18n.loadLocaleData(locale, { plurals: plurals[locale] })
   try {
-    const catalog = await import(`../locales/${locale}.js?lingui`)
+    const catalog = await import(`../locales/${locale}.po`)
     // Bundlers will either export it as default or as a named export named default.
     i18n.load(locale, catalog.messages || catalog.default.messages)
     i18n.activate(locale)

apps/explorer/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/config-default.yaml

@@ -0,0 +1,317 @@
+#######################################################################################
+##                                  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 ./README.md
+#   ⚙️Read more here:
+#       https://github.com/gnosis/gp-v1-ui/wiki/Config
+
+# App Id
+#   Identify the app. The IDs range from 1 until 256
+#   Every transaction sent to the blockchain will include the ID and some basic analytic info
+#
+#   ⚠️IMPORTANT: The ID must be unique per App/Client of Gnosis Protocol:
+#       https://github.com/gnosis/gp-v1-ui/wiki/App-Ids-for-Forks
+#   More information about forking the web:
+#       https://github.com/gnosis/gp-v1-ui/wiki/Fork-project
+#
+#appId: 1
+
+# Name of the app
+name: Gnosis Protocol v1 Web
+
+# Logo used for the favicon
+logoPath: './src/assets/img/CowProtocol-icon.svg'
+
+# HTML template
+templatePath: './src/html/index.html'
+
+# Whitelisted tokens from Gnosis Contract retrieved from a smart contract
+tcr:
+  type: 'multi-tcr' # choices: multi-tcr | none
+  config:
+    lists:
+      - networkId: 1
+        listId: 1
+        # contractAddress: '0x1854dae560abb0f399d8badca456663ca5c309d0' # Testing TCR with rare tokens
+        contractAddress: '0x93DB90445B76329e9ed96ECd74e76D8fbf2590d8'
+
+      - networkId: 4
+        contractAddress: '0xBb840456546496E7640DC09ba9fE06E67C157E1b'
+
+# Price estimation/orderbook graph
+dexPriceEstimator:
+  type: 'dex-price-estimator' # choices: dex-price-estimator
+  config:
+    - networkId: 1
+      url_production: https://dex-price-estimator.gnosis.io
+      url_develop: https://price-estimate-mainnet.dev.gnosisdev.com
+
+    - networkId: 4
+      url_production: https://dex-price-estimator.rinkeby.gnosis.io
+      url_develop: https://price-estimate-rinkeby.dev.gnosisdev.com
+
+    - networkId: 100
+      url_production: https://dex-price-estimator.xdai.gnosis.io
+      url_develop: https://price-estimate-xdai.dev.gnosisdev.com
+
+# Subgraph abstraction, used for getting the last price
+theGraphApi:
+  type: 'the-graph' # choices: the-graph
+  config:
+    - networkId: 1
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol
+
+    - networkId: 4
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol-rinkeby
+
+    - networkId: 100
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol-xdai
+
+# Eth node config
+defaultProviderConfig:
+  type: 'infura' # Choices: infura | url
+  config:
+    # It'll be appended to `infuraEndpoint`
+    infuraId: e941376b017d4dada26dc7891456fa3b
+    infuraEndpoint: wss://mainnet.infura.io/ws/v3/
+  #
+  # Example for type `url`
+  # type: 'url'
+  # config:
+  #   ethNodeUrl: <local eth node>
+
+# Exchange contract config
+exchangeContractConfig:
+  type: 'contractBlock' # choices: contractBlock
+  config:
+    - networkId: 1
+      blockNumber: 9340147
+    - networkId: 4
+      blockNumber: 5844678
+    - networkId: 100
+      blockNumber: 11948310
+
+# Wallet Connect
+walletConnect:
+  bridge: 'wss://safe-walletconnect.gnosis.io/'
+
+# tokens that aren't allowed to be traded nor deposited
+disabledTokens:
+  1: # Mainnet
+    - address: '0x57Ab1E02fEE23774580C119740129eAC7081e9D3'
+      name: Synth sUSD (deprecated)
+      symbol: sUSD-old
+      description: This token is disabled for trading and depositing. sUSD will be deprecated and replaced by another token at the end of July 2020.  Go to https://www.synthetix.io for more information
+      reason: DEPRECATED
+      url: https://docs.synthetix.io/integrations/guide/#proxy-deprecation
+
+    - address: '0xC011A72400E58ecD99Ee497CF89E3775d4bd732F'
+      name: Synthetix Network Token (deprecated)
+      symbol: SNX-old
+      description: This token is disabled for trading and depositing. SNX will be deprecated and replaced by another token at the end of July 2020.  Go to https://www.synthetix.io for more information
+      reason: DEPRECATED
+      url: https://docs.synthetix.io/integrations/guide/#proxy-deprecation
+
+    - address: '0x45804880De22913dAFE09f4980848ECE6EcbAf78'
+      name: Paxos Gold
+      symbol: PAXG
+
+    - address: '0xa7DE087329BFcda5639247F96140f9DAbe3DeED1'
+      name: Statera
+      symbol: STA
+
+      # aTokens:
+    - address: '0x7D2D3688Df45Ce7C552E19c27e007673da9204B8'
+    - address: '0xA64BD6C70Cb9051F6A9ba1F163Fdc07E0DfB5F84'
+    - address: '0x71fc860F7D3A592A4a98740e39dB31d25db65ae8'
+    - address: '0x9bA00D6856a4eDF4665BcA2C2309936572473B7E'
+    - address: '0x3a3A65aAb0dd2A17E3F1947bA16138cd37d08c04'
+    - address: '0xfC1E690f61EFd961294b3e1Ce3313fBD8aa4f85d'
+    - address: '0x9D91BE44C06d373a8a226E1f3b146956083803eB'
+    - address: '0x4DA9b813057D04BAef4e5800E36083717b4a0341'
+    - address: '0x328C4c80BC7aCa0834Db37e6600A6c49E12Da4DE'
+    - address: '0x7deB5e830be29F91E298ba5FF1356BB7f8146998'
+    - address: '0xE1BA0FB44CCb0D11b80F92f4f8Ed94CA3fF51D00'
+    - address: '0x6ee0f7bb50a54ab5253da0667b0dc2ee526c30a8'
+    - address: '0x625aE63000f46200499120B906716420bd059240'
+    - address: '0x6FCE4A401B6B80ACe52baAefE4421Bd188e76F6f'
+    - address: '0x71010A9D003445aC60C4e6A7017c1E89A477B438'
+    - address: '0x6Fb0855c404E09c47C3fBCA25f08d4E41f9F062f'
+    - address: '0xFC4B8ED459e00e5400be803A9BB3954234FD50e3'
+  4: [] # Rinkeby
+  100: [] # xDAI
+
+# Initial token selection for the sell token and buy token
+initialTokenSelection:
+  # defaults
+  sellToken: DAI
+  receiveToken: USDC
+  # network override - selected within component as reliant on network
+  networks:
+    '100':
+      sellToken: wxDAI
+      receiveToken: USDC
+
+# Initial Token List
+#   List of token loaded by default
+#   This list is used while the app loads the TCR (if the TCR setting is used)
+initialTokenList:
+  - id: 1
+    name: Wrapped Ether
+    symbol: WETH
+    decimals: 18
+    addressByNetwork:
+      '1': '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'
+      '4': '0xc778417E063141139Fce010982780140Aa0cD5Ab'
+      '100': '0x6A023CCd1ff6F2045C3309768eAd9E68F978f6e1'
+
+  - id: 2
+    name: Tether USD
+    symbol: USDT
+    decimals: 6
+    addressByNetwork:
+      '1': '0xdAC17F958D2ee523a2206206994597C13D831ec7'
+      '4': '0xa9881E6459CA05d7D7C95374463928369cD7a90C'
+      '100': '0x4ECaBa5870353805a9F068101A40E0f32ed605C6'
+
+  - id: 3
+    name: TrueUSD
+    symbol: TUSD
+    decimals: 18
+    addressByNetwork:
+      '1': '0x0000000000085d4780B73119b644AE5ecd22b376'
+      '4': '0x0000000000085d4780B73119b644AE5ecd22b376'      
+
+  - id: 4
+    name: USD Coin
+    symbol: USDC
+    decimals: 6
+    addressByNetwork:
+      '1': '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'
+      '4': '0x4DBCdF9B62e891a7cec5A2568C3F4FAF9E8Abe2b'
+      '100': '0xDDAfbb505ad214D7b80b1f830fcCc89B60fb7A83'
+
+  - id: 5
+    name: Paxos Standard
+    symbol: PAX
+    decimals: 18
+    addressByNetwork:
+      '1': '0x8E870D67F660D95d5be530380D0eC0bd388289E1'
+      '4': '0xBD6A9921504fae42EaD2024F43305A8ED3890F6f'
+
+  - id: 6
+    name: Gemini dollar
+    symbol: GUSD
+    decimals: 2
+    addressByNetwork:
+      '1': '0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd'
+      '4': '0x784B46A4331f5c7C495F296AE700652265ab2fC6'
+
+  - id: 7
+    name: DAI Stablecoin
+    symbol: DAI
+    decimals: 18
+    addressByNetwork:
+      '1': '0x6B175474E89094C44Da98b954EedeAC495271d0F'
+      '4': '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa'
+      # Disabled DAI: It's more convenient to use wxDAI
+      #'100': '0x44fA8E6f47987339850636F88629646662444217'
+
+  - id: 8
+    name: Synth sETH
+    symbol: sETH
+    decimals: 18
+    addressByNetwork:
+      '1': '0x5e74C9036fb86BD7eCdcb084a0673EFc32eA31cb'
+      '4': '0x0647b2c7a2a818276154b0fc79557f512b165bc1'
+
+  - id: 9
+    name: Synth sUSD
+    symbol: sUSD
+    decimals: 18
+    addressByNetwork:
+      '1': '0x57Ab1E02fEE23774580C119740129eAC7081e9D3'
+      '4': '0x1b642a124cdfa1e5835276a6ddaa6cfc4b35d52c'
+      '100': '0xB1950Fb2C9C0CbC8553578c67dB52Aa110A93393'
+
+  - id: 10
+    name: Synth sBTC
+    symbol: sBTC
+    decimals: 18
+    addressByNetwork:
+      '1': '0xfE18be6b3Bd88A2D2A7f928d00292E7a9963CfC6'
+
+  - id: 11
+    name: Wrapped BTC
+    symbol: WBTC
+    decimals: 8
+    addressByNetwork:
+      '1': '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599'
+      '100': '0x8e5bbbb09ed1ebde8674cda39a0c169401db4252'
+
+  - id: 13
+    name: Compound Dai
+    symbol: cDAI
+    decimals: 8
+    addressByNetwork:
+      '1': '0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643'
+
+  - id: 15
+    name: Synthetix Network
+    symbol: SNX
+    decimals: 18
+    addressByNetwork:
+      '1': '0xC011A72400E58ecD99Ee497CF89E3775d4bd732F'
+      '4': '0x322A3346bf24363f451164d96A5b5cd5A7F4c337'
+
+  - id: 16
+    name: Chai
+    symbol: CHAI
+    decimals: 18
+    addressByNetwork:
+      '1': '0x06AF07097C9Eeb7fD685c692751D5C66dB49c215'
+
+  - id: 18
+    name: Gnosis Token
+    symbol: GNO
+    decimals: 18
+    addressByNetwork:
+      '1': '0x6810e776880C02933D47DB1b9fc05908e5386b96'
+      '4': '0xd0Dab4E640D95E9E8A47545598c33e31bDb53C7c'
+      '100': '0x9C58BAcC331c9aa871AFD802DB6379a98e80CEdb'
+
+  - id: 19
+    name: Panvala pan
+    symbol: PAN
+    decimals: 18
+    addressByNetwork:
+      '1': '0xD56daC73A4d6766464b38ec6D91eB45Ce7457c44'
+
+  - id: 20
+    name: STAKE
+    symbol: STAKE
+    decimals: 18
+    addressByNetwork:
+      '1': '0x0ae055097c6d159879521c384f1d2123d1f195e6'
+      '100': '0xb7D311E2Eb55F2f68a9440da38e7989210b9A05e'      
+
+  - id: 21
+    name: Wrapped xDAI
+    symbol: wxDAI
+    decimals: 18
+    addressByNetwork:
+      '100': '0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d'
+
+
+  - id: 0
+    name: OWL
+    symbol: OWL
+    decimals: 18
+    addressByNetwork:
+      '1': '0x1A5F9352Af8aF974bFC03399e3767DF6370d82e4'
+      '4': '0xa7D1C04fAF998F9161fC9F800a99A809b84cfc9D'
+      '100': '0x0905Ab807F8FD040255F0cF8fa14756c1D824931'

apps/explorer/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.svg" />
   </head>
   <body>
     <div id="root"></div>

apps/explorer/jest.config.ts

@@ -0,0 +1,19 @@
+// this is not used for now. we use "craco test", but eventually we will
+import { loadConfig } from './loadConfig'
+
+const CONFIG = loadConfig()
+
+/* eslint-disable */
+export default {
+  displayName: 'explorer',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/explorer',
+  setupFilesAfterEnv: ['../../jest.setup.ts'],
+  setupFiles: ['dotenv/config'],
+  globals: { CONFIG },
+}

apps/explorer/loadConfig.ts

@@ -0,0 +1,22 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import * as YAML from 'yaml'
+
+const SUPPORTED_EXTENSIONS = 'yaml|yml|json'
+const CONFIG_FILE = './config-default.yaml'
+
+function parseJsonOrYaml(filePath: string) {
+  const extension = path.extname(filePath)
+  if (SUPPORTED_EXTENSIONS.split('|').includes(extension.replace('.', ''))) {
+    const content = fs.readFileSync(filePath, 'utf-8')
+    return YAML.parse(content)
+  } else {
+    throw new Error(`Unknown file extension "${extension}". Supported JSON or YAML: ${filePath} `)
+  }
+}
+
+export function loadConfig() {
+  const configPath = path.resolve(__dirname, CONFIG_FILE)
+
+  return parseJsonOrYaml(configPath)
+}