LumeWeb
/
web3browser.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Derrick Hammer 2023-10-11 10:27:12 -04:00
parent 3c6a756666
commit 1ca2431e9d
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
3 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/App.tsx
View File

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

6
src/components/Browser.tsx
View File

@ -21,6 +21,7 @@ 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 { useLume } from "@lumeweb/sdk";
let BOOT_FUNCTIONS: (() => Promise<any>)[] = []; let BOOT_FUNCTIONS: (() => Promise<any>)[] = [];
@ -115,6 +116,7 @@ async function bootup() {
export function Navigator() { export function Navigator() {
const { url, setUrl } = useBrowserState(); const { url, setUrl } = useBrowserState();
const { isLoggedIn } = useLume();
const inputRef = createRef<HTMLInputElement>(); const inputRef = createRef<HTMLInputElement>();
const browse = () => { const browse = () => {
@ -145,8 +147,8 @@ export function Navigator() {
return ( return (
<> <>
<NavInput ref={inputRef} /> <NavInput ref={inputRef} disabled={!isLoggedIn} />
<Button onClick={browse}> <Button onClick={browse} disabled={!isLoggedIn}>
Navigate Navigate
<Arrow /> <Arrow />
</Button> </Button>

11
src/components/Lume.tsx
View File

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