refactor: use new context types

src/components/App.tsx

@@ -4,24 +4,26 @@ import {
   Navigator,
 } from "@/components/Browser.tsx";
 import Lume from "@/components/Lume.tsx";
-import { LumeProvider } from "@lumeweb/sdk";
+import { AuthProvider, LumeStatusProvider } from "@lumeweb/sdk";
 
 export default function () {
   return (
-    <LumeProvider>
     <BrowserStateProvider>
       <>
+        <AuthProvider>
           <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">
+              <LumeStatusProvider>
                 <Lume />
+              </LumeStatusProvider>
             </div>
           </header>
+        </AuthProvider>
         <Browser />
       </>
     </BrowserStateProvider>
-    </LumeProvider>
   );
 }

src/components/Browser.tsx

@@ -21,7 +21,12 @@ 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 { type LumeContextType, useLume } from "@lumeweb/sdk";
+import {
+  type AuthContextType,
+  type LumeStatusContextType,
+  useAuth,
+  useLumeStatus,
+} from "@lumeweb/sdk";
 
 let BOOT_FUNCTIONS: (() => Promise<any>)[] = [];
 
@@ -58,19 +63,19 @@ export function useBrowserState() {
   return context;
 }
 
-async function boot(lume: LumeContextType) {
+async function boot(status: LumeStatusContextType, auth: AuthContextType) {
   const reg = await navigator.serviceWorker.register("/sw.js");
   await reg.update();
 
   await kernel.serviceWorkerReady();
 
   kernel.init().then(() => {
-    lume.setInited(true);
+    status.setInited(true);
   });
 
   await kernelLoaded();
 
-  lume.setIsLoggedIn(true);
+  auth.setIsLoggedIn(true);
 
   BOOT_FUNCTIONS.push(
     async () =>
@@ -95,7 +100,7 @@ async function boot(lume: LumeContextType) {
   BOOT_FUNCTIONS.push(async () => await handshakeClient.register());
   BOOT_FUNCTIONS.push(async () => await ethClient.register());
   BOOT_FUNCTIONS.push(async () => await ipfsClient.register());
-  BOOT_FUNCTIONS.push(async () => lume.setReady(true));
+  BOOT_FUNCTIONS.push(async () => status.setReady(true));
 
   const resolvers = [
     "zrjCnUBqmBqXXcc2yPnq517sXQtNcfZ2BHgnVTcbhSYxko7", // CID
@@ -125,7 +130,7 @@ async function bootup() {
 
 export function Navigator() {
   const { url, setUrl } = useBrowserState();
-  const { isLoggedIn } = useLume();
+  const { isLoggedIn } = useAuth();
   const inputRef = createRef<HTMLInputElement>();
 
   const browse = () => {
@@ -167,10 +172,11 @@ export function Navigator() {
 
 export function Browser() {
   const { url } = useBrowserState();
-  const lume = useLume();
+  const status = useLumeStatus();
+  const auth = useAuth();
 
   useEffect(() => {
-    boot(lume);
+    boot(status, auth);
   }, []);
 
   return <iframe src={url} className="w-full h-full"></iframe>;

src/components/Lume.tsx

@@ -2,11 +2,13 @@ import {
   LumeDashboard,
   LumeIdentity,
   LumeIdentityTrigger,
-  useLume,
+  useAuth,
+  useLumeStatus,
 } from "@lumeweb/sdk";
 
 export default function () {
-  const { isLoggedIn, ready, inited } = useLume();
+  const { isLoggedIn } = useAuth();
+  const { ready, inited } = useLumeStatus();
 
   return (
     <>