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

This commit is contained in:
Derrick Hammer 2023-10-10 10:55:13 -04:00
commit d08360d975
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
8 changed files with 80 additions and 25 deletions

View File

@ -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) # [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)

4
npm-shrinkwrap.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.9", "version": "0.1.0-develop.10",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.9", "version": "0.1.0-develop.10",
"dependencies": { "dependencies": {
"@lumeweb/kernel-network-registry-client": "0.1.0-develop.10", "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
"@lumeweb/libkernel": "0.1.0-develop.65", "@lumeweb/libkernel": "0.1.0-develop.65",

View File

@ -1,6 +1,6 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.9", "version": "0.1.0-develop.10",
"type": "module", "type": "module",
"main": "lib/index.js", "main": "lib/index.js",
"types": "lib/index.d.ts", "types": "lib/index.d.ts",

View File

@ -4,6 +4,7 @@ import Logo from "../../../assets/lume-logo.png";
import { cva } from "class-variance-authority"; import { cva } from "class-variance-authority";
import { cn } from "../../utils"; import { cn } from "../../utils";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import React from "react";
const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = { const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
done: "Synced", done: "Synced",
@ -11,8 +12,11 @@ const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
syncing: "Syncing", syncing: "Syncing",
}; };
const LumeDashboard = () => { export const LumeDashboardTrigger = Dialog.Trigger;
const { networks } = useLume(); LumeDashboardTrigger.displayName = "LumeDashboardTrigger";
const LumeDashboard = ({children}: React.PropsWithChildren) => {
const { lume: { networks } } = useLume();
const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState<string[]>([]); const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState<string[]>([]);
@ -22,9 +26,29 @@ const LumeDashboard = () => {
setUniqueNetworkTypes(uniqueTypes); setUniqueNetworkTypes(uniqueTypes);
}, [networks]); }, [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 ( return (
<Dialog.Root> <Dialog.Root>
<Dialog.Trigger>Open</Dialog.Trigger> <Trigger />
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <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"> <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">

View File

@ -1,3 +1,4 @@
import React, { type FC } from "react";
import { Button } from "../../ui/button"; import { Button } from "../../ui/button";
import { import {
SwitchableComponent, SwitchableComponent,
@ -8,7 +9,6 @@ import * as ComponentList from "./components";
import { LazyMotion, domAnimation } from "framer-motion"; import { LazyMotion, domAnimation } from "framer-motion";
import * as Dialog from "@radix-ui/react-dialog"; import * as Dialog from "@radix-ui/react-dialog";
import LumeLogoBg from "./LumeLogoBg"; import LumeLogoBg from "./LumeLogoBg";
import type { FC } from "react";
const LumeIdentity: FC = () => { const LumeIdentity: FC = () => {
const { visibleComponent, setVisibleComponent } = useSwitchableComponent( 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 // 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 // hitting my screen, it is almost impossible to see whats happening the outline
// buttons have no contrast // 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 ( return (
<Dialog.Root> <Dialog.Root>
<Dialog.Trigger asChild> <Trigger />
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
Open Lume
</button>
</Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <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 */} {/* @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 */}

View File

@ -1,23 +1,23 @@
import { useState } from "react";
import { import {
login, login,
// loginComplete, // loginComplete,
// logoutComplete, // logoutComplete,
} from "@lumeweb/libkernel/kernel"; } from "@lumeweb/libkernel/kernel";
import { useLume } from "../LumeProvider";
export function useLumeIndentity() { export function useLumeIndentity() {
const [loggedIn, setLoggedIn] = useState(false); const {isLoggedIn, setIsLoggedIn} = useLume();
return { return {
isSignedIn: loggedIn, isSignedIn: isLoggedIn,
async signIn(key: Uint8Array) { async signIn(key: Uint8Array) {
await login(key); await login(key);
// await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') ` // 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() { async signOut() {
// await logoutComplete(); // await logoutComplete();
setLoggedIn(false); setIsLoggedIn(false);
}, },
}; };
} }

View File

@ -30,13 +30,15 @@ type LumeObject = {
networks: Network[]; networks: Network[];
}; };
type LumeContext = { type LumeContextType = {
isLoggedIn: boolean,
setIsLoggedIn: (value: boolean) => void,
lume: LumeObject; lume: LumeObject;
}; };
const networkRegistry = createNetworkRegistryClient(); const networkRegistry = createNetworkRegistryClient();
const LumeContext = createContext<LumeContext | undefined>(undefined); const LumeContext = createContext<LumeContextType | undefined>(undefined);
const LumeProvider = ({ children }: { children: ReactNode }) => { const LumeProvider = ({ children }: { children: ReactNode }) => {
const [lume, setLume] = useState<LumeObject>({ networks: [] }); const [lume, setLume] = useState<LumeObject>({ networks: [] });
@ -121,9 +123,10 @@ const LumeProvider = ({ children }: { children: ReactNode }) => {
statusUnsubs.current.forEach((unsub) => unsub()); statusUnsubs.current.forEach((unsub) => unsub());
}; };
}, []); }, []);
const [isLoggedIn, setIsLoggedIn] = useState(false);
return ( 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"); throw new Error("useLume must be used within a LumeProvider");
} }
const { lume } = ctx; return ctx;
return lume;
} }

View File

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