Merge pull request #1234 from gnosis/release/1.1.0

Release/1.1.0

.nvmrc

@@ -0,0 +1 @@
+lts/erbium

.travis.yml

@@ -11,6 +11,13 @@ before_install:
   # Needed to deploy pull request and releases
   - sudo apt-get -y install python-pip python-dev
   - pip install awscli --upgrade --user
+  # use production url for price estimator on master or tagged
+  - export PRICE_ESTIMATOR_URL=$([[
+    $TRAVIS_BRANCH = master || \
+    $TRAVIS_BRANCH = release/* || \
+    $TRAVIS_BRANCH = hotfix/* || \
+    $TRAVIS_TAG != "" ]] && \
+    echo "production" || echo "develop")
 before_deploy:
   # zip ./dist folder if tag IS present
   - if [[ $TRAVIS_TAG != "" && $IPFS_HASH = "" ]]; then

README.md

@@ -193,14 +193,16 @@ dexPriceEstimator:
   type: 'dex-price-estimator'
   config:
     - networkId: number
-      url: string
+      url_production: string
+      url_develop: string
 ```
 
 Where:
 
 - `type` can only be `dex-price-estimator`.
 - `networkId` is a number, such as `1` for Mainnet, `4` for Rinkeby and so on.
-- `url` the endpoint for given `networkId`
+- `url_production` the endpoint for given `networkId` to use in production
+- `url_develop` the endpoint for given `networkId` to use in development (optional)
 
 ### `theGraphApi`
 
@@ -255,6 +257,26 @@ Where:
 
 **Note**: Both values can be provided as environment variables. Respectively, `INFURA_ID` and `ETH_NODE_URL`.
 
+### exchangeContractConfig
+
+Exchange contract config. Used for narrowing down event queries.
+
+**Config format:**
+
+```yaml
+exchangeContractConfig:
+  type: 'contractBlock'
+  config:
+    - networkId: number
+      blockNumber: number
+```
+
+Where:
+
+- `type` can only be `contractBlock`.
+- `networkId` is a number, such as `1` for Mainnet, `4` for Rinkeby and so on.
+- `blockNumber` is the block where contract was deployed to given network
+
 ### Wallet connect
 
 Config for wallet connect. Allows to set a different bridge.

config-default.yaml

@@ -30,10 +30,12 @@ dexPriceEstimator:
   type: 'dex-price-estimator' # choices: dex-price-estimator
   config:
     - networkId: 1
-      url: https://dex-price-estimator.gnosis.io
+      url_production: https://dex-price-estimator.gnosis.io
+      url_develop: https://price-estimate-mainnet.dev.gnosisdev.com
 
     - networkId: 4
-      url: https://dex-price-estimator.rinkeby.gnosis.io
+      url_production: https://dex-price-estimator.rinkeby.gnosis.io
+      url_develop: https://price-estimate-rinkeby.dev.gnosisdev.com
 
 # Subgraph abstraction, used for getting the last price
 theGraphApi:
@@ -58,6 +60,15 @@ defaultProviderConfig:
   # config:
   #   ethNodeUrl: <local eth node>
 
+# Exchange contract config
+exchangeContractConfig:
+  type: 'contractBlock' # choices: contractBlock
+  config:
+    - networkId: 1
+      blockNumber: 9340147
+    - networkId: 4
+      blockNumber: 5844678
+
 # Wallet Connect
 walletConnect:
   bridge: 'wss://safe-walletconnect.gnosis.io/'
@@ -66,7 +77,7 @@ walletConnect:
 disabledTokens:
   1: # Mainnet
     - address: '0x57Ab1E02fEE23774580C119740129eAC7081e9D3'
-      name: Synthetics sUSD (deprecated)
+      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

package.json

@@ -4,6 +4,9 @@
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,
+  "engines": {
+    "node": "12"
+  },
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --mode development --hot",
     "mock": "MOCK=true yarn start",
@@ -28,33 +31,35 @@
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
-    "@gnosis.pm/dapp-ui": "^0.5.3",
-    "@gnosis.pm/dex-js": "^0.4.0",
+    "@gnosis.pm/dex-js": "^0.4.1",
     "@hapi/joi": "^17.1.1",
     "@hot-loader/react-dom": "^16.11.0",
     "@popperjs/core": "^2.0.6",
     "@types/react": "^16.9.19",
     "@types/react-is": "^16.7.1",
     "@types/react-select": "^3.0.10",
-    "@walletconnect/web3-provider": "^1.0.0-beta.46",
+    "@walletconnect/web3-provider": "1.0.0-rc.0",
     "bignumber.js": "^9.0.0",
     "bn.js": "^4.11.8",
     "combine-reducers": "^1.0.0",
     "date-fns": "^2.9.0",
     "detect-browser": "^5.1.0",
+    "eth-json-rpc-middleware": "^4.4.1",
+    "json-rpc-engine": "^5.1.8",
     "modali": "^1.2.0",
     "node-cache": "^5.1.0",
     "qrcode.react": "^1.0.0",
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.12.0",
-    "react-hook-form": "^5.2.0",
+    "react-hook-form": "^5.7.2",
     "react-hot-loader": "^4.12.19",
     "react-router-dom": "^5.1.2",
     "react-select": "^3.0.8",
     "react-toastify": "^5.5.0",
     "styled-components": "^5.0.0",
-    "web3": "^1.2.5"
+    "web3": "^1.2.9-rc.0",
+    "web3modal": "^1.6.3"
   },
   "devDependencies": {
     "@babel/core": "^7.9.4",
@@ -65,13 +70,14 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/register": "^7.8.3",
     "@fortawesome/fontawesome-common-types": "^0.2.26",
+    "@hookform/devtools": "^1.2.1",
     "@types/bn.js": "^4.11.6",
     "@types/combine-reducers": "^1.0.0",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/hapi__joi": "^16.0.12",
     "@types/jest": "^25.1.1",
-    "@types/node": "^13.5.2",
+    "@types/node": "^14.0.14",
     "@types/qrcode.react": "^1.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.5",
@@ -80,7 +86,7 @@
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^26.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-imports": "^2.0.0",
@@ -100,7 +106,7 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-utils": ">=2.0.0",
     "favicons-webpack-plugin": "^3.0.1",
-    "file-loader": "^5.0.2",
+    "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "frontmatter-markdown-loader": "^3.2.1",
     "html-webpack-plugin": "^4.0.0-beta.11",
@@ -112,13 +118,12 @@
     "preload-webpack-plugin": "^3.0.0-beta.4",
     "prettier": "^1.19.1",
     "react-dev-utils": "^10.0.0",
-    "react-hook-form-devtools": "^1.1.3",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.1",
     "style-loader": "^1.1.3",
     "ts-jest": "^25.1.0",
     "ts-loader": "^7.0.2",
-    "typescript": "^3.7.5",
+    "typescript": "^3.9.5",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",

src/App.tsx

@@ -18,13 +18,21 @@ const About = React.lazy(() =>
     'pages/About'
   ),
 )
+
 const Trade = React.lazy(() =>
   import(
     /* webpackChunkName: "Trade_chunk"*/
     'pages/Trade'
   ),
 )
 
+const Trades = React.lazy(() =>
+  import(
+    /* webpackChunkName: "Trade_chunk"*/
+    'pages/Trades'
+  ),
+)
+
 const Strategies = React.lazy(() =>
   import(
     /* webpackChunkName: "Strategies_chunk"*/
@@ -70,6 +78,12 @@ const OrderBook = React.lazy(() =>
     'pages/OrderBook'
   ),
 )
+const Settings = React.lazy(() =>
+  import(
+    /* webpackChunkName: "Settings_chunk"*/
+    'pages/Settings'
+  ),
+)
 
 // Global State
 import { withGlobalContext } from 'hooks/useGlobalState'
@@ -95,6 +109,8 @@ const App: React.FC = () => (
             <Route path="/faq" exact component={FAQ} />
             <Route path="/book" exact component={OrderBook} />
             <Route path="/connect-wallet" exact component={ConnectWallet} />
+            <Route path="/trades" exact component={Trades} />
+            <Route path="/settings" exact component={Settings} />
             <Redirect from="/" to="/trade/DAI-USDC?sell=0&price=0" />
             <Route component={NotFound} />
           </Switch>

src/Console.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Hook, Unhook, Console, Message, Decode } from 'console-feed'
 import styled from 'styled-components'
-import Web3Connect from 'web3connect'
+import { isMobile } from 'web3modal'
 
 const ConsoleWrapper = styled.div`
   position: fixed;
@@ -138,7 +138,7 @@ const ConsoleFrame: React.FC = () => {
 }
 
 const MobileConsole: React.FC = () => {
-  if (!Web3Connect.isMobile()) return null
+  if (!isMobile()) return null
 
   return <ConsoleFrame />
 }

src/HookFormDevtool.tsx

@@ -0,0 +1 @@
+export { DevTool } from '@hookform/devtools'

src/api/deposit/DepositApi.ts

@@ -54,16 +54,13 @@ export interface PendingFlux {
 
 export interface DepositApiDependencies {
   web3: Web3
-  fetchGasPrice(): Promise<string | undefined>
 }
 
 export class DepositApiImpl implements DepositApi {
   protected _contractPrototype: BatchExchangeContract
   protected web3: Web3
   protected static _contractsCache: { [network: number]: BatchExchangeContract } = {}
 
-  protected fetchGasPrice: DepositApiDependencies['fetchGasPrice']
-
   public constructor(injectedDependencies: DepositApiDependencies) {
     Object.assign(this, injectedDependencies)
 
@@ -142,9 +139,7 @@ export class DepositApiImpl implements DepositApi {
   }: DepositParams): Promise<Receipt> {
     const contract = await this._getContract(networkId)
     // TODO: Remove temporal fix for web3. See https://github.com/gnosis/dex-react/issues/231
-    const tx = contract.methods
-      .deposit(tokenAddress, amount.toString())
-      .send({ from: userAddress, gasPrice: await this.fetchGasPrice() })
+    const tx = contract.methods.deposit(tokenAddress, amount.toString()).send({ from: userAddress })
 
     if (txOptionalParams?.onSentTransaction) {
       tx.once('transactionHash', txOptionalParams.onSentTransaction)
@@ -163,9 +158,7 @@ export class DepositApiImpl implements DepositApi {
   }: RequestWithdrawParams): Promise<Receipt> {
     const contract = await this._getContract(networkId)
     // TODO: Remove temporal fix for web3. See https://github.com/gnosis/dex-react/issues/231
-    const tx = contract.methods
-      .requestWithdraw(tokenAddress, amount.toString())
-      .send({ from: userAddress, gasPrice: await this.fetchGasPrice() })
+    const tx = contract.methods.requestWithdraw(tokenAddress, amount.toString()).send({ from: userAddress })
 
     if (txOptionalParams?.onSentTransaction) {
       tx.once('transactionHash', txOptionalParams.onSentTransaction)
@@ -179,9 +172,7 @@ export class DepositApiImpl implements DepositApi {
 
   public async withdraw({ userAddress, tokenAddress, networkId, txOptionalParams }: WithdrawParams): Promise<Receipt> {
     const contract = await this._getContract(networkId)
-    const tx = contract.methods
-      .withdraw(userAddress, tokenAddress)
-      .send({ from: userAddress, gasPrice: await this.fetchGasPrice() })
+    const tx = contract.methods.withdraw(userAddress, tokenAddress).send({ from: userAddress })
 
     if (txOptionalParams?.onSentTransaction) {
       tx.once('transactionHash', txOptionalParams.onSentTransaction)

src/api/dexPriceEstimator/DexPriceEstimatorApi.ts

@@ -29,21 +29,22 @@ interface Token {
 
 // Sample response:
 // {
-//   "baseTokenId": "1",
-//   "quoteTokenId": "2",
-//   "buyAmountInBase": 4.6553080250243255e+27,
-//   "sellAmountInQuote": 1000000000000000000
+//   "baseTokenId": 1,
+//   "quoteTokenId": 2,
+//   "buyAmountInBase": "4655308025024325536192659456",
+//   "sellAmountInQuote": "1000000000000000000"
 // }
 interface GetPriceResponse {
-  baseTokenId: string
-  quoteTokenId: string
+  baseTokenId: number
+  quoteTokenId: number
   buyAmountInBase: string
   sellAmountInQuote: string
 }
 
 export interface PriceEstimatorEndpoint {
   networkId: number
-  url: string
+  url_production: string
+  url_develop?: string
 }
 
 export type DexPriceEstimatorParams = PriceEstimatorEndpoint[]
@@ -57,7 +58,11 @@ export class DexPriceEstimatorApiImpl implements DexPriceEstimatorApi {
 
   public constructor(params: DexPriceEstimatorParams) {
     params.forEach(endpoint => {
-      this.urlsByNetwork[endpoint.networkId] = getDexPriceEstimatorUrl(endpoint.url)
+      this.urlsByNetwork[endpoint.networkId] = getDexPriceEstimatorUrl(
+        process.env.PRICE_ESTIMATOR_URL === 'production'
+          ? endpoint.url_production
+          : endpoint.url_develop || endpoint.url_production, // fallback on required url_production
+      )
     })
   }
 

src/api/earmark.ts

@@ -0,0 +1,24 @@
+import { logDebug } from 'utils'
+
+// 0.1 Gwei, reasonable gasPrice that would still allow flags replacement
+export const MIN_GAS_PRICE = (1e8).toString(10)
+
+export const earmarkGasPrice = (gasPrice: string, userPrint: string): string => {
+  if (!userPrint) return gasPrice
+
+  // don't replace 8000 -> 1201, only if most significant digit is untouched
+  // 80000 -> 81201
+  if (userPrint.length >= gasPrice.length) {
+    // if flags still don't fit even in MIN_GAS_PRICE
+    if (userPrint.length >= MIN_GAS_PRICE.length) return gasPrice
+    gasPrice = MIN_GAS_PRICE
+  }
+
+  const markedGasPrice = gasPrice.slice(0, -userPrint.length) + userPrint
+
+  logDebug('Gas price', gasPrice, '->', markedGasPrice)
+  return markedGasPrice
+}
+
+// simple concatenation, with '0x' for empty data to have `0x<userPrint>` at the least
+export const earmarkTxData = (data = '0x', userPrint: string): string => data + userPrint