fix: better components

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from "react";
+import React, { useState, type FC } from "react";
 import { Button } from "../../ui/button";
 import {
   SwitchableComponent,
@@ -9,6 +9,7 @@ import * as ComponentList from "./components";
 import { LazyMotion, domAnimation } from "framer-motion";
 import * as Dialog from "@radix-ui/react-dialog";
 import LumeLogoBg from "./LumeLogoBg";
+import { LumeIdentityContext } from "./LumeIdentityContext";
 
 const LumeIdentity: FC = () => {
   const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@@ -109,6 +110,7 @@ const LumeIdentity: FC = () => {
 export const LumeIdentityTrigger = Dialog.Trigger;
 LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
 export default function Wrapped({ children }: React.PropsWithChildren) {
+  const [open, setOpen] = useState(false);
   const DefaultTrigger = () => (
     <LumeIdentityTrigger asChild>
       <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
@@ -118,25 +120,27 @@ export default function Wrapped({ children }: React.PropsWithChildren) {
   );
   const GivenTrigger = React.Children.toArray(children)
     .filter((c) => {
-      if(typeof c === 'object'){
+      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 c.type?.displayName === "LumeIdentityTrigger";
       }
 
-      return false
+      return false;
     })
     .at(0);
   const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
 
   return (
-    <Dialog.Root>
+    <Dialog.Root open={open} onOpenChange={setOpen}>
       <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 */}
         <Dialog.Content className="absolute left-[calc(50%-192px)] top-[calc(50vh-174px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
           <SwitchableComponentProvider>
-            <LumeIdentity />
+            <LumeIdentityContext.Provider value={{open, setOpen}}>
+              <LumeIdentity />
+            </LumeIdentityContext.Provider>
           </SwitchableComponentProvider>
         </Dialog.Content>
       </Dialog.Portal>

src/components/lume/LumeIdentity/LumeIdentityContext.ts

@@ -4,9 +4,19 @@ import {
   // logoutComplete,
 } from "@lumeweb/libkernel/kernel";
 import { useLume } from "../LumeProvider";
+import React, { useContext } from "react";
+
+export const LumeIdentityContext = React.createContext<{open: boolean, setOpen: (open: boolean) => void} | undefined>(undefined);
 
 export function useLumeIndentity() {
   const {isLoggedIn, setIsLoggedIn} = useLume();
+  const ctx = useContext(LumeIdentityContext); 
+
+  if(!ctx) {
+    throw new Error("useLumeIdentity should be used inside LumeIdentityContext.Provider")
+  }
+
+  const {setOpen} = ctx;
 
   return {
     isSignedIn: isLoggedIn,
@@ -14,10 +24,12 @@ export function useLumeIndentity() {
       await login(key);
       // await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
       setIsLoggedIn(true);
+      setOpen(false);
     },
     async signOut() {
       // await logoutComplete();
       setIsLoggedIn(false);
+      setOpen(false);
     },
   };
 }

stories/LumeDashboard.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js";
 import LumeProvider from "../src/components/lume/LumeProvider.js";

stories/LumeIdentity.stories.tsx

@@ -1,5 +1,7 @@
+import React from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js";
+import LumeProvider from "../src/components/lume/LumeProvider.js";
 
 export default {
   title: "LumeIdentity",
@@ -7,7 +9,9 @@ export default {
 } as Meta<typeof LumeIdentity>;
 
 const Template: StoryFn<typeof LumeIdentity> = (args) => (
-  <LumeIdentity {...args} />
+  <LumeProvider>
+    <LumeIdentity {...args} />
+  </LumeProvider>
 );
 
 export const Primary = Template.bind({});