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

src/components/App.tsx

@@ -4,10 +4,12 @@ import {
   Navigator,
 } from "@/components/Browser.tsx";
 import Lume from "@/components/Lume.tsx";
+import { LumeProvider } from "@lumeweb/sdk";
 
 export default function () {
   return (
     <BrowserStateProvider>
+      <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">
@@ -19,6 +21,7 @@ export default function () {
           </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>
-  );
 }