fix: improve how we use blocks per fetch in the memoization of the listeners (#1920)

fixes https://github.com/Uniswap/uniswap-interface/issues/1877

src/state/multicall/actions.ts

@@ -39,13 +39,13 @@ export function parseCallKey(callKey: string): Call {
 
 export interface ListenerOptions {
   // how often this data should be fetched, by default 1
-  readonly blocksPerFetch?: number
+  readonly blocksPerFetch: number
 }
 
-export const addMulticallListeners = createAction<{ chainId: number; calls: Call[]; options?: ListenerOptions }>(
+export const addMulticallListeners = createAction<{ chainId: number; calls: Call[]; options: ListenerOptions }>(
   'multicall/addMulticallListeners'
 )
-export const removeMulticallListeners = createAction<{ chainId: number; calls: Call[]; options?: ListenerOptions }>(
+export const removeMulticallListeners = createAction<{ chainId: number; calls: Call[]; options: ListenerOptions }>(
   'multicall/removeMulticallListeners'
 )
 export const fetchingMulticallResults = createAction<{ chainId: number; calls: Call[]; fetchingBlockNumber: number }>(

src/state/multicall/hooks.ts

@@ -48,7 +48,10 @@ export const NEVER_RELOAD: ListenerOptions = {
 }
 
 // the lowest level call for subscribing to contract data
-function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): CallResult[] {
+function useCallsData(
+  calls: (Call | undefined)[],
+  { blocksPerFetch }: ListenerOptions = { blocksPerFetch: 1 }
+): CallResult[] {
   const { chainId } = useActiveWeb3React()
   const callResults = useAppSelector((state) => state.multicall.callResults)
   const dispatch = useAppDispatch()
@@ -73,7 +76,7 @@ function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): C
       addMulticallListeners({
         chainId,
         calls,
-        options,
+        options: { blocksPerFetch },
       })
     )
 
@@ -82,11 +85,11 @@ function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): C
         removeMulticallListeners({
           chainId,
           calls,
-          options,
+          options: { blocksPerFetch },
         })
       )
     }
-  }, [chainId, dispatch, options, serializedCallKeys])
+  }, [chainId, dispatch, blocksPerFetch, serializedCallKeys])
 
   return useMemo(
     () =>

src/state/multicall/reducer.test.ts

@@ -32,6 +32,7 @@ describe('multicall reducer', () => {
               callData: '0x',
             },
           ],
+          options: { blocksPerFetch: 1 },
         })
       )
       expect(store.getState()).toEqual({
@@ -58,6 +59,7 @@ describe('multicall reducer', () => {
             },
           ],
           chainId: 1,
+          options: { blocksPerFetch: 1 },
         })
       )
       expect(store.getState()).toEqual({ callResults: {}, callListeners: {} })
@@ -72,6 +74,7 @@ describe('multicall reducer', () => {
               callData: '0x',
             },
           ],
+          options: { blocksPerFetch: 1 },
         })
       )
       store.dispatch(
@@ -83,6 +86,7 @@ describe('multicall reducer', () => {
             },
           ],
           chainId: 1,
+          options: { blocksPerFetch: 1 },
         })
       )
       expect(store.getState()).toEqual({

src/state/multicall/reducer.ts

@@ -37,20 +37,41 @@ const initialState: MulticallState = {
 
 export default createReducer(initialState, (builder) =>
   builder
-    .addCase(addMulticallListeners, (state, { payload: { calls, chainId, options: { blocksPerFetch = 1 } = {} } }) => {
-      const listeners: MulticallState['callListeners'] = state.callListeners
-        ? state.callListeners
-        : (state.callListeners = {})
-      listeners[chainId] = listeners[chainId] ?? {}
-      calls.forEach((call) => {
-        const callKey = toCallKey(call)
-        listeners[chainId][callKey] = listeners[chainId][callKey] ?? {}
-        listeners[chainId][callKey][blocksPerFetch] = (listeners[chainId][callKey][blocksPerFetch] ?? 0) + 1
-      })
-    })
+    .addCase(
+      addMulticallListeners,
+      (
+        state,
+        {
+          payload: {
+            calls,
+            chainId,
+            options: { blocksPerFetch },
+          },
+        }
+      ) => {
+        const listeners: MulticallState['callListeners'] = state.callListeners
+          ? state.callListeners
+          : (state.callListeners = {})
+        listeners[chainId] = listeners[chainId] ?? {}
+        calls.forEach((call) => {
+          const callKey = toCallKey(call)
+          listeners[chainId][callKey] = listeners[chainId][callKey] ?? {}
+          listeners[chainId][callKey][blocksPerFetch] = (listeners[chainId][callKey][blocksPerFetch] ?? 0) + 1
+        })
+      }
+    )
     .addCase(
       removeMulticallListeners,
-      (state, { payload: { chainId, calls, options: { blocksPerFetch = 1 } = {} } }) => {
+      (
+        state,
+        {
+          payload: {
+            chainId,
+            calls,
+            options: { blocksPerFetch },
+          },
+        }
+      ) => {
         const listeners: MulticallState['callListeners'] = state.callListeners
           ? state.callListeners
           : (state.callListeners = {})