fix broken post button

.changeset/gold-feet-love.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix broken post button

src/app.tsx

@@ -34,6 +34,7 @@ import UserAboutTab from "./views/user/about";
 import UserLikesTab from "./views/user/likes";
 import useSetColorMode from "./hooks/use-set-color-mode";
 import UserStreamsTab from "./views/user/streams";
+import { PageProviders } from "./providers";
 
 const StreamsView = React.lazy(() => import("./views/streams"));
 const StreamView = React.lazy(() => import("./views/streams/stream"));
@@ -43,12 +44,14 @@ const RootPage = () => {
   useSetColorMode();
 
   return (
-    <Layout>
+    <PageProviders>
-      <ScrollRestoration />
+      <Layout>
-      <Suspense fallback={<Spinner />}>
+        <ScrollRestoration />
-        <Outlet />
+        <Suspense fallback={<Spinner />}>
-      </Suspense>
+          <Outlet />
-    </Layout>
+        </Suspense>
+      </Layout>
+    </PageProviders>
   );
 };
 
@@ -63,7 +66,14 @@ const router = createHashRouter([
       { path: "nsec", element: <LoginNsecView /> },
     ],
   },
-  { path: "streams/:naddr", element: <StreamView /> },
+  {
+    path: "streams/:naddr",
+    element: (
+      <PageProviders>
+        <StreamView />
+      </PageProviders>
+    ),
+  },
   {
     path: "/",
     element: <RootPage />,

src/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { App } from "./app";
-import { Providers } from "./providers";
+import { GlobalProviders } from "./providers";
 
 // setup dayjs
 import dayjs from "dayjs";
@@ -21,7 +21,7 @@ const element = document.getElementById("root");
 if (!element) throw new Error("missing mount point");
 const root = createRoot(element);
 root.render(
-  <Providers>
+  <GlobalProviders>
     <App />
-  </Providers>
+  </GlobalProviders>
 );

src/providers/index.tsx

@@ -7,19 +7,27 @@ import { InvoiceModalProvider } from "./invoice-modal";
 import NotificationTimelineProvider from "./notification-timeline";
 import PostModalProvider from "./post-modal-provider";
 
-export const Providers = ({ children }: { children: React.ReactNode }) => {
+// Top level providers, should be render as close to the root as possible
+export const GlobalProviders = ({ children }: { children: React.ReactNode }) => {
   const { primaryColor } = useAppSettings();
   const theme = useMemo(() => createTheme(primaryColor), [primaryColor]);
 
   return (
     <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
-      <SigningProvider>
+      {children}
-        <InvoiceModalProvider>
-          <NotificationTimelineProvider>
-            <PostModalProvider>{children}</PostModalProvider>
-          </NotificationTimelineProvider>
-        </InvoiceModalProvider>
-      </SigningProvider>
     </ChakraProvider>
   );
 };
+
+/** Providers that provider functionality to pages (needs to be rendered under a router) */
+export function PageProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <SigningProvider>
+      <InvoiceModalProvider>
+        <NotificationTimelineProvider>
+          <PostModalProvider>{children}</PostModalProvider>
+        </NotificationTimelineProvider>
+      </InvoiceModalProvider>
+    </SigningProvider>
+  );
+}