use useSSE in Layout only

src/App.tsx

@@ -2,17 +2,17 @@ import { FC, lazy, Suspense, useContext, useEffect, useState } from "react";
 import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
-import Layout from "./layouts/Layout";
-import LoadingScreen from "./layouts/LoadingScreen";
 import RequireAuth from "./components/RequireAuth";
 import RequireSetup from "./components/RequireSetup";
-import SkeletonLoadingScreen from "./layouts/SkeletonLoadingScreen";
+import { AppContext } from "./context/app-context";
 import "./i18n/config";
+import Layout from "./layouts/Layout";
+import LoadingScreen from "./layouts/LoadingScreen";
+import SkeletonLoadingScreen from "./layouts/SkeletonLoadingScreen";
 import { SetupPhase } from "./models/setup.model";
 import Login from "./pages/Login";
-import { AppContext } from "./context/app-context";
-import { instance } from "./utils/interceptor";
 import { ACCESS_TOKEN, parseJwt, REFRESH_TIME } from "./utils";
+import { instance } from "./utils/interceptor";
 
 const LazySetup = lazy(() => import("./pages/Setup"));
 const LazyHome = lazy(() => import("./pages/Home"));

src/hooks/use-sse.tsx

@@ -18,7 +18,7 @@ import { availableApps } from "@/utils/availableApps";
 /**
  * Establishes a SSE connection if not available yet & attaches / removes event listeners
  * to the single events to update the SSEContext
- * Only use once per page, otherwise you will have multiple connections; use useContext(SSEContext) instead
+ * Use useContext(SSEContext) to get the data, is only used in Layout.tsx
  * @returns the infos from the SSEContext
  */
 function useSSE() {

src/layouts/Layout.tsx

@@ -1,3 +1,4 @@
+import useSSE from "@/hooks/use-sse";
 import type { FC } from "react";
 import BottomNav from "./BottomNav";
 import Header from "./Header";
@@ -8,6 +9,8 @@ type Props = {
 };
 
 const Layout: FC<Props> = ({ children }) => {
+  // use SSE for all components after login
+  useSSE();
   return (
     <>
       <Header />

src/pages/Apps/index.tsx

@@ -1,12 +1,12 @@
-import useSSE from "@/hooks/use-sse";
+import { SSEContext } from "@/context/sse-context";
 import PageLoadingScreen from "@/layouts/PageLoadingScreen";
 import { AppStatus } from "@/models/app-status";
 import { App } from "@/models/app.model";
 import { enableGutter } from "@/utils";
 import { checkError } from "@/utils/checkError";
 import { instance } from "@/utils/interceptor";
 import type { FC } from "react";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 import AppCardAlby from "./AppCardAlby";
@@ -15,8 +15,7 @@ import AppList from "./AppList";
 
 export const Apps: FC = () => {
   const { t } = useTranslation(["translation", "apps"]);
-
-  const { appStatus, installingApp } = useSSE();
+  const { appStatus, installingApp } = useContext(SSEContext);
 
   const [showDetails, setShowDetails] = useState(false);
   const [app, setApp] = useState<App | null>(null);

src/pages/Home/index.tsx

@@ -22,6 +22,7 @@ import TransactionCard from "./TransactionCard/TransactionCard";
 import TransactionDetailModal from "./TransactionCard/TransactionDetailModal/TransactionDetailModal";
 import UnlockModal from "./UnlockModal";
 import WalletCard from "./WalletCard";
+import { SSEContext } from "@/context/sse-context";
 
 const startupToastId = "startup-toast";
 
@@ -36,7 +37,7 @@ type ModalType =
 const Home: FC = () => {
   const { t } = useTranslation();
   const { walletLocked, setWalletLocked } = useContext(AppContext);
-  const { balance, lnInfo, systemStartupInfo } = useSSE();
+  const { balance, lnInfo, systemStartupInfo } = useContext(SSEContext);
   const [showModal, setShowModal] = useState<ModalType | false>(false);
   const [detailTx, setDetailTx] = useState<Transaction | null>(null);
   const [transactions, setTransactions] = useState<Transaction[]>([]);