feat(ark): update screen

src/app/depot/index.tsx

@@ -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() {
+  const ark = useArk();
+
+  const [status, setStatus] = useState(false);
+  const [loading, setLoading] = useState(false);
+
   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 (
-    <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">
+          <h1 className="mb-1 text-2xl font-semibold text-neutral-400 dark:text-neutral-600">
+            <span>Deploy Nostr Relay inside Lume</span>{' '}
+            <span className="text-neutral-900 dark:text-neutral-100">with Depot.</span>
+          </h1>
           <button
             type="button"
             onClick={() => launch()}
-          className="h-9 w-max rounded-lg bg-blue-500 px-2 text-white"
+            className="inline-flex h-11 w-24 items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
           >
-          Launch
+            {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>
   );
 }

src/libs/ark/ark.ts

@@ -4,17 +4,20 @@ import NDK, {
   NDKKind,
   NDKNip46Signer,
   NDKPrivateKeySigner,
+  NDKRelay,
   NDKSubscriptionCacheUsage,
   NDKTag,
   NDKUser,
   NostrEvent,
 } from '@nostr-dev-kit/ndk';
 import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
+import { configDir, resolveResource } from '@tauri-apps/api/path';
 import { invoke } from '@tauri-apps/api/primitives';
 import { open } from '@tauri-apps/plugin-dialog';
 import { readBinaryFile } from '@tauri-apps/plugin-fs';
 import { fetch } from '@tauri-apps/plugin-http';
 import { Platform } from '@tauri-apps/plugin-os';
+import { Child, Command } from '@tauri-apps/plugin-shell';
 import Database from '@tauri-apps/plugin-sql';
 import {
   NostrEventExt,
@@ -35,6 +38,7 @@ import {
 
 export class Ark {
   #storage: Database;
+  #depot: Child;
   public ndk: NDK;
   public fetcher: NostrFetcher;
   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) {
     return await invoke('secure_save', { key, value });
   }

src/utils/delay.ts

@@ -0,0 +1 @@
+export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));