Allow to not specify hops (#1622)

* Allow to not specify hops * Remove default hops * Add andpersand * Allow to specify empty number of hops * Allow hops 0 * Set max hops to 30 * Use a select for the hops in story
gnosis · Nov 17, 2020 · 09e4ea7 · 09e4ea7
1 parent edc7e7d
commit 09e4ea7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/src/api/dexPriceEstimator/DexPriceEstimatorApi.ts b/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
   }
 

diff --git a/src/components/OrderBookWidget.stories.tsx b/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),
       },

diff --git a/src/const.ts b/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

diff --git a/src/pages/OrderBook.tsx b/src/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>