perf(multicall): add unit tests and fix a bug (#845)

* start with the migrate page

* Add a bunch of tests and bump up the call size

* Show a link to the old portal, disable the WIP page

* Fix lint error

src/data/V1.ts

-import { ChainId, Pair, Percent, Route, Token, TokenAmount, Trade, TradeType, WETH } from '@uniswap/sdk'
+import { ChainId, JSBI, Pair, Percent, Route, Token, TokenAmount, Trade, TradeType, WETH } from '@uniswap/sdk'
 import { useMemo } from 'react'
 import { useActiveWeb3React } from '../hooks'
+import { useAllTokens } from '../hooks/Tokens'
 import { useV1FactoryContract } from '../hooks/useContract'
 import { NEVER_RELOAD, useSingleCallResult, useSingleContractMultipleData } from '../state/multicall/hooks'
-import { useETHBalances, useTokenBalance } from '../state/wallet/hooks'
+import { useETHBalances, useTokenBalance, useTokenBalances } from '../state/wallet/hooks'
 
 function useV1PairAddress(tokenAddress?: string): string | undefined {
   const contract = useV1FactoryContract()
@@ -29,17 +30,50 @@ function useMockV1Pair(token?: Token): MockV1Pair | undefined {
     : undefined
 }
 
+// returns ALL v1 exchange addresses
 export function useAllV1ExchangeAddresses(): string[] {
   const factory = useV1FactoryContract()
   const exchangeCount = useSingleCallResult(factory, 'tokenCount')?.result
 
   const parsedCount = parseInt(exchangeCount?.toString() ?? '0')
 
-  const indices = [...Array(parsedCount).keys()].map(ix => [ix])
-  return (
-    useSingleContractMultipleData(factory, 'getTokenWithId', indices, NEVER_RELOAD)
-      ?.map(({ result }) => result?.[0])
-      ?.filter(x => x) ?? []
+  const indices = useMemo(() => [...Array(parsedCount).keys()].map(ix => [ix]), [parsedCount])
+  const data = useSingleContractMultipleData(factory, 'getTokenWithId', indices, NEVER_RELOAD)
+
+  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
+}
+
+// returns all v1 exchange addresses in the user's token list
+export function useAllTokenV1ExchangeAddresses(): string[] {
+  const allTokens = useAllTokens()
+  const factory = useV1FactoryContract()
+  const args = useMemo(() => Object.keys(allTokens).map(tokenAddress => [tokenAddress]), [allTokens])
+
+  const data = useSingleContractMultipleData(factory, 'getExchange', args, NEVER_RELOAD)
+
+  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
+}
+
+// returns whether any of the tokens in the user's token list have liquidity on v1
+export function useUserProbablyHasV1Liquidity(): boolean | undefined {
+  const exchangeAddresses = useAllTokenV1ExchangeAddresses()
+
+  const { account, chainId } = useActiveWeb3React()
+
+  const fakeTokens = useMemo(
+    () => (chainId ? exchangeAddresses.map(address => new Token(chainId, address, 18, 'UNI-V1')) : []),
+    [chainId, exchangeAddresses]
+  )
+
+  const balances = useTokenBalances(account ?? undefined, fakeTokens)
+
+  return useMemo(
+    () =>
+      Object.keys(balances).some(tokenAddress => {
+        const b = balances[tokenAddress]?.raw
+        return b && JSBI.greaterThan(b, JSBI.BigInt(0))
+      }),
+    [balances]
   )
 }
 

src/pages/MigrateV1/index.tsx

+import { JSBI, Token } from '@uniswap/sdk'
+import React, { useMemo } from 'react'
+import { RouteComponentProps } from 'react-router'
+import { useAllV1ExchangeAddresses } from '../../data/V1'
+import { useActiveWeb3React } from '../../hooks'
+import { useTokenBalances } from '../../state/wallet/hooks'
+
+const PLACEHOLDER_ACCOUNT = (
+  <div>
+    <h1>You must connect a wallet to use this tool.</h1>
+  </div>
+)
+
+/**
+ * Page component for migrating liquidity from V1
+ */
+export default function MigrateV1({}: RouteComponentProps) {
+  const { account, chainId } = useActiveWeb3React()
+  const v1ExchangeAddresses = useAllV1ExchangeAddresses()
+
+  const v1ExchangeTokens: Token[] = useMemo(() => {
+    return v1ExchangeAddresses.map(exchangeAddress => new Token(chainId, exchangeAddress, 18))
+  }, [chainId, v1ExchangeAddresses])
+
+  const tokenBalances = useTokenBalances(account, v1ExchangeTokens)
+
+  const unmigratedExchangeAddresses = useMemo(
+    () =>
+      Object.keys(tokenBalances).filter(tokenAddress =>
+        tokenBalances[tokenAddress] ? JSBI.greaterThan(tokenBalances[tokenAddress]?.raw, JSBI.BigInt(0)) : false
+      ),
+    [tokenBalances]
+  )
+
+  if (!account) {
+    return PLACEHOLDER_ACCOUNT
+  }
+
+  return <div>{unmigratedExchangeAddresses?.join('\n')}</div>
+}

src/pages/Pool/index.tsx

@@ -6,6 +6,7 @@ import { RouteComponentProps } from 'react-router-dom'
 import Question from '../../components/QuestionHelper'
 import SearchModal from '../../components/SearchModal'
 import PositionCard from '../../components/PositionCard'
+import { useUserProbablyHasV1Liquidity } from '../../data/V1'
 import { useTokenBalances } from '../../state/wallet/hooks'
 import { Link, TYPE } from '../../theme'
 import { Text } from 'rebass'
@@ -58,6 +59,8 @@ export default function Pool({ history }: RouteComponentProps) {
       return <PositionCardWrapper key={i} dummyPair={pair} />
     })
 
+  const hasV1Liquidity = useUserProbablyHasV1Liquidity()
+
   return (
     <AppBody>
       <AutoColumn gap="lg" justify="center">
@@ -92,15 +95,23 @@ export default function Pool({ history }: RouteComponentProps) {
             )}
             {filteredExchangeList}
             <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
-              {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
-              <Link
-                id="import-pool-link"
-                onClick={() => {
-                  history.push('/find')
-                }}
-              >
-                Import it.
-              </Link>
+              {!hasV1Liquidity ? (
+                <>
+                  {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
+                  <Link
+                    id="import-pool-link"
+                    onClick={() => {
+                      history.push('/find')
+                    }}
+                  >
+                    Import it.
+                  </Link>
+                </>
+              ) : (
+                <Link id="migrate-v1-liquidity-link" href="https://migrate.uniswap.exchange">
+                  Migrate your V1 liquidity.
+                </Link>
+              )}
             </Text>
           </AutoColumn>
           <FixedBottom>

src/state/multicall/reducer.test.ts

+import { addMulticallListeners, removeMulticallListeners } from './actions'
+import reducer, { MulticallState } from './reducer'
+import { Store, createStore } from '@reduxjs/toolkit'
+
+describe('multicall reducer', () => {
+  let store: Store<MulticallState>
+  beforeEach(() => {
+    store = createStore(reducer)
+  })
+
+  it('has correct initial state', () => {
+    expect(store.getState().callResults).toEqual({})
+    expect(store.getState().callListeners).toEqual(undefined)
+  })
+
+  describe('addMulticallListeners', () => {
+    it('adds listeners', () => {
+      store.dispatch(
+        addMulticallListeners({
+          chainId: 1,
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ]
+        })
+      )
+      expect(store.getState()).toEqual({
+        callListeners: {
+          [1]: {
+            '0x-0x': {
+              [1]: 1
+            }
+          }
+        },
+        callResults: {}
+      })
+    })
+  })
+
+  describe('removeMulticallListeners', () => {
+    it('noop', () => {
+      store.dispatch(
+        removeMulticallListeners({
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ],
+          chainId: 1
+        })
+      )
+      expect(store.getState()).toEqual({ callResults: {}, callListeners: {} })
+    })
+    it('removes listeners', () => {
+      store.dispatch(
+        addMulticallListeners({
+          chainId: 1,
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ]
+        })
+      )
+      store.dispatch(
+        removeMulticallListeners({
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ],
+          chainId: 1
+        })
+      )
+      expect(store.getState()).toEqual({ callResults: {}, callListeners: { [1]: { '0x-0x': {} } } })
+    })
+  })
+})

src/state/multicall/reducer.ts

@@ -8,7 +8,7 @@ import {
   updateMulticallResults
 } from './actions'
 
-interface MulticallState {
+export interface MulticallState {
   callListeners?: {
     // on a per-chain basis
     [chainId: number]: {
@@ -23,8 +23,8 @@ interface MulticallState {
   callResults: {
     [chainId: number]: {
       [callKey: string]: {
-        data: string | null
-        blockNumber: number
+        data?: string | null
+        blockNumber?: number
         fetchingBlockNumber?: number
       }
     }
@@ -74,10 +74,13 @@ export default createReducer(initialState, builder =>
       calls.forEach(call => {
         const callKey = toCallKey(call)
         const current = state.callResults[chainId][callKey]
-        if (current && current.blockNumber > fetchingBlockNumber) return
-        state.callResults[chainId][callKey] = {
-          ...state.callResults[chainId][callKey],
-          fetchingBlockNumber
+        if (!current) {
+          state.callResults[chainId][callKey] = {
+            fetchingBlockNumber
+          }
+        } else {
+          if (current.fetchingBlockNumber ?? 0 >= fetchingBlockNumber) return
+          state.callResults[chainId][callKey].fetchingBlockNumber = fetchingBlockNumber
         }
       })
     })
@@ -94,7 +97,7 @@ export default createReducer(initialState, builder =>
       state.callResults[chainId] = state.callResults[chainId] ?? {}
       Object.keys(results).forEach(callKey => {
         const current = state.callResults[chainId][callKey]
-        if (current && current.blockNumber > blockNumber) return
+        if (current?.blockNumber ?? 0 > blockNumber) return
         state.callResults[chainId][callKey] = {
           data: results[callKey],
           blockNumber

src/state/multicall/updater.test.ts

+import { activeListeningKeys, outdatedListeningKeys } from './updater'
+
+describe('multicall updater', () => {
+  describe('#activeListeningKeys', () => {
+    it('ignores 0, returns call key to block age key', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+    it('applies min', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                3: 1, // 1 listener cares about 3 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 3
+      })
+    })
+    it('works for infinity', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              },
+              ['def']: {
+                Infinity: 2
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4,
+        def: Infinity
+      })
+    })
+    it('multiple keys', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              },
+              ['def']: {
+                2: 1,
+                5: 2
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4,
+        def: 2
+      })
+    })
+    it('ignores negative numbers', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2,
+                1: -1,
+                [-3]: 4
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+    it('applies min to infinity', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                Infinity: 2, // 2 listeners care about any data
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+  })
+
+  describe('#outdatedListeningKeys', () => {
+    it('returns empty if missing block number or chain id', () => {
+      expect(outdatedListeningKeys({}, { abc: 2 }, undefined, undefined)).toEqual([])
+      expect(outdatedListeningKeys({}, { abc: 2 }, 1, undefined)).toEqual([])
+      expect(outdatedListeningKeys({}, { abc: 2 }, undefined, 1)).toEqual([])
+    })
+    it('returns everything for no results', () => {
+      expect(outdatedListeningKeys({}, { abc: 2, def: 3 }, 1, 1)).toEqual(['abc', 'def'])
+    })
+    it('returns only outdated keys', () => {
+      expect(
+        outdatedListeningKeys({ [1]: { abc: { data: '0x', blockNumber: 2 } } }, { abc: 1, def: 1 }, 1, 2)
+      ).toEqual(['def'])
+    })
+    it('returns only keys not being fetched', () => {
+      expect(
+        outdatedListeningKeys(
+          {
+            [1]: { abc: { data: '0x', blockNumber: 2 }, def: { fetchingBlockNumber: 2 } }
+          },
+          { abc: 1, def: 1 },
+          1,
+          2
+        )
+      ).toEqual([])
+    })
+    it('returns keys being fetched for old blocks', () => {
+      expect(
+        outdatedListeningKeys(
+          { [1]: { abc: { data: '0x', blockNumber: 2 }, def: { fetchingBlockNumber: 1 } } },
+          { abc: 1, def: 1 },
+          1,
+          2
+        )
+      ).toEqual(['def'])
+    })
+    it('respects blocks per fetch', () => {
+      expect(
+        outdatedListeningKeys(
+          { [1]: { abc: { data: '0x', blockNumber: 2 }, def: { data: '0x', fetchingBlockNumber: 1 } } },
+          { abc: 2, def: 2 },
+          1,
+          3
+        )
+      ).toEqual(['def'])
+    })
+  })
+})

src/state/multicall/updater.tsx

@@ -15,7 +15,7 @@ import {
 } from './actions'
 
 // chunk calls so we do not exceed the gas limit
-const CALL_CHUNK_SIZE = 250
+const CALL_CHUNK_SIZE = 500
 
 /**
  * From the current all listeners state, return each call key mapped to the
@@ -23,7 +23,7 @@ const CALL_CHUNK_SIZE = 250
  * @param allListeners the all listeners state
  * @param chainId the current chain id
  */
-function activeListeningKeys(
+export function activeListeningKeys(
   allListeners: AppState['multicall']['callListeners'],
   chainId?: number
 ): { [callKey: string]: number } {
@@ -35,7 +35,11 @@ function activeListeningKeys(
     const keyListeners = listeners[callKey]
 
     memo[callKey] = Object.keys(keyListeners)
-      .filter(key => keyListeners[parseInt(key)] > 0)
+      .filter(key => {
+        const blocksPerFetch = parseInt(key)
+        if (blocksPerFetch <= 0) return false
+        return keyListeners[blocksPerFetch] > 0
+      })
       .reduce((previousMin, current) => {
         return Math.min(previousMin, parseInt(current))
       }, Infinity)
@@ -43,6 +47,41 @@ function activeListeningKeys(
   }, {})
 }
 
+/**
+ * Return the keys that need to be refetched
+ * @param callResults current call result state
+ * @param listeningKeys each call key mapped to how old the data can be in blocks
+ * @param chainId the current chain id
+ * @param latestBlockNumber the latest block number
+ */
+export function outdatedListeningKeys(
+  callResults: AppState['multicall']['callResults'],
+  listeningKeys: { [callKey: string]: number },
+  chainId: number | undefined,
+  latestBlockNumber: number | undefined
+): string[] {
+  if (!chainId || !latestBlockNumber) return []
+  const results = callResults[chainId]
+  // no results at all, load everything
+  if (!results) return Object.keys(listeningKeys)
+
+  return Object.keys(listeningKeys).filter(callKey => {
+    const blocksPerFetch = listeningKeys[callKey]
+
+    const data = callResults[chainId][callKey]
+    // no data, must fetch
+    if (!data) return true
+
+    const minDataBlockNumber = latestBlockNumber - (blocksPerFetch - 1)
+
+    // already fetching it for a recent enough block, don't refetch it
+    if (data.fetchingBlockNumber && data.fetchingBlockNumber >= minDataBlockNumber) return false
+
+    // if data is newer than minDataBlockNumber, don't fetch it
+    return !(data.blockNumber && data.blockNumber >= minDataBlockNumber)
+  })
+}
+
 export default function Updater() {
   const dispatch = useDispatch<AppDispatch>()
   const state = useSelector<AppState, AppState['multicall']>(state => state.multicall)
@@ -57,24 +96,7 @@ export default function Updater() {
   }, [debouncedListeners, chainId])
 
   const unserializedOutdatedCallKeys = useMemo(() => {
-    // wait for these before fetching any data
-    if (!chainId || !latestBlockNumber) return []
-    // no results at all, load everything
-    if (!state.callResults[chainId]) return Object.keys(listeningKeys)
-
-    return Object.keys(listeningKeys).filter(callKey => {
-      const blocksPerFetch = listeningKeys[callKey]
-
-      const data = state.callResults[chainId][callKey]
-      // no data, must fetch
-      if (!data) return true
-
-      // already fetching it
-      if (data.fetchingBlockNumber && data.fetchingBlockNumber >= latestBlockNumber + blocksPerFetch) return false
-
-      // data block number is older than blocksPerFetch blocks
-      return data.blockNumber <= latestBlockNumber - blocksPerFetch
-    })
+    return outdatedListeningKeys(state.callResults, listeningKeys, chainId, latestBlockNumber)
   }, [chainId, state.callResults, listeningKeys, latestBlockNumber])
 
   const serializedOutdatedCallKeys = useMemo(() => JSON.stringify(unserializedOutdatedCallKeys.sort()), [