refactor: nest LumeProvider under BrowserStateProvider and disable navigation if logged out

src/components/App.tsx

@@ -4,21 +4,24 @@ import {
   Navigator,
 } from "@/components/Browser.tsx";
 import Lume from "@/components/Lume.tsx";
+import { LumeProvider } from "@lumeweb/sdk";
 
 export default function () {
   return (
     <BrowserStateProvider>
-      <>
-        <header className="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
-          <div className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white">
-            <Navigator />
-          </div>
-          <div className="w-32 flex justify-end">
-            <Lume />
-          </div>
-        </header>
-        <Browser />
-      </>
+      <LumeProvider>
+        <>
+          <header className="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
+            <div className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white">
+              <Navigator />
+            </div>
+            <div className="w-32 flex justify-end">
+              <Lume />
+            </div>
+          </header>
+          <Browser />
+        </>
+      </LumeProvider>
     </BrowserStateProvider>
   );
 }

src/components/Browser.tsx

@@ -21,6 +21,7 @@ import Arrow from "@/components/Arrow.tsx";
 import type React from "react";
 import { Input } from "@/components/ui/input.tsx";
 import { Button } from "@/components/ui/button.tsx";
+import { useLume } from "@lumeweb/sdk";
 
 let BOOT_FUNCTIONS: (() => Promise<any>)[] = [];
 
@@ -115,6 +116,7 @@ async function bootup() {
 
 export function Navigator() {
   const { url, setUrl } = useBrowserState();
+  const { isLoggedIn } = useLume();
   const inputRef = createRef<HTMLInputElement>();
 
   const browse = () => {
@@ -145,8 +147,8 @@ export function Navigator() {
 
   return (
     <>
-      <NavInput ref={inputRef} />
-      <Button onClick={browse}>
+      <NavInput ref={inputRef} disabled={!isLoggedIn} />
+      <Button onClick={browse} disabled={!isLoggedIn}>
         Navigate
         <Arrow />
       </Button>

src/components/Lume.tsx

@@ -6,7 +6,8 @@ import {
   useLume,
   LumeProvider,
 } from "@lumeweb/sdk";
-const Lume = () => {
+
+export default function () {
   const { isLoggedIn, ready } = useLume();
   return (
     <>
@@ -29,12 +30,4 @@ const Lume = () => {
       </LumeIdentity>
     </>
   );
-};
-
-export default function () {
-  return (
-    <LumeProvider>
-      <Lume />
-    </LumeProvider>
-  );
 }