From dcc0d7b96601f7387229cd58f234308d0e8fbdcd Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 4 Mar 2024 19:31:27 +0530
Subject: [PATCH] fix(web): debug-sdk-bug

---
 web/src/app.tsx                  | 27 +++++++++++++++------------
 web/src/context/LiFiProvider.tsx | 18 ++++++++++--------
 web/src/pages/GetPnk/index.tsx   |  5 ++---
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/web/src/app.tsx b/web/src/app.tsx
index 4b16279dc..741b9392d 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -18,6 +18,7 @@ import Courts from "./pages/Courts";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
 import DisputeResolver from "./pages/Resolver";
 import GetPnk from "./pages/GetPnk";
+import { LifiProvider } from "./context/LiFiProvider";
 
 const App: React.FC = () => {
   return (
@@ -28,18 +29,20 @@ const App: React.FC = () => {
           <Web3Provider>
             <IsListProvider>
               <NewDisputeProvider>
-                <SentryRoutes>
-                  <Route path="/" element={<Layout />}>
-                    <Route index element={<Home />} />
-                    <Route path="cases/*" element={<Cases />} />
-                    <Route path="courts/*" element={<Courts />} />
-                    <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
-                    <Route path="disputeTemplate" element={<DisputeTemplateView />} />
-                    <Route path="resolver/*" element={<DisputeResolver />} />
-                    <Route path="getPnk/*" element={<GetPnk />} />
-                    <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-                  </Route>
-                </SentryRoutes>
+                <LifiProvider>
+                  <SentryRoutes>
+                    <Route path="/" element={<Layout />}>
+                      <Route index element={<Home />} />
+                      <Route path="cases/*" element={<Cases />} />
+                      <Route path="courts/*" element={<Courts />} />
+                      <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
+                      <Route path="disputeTemplate" element={<DisputeTemplateView />} />
+                      <Route path="resolver/*" element={<DisputeResolver />} />
+                      <Route path="getPnk/*" element={<GetPnk />} />
+                      <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                    </Route>
+                  </SentryRoutes>
+                </LifiProvider>
               </NewDisputeProvider>
             </IsListProvider>
           </Web3Provider>
diff --git a/web/src/context/LiFiProvider.tsx b/web/src/context/LiFiProvider.tsx
index 52a4c8f71..012b43a1e 100644
--- a/web/src/context/LiFiProvider.tsx
+++ b/web/src/context/LiFiProvider.tsx
@@ -66,16 +66,18 @@ export const LifiProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const signer = useEthersSigner({ chainId: swapData.fromChainId });
   const routeRequest = useMemo(() => constructRouteRequest(swapData), [swapData]);
 
+  const lifi = useMemo(
+    () =>
+      new LiFi({
+        integrator: "Kleros",
+        apiUrl: "https://staging.li.quest/v1",
+      }),
+    []
+  );
   const resetRoutes = () => {
     setSelectedRoute(undefined);
     setRoutes([]);
   };
-
-  const lifi = new LiFi({
-    integrator: "Kleros",
-    apiUrl: "https://staging.li.quest/v1",
-  });
-
   // update tokens for the chain
   useEffect(() => {
     resetRoutes();
@@ -93,7 +95,7 @@ export const LifiProvider: React.FC<{ children: React.ReactNode }> = ({ children
       .getTokenBalance(address, fromToken)
       .then((res) => setSwapData({ ...swapData, tokenBalance: res?.amount }))
       .catch((err) => console.log("Error fetching token balance: ", { err }));
-  }, [swapData.fromToken, address, tokens, swapData.fromTokenAddress]);
+  }, [swapData.fromToken, address, tokens, swapData.fromTokenAddress, lifi]);
 
   useDebounce(
     () => {
@@ -138,7 +140,7 @@ export const LifiProvider: React.FC<{ children: React.ReactNode }> = ({ children
         return { status: false };
       })
       .finally(() => setIsExecuting(false));
-  }, [routes, signer]);
+  }, [routes, signer, lifi]);
 
   return (
     <LifiContext.Provider
diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx
index e334d9954..8e6dae864 100644
--- a/web/src/pages/GetPnk/index.tsx
+++ b/web/src/pages/GetPnk/index.tsx
@@ -8,7 +8,6 @@ import Swap from "./Swap";
 import Settings from "./Settings";
 import { useToggle } from "react-use";
 import ClaimPnkButton from "components/ClaimPnkButton";
-import { LifiProvider } from "context/LiFiProvider";
 
 const Container = styled.div`
   width: 100%;
@@ -31,7 +30,7 @@ const StyledCard = styled(Card)`
 const GetPnk: React.FC = () => {
   const [settingsOpen, toggleSettings] = useToggle(false);
   return (
-    <LifiProvider>
+    <>
       <HeroImage />
       <Container>
         <ClaimPnkButton />
@@ -40,7 +39,7 @@ const GetPnk: React.FC = () => {
           {settingsOpen ? <Settings /> : <Swap />}
         </StyledCard>
       </Container>
-    </LifiProvider>
+    </>
   );
 };