From 1ca2431e9dff46d4e84cc1c3290ab801fd87cbc5 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Wed, 11 Oct 2023 10:27:12 -0400
Subject: [PATCH] refactor: nest LumeProvider under BrowserStateProvider and
 disable navigation if logged out

---
 src/components/App.tsx     | 25 ++++++++++++++-----------
 src/components/Browser.tsx |  6 ++++--
 src/components/Lume.tsx    | 11 ++---------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index e2feb67..2fc4c27 100644
--- a/src/components/App.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx
index ff344b0..3b0d863 100644
--- a/src/components/Browser.tsx
+++ b/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>
diff --git a/src/components/Lume.tsx b/src/components/Lume.tsx
index 19756a4..db65d36 100644
--- a/src/components/Lume.tsx
+++ b/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>
-  );
 }