diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index 862d30e..a995a91 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx @@ -4,6 +4,7 @@ import Logo from "../../../assets/lume-logo.png"; import { cva } from "class-variance-authority"; import { cn } from "../../utils"; import { useState, useEffect } from "react"; +import React from "react"; const SYNCSTATE_TO_TEXT: Record = { done: "Synced", @@ -11,8 +12,11 @@ const SYNCSTATE_TO_TEXT: Record = { syncing: "Syncing", }; -const LumeDashboard = () => { - const { networks } = useLume(); +export const LumeDashboardTrigger = Dialog.Trigger; +LumeDashboardTrigger.displayName = "LumeDashboardTrigger"; + +const LumeDashboard = ({children}: React.PropsWithChildren) => { + const { lume: { networks } } = useLume(); const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState([]); @@ -22,9 +26,29 @@ const LumeDashboard = () => { setUniqueNetworkTypes(uniqueTypes); }, [networks]); + const DefaultTrigger = () => ( + + + + ); + const GivenTrigger = React.Children.toArray(children) + .filter((c) => { + console.log({component: c}) + if(typeof c === 'object'){ + //@ts-expect-error -- I dont know what the type of this should be, i just know that this works + return c.type?.displayName === "LumeDashboardTrigger" + } + + return false + }) + .at(0); + const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger; + return ( - Open + diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx index b9a06fa..be1de47 100644 --- a/src/components/lume/LumeIdentity/LumeIdentity.tsx +++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, type FC, JSXElementConstructor, ReactPortal } from "react"; +import React, { type FC } from "react"; import { Button } from "../../ui/button"; import { SwitchableComponent, @@ -128,10 +128,6 @@ export default function Wrapped({ children }: React.PropsWithChildren) { .at(0); const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger; - console.log({ - Trigger, GivenTrigger - }) - return ( diff --git a/src/components/lume/LumeIdentity/LumeIdentityContext.ts b/src/components/lume/LumeIdentity/LumeIdentityContext.ts index dfa3bac..a8f6d3a 100644 --- a/src/components/lume/LumeIdentity/LumeIdentityContext.ts +++ b/src/components/lume/LumeIdentity/LumeIdentityContext.ts @@ -1,23 +1,23 @@ -import { useState } from "react"; import { login, // loginComplete, // logoutComplete, } from "@lumeweb/libkernel/kernel"; +import { useLume } from "../LumeProvider"; export function useLumeIndentity() { - const [loggedIn, setLoggedIn] = useState(false); + const {isLoggedIn, setIsLoggedIn} = useLume(); return { - isSignedIn: loggedIn, + isSignedIn: isLoggedIn, async signIn(key: Uint8Array) { await login(key); // await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') ` - setLoggedIn(true); + setIsLoggedIn(true); }, async signOut() { // await logoutComplete(); - setLoggedIn(false); + setIsLoggedIn(false); }, }; } diff --git a/src/components/lume/LumeProvider.tsx b/src/components/lume/LumeProvider.tsx index 9606785..4792747 100644 --- a/src/components/lume/LumeProvider.tsx +++ b/src/components/lume/LumeProvider.tsx @@ -30,13 +30,15 @@ type LumeObject = { networks: Network[]; }; -type LumeContext = { +type LumeContextType = { + isLoggedIn: boolean, + setIsLoggedIn: (value: boolean) => void, lume: LumeObject; }; const networkRegistry = createNetworkRegistryClient(); -const LumeContext = createContext(undefined); +const LumeContext = createContext(undefined); const LumeProvider = ({ children }: { children: ReactNode }) => { const [lume, setLume] = useState({ networks: [] }); @@ -121,9 +123,10 @@ const LumeProvider = ({ children }: { children: ReactNode }) => { statusUnsubs.current.forEach((unsub) => unsub()); }; }, []); + const [isLoggedIn, setIsLoggedIn] = useState(false); return ( - {children} + {children} ); }; @@ -136,6 +139,5 @@ export function useLume() { throw new Error("useLume must be used within a LumeProvider"); } - const { lume } = ctx; - return lume; + return ctx; } diff --git a/src/index.ts b/src/index.ts index 792e30c..833976b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,6 @@ export { default as LumeProvider, useLume, } from "./components/lume/LumeProvider"; -export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard"; +export { default as LumeDashboard, LumeDashboardTrigger } from "./components/lume/LumeDashboard/LumeDashboard"; export { default as LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity"; import "../styles/globals.css";