Merge branch 'develop' of https://github.com/gnosis/dex-react into la…

…yout-v2-orderform3

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'react/prop-types': [1, { skipUndeclared: true }],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
   },
   overrides: [
     {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/dex-react",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,

src/api/dexPriceEstimator/DexPriceEstimatorApi.ts

@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { assert, TEN_BIG_NUMBER, ONE_BIG_NUMBER } from '@gnosis.pm/dex-js'
-import { ORDER_BOOK_HOPS_DEFAULT, ORDER_BOOK_HOPS_MAX } from 'const'
+import { ORDER_BOOK_HOPS_MAX } from 'const'
 
 export interface DexPriceEstimatorApi {
   getPrice(params: GetPriceParams): Promise<BigNumber | null>
@@ -155,16 +155,20 @@ export class DexPriceEstimatorApiImpl implements DexPriceEstimatorApi {
   }
 
   public getOrderBookUrl(params: OrderBookParams): string {
-    const { networkId, baseTokenId, quoteTokenId, hops = ORDER_BOOK_HOPS_DEFAULT, batchId } = params
-    assert(hops >= 0, 'Hops should be positive')
-    assert(hops <= ORDER_BOOK_HOPS_MAX, 'Hops should be not be greater than ' + ORDER_BOOK_HOPS_MAX)
+    const { networkId, baseTokenId, quoteTokenId, hops, batchId } = params
+    if (hops) {
+      assert(hops <= ORDER_BOOK_HOPS_MAX, 'Hops should be not be greater than ' + ORDER_BOOK_HOPS_MAX)
+    }
 
     const baseUrl = this._getBaseUrl(networkId)
 
-    let url = `${baseUrl}markets/${baseTokenId}-${quoteTokenId}?atoms=true&hops=${hops}`
+    let url = `${baseUrl}markets/${baseTokenId}-${quoteTokenId}?atoms=true`
     if (batchId) {
       url += `&batchId=${batchId}`
     }
+    if (hops !== undefined) {
+      url += `&hops=${hops}`
+    }
     return url
   }
 

src/api/wallet/composeProvider.ts

@@ -277,16 +277,13 @@ export const composeProvider = <T extends Provider>(
         if (!txConfig) return false
 
         if (!txConfig.gas) {
-          const gasLimit = await web3.eth
-            .estimateGas({
-              from: txConfig.from,
-              gas: txConfig.gas,
-              value: txConfig.value,
-            })
-            .catch((error) => {
-              console.error('[composeProvider] Error estimating gas, probably failing transaction', txConfig)
-              throw error
-            })
+          // Remove gasPrice from the estimation props, since they broke after last hardfork
+          //  https://github.com/gnosis/dex-react/pull/1618
+          const { gasPrice, ...txConfigEstimation } = txConfig
+          const gasLimit = await web3.eth.estimateGas(txConfigEstimation).catch((error) => {
+            console.error('[composeProvider] Error estimating gas, probably failing transaction', txConfig)
+            throw error
+          })
           logDebug('[composeProvider] No gas Limit. Using estimation ' + gasLimit)
           txConfig.gas = numberToHex(gasLimit)
         } else {

src/app/LegacyTradeApp/pages/OrderBook.tsx

@@ -8,7 +8,7 @@ import useSafeState from 'hooks/useSafeState'
 import { TokenDetails } from 'types'
 import styled from 'styled-components'
 import { Input } from 'components/Input'
-import { MEDIA, ORDER_BOOK_HOPS_DEFAULT, ORDER_BOOK_HOPS_MAX } from 'const'
+import { MEDIA, ORDER_BOOK_HOPS_MAX } from 'const'
 import InputBox from 'components/InputBox'
 
 const OrderBookPage = styled(ContentPage)`
@@ -84,8 +84,19 @@ const OrderBook: React.FC = () => {
   const { tokens: tokenList } = useTokenList({ networkId: networkIdOrDefault })
   const [baseToken, setBaseToken] = useSafeState<TokenDetails | null>(null)
   const [quoteToken, setQuoteToken] = useSafeState<TokenDetails | null>(null)
-  const [hops, setHops] = useSafeState(ORDER_BOOK_HOPS_DEFAULT)
   const [batchId, setBatchId] = useSafeState<number | undefined>(undefined)
+  const [hopsValue, setHopsValue] = useSafeState('')
+  const hops = useMemo(() => {
+    if (hopsValue) {
+      const parsedHops = Number(hopsValue)
+
+      if (!Number.isNaN(parsedHops)) {
+        return parsedHops
+      }
+    }
+
+    return undefined
+  }, [hopsValue])
 
   const tokensLoaded = tokenList.length !== 0
   useEffect(() => {
@@ -132,16 +143,11 @@ const OrderBook: React.FC = () => {
           <InputBox>
             <label>Hops</label>
             <Input
-              value={hops}
+              value={hopsValue}
               type="number"
               min="0"
               max={ORDER_BOOK_HOPS_MAX.toString()}
-              onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-                const hopsValue = e.target.value
-                if (hopsValue && !Number.isNaN(Number(hopsValue))) {
-                  setHops(Number(hopsValue))
-                }
-              }}
+              onChange={(e: ChangeEvent<HTMLInputElement>): void => setHopsValue(e.target.value)}
             />
           </InputBox>
         </span>

src/components/OrderBookWidget.stories.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Story, Meta } from '@storybook/react/types-6-0'
 
-import { ORDER_BOOK_HOPS_DEFAULT, ORDER_BOOK_HOPS_MAX } from 'const'
+import { ORDER_BOOK_HOPS_MAX } from 'const'
 import OrderBookWidget, { OrderBookProps } from './OrderBookWidget'
 import {
   defaultNetworkId,
@@ -17,7 +17,7 @@ const defaultParams: OrderBookProps = {
   baseToken: baseTokenDefault,
   quoteToken: quoteTokenDefault,
   networkId: defaultNetworkId,
-  hops: ORDER_BOOK_HOPS_DEFAULT,
+  hops: undefined,
 }
 
 // with price-estimation endpoints
@@ -35,7 +35,7 @@ export default {
     quoteToken: { control: { type: 'select', options: tokenConfigSymbols } },
     hops: {
       control: {
-        type: 'inline-radio',
+        type: 'select',
         // [0, 1, ..., ORDER_BOOK_HOPS_MAX]
         options: Array.from({ length: ORDER_BOOK_HOPS_MAX + 1 }, (_, index) => index),
       },

src/const.ts

@@ -166,8 +166,7 @@ export const WETH_ADDRESS_RINKEBY = '0xc778417E063141139Fce010982780140Aa0cD5Ab'
 export const WXDAI_ADDRESS_XDAI = '0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d'
 export const WETH_ADDRESS_XDAI = '0x6A023CCd1ff6F2045C3309768eAd9E68F978f6e1'
 
-export const ORDER_BOOK_HOPS_DEFAULT = 2
-export const ORDER_BOOK_HOPS_MAX = 2
+export const ORDER_BOOK_HOPS_MAX = 30
 
 export const REFRESH_WHEN_SECONDS_LEFT = 60 // 1min before batch done
 // for stable reference