Compare commits
No commits in common. "e259d74c8b0c03af0092d99174b45054b762a3ba" and "a4bb67a3ac546315754ef293dcf2764435868a65" have entirely different histories.
e259d74c8b
...
a4bb67a3ac
|
@ -4,7 +4,6 @@ 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",
|
||||||
|
@ -12,11 +11,8 @@ const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
|
||||||
syncing: "Syncing",
|
syncing: "Syncing",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LumeDashboardTrigger = Dialog.Trigger;
|
const LumeDashboard = () => {
|
||||||
LumeDashboardTrigger.displayName = "LumeDashboardTrigger";
|
const { networks } = useLume();
|
||||||
|
|
||||||
const LumeDashboard = ({children}: React.PropsWithChildren) => {
|
|
||||||
const { lume: { networks } } = useLume();
|
|
||||||
|
|
||||||
const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState<string[]>([]);
|
const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState<string[]>([]);
|
||||||
|
|
||||||
|
@ -26,29 +22,9 @@ const LumeDashboard = ({children}: React.PropsWithChildren) => {
|
||||||
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>
|
||||||
<Trigger />
|
<Dialog.Trigger>Open</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" />
|
||||||
<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,4 +1,3 @@
|
||||||
import React, { type FC } from "react";
|
|
||||||
import { Button } from "../../ui/button";
|
import { Button } from "../../ui/button";
|
||||||
import {
|
import {
|
||||||
SwitchableComponent,
|
SwitchableComponent,
|
||||||
|
@ -9,6 +8,7 @@ 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,31 +106,14 @@ 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 const LumeIdentityTrigger = Dialog.Trigger;
|
export default function Wrapped() {
|
||||||
LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
|
return (
|
||||||
export default function Wrapped({ children }: React.PropsWithChildren) {
|
<Dialog.Root>
|
||||||
const DefaultTrigger = () => (
|
<Dialog.Trigger asChild>
|
||||||
<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>
|
||||||
</LumeIdentityTrigger>
|
</Dialog.Trigger>
|
||||||
);
|
|
||||||
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 {isLoggedIn, setIsLoggedIn} = useLume();
|
const [loggedIn, setLoggedIn] = useState(false);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isSignedIn: isLoggedIn,
|
isSignedIn: loggedIn,
|
||||||
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') `
|
||||||
setIsLoggedIn(true);
|
setLoggedIn(true);
|
||||||
},
|
},
|
||||||
async signOut() {
|
async signOut() {
|
||||||
// await logoutComplete();
|
// await logoutComplete();
|
||||||
setIsLoggedIn(false);
|
setLoggedIn(false);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,15 +30,13 @@ type LumeObject = {
|
||||||
networks: Network[];
|
networks: Network[];
|
||||||
};
|
};
|
||||||
|
|
||||||
type LumeContextType = {
|
type LumeContext = {
|
||||||
isLoggedIn: boolean,
|
|
||||||
setIsLoggedIn: (value: boolean) => void,
|
|
||||||
lume: LumeObject;
|
lume: LumeObject;
|
||||||
};
|
};
|
||||||
|
|
||||||
const networkRegistry = createNetworkRegistryClient();
|
const networkRegistry = createNetworkRegistryClient();
|
||||||
|
|
||||||
const LumeContext = createContext<LumeContextType | undefined>(undefined);
|
const LumeContext = createContext<LumeContext | undefined>(undefined);
|
||||||
|
|
||||||
const LumeProvider = ({ children }: { children: ReactNode }) => {
|
const LumeProvider = ({ children }: { children: ReactNode }) => {
|
||||||
const [lume, setLume] = useState<LumeObject>({ networks: [] });
|
const [lume, setLume] = useState<LumeObject>({ networks: [] });
|
||||||
|
@ -123,10 +121,9 @@ 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, isLoggedIn, setIsLoggedIn }}>{children}</LumeContext.Provider>
|
<LumeContext.Provider value={{ lume }}>{children}</LumeContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -139,5 +136,6 @@ export function useLume() {
|
||||||
throw new Error("useLume must be used within a LumeProvider");
|
throw new Error("useLume must be used within a LumeProvider");
|
||||||
}
|
}
|
||||||
|
|
||||||
return ctx;
|
const { lume } = 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, LumeDashboardTrigger } from "./components/lume/LumeDashboard/LumeDashboard";
|
export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard";
|
||||||
export { default as LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity";
|
export { default as LumeIdentity } from "./components/lume/LumeIdentity/LumeIdentity";
|
||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
|
|
Loading…
Reference in New Issue