chore: monorepo
This commit is contained in:
71
apps/desktop/src/routes/depot/components/contact.tsx
Normal file
71
apps/desktop/src/routes/depot/components/contact.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useArk, useStorage } from "@lume/ark";
|
||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
||||
import { User } from "@lume/ui";
|
||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DepotContactCard() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
|
||||
const [status, setStatus] = useState(false);
|
||||
|
||||
const backupContact = async () => {
|
||||
try {
|
||||
setStatus(true);
|
||||
|
||||
const event = await ark.getEventByFilter({
|
||||
filter: {
|
||||
authors: [storage.account.pubkey],
|
||||
kinds: [NDKKind.Contacts],
|
||||
},
|
||||
});
|
||||
|
||||
// broadcast to depot
|
||||
const publish = await event.publish();
|
||||
|
||||
if (publish) {
|
||||
setStatus(false);
|
||||
toast.success("Backup contact list successfully.");
|
||||
}
|
||||
} catch (e) {
|
||||
setStatus(false);
|
||||
toast.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
||||
<div className="isolate flex -space-x-2">
|
||||
{storage.account.contacts?.slice(0, 8).map((item) => (
|
||||
<User key={item} pubkey={item} variant="ministacked" />
|
||||
))}
|
||||
{storage.account.contacts?.length > 8 ? (
|
||||
<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-neutral-900 ring-1 ring-white dark:bg-neutral-700 dark:text-neutral-100 dark:ring-black">
|
||||
<span className="text-[8px] font-medium">
|
||||
+{storage.account.contacts?.length - 8}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex shrink-0 items-center justify-between">
|
||||
<div className="text-sm font-medium">Contacts</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={backupContact}
|
||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
||||
>
|
||||
{status ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
<RunIcon className="size-4" />
|
||||
)}
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
150
apps/desktop/src/routes/depot/components/members.tsx
Normal file
150
apps/desktop/src/routes/depot/components/members.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { CancelIcon, PlusIcon, UserAddIcon, UserRemoveIcon } from "@lume/icons";
|
||||
import { User } from "@lume/ui";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { resolveResource } from "@tauri-apps/api/path";
|
||||
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { useEffect, useState } from "react";
|
||||
import { parse, stringify } from "smol-toml";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DepotMembers() {
|
||||
const [members, setMembers] = useState<Set<string>>(null);
|
||||
const [tmpMembers, setTmpMembers] = useState<Array<string>>([]);
|
||||
const [newMember, setNewMember] = useState("");
|
||||
|
||||
const addMember = async () => {
|
||||
if (!newMember.startsWith("npub1"))
|
||||
return toast.error("You need to enter a valid npub");
|
||||
|
||||
try {
|
||||
const pubkey = nip19.decode(newMember).data as string;
|
||||
setTmpMembers((prev) => [...prev, pubkey]);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const removeMember = (member: string) => {
|
||||
setTmpMembers((prev) => prev.filter((item) => item !== member));
|
||||
};
|
||||
|
||||
const updateMembers = async () => {
|
||||
setMembers(new Set(tmpMembers));
|
||||
|
||||
const defaultConfig = await resolveResource("resources/config.toml");
|
||||
const config = await readTextFile(defaultConfig);
|
||||
const configContent = parse(config);
|
||||
|
||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
||||
configContent.authorization["pubkey_whitelist"] = [...members];
|
||||
|
||||
const newConfig = stringify(configContent);
|
||||
|
||||
return await writeTextFile(defaultConfig, newConfig);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function loadConfig() {
|
||||
const defaultConfig = await resolveResource("resources/config.toml");
|
||||
const config = await readTextFile(defaultConfig);
|
||||
const configContent = parse(config);
|
||||
setTmpMembers(
|
||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
||||
Array.from(configContent.authorization["pubkey_whitelist"]),
|
||||
);
|
||||
}
|
||||
|
||||
loadConfig();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<div className="flex items-center justify-between rounded-lg bg-neutral-50 p-5 dark:bg-neutral-950">
|
||||
<div className="flex flex-col items-start">
|
||||
<h3 className="text-lg font-semibold">Members</h3>
|
||||
<p className="text-neutral-700 dark:text-neutral-300">
|
||||
Only allowed users can publish event to your Depot
|
||||
</p>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<div className="isolate flex -space-x-2">
|
||||
{tmpMembers.slice(0, 5).map((item) => (
|
||||
<User key={item} pubkey={item} variant="stacked" />
|
||||
))}
|
||||
{tmpMembers.length > 5 ? (
|
||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
||||
<span className="text-xs font-medium">
|
||||
+{tmpMembers.length}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Dialog.Trigger className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-lg bg-blue-500 px-3 text-white hover:bg-blue-600">
|
||||
<UserAddIcon className="size-4" />
|
||||
Manage
|
||||
</Dialog.Trigger>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div className="relative h-min w-full max-w-xl overflow-hidden rounded-xl bg-white dark:bg-black">
|
||||
<div className="inline-flex h-14 w-full shrink-0 items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-900">
|
||||
<Dialog.Title className="text-center font-semibold">
|
||||
Manage member
|
||||
</Dialog.Title>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={updateMembers}
|
||||
className="inline-flex h-8 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 text-sm font-medium text-white hover:bg-blue-600"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
<Dialog.Close className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||
<CancelIcon className="size-4" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-3">
|
||||
<div className="relative mb-2 mt-4 w-full px-5">
|
||||
<input
|
||||
type="text"
|
||||
spellCheck={false}
|
||||
value={newMember}
|
||||
onChange={(e) => setNewMember(e.target.value)}
|
||||
placeholder="npub1..."
|
||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 pl-3 pr-20 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addMember}
|
||||
className="absolute right-7 top-1/2 inline-flex h-7 w-max -translate-y-1/2 transform items-center justify-center gap-1 rounded-md bg-neutral-200 px-2.5 text-sm font-medium text-blue-500 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
|
||||
>
|
||||
<PlusIcon className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{tmpMembers.map((member) => (
|
||||
<div
|
||||
key={member}
|
||||
className="group flex items-center justify-between px-5 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
||||
>
|
||||
<User pubkey={member} variant="simple" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeMember(member)}
|
||||
className="hidden size-6 items-center justify-center rounded-md bg-neutral-200 group-hover:inline-flex hover:bg-red-200 dark:bg-neutral-800 dark:hover:bg-red-800 dark:hover:text-red-200"
|
||||
>
|
||||
<UserRemoveIcon className="size-4 text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
60
apps/desktop/src/routes/depot/components/profile.tsx
Normal file
60
apps/desktop/src/routes/depot/components/profile.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useArk, useStorage } from "@lume/ark";
|
||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
||||
import { User } from "@lume/ui";
|
||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DepotProfileCard() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
|
||||
const [status, setStatus] = useState(false);
|
||||
|
||||
const backupProfile = async () => {
|
||||
try {
|
||||
setStatus(true);
|
||||
|
||||
const event = await ark.getEventByFilter({
|
||||
filter: {
|
||||
authors: [storage.account.pubkey],
|
||||
kinds: [NDKKind.Metadata],
|
||||
},
|
||||
});
|
||||
|
||||
// broadcast to depot
|
||||
const publish = await event.publish();
|
||||
|
||||
if (publish) {
|
||||
setStatus(false);
|
||||
toast.success("Backup profile successfully.");
|
||||
}
|
||||
} catch (e) {
|
||||
setStatus(false);
|
||||
toast.error(JSON.stringify(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
||||
<User pubkey={storage.account.pubkey} variant="simple" />
|
||||
</div>
|
||||
<div className="inline-flex shrink-0 items-center justify-between">
|
||||
<div className="text-sm font-medium">Profile</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={backupProfile}
|
||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
||||
>
|
||||
{status ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
<RunIcon className="size-4" />
|
||||
)}
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
apps/desktop/src/routes/depot/components/relays.tsx
Normal file
74
apps/desktop/src/routes/depot/components/relays.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useArk, useStorage } from "@lume/ark";
|
||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DepotRelaysCard() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
|
||||
const [status, setStatus] = useState(false);
|
||||
const [relaySize, setRelaySize] = useState(0);
|
||||
|
||||
const backupRelays = async () => {
|
||||
try {
|
||||
setStatus(true);
|
||||
|
||||
const event = await ark.getEventByFilter({
|
||||
filter: {
|
||||
authors: [storage.account.pubkey],
|
||||
kinds: [NDKKind.RelayList],
|
||||
},
|
||||
});
|
||||
|
||||
// broadcast to depot
|
||||
const publish = await event.publish();
|
||||
|
||||
if (publish) {
|
||||
setStatus(false);
|
||||
toast.success("Backup profile successfully.");
|
||||
}
|
||||
} catch (e) {
|
||||
setStatus(false);
|
||||
toast.error(JSON.stringify(e));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function loadRelays() {
|
||||
const event = await ark.getEventByFilter({
|
||||
filter: {
|
||||
authors: [storage.account.pubkey],
|
||||
kinds: [NDKKind.RelayList],
|
||||
},
|
||||
});
|
||||
if (event) setRelaySize(event.tags.length);
|
||||
}
|
||||
|
||||
loadRelays();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
||||
<p className="text-lg font-semibold">{relaySize} relays</p>
|
||||
</div>
|
||||
<div className="inline-flex shrink-0 items-center justify-between">
|
||||
<div className="text-sm font-medium">Relay List</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={backupRelays}
|
||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
||||
>
|
||||
{status ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
<RunIcon className="size-4" />
|
||||
)}
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
221
apps/desktop/src/routes/depot/index.tsx
Normal file
221
apps/desktop/src/routes/depot/index.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import { useArk, useStorage } from "@lume/ark";
|
||||
import { ChevronDownIcon, DepotIcon, GossipIcon } from "@lume/icons";
|
||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import * as Collapsible from "@radix-ui/react-collapsible";
|
||||
import { appConfigDir } from "@tauri-apps/api/path";
|
||||
import { invoke } from "@tauri-apps/api/primitives";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DepotContactCard } from "./components/contact";
|
||||
import { DepotMembers } from "./components/members";
|
||||
import { DepotProfileCard } from "./components/profile";
|
||||
import { DepotRelaysCard } from "./components/relays";
|
||||
|
||||
export function DepotScreen() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
|
||||
const [dataPath, setDataPath] = useState("");
|
||||
const [tunnelUrl, setTunnelUrl] = useState("");
|
||||
|
||||
const openFolder = async () => {
|
||||
await invoke("show_in_folder", {
|
||||
path: `${dataPath}/nostr.db`,
|
||||
});
|
||||
};
|
||||
|
||||
const updateRelayList = async () => {
|
||||
try {
|
||||
if (tunnelUrl.length < 1)
|
||||
return toast.info("Please enter a valid relay url");
|
||||
if (!tunnelUrl.startsWith("ws"))
|
||||
return toast.info("Please enter a valid relay url");
|
||||
|
||||
const relayUrl = new URL(tunnelUrl.replace(/\s/g, ""));
|
||||
if (!/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(relayUrl.host)) return;
|
||||
|
||||
const relayEvent = await ark.getEventByFilter({
|
||||
filter: {
|
||||
authors: [storage.account.pubkey],
|
||||
kinds: [NDKKind.RelayList],
|
||||
},
|
||||
});
|
||||
|
||||
let publish: { id: string; seens: string[] };
|
||||
|
||||
if (!relayEvent) {
|
||||
publish = await ark.createEvent({
|
||||
kind: NDKKind.RelayList,
|
||||
tags: [["r", tunnelUrl, ""]],
|
||||
});
|
||||
}
|
||||
|
||||
const newTags = relayEvent.tags ?? [];
|
||||
newTags.push(["r", tunnelUrl, ""]);
|
||||
|
||||
publish = await ark.createEvent({
|
||||
kind: NDKKind.RelayList,
|
||||
tags: newTags,
|
||||
});
|
||||
|
||||
if (publish) {
|
||||
await storage.createSetting("tunnel_url", tunnelUrl);
|
||||
toast.success("Update relay list successfully.");
|
||||
|
||||
setTunnelUrl("");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toast.error("Error");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function loadConfig() {
|
||||
const appDir = await appConfigDir();
|
||||
setDataPath(appDir);
|
||||
}
|
||||
|
||||
loadConfig();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
||||
<div className="h-full w-72 shrink-0 rounded-l-xl bg-white/50 px-8 pt-8 backdrop-blur-xl dark:bg-black/50">
|
||||
<div className="flex flex-col justify-center gap-4">
|
||||
<div className="size-16 rounded-xl bg-gradient-to-bl from-teal-300 to-teal-600 p-1">
|
||||
<div className="relative inline-flex h-full w-full items-center justify-center overflow-hidden rounded-lg bg-gradient-to-bl from-teal-400 to-teal-700 shadow-sm shadow-white/20">
|
||||
<DepotIcon className="size-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold">Depot is running</h1>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-sm font-medium">Relay URL</div>
|
||||
<div className="inline-flex h-10 w-full select-text items-center rounded-lg bg-black/10 px-3 text-sm backdrop-blur-xl dark:bg-white/10">
|
||||
ws://localhost:6090
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-sm font-medium">Database</div>
|
||||
<div className="inline-flex h-10 w-full items-center gap-2 truncate rounded-lg bg-black/10 p-1 backdrop-blur-xl dark:bg-white/10">
|
||||
<p className="shrink-0 pl-2 text-sm">nostr.db (SQLite)</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openFolder}
|
||||
className="inline-flex h-full w-full items-center justify-center rounded-md bg-white text-sm font-medium shadow hover:bg-blue-500 hover:text-white dark:bg-black"
|
||||
>
|
||||
Open
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto rounded-r-xl bg-white pb-20 dark:bg-black">
|
||||
<div className="mb-5 flex h-12 items-center border-b border-neutral-100 px-5 dark:border-neutral-900">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Actions
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 px-5">
|
||||
<Collapsible.Root
|
||||
defaultOpen
|
||||
className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950"
|
||||
>
|
||||
<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
|
||||
<div className="flex flex-col items-start">
|
||||
<h3 className="text-lg font-semibold">Expose</h3>
|
||||
<p className="text-neutral-700 dark:text-neutral-300">
|
||||
Make your Depot visible in the Internet, everyone can connect
|
||||
into it.
|
||||
</p>
|
||||
</div>
|
||||
<ChevronDownIcon className="size-5 shrink-0" />
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div className="flex w-full flex-col gap-4 p-5">
|
||||
<div>
|
||||
<p className="mb-1 font-medium">ngrok</p>
|
||||
<input
|
||||
readOnly
|
||||
value="ngrok http --domain=<your_domain> 6090"
|
||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 font-medium">Cloudflare Tunnel</p>
|
||||
<input
|
||||
readOnly
|
||||
value="cloudflared tunnel --url localhost:6090"
|
||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 font-medium">Local Tunnel</p>
|
||||
<input
|
||||
readOnly
|
||||
value="lt --port 6090"
|
||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 border-t border-neutral-100 pt-4 dark:border-neutral-900">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<GossipIcon className="size-5 text-blue-500" />
|
||||
<h3 className="mb-1 font-semibold">
|
||||
Support Gossip Model (Recommended)
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-xl">
|
||||
<p className=" text-balance">
|
||||
By adding to Relay List, other Nostr Client which support
|
||||
Gossip Model will automatically connect to your Depot and
|
||||
improve the discoverability.
|
||||
</p>
|
||||
<div className="mt-2 inline-flex w-full items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tunnelUrl}
|
||||
onChange={(e) => setTunnelUrl(e.target.value)}
|
||||
spellCheck={false}
|
||||
placeholder="wss://"
|
||||
className="h-10 flex-1 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={updateRelayList}
|
||||
className="inline-flex h-10 w-max shrink-0 items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<Collapsible.Root className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950">
|
||||
<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
|
||||
<div className="flex flex-col items-start">
|
||||
<h3 className="text-lg font-semibold">Backup (Recommended)</h3>
|
||||
<p className="text-neutral-700 dark:text-neutral-300">
|
||||
Backup all your data to Depot, it always live on your machine.
|
||||
</p>
|
||||
</div>
|
||||
<ChevronDownIcon className="size-5 shrink-0" />
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div className="grid grid-cols-3 gap-4 px-5 py-5">
|
||||
<DepotProfileCard />
|
||||
<DepotContactCard />
|
||||
<DepotRelaysCard />
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<DepotMembers />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
apps/desktop/src/routes/depot/onboarding.tsx
Normal file
99
apps/desktop/src/routes/depot/onboarding.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { useArk, useStorage } from "@lume/ark";
|
||||
import { LoaderIcon } from "@lume/icons";
|
||||
import { delay } from "@lume/utils";
|
||||
import { resolveResource } from "@tauri-apps/api/path";
|
||||
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { parse, stringify } from "smol-toml";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DepotOnboardingScreen() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const launchDepot = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// get default config
|
||||
const defaultConfig = await resolveResource("resources/config.toml");
|
||||
const config = await readTextFile(defaultConfig);
|
||||
const parsedConfig = parse(config);
|
||||
|
||||
// add current user to whitelist
|
||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
||||
parsedConfig.authorization["pubkey_whitelist"].push(
|
||||
storage.account.pubkey,
|
||||
);
|
||||
|
||||
// update new config
|
||||
const newConfig = stringify(parsedConfig);
|
||||
await writeTextFile(defaultConfig, newConfig);
|
||||
|
||||
// launch depot
|
||||
await storage.launchDepot();
|
||||
await storage.createSetting("depot", "1");
|
||||
await delay(2000); // delay 2s to make sure depot is running
|
||||
|
||||
// default depot url: ws://localhost:6090
|
||||
// #TODO: user can custom depot url
|
||||
const connect = await ark.connectDepot();
|
||||
|
||||
if (connect) {
|
||||
toast.success("Your Depot is successfully launch.");
|
||||
setLoading(false);
|
||||
|
||||
navigate("/depot/");
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-10 rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-1 text-3xl font-semibold text-neutral-400 dark:text-neutral-600">
|
||||
Run your Personal Nostr Relay inside Lume
|
||||
</h1>
|
||||
<h2 className="text-4xl font-semibold">Your Relay, Your Control.</h2>
|
||||
</div>
|
||||
<div className="rounded-xl bg-blue-100 p-1.5 dark:bg-blue-900">
|
||||
<button
|
||||
type="button"
|
||||
onClick={launchDepot}
|
||||
className="inline-flex h-11 w-36 transform items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white active:translate-y-1"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
Launching...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2.25a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM6.166 5.106a.75.75 0 0 1 0 1.06 8.25 8.25 0 1 0 11.668 0 .75.75 0 1 1 1.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 0 1 1.06 0Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Launch
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user