mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
feat(ark): update screen
This commit is contained in:
parent
17c64ee357
commit
ba88a4e0f2
@ -1,29 +1,148 @@
|
|||||||
import { configDir, resolveResource } from '@tauri-apps/api/path';
|
import { useEffect, useState } from 'react';
|
||||||
import { Command } from '@tauri-apps/plugin-shell';
|
import { toast } from 'sonner';
|
||||||
|
import { useArk } from '@libs/ark';
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
import { delay } from '@utils/delay';
|
||||||
|
|
||||||
export function DepotScreen() {
|
export function DepotScreen() {
|
||||||
|
const ark = useArk();
|
||||||
|
|
||||||
|
const [status, setStatus] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const launch = async () => {
|
const launch = async () => {
|
||||||
const configPath = await resolveResource('resources/config.toml');
|
try {
|
||||||
const dataPath = await configDir();
|
setLoading(true);
|
||||||
|
|
||||||
const command = Command.sidecar('bin/depot', ['-c', configPath, '-d', dataPath]);
|
await ark.launchDepot();
|
||||||
const process = await command.spawn();
|
await delay(5000); // delay 5s to make sure depot is running
|
||||||
|
|
||||||
process.pid;
|
// default depot url: ws://localhost:6090
|
||||||
|
// #TODO: user can custom depot url
|
||||||
|
const connect = await ark.connectDepot();
|
||||||
|
|
||||||
|
if (connect) {
|
||||||
|
setStatus(true);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
toast.error(e);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const depotStatus = ark.checkDepot();
|
||||||
|
setStatus(depotStatus);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center">
|
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-4 py-10">
|
{!status ? (
|
||||||
<h1 className="text-center text-lg font-semibold">Depot</h1>
|
<div className="flex flex-col items-center gap-4">
|
||||||
<button
|
<h1 className="mb-1 text-2xl font-semibold text-neutral-400 dark:text-neutral-600">
|
||||||
type="button"
|
<span>Deploy Nostr Relay inside Lume</span>{' '}
|
||||||
onClick={() => launch()}
|
<span className="text-neutral-900 dark:text-neutral-100">with Depot.</span>
|
||||||
className="h-9 w-max rounded-lg bg-blue-500 px-2 text-white"
|
</h1>
|
||||||
>
|
<button
|
||||||
Launch
|
type="button"
|
||||||
</button>
|
onClick={() => launch()}
|
||||||
</div>
|
className="inline-flex h-11 w-24 items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
{loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Launch'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mx-auto w-full max-w-md">
|
||||||
|
<div className="flex flex-col gap-10">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="mb-1 text-2xl font-semibold text-neutral-400 dark:text-neutral-600">
|
||||||
|
Your Depot is running
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center justify-center gap-2.5">
|
||||||
|
<span className="relative flex h-3 w-3">
|
||||||
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-teal-400 opacity-75"></span>
|
||||||
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-teal-500"></span>
|
||||||
|
</span>
|
||||||
|
<p className="font-medium">ws://localhost:6090</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex items-center justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Backup</h3>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
Sync all your data to Depot.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-20 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Sync
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Expose</h3>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
Help other users can see your depot on Internet. You also can do it by
|
||||||
|
yourself by using other service like ngrok or localtunnel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-20 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Start
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Relay Hint</h3>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
Instruct other Nostr client find your events in this depot.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-20 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Invite</h3>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
By default, only you can write event to Depot, but you can invite
|
||||||
|
other user to your Depot.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-20 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Invite
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Customize</h3>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
Depot also provide plenty config to customize your experiences.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-20 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Config
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -4,17 +4,20 @@ import NDK, {
|
|||||||
NDKKind,
|
NDKKind,
|
||||||
NDKNip46Signer,
|
NDKNip46Signer,
|
||||||
NDKPrivateKeySigner,
|
NDKPrivateKeySigner,
|
||||||
|
NDKRelay,
|
||||||
NDKSubscriptionCacheUsage,
|
NDKSubscriptionCacheUsage,
|
||||||
NDKTag,
|
NDKTag,
|
||||||
NDKUser,
|
NDKUser,
|
||||||
NostrEvent,
|
NostrEvent,
|
||||||
} from '@nostr-dev-kit/ndk';
|
} from '@nostr-dev-kit/ndk';
|
||||||
import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
|
import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
|
||||||
|
import { configDir, resolveResource } from '@tauri-apps/api/path';
|
||||||
import { invoke } from '@tauri-apps/api/primitives';
|
import { invoke } from '@tauri-apps/api/primitives';
|
||||||
import { open } from '@tauri-apps/plugin-dialog';
|
import { open } from '@tauri-apps/plugin-dialog';
|
||||||
import { readBinaryFile } from '@tauri-apps/plugin-fs';
|
import { readBinaryFile } from '@tauri-apps/plugin-fs';
|
||||||
import { fetch } from '@tauri-apps/plugin-http';
|
import { fetch } from '@tauri-apps/plugin-http';
|
||||||
import { Platform } from '@tauri-apps/plugin-os';
|
import { Platform } from '@tauri-apps/plugin-os';
|
||||||
|
import { Child, Command } from '@tauri-apps/plugin-shell';
|
||||||
import Database from '@tauri-apps/plugin-sql';
|
import Database from '@tauri-apps/plugin-sql';
|
||||||
import {
|
import {
|
||||||
NostrEventExt,
|
NostrEventExt,
|
||||||
@ -35,6 +38,7 @@ import {
|
|||||||
|
|
||||||
export class Ark {
|
export class Ark {
|
||||||
#storage: Database;
|
#storage: Database;
|
||||||
|
#depot: Child;
|
||||||
public ndk: NDK;
|
public ndk: NDK;
|
||||||
public fetcher: NostrFetcher;
|
public fetcher: NostrFetcher;
|
||||||
public account: Account | null;
|
public account: Account | null;
|
||||||
@ -61,6 +65,28 @@ export class Ark {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async launchDepot() {
|
||||||
|
const configPath = await resolveResource('resources/config.toml');
|
||||||
|
const dataPath = await configDir();
|
||||||
|
|
||||||
|
const command = Command.sidecar('bin/depot', ['-c', configPath, '-d', dataPath]);
|
||||||
|
this.#depot = await command.spawn();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async connectDepot() {
|
||||||
|
if (!this.#depot) return;
|
||||||
|
return this.ndk.addExplicitRelay(
|
||||||
|
new NDKRelay('ws://localhost:6090'),
|
||||||
|
undefined,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public checkDepot() {
|
||||||
|
if (this.#depot) return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
async #keyring_save(key: string, value: string) {
|
async #keyring_save(key: string, value: string) {
|
||||||
return await invoke('secure_save', { key, value });
|
return await invoke('secure_save', { key, value });
|
||||||
}
|
}
|
||||||
|
1
src/utils/delay.ts
Normal file
1
src/utils/delay.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
|
Loading…
Reference in New Issue
Block a user