From 5d197f9b69d2a5743148a0aa4971d634a0cf38ae Mon Sep 17 00:00:00 2001
From: Hayden Shively <17186559+haydenshively@users.noreply.github.com>
Date: Sun, 21 Apr 2024 17:36:18 -0500
Subject: [PATCH] Automatically reload supply table after deposit/withdraw
 (#851)

---
 earn/src/App.tsx                       | 33 ++++++++++++++------------
 earn/src/data/hooks/UseLendingPairs.ts | 13 ++++++----
 earn/src/pages/MarketsPage.tsx         |  7 ++++--
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/earn/src/App.tsx b/earn/src/App.tsx
index 858d0f6c..a7f95df2 100644
--- a/earn/src/App.tsx
+++ b/earn/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/react-hooks';
 import * as Sentry from '@sentry/react';
@@ -144,7 +144,9 @@ function AppBodyWrapper() {
 }
 
 function App() {
-  const [activeChain, setActiveChain] = React.useState<Chain>(DEFAULT_CHAIN);
+  const mounted = useRef(true);
+
+  const [activeChain, setActiveChain] = useState<Chain>(DEFAULT_CHAIN);
   const [accountRisk, setAccountRisk] = useSafeState<AccountRiskResult>({ isBlocked: false, isLoading: true });
   const [geoFencingInfo, setGeoFencingInfo] = useSafeState<GeoFencingInfo>({
     isAllowed: false,
@@ -155,7 +157,14 @@ function App() {
   const { address: userAddress } = useAccount();
   const provider = useProvider({ chainId: activeChain.id });
 
-  const value = { activeChain, setActiveChain };
+  const refetch = useCallback(async () => {
+    const chainId = (await provider.getNetwork()).chainId;
+    const res = await getAvailableLendingPairs(chainId, provider);
+    if (mounted.current) setLendingPairs(res);
+  }, [provider, setLendingPairs]);
+
+  const lendingPairsContextValue = useMemo(() => ({ lendingPairs, refetch }), [lendingPairs, refetch]);
+  const chainContextValue = { activeChain, setActiveChain };
 
   useEffect(() => {
     Sentry.setTag('chain_name', activeChain.name);
@@ -184,18 +193,12 @@ function App() {
   }, [userAddress, setAccountRisk]);
 
   useEffect(() => {
-    let mounted = true;
-
-    (async () => {
-      const chainId = (await provider.getNetwork()).chainId;
-      const res = await getAvailableLendingPairs(chainId, provider);
-      if (mounted) setLendingPairs(res);
-    })();
-
+    mounted.current = true;
+    refetch();
     return () => {
-      mounted = false;
+      mounted.current = false;
     };
-  }, [provider, setLendingPairs]);
+  }, [refetch]);
 
   return (
     <>
@@ -203,8 +206,8 @@ function App() {
         <WagmiProvider>
           <AccountRiskContext.Provider value={accountRisk}>
             <GeoFencingContext.Provider value={geoFencingInfo}>
-              <ChainContext.Provider value={value}>
-                <LendingPairsContext.Provider value={lendingPairs}>
+              <ChainContext.Provider value={chainContextValue}>
+                <LendingPairsContext.Provider value={lendingPairsContextValue}>
                   <ScrollToTop />
                   <AppBodyWrapper />
                 </LendingPairsContext.Provider>
diff --git a/earn/src/data/hooks/UseLendingPairs.ts b/earn/src/data/hooks/UseLendingPairs.ts
index e333589f..eea56171 100644
--- a/earn/src/data/hooks/UseLendingPairs.ts
+++ b/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]
   );
diff --git a/earn/src/pages/MarketsPage.tsx b/earn/src/pages/MarketsPage.tsx
index 6e26d695..ca2a180a 100644
--- a/earn/src/pages/MarketsPage.tsx
+++ b/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}
       />