Automatically reload supply table after deposit/withdraw

earn/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 
 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/react-hooks';
 import * as Sentry from '@sentry/react';
@@ -144,13 +144,14 @@ function AppBodyWrapper() {
 }
 
 function App() {
-  const [activeChain, setActiveChain] = React.useState<Chain>(DEFAULT_CHAIN);
+  const [activeChain, setActiveChain] = useState<Chain>(DEFAULT_CHAIN);
   const [accountRisk, setAccountRisk] = useSafeState<AccountRiskResult>({ isBlocked: false, isLoading: true });
   const [geoFencingInfo, setGeoFencingInfo] = useSafeState<GeoFencingInfo>({
     isAllowed: false,
     isLoading: true,
   });
   const [lendingPairs, setLendingPairs] = useChainDependentState<LendingPair[] | null>(null, activeChain.id);
+  const [shouldFetchLendingPairs, setShouldFetchLendingPairs] = useChainDependentState(true, activeChain.id);
 
   const { address: userAddress } = useAccount();
   const provider = useProvider({ chainId: activeChain.id });
@@ -187,15 +188,20 @@ function App() {
     let mounted = true;
 
     (async () => {
+      if (!shouldFetchLendingPairs) return;
+
       const chainId = (await provider.getNetwork()).chainId;
       const res = await getAvailableLendingPairs(chainId, provider);
-      if (mounted) setLendingPairs(res);
+      if (mounted) {
+        setShouldFetchLendingPairs(false);
+        setLendingPairs(res);
+      }
     })();
 
     return () => {
       mounted = false;
     };
-  }, [provider, setLendingPairs]);
+  }, [provider, setLendingPairs, shouldFetchLendingPairs, setShouldFetchLendingPairs]);
 
   return (
     <>
@@ -204,7 +210,7 @@ function App() {
           <AccountRiskContext.Provider value={accountRisk}>
             <GeoFencingContext.Provider value={geoFencingInfo}>
               <ChainContext.Provider value={value}>
-                <LendingPairsContext.Provider value={lendingPairs}>
+                <LendingPairsContext.Provider value={{ lendingPairs, refetch: () => setShouldFetchLendingPairs(true) }}>
                   <ScrollToTop />
                   <AppBodyWrapper />
                 </LendingPairsContext.Provider>

earn/src/data/hooks/UseLendingPairs.ts

@@ -4,15 +4,18 @@ import { Address } from 'wagmi';
 
 import { LendingPair } from '../LendingPair';
 
-export const LendingPairsContext = createContext<LendingPair[] | null>(null);
+export const LendingPairsContext = createContext<{ lendingPairs: LendingPair[] | null; refetch?: () => void }>({
+  lendingPairs: null,
+});
 
 export function useLendingPairs() {
   const ctxt = useContext(LendingPairsContext);
 
   return useMemo(
     () => ({
-      isLoading: ctxt === null,
-      lendingPairs: ctxt ?? [],
+      isLoading: ctxt.lendingPairs === null,
+      lendingPairs: ctxt.lendingPairs ?? [],
+      refetch: ctxt.refetch,
     }),
     [ctxt]
   );
@@ -23,8 +26,8 @@ export function useLendingPair(token0?: Address, token1?: Address) {
 
   const { lendingPairs } = useMemo(
     () => ({
-      isLoading: ctxt === null,
-      lendingPairs: ctxt ?? [],
+      isLoading: ctxt.lendingPairs === null,
+      lendingPairs: ctxt.lendingPairs ?? [],
     }),
     [ctxt]
   );

earn/src/pages/MarketsPage.tsx

@@ -101,7 +101,7 @@ export default function MarketsPage() {
   }, [searchParams]);
 
   // MARK: custom hooks
-  const { lendingPairs } = useLendingPairs();
+  const { lendingPairs, refetch: refetchLendingPairs } = useLendingPairs();
 
   // NOTE: Instead of `useAvailablePools()`, we're able to compute `availablePools` from `lendingPairs`.
   // This saves a lot of data.
@@ -446,7 +446,10 @@ export default function MarketsPage() {
         }}
         onConfirm={() => {
           setIsPendingTxnModalOpen(false);
-          setTimeout(() => refetch(), 100);
+          setTimeout(() => {
+            refetchLendingPairs?.();
+            refetch();
+          }, 100);
         }}
         status={pendingTxnModalStatus}
       />