Compare commits
3 Commits
a4bb67a3ac
...
e259d74c8b
Author | SHA1 | Date |
---|---|---|
Juan Di Toro | e259d74c8b | |
Juan Di Toro | f9664fc849 | |
Juan Di Toro | 099b2f2c64 |
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
return (
|
LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
|
||||||
<Dialog.Root>
|
export default function Wrapped({ children }: React.PropsWithChildren) {
|
||||||
<Dialog.Trigger asChild>
|
const DefaultTrigger = () => (
|
||||||
|
<LumeIdentityTrigger asChild>
|
||||||
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
|
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
|
||||||
Open Lume
|
Open Lume
|
||||||
</button>
|
</button>
|
||||||
</Dialog.Trigger>
|
</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>
|
||||||
|
<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 */}
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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";
|
||||||
|
|
Loading…
Reference in New Issue