From 099b2f2c649d47df83c060f3cd587ea2c8034060 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Tue, 10 Oct 2023 16:26:43 +0200 Subject: [PATCH 1/3] feat: allow to customize the lume identity trigger --- .../lume/LumeIdentity/LumeIdentity.tsx | 35 +++++++++++++++---- src/index.ts | 2 +- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx index 1cb078f..b9a06fa 100644 --- a/src/components/lume/LumeIdentity/LumeIdentity.tsx +++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx @@ -1,3 +1,4 @@ +import React, { ReactElement, type FC, JSXElementConstructor, ReactPortal } 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,35 @@ 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 = () => ( + + + + ); + 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; + + console.log({ + Trigger, GivenTrigger + }) + return ( - - - + {/* @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 */} diff --git a/src/index.ts b/src/index.ts index cb41247..792e30c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,5 +3,5 @@ export { 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 LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity"; import "../styles/globals.css"; From f9664fc8498ec94e4a355f2e920bd7f706f59145 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Tue, 10 Oct 2023 16:50:42 +0200 Subject: [PATCH 2/3] fix: improve components --- .../lume/LumeDashboard/LumeDashboard.tsx | 30 +++++++++++++++++-- .../lume/LumeIdentity/LumeIdentity.tsx | 6 +--- .../lume/LumeIdentity/LumeIdentityContext.ts | 10 +++---- src/components/lume/LumeProvider.tsx | 12 ++++---- src/index.ts | 2 +- 5 files changed, 41 insertions(+), 19 deletions(-) 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"; From 88d1121d1f497acabf4d337db37f7319813e6f09 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 10 Oct 2023 14:52:11 +0000 Subject: [PATCH 3/3] chore(release): 0.1.0-develop.10 [skip ci] # [0.1.0-develop.10](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.9...v0.1.0-develop.10) (2023-10-10) ### Bug Fixes * improve components ([f9664fc](https://git.lumeweb.com/LumeWeb/sdk/commit/f9664fc8498ec94e4a355f2e920bd7f706f59145)) ### Features * allow to customize the lume identity trigger ([099b2f2](https://git.lumeweb.com/LumeWeb/sdk/commit/099b2f2c649d47df83c060f3cd587ea2c8034060)) --- CHANGELOG.md | 12 ++++++++++++ npm-shrinkwrap.json | 4 ++-- package.json | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3a6b87..a5f4775 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +# [0.1.0-develop.10](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.9...v0.1.0-develop.10) (2023-10-10) + + +### Bug Fixes + +* improve components ([f9664fc](https://git.lumeweb.com/LumeWeb/sdk/commit/f9664fc8498ec94e4a355f2e920bd7f706f59145)) + + +### Features + +* allow to customize the lume identity trigger ([099b2f2](https://git.lumeweb.com/LumeWeb/sdk/commit/099b2f2c649d47df83c060f3cd587ea2c8034060)) + # [0.1.0-develop.9](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.8...v0.1.0-develop.9) (2023-10-10) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 3dd8b5c..d5df573 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "@lumeweb/sdk", - "version": "0.1.0-develop.9", + "version": "0.1.0-develop.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lumeweb/sdk", - "version": "0.1.0-develop.9", + "version": "0.1.0-develop.10", "dependencies": { "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10", "@lumeweb/libkernel": "0.1.0-develop.65", diff --git a/package.json b/package.json index 74478af..a58e1d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lumeweb/sdk", - "version": "0.1.0-develop.9", + "version": "0.1.0-develop.10", "type": "module", "main": "lib/index.js", "types": "lib/index.d.ts",