Merge branch 'master' into develop

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
+    'eslint:recommended',
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
     'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
@@ -44,4 +45,9 @@ module.exports = {
   globals: {
     VERSION: true,
   },
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
 }

package.json

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

src/api/index.ts

@@ -167,10 +167,11 @@ function createTcrApi(web3: Web3): TcrApi | undefined {
     case 'none':
       tcrApi = undefined
       break
-    case 'multi-tcr':
+    case 'multi-tcr': {
       const multiTcrApiConfig = CONFIG.tcr
       tcrApi = new MultiTcrApiProxy({ web3, ...multiTcrApiConfig.config })
       break
+    }
 
     default:
       throw new Error('Unknown implementation for DexPriceEstimatorApi: ' + type)

src/api/tokenList/TokenListApi.ts

@@ -1,4 +1,4 @@
-import { TokenDetails } from 'types'
+import { Network, TokenDetails } from 'types'
 import { getTokensByNetwork } from './tokenList'
 import { logDebug } from 'utils'
 import GenericSubscriptions, { SubscriptionsInterface } from './Subscriptions'
@@ -20,6 +20,9 @@ const addOverrideToDisabledTokens = (networkId: number) => (token: TokenDetails)
 }
 
 export interface TokenList extends SubscriptionsInterface<TokenDetails[]> {
+  setListReady: (state: boolean, networkId?: Network) => void
+  getIsListReady: () => boolean
+  isListReady: boolean
   getTokens: (networkId: number) => TokenDetails[]
   addToken: (params: AddTokenParams) => void
   addTokens: (params: AddTokensParams) => void
@@ -64,6 +67,10 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
   private _tokensByNetwork: { [networkId: number]: TokenDetails[] }
   private _tokenAddressNetworkSet: Set<string>
 
+  // token list flag - prevents stale/incorrect data
+  // from being presented during token list calculation
+  public isListReady = true
+
   public constructor({ networkIds, initialTokenList }: TokenListApiParams) {
     super()
 
@@ -93,6 +100,17 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
     })
   }
 
+  public setListReady(state: boolean, networkId?: Network): void {
+    this.isListReady = state
+    if (this.isListReady && networkId) {
+      this.triggerSubscriptions(this._tokensByNetwork[networkId])
+    }
+  }
+
+  public getIsListReady(): boolean {
+    return this.isListReady
+  }
+
   public hasToken(params: HasTokenParams): boolean {
     return this._tokenAddressNetworkSet.has(TokenListApiImpl.constructAddressNetworkKey(params))
   }

src/api/tokenList/TokenListApiMock.ts

@@ -5,12 +5,18 @@ import GenericSubscriptions from './Subscriptions'
 export class TokenListApiMock extends GenericSubscriptions<TokenDetails[]> implements TokenList {
   private _tokenList: TokenDetails[]
 
+  public isListReady = false
+
   public constructor(tokenList: TokenDetails[]) {
     super()
 
     this._tokenList = tokenList
   }
 
+  public getIsListReady(): boolean {
+    return this.isListReady
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public getTokens(_networkId: number): TokenDetails[] {
     return this._tokenList
@@ -34,6 +40,10 @@ export class TokenListApiMock extends GenericSubscriptions<TokenDetails[]> imple
     this._tokenList = tokenList
     this.triggerSubscriptions(tokenList)
   }
+
+  public setListReady(state: boolean): void {
+    this.isListReady = state
+  }
 }
 
 export default TokenListApiMock

src/api/wallet/WalletApi.ts

@@ -67,7 +67,7 @@ export interface WalletApi {
 export interface WalletInfo {
   isConnected: boolean
   userAddress?: string
-  networkId?: number
+  networkId?: Network
   blockNumber?: number
 }
 
@@ -338,6 +338,7 @@ export class WalletApiImpl implements WalletApi {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       provider.handleReadRequests = async function (payload: unknown): Promise<unknown> {
+        if (payload && typeof payload === 'object' && 'skipCache' in payload) delete payload['skipCache']
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (!this.http) {

src/components/OrderBookBtn.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import Modal, { useModal } from 'components/common/Modal'
 
@@ -115,19 +115,18 @@ export const OrderBookBtn: React.FC<OrderBookBtnProps> = (props: OrderBookBtnPro
   const { baseToken: baseTokenDefault, quoteToken: quoteTokenDefault, label, className } = props
   const { networkIdOrDefault: networkId } = useWalletConnection()
   // get all tokens
-  const tokenList = useTokenList({ networkId })
+  const { tokens: tokenList } = useTokenList({ networkId })
   const [baseToken, setBaseToken] = useSafeState<TokenDetails>(baseTokenDefault)
   const [quoteToken, setQuoteToken] = useSafeState<TokenDetails>(quoteTokenDefault)
   const networkDescription = networkId !== Network.Mainnet ? ` (${getNetworkFromId(networkId)})` : ''
 
-  // Update if any of the base tokens change
-  useEffect(() => {
-    setBaseToken(baseTokenDefault)
-    setQuoteToken(quoteTokenDefault)
-  }, [baseTokenDefault, quoteTokenDefault, setBaseToken, setQuoteToken])
-
   const [modalHook, toggleModal] = useModal({
     ...DEFAULT_MODAL_OPTIONS,
+    onShow: () => {
+      // Update if any of the base tokens change
+      setBaseToken(baseTokenDefault)
+      setQuoteToken(quoteTokenDefault)
+    },
     onHide: () => {
       // Reset the selection on close
       setBaseToken(baseTokenDefault)

src/components/PoolingWidget/index.tsx

@@ -151,7 +151,7 @@ const PoolingInterface: React.FC = () => {
 
   const { networkId, networkIdOrDefault, userAddress } = useWalletConnection()
   // Get all the tokens for the current network
-  const tokenList = useTokenList({ networkId: networkIdOrDefault })
+  const { tokens: tokenList } = useTokenList({ networkId: networkIdOrDefault })
 
   const tokens = useMemo(() => {
     return (

src/components/Settings/WalletConnect.tsx

@@ -25,9 +25,11 @@ const WCSettingsSchema = Joi.object({
   rpc: Joi.object({
     mainnet: RPCSchema,
     rinkeby: RPCSchema,
+    xDAI: RPCSchema,
   }).empty({
     mainnet: '',
     rinkeby: '',
+    xDAI: '',
   }),
 })
   .oxor('infuraId', 'rpc')
@@ -192,7 +194,7 @@ export const WCSettings: React.FC<WCSettingsProps> = ({ register, errors }) => {
       <Disclaimer>
         <p>
           Here you can set the <strong>InfuraId</strong> or <strong>RPC URL</strong> that will be used for connecting
-          the WalletConnect provider to Mainnet and/or Rinkeby. It is also possible to set a custom WalletConnect{' '}
+          the WalletConnect provider to Mainnet, Rinkeby and/or xDAI. It is also possible to set a custom WalletConnect{' '}
           <strong>Bridge URL</strong> to use instead of the default one.
         </p>
       </Disclaimer>
@@ -240,6 +242,18 @@ export const WCSettings: React.FC<WCSettingsProps> = ({ register, errors }) => {
                   <small className="inputLabel">RINKEBY </small>
                 </InputBox>
               </InputContainer>
+              <InputContainer>
+                <InputBox>
+                  <Input
+                    type="text"
+                    className="movingLabel"
+                    name="walletconnect.rpc.xDAI"
+                    ref={register}
+                    placeholder="https://xdai.node_url"
+                  />
+                  <small className="inputLabel">xDAI </small>
+                </InputBox>
+              </InputContainer>
             </FormField>
             <WCError errors={errors} name="rpc" />
           </InnerFormSection>

src/components/TokenOptionItem.tsx

@@ -176,7 +176,7 @@ const generateMessage = ({
     case TokenFromExchange.NOT_ERC20:
       return <>Not a valid ERC20 token</>
     // registered but not in list --> option to add
-    case TokenFromExchange.NOT_IN_TOKEN_LIST:
+    case TokenFromExchange.NOT_IN_TOKEN_LIST: {
       if (!token || !('id' in token)) return <>{defaultText}</>
 
       const handleAddToken: React.MouseEventHandler<HTMLButtonElement> = async (e) => {
@@ -201,6 +201,7 @@ const generateMessage = ({
           <button onClick={handleAddToken}>Add Token</button>
         </OptionItem>
       )
+    }
     default:
       return <>{defaultText}</>
   }

src/components/TradeWidget/index.tsx

@@ -152,7 +152,7 @@ const TradeWidgetContainer: React.FC = () => {
   const sellTokenSymbol = decodeSymbol(encodedSellTokenSymbol || '')
   const receiveTokenSymbol = decodeSymbol(decodeReceiveTokenSymbol || '')
 
-  const { sellToken: initialSellTokenDefaultNetwork, buyToken: initialReceiveTokenDefaultNetwork } =
+  const { sellToken: initialSellTokenDefaultNetwork, receiveToken: initialReceiveTokenDefaultNetwork } =
     initialTokenSelection.networks[networkIdOrDefault] || {}
 
   const sellTokenWithFallback = useMemo(

src/components/TradesWidget/TradeRow.tsx

@@ -114,6 +114,7 @@ export const TradeRow: React.FC<TradeRowProps> = (params) => {
           return `${fillPercentage} matched out of ${orderAmount} ${displayTokenSymbolOrLink(sellToken)}`
         }
       }
+      // falls through
       case 'liquidity':
       case 'unknown':
       default:

src/components/UserWallet/UserWallet.styled.ts

@@ -254,7 +254,7 @@ export const NetworkTitle = styled.div`
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.3rem;
-  top: -0.6rem;
+  top: -0.8rem;
   white-space: nowrap;
 `
 

src/hooks/useManageTokens.tsx

@@ -148,7 +148,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
 const ManageTokensContainer: React.FC = () => {
   const { networkId, networkIdOrDefault } = useWalletConnection()
   // get all tokens
-  const tokens = useTokenList({ networkId })
+  const { tokens } = useTokenList({ networkId })
 
   const [search, setSearch] = useState('')
   const { value: debouncedSearch, setImmediate: setDebouncedSearch } = useDebounce(search, 500)

src/hooks/useOrders.ts

@@ -11,6 +11,7 @@ import useGlobalState from './useGlobalState'
 import { useWalletConnection } from './useWalletConnection'
 import usePendingOrders from './usePendingOrders'
 import { useCheckWhenTimeRemainingInBatch } from './useTimeRemainingInBatch'
+import { useTokenList } from './useTokenList'
 
 // Constants/Types
 import { REFRESH_WHEN_SECONDS_LEFT } from 'const'
@@ -32,6 +33,12 @@ export function useOrders(): Result {
     dispatch,
   ] = useGlobalState()
 
+  // TODO: check this - currently in use for subscription
+  // to change in token list to trigger update of orders
+  // and the incorrect state shown sometimes when loading app from
+  // fresh state and seeing incorrect token list Issue #1486
+  const { tokens, isListReady } = useTokenList({ networkId })
+
   // Pending Orders
   const pendingOrders = usePendingOrders()
 
@@ -41,9 +48,11 @@ export function useOrders(): Result {
   useEffect(() => {
     // continue loading new orders
     // from current offset
-    setIsLoading(true)
+    // make sure token list is ready before setting
+    isListReady && setIsLoading(true)
+
     // whenever new block is mined
-  }, [blockNumber, setIsLoading])
+  }, [blockNumber, isListReady, setIsLoading])
 
   useEffect(() => {
     let cancelled = false
@@ -140,7 +149,8 @@ export function useOrders(): Result {
     }
     forceOrdersRefresh()
     dispatch(overwriteOrders([]))
-  }, [userAddress, networkId, forceOrdersRefresh, dispatch])
+    // Subscribe to tokens change to force orders refresh
+  }, [tokens, userAddress, networkId, forceOrdersRefresh, dispatch])
 
   return {
     orders,

src/hooks/useTokenBalances.ts

@@ -114,7 +114,7 @@ export const useTokenBalances = (passOnParams: Partial<UseTokenListParams> = {})
   const [error, setError] = useSafeState(false)
 
   // get all tokens, maybe without deprecated
-  const tokens = useTokenList({ networkId: walletInfo.networkId, ...passOnParams })
+  const { tokens } = useTokenList({ networkId: walletInfo.networkId, ...passOnParams })
 
   // Get token balances
   useEffect(() => {

src/hooks/useTokenList.ts

@@ -3,20 +3,25 @@ import { TokenDetails } from 'types'
 import useSafeState from './useSafeState'
 import { getTokens, subscribeToTokenList } from 'services'
 import { EMPTY_ARRAY } from 'const'
+import { tokenListApi } from 'api'
 
 export interface UseTokenListParams {
   networkId?: number
   excludeDeprecated?: boolean
 }
 
-export const useTokenList = ({ networkId, excludeDeprecated }: UseTokenListParams = {}): TokenDetails[] => {
+export const useTokenList = ({ networkId, excludeDeprecated }: UseTokenListParams = {}): {
+  tokens: TokenDetails[]
+  isListReady: boolean
+} => {
   // sync get tokenList
   const unfilteredTokens = networkId === undefined ? EMPTY_ARRAY : getTokens(networkId)
 
   const tokens = useMemo(() => {
     if (!excludeDeprecated) return unfilteredTokens
+    const filteredList = unfilteredTokens.filter((token) => !token.disabled)
 
-    return unfilteredTokens.filter((token) => !token.disabled)
+    return filteredList
   }, [excludeDeprecated, unfilteredTokens])
 
   // force update with a new value each time
@@ -26,5 +31,5 @@ export const useTokenList = ({ networkId, excludeDeprecated }: UseTokenListParam
     return subscribeToTokenList(() => forceUpdate({}))
   }, [forceUpdate])
 
-  return tokens
+  return { tokens, isListReady: tokenListApi.getIsListReady() }
 }

src/hooks/useWalletConnection.ts

@@ -6,7 +6,7 @@ import { BlockchainUpdatePrompt, WalletInfo } from 'api/wallet/WalletApi'
 
 interface PendingStateObject extends WalletInfo {
   pending: true
-  networkIdOrDefault: number
+  networkIdOrDefault: Network
 }
 
 const PendingState: PendingStateObject = {
@@ -33,7 +33,7 @@ const constructPendingState = ({ chainId, account, blockHeader }: BlockchainUpda
 }
 
 export const useWalletConnection = ():
-  | (WalletInfo & { pending: false; networkIdOrDefault: number })
+  | (WalletInfo & { pending: false; networkIdOrDefault: Network })
   | PendingStateObject => {
   const [walletInfo, setWalletInfo] = useSafeState<WalletInfo | null>(null)
 

src/pages/OrderBook.tsx

@@ -81,7 +81,7 @@ const OrderBookWrapper = styled.div`
 const OrderBook: React.FC = () => {
   const { networkIdOrDefault } = useWalletConnection()
   // get all tokens
-  const tokenList = useTokenList({ networkId: networkIdOrDefault })
+  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)