Merge branch 'develop' of git.lumeweb.com:LumeWeb/sdk into develop

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<Network["syncState"], string> = {
   done: "Synced",
@@ -11,8 +12,11 @@ const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
   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<string[]>([]);
 
@@ -22,9 +26,29 @@ const LumeDashboard = () => {
     setUniqueNetworkTypes(uniqueTypes);
   }, [networks]);
 
+  const DefaultTrigger = () => (
+    <LumeDashboardTrigger asChild>
+      <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
+        Open Dashboard
+      </button>
+    </LumeDashboardTrigger>
+  );
+  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 (
     <Dialog.Root>
-      <Dialog.Trigger>Open</Dialog.Trigger>
+      <Trigger />
       <Dialog.Portal>
         <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
         <Dialog.Content className="fixed p-5 z-50 right-0 bottom-0 top-0 w-[300px] bg-neutral-950 text-white border-black border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500">

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -1,3 +1,4 @@
+import React, { type FC } from "react";
 import { Button } from "../../ui/button";
 import {
   SwitchableComponent,
@@ -8,7 +9,6 @@ import * as ComponentList from "./components";
 import { LazyMotion, domAnimation } from "framer-motion";
 import * as Dialog from "@radix-ui/react-dialog";
 import LumeLogoBg from "./LumeLogoBg";
-import type { FC } from "react";
 
 const LumeIdentity: FC = () => {
   const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@@ -106,14 +106,31 @@ const LumeIdentity: FC = () => {
 // contrast is not very good, as im testing on a train with a lot of sunlight
 // hitting my screen, it is almost impossible to see whats happening the outline
 // buttons have no contrast
-export default function Wrapped() {
+export const LumeIdentityTrigger = Dialog.Trigger;
+LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
+export default function Wrapped({ children }: React.PropsWithChildren) {
+  const DefaultTrigger = () => (
+    <LumeIdentityTrigger asChild>
+      <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
+        Open Lume
+      </button>
+    </LumeIdentityTrigger>
+  );
+  const GivenTrigger = React.Children.toArray(children)
+    .filter((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 === "LumeIdentityTrigger"
+      }
+
+      return false
+    })
+    .at(0);
+  const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
+
   return (
     <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
-          Open Lume
-        </button>
-      </Dialog.Trigger>
+      <Trigger />
       <Dialog.Portal>
         <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
         {/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}

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);
     },
   };
 }

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<LumeContext | undefined>(undefined);
+const LumeContext = createContext<LumeContextType | undefined>(undefined);
 
 const LumeProvider = ({ children }: { children: ReactNode }) => {
   const [lume, setLume] = useState<LumeObject>({ networks: [] });
@@ -121,9 +123,10 @@ const LumeProvider = ({ children }: { children: ReactNode }) => {
       statusUnsubs.current.forEach((unsub) => unsub());
     };
   }, []);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   return (
-    <LumeContext.Provider value={{ lume }}>{children}</LumeContext.Provider>
+    <LumeContext.Provider value={{ lume, isLoggedIn, setIsLoggedIn }}>{children}</LumeContext.Provider>
   );
 };
 
@@ -136,6 +139,5 @@ export function useLume() {
     throw new Error("useLume must be used within a LumeProvider");
   }
 
-  const { lume } = ctx;
-  return lume;
+  return ctx;
 }

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 LumeIdentity } from "./components/lume/LumeIdentity/LumeIdentity";
+export { default as LumeDashboard, LumeDashboardTrigger } from "./components/lume/LumeDashboard/LumeDashboard";
+export { default as LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity";
 import "../styles/globals.css";