refactor: use new context types

This commit is contained in:
Derrick Hammer 2023-10-16 15:20:00 -04:00
parent b682bb6690
commit 8a8b1da0db
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
3 changed files with 29 additions and 19 deletions

View File

@ -4,24 +4,26 @@ import {
Navigator, Navigator,
} from "@/components/Browser.tsx"; } from "@/components/Browser.tsx";
import Lume from "@/components/Lume.tsx"; import Lume from "@/components/Lume.tsx";
import { LumeProvider } from "@lumeweb/sdk"; import { AuthProvider, LumeStatusProvider } from "@lumeweb/sdk";
export default function () { export default function () {
return ( return (
<LumeProvider>
<BrowserStateProvider> <BrowserStateProvider>
<> <>
<AuthProvider>
<header className="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex"> <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"> <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 /> <Navigator />
</div> </div>
<div className="w-32 flex justify-end"> <div className="w-32 flex justify-end">
<LumeStatusProvider>
<Lume /> <Lume />
</LumeStatusProvider>
</div> </div>
</header> </header>
</AuthProvider>
<Browser /> <Browser />
</> </>
</BrowserStateProvider> </BrowserStateProvider>
</LumeProvider>
); );
} }

View File

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

View File

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