feat: add zap command

apps/desktop2/src/app.css

@@ -35,6 +35,12 @@ media-controller {
   }
 
   .shadow-toolbar {
-    box-shadow: 0 0 #0000, 0 0 #0000, 0 8px 24px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 0 2px hsla(0, 0%, 100%, .14)
+    box-shadow:
+      0 0 #0000,
+      0 0 #0000,
+      0 8px 24px 0 rgba(0, 0, 0, 0.2),
+      0 2px 8px 0 rgba(0, 0, 0, 0.08),
+      inset 0 0 0 1px rgba(0, 0, 0, 0.2),
+      inset 0 0 0 2px hsla(0, 0%, 100%, 0.14);
   }
 }

apps/desktop2/src/components/repost.tsx

@@ -77,7 +77,7 @@ export function RepostNote({
     >
       <User.Provider pubkey={event.pubkey}>
         <User.Root className="flex gap-3">
-          <div className="inline-flex w-10 shrink-0 items-center justify-center">
+          <div className="inline-flex w-11 shrink-0 items-center justify-center">
             <RepostIcon className="h-5 w-5 text-blue-500" />
           </div>
           <div className="inline-flex items-center gap-2">
@@ -93,7 +93,7 @@ export function RepostNote({
         <div className="flex flex-col gap-2">
           <Note.User />
           <div className="flex gap-3">
-            <div className="size-10 shrink-0" />
+            <div className="size-11 shrink-0" />
             <div className="min-w-0 flex-1">
               <Note.Content />
               <div className="mt-5 flex items-center justify-between">

apps/desktop2/src/routes/$account/home/local.lazy.tsx

@@ -1,18 +1,13 @@
 import { useArk } from "@lume/ark";
-import {
+import { ArrowRightCircleIcon, ArrowRightIcon, LoaderIcon } from "@lume/icons";
-  ArrowRightCircleIcon,
-  ArrowRightIcon,
-  LoaderIcon,
-  SearchIcon,
-} from "@lume/icons";
 import { Event, Kind } from "@lume/types";
 import { EmptyFeed } from "@lume/ui";
 import { FETCH_LIMIT } from "@lume/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
-import { TextNote } from "./-components/text";
+import { TextNote } from "@/components/text";
-import { RepostNote } from "./-components/repost";
+import { RepostNote } from "@/components/repost";
 
 export const Route = createLazyFileRoute("/$account/home/local")({
   component: LocalTimeline,
@@ -64,13 +59,6 @@ function LocalTimeline() {
       ) : !data.length ? (
         <div className="flex flex-col gap-3">
           <EmptyFeed />
-          <a
-            href="/suggest"
-            className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-blue-500 font-medium text-white hover:bg-blue-600"
-          >
-            Find accounts to follow
-            <ArrowRightIcon className="size-5" />
-          </a>
         </div>
       ) : (
         <Virtualizer overscan={3}>

apps/desktop2/src/routes/users/-components/eventList.tsx

@@ -1,5 +1,5 @@
-import { RepostNote } from "@/routes/$account/home/-components/repost";
+import { TextNote } from "@/components/text";
-import { TextNote } from "@/routes/$account/home/-components/text";
+import { RepostNote } from "@/components/repost";
 import { useArk } from "@lume/ark";
 import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";

packages/ark/src/ark.ts

@@ -394,6 +394,42 @@ export class Ark {
 		}
 	}
 
+	public async get_nwc_status() {
+		try {
+			const cmd: boolean = await invoke("get_nwc_status");
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
+	public async set_nwc(uri: string) {
+		try {
+			const cmd: boolean = await invoke("set_nwc", { uri });
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
+	public async zap_profile(id: string, amount: number, message: string) {
+		try {
+			const cmd: boolean = await invoke("zap_profile", { id, amount, message });
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
+	public async zap_event(id: string, amount: number, message: string) {
+		try {
+			const cmd: boolean = await invoke("zap_event", { id, amount, message });
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
 	public async upload(filePath?: string) {
 		try {
 			const allowExts = [

packages/ui/src/note/buttons/downvote.tsx

@@ -3,11 +3,14 @@ import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { useArk } from "@lume/ark";
 import { cn } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useTranslation } from "react-i18next";
 
 export function NoteDownvote() {
   const ark = useArk();
   const event = useNoteContext();
 
+  const [t] = useTranslation();
   const [reaction, setReaction] = useState<"-" | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -23,22 +26,34 @@ export function NoteDownvote() {
   };
 
   return (
-    <button
+    <Tooltip.Provider>
-      type="button"
+      <Tooltip.Root delayDuration={150}>
-      onClick={down}
+        <Tooltip.Trigger asChild>
-      disabled={!!reaction || loading}
+          <button
-      className={cn(
+            type="button"
-        "inline-flex size-7 items-center justify-center rounded-full",
+            onClick={down}
-        reaction === "-"
+            disabled={!!reaction || loading}
-          ? "bg-blue-500 text-white"
+            className={cn(
-          : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
+              "inline-flex size-7 items-center justify-center rounded-full",
-      )}
+              reaction === "-"
-    >
+                ? "bg-blue-500 text-white"
-      {loading ? (
+                : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
-        <LoaderIcon className="size-4 animate-spin" />
+            )}
-      ) : (
+          >
-        <ArrowDownIcon className="size-4" />
+            {loading ? (
-      )}
+              <LoaderIcon className="size-4 animate-spin" />
-    </button>
+            ) : (
+              <ArrowDownIcon className="size-4" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] dark:bg-neutral-50 dark:text-neutral-950">
+            {t("note.buttons.downvote")}
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
   );
 }

packages/ui/src/note/buttons/upvote.tsx

@@ -3,11 +3,14 @@ import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { useArk } from "@lume/ark";
 import { cn } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useTranslation } from "react-i18next";
 
 export function NoteUpvote() {
   const ark = useArk();
   const event = useNoteContext();
 
+  const [t] = useTranslation();
   const [reaction, setReaction] = useState<"+" | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -23,22 +26,34 @@ export function NoteUpvote() {
   };
 
   return (
-    <button
+    <Tooltip.Provider>
-      type="button"
+      <Tooltip.Root delayDuration={150}>
-      onClick={up}
+        <Tooltip.Trigger asChild>
-      disabled={!!reaction || loading}
+          <button
-      className={cn(
+            type="button"
-        "inline-flex size-7 items-center justify-center rounded-full",
+            onClick={up}
-        reaction === "+"
+            disabled={!!reaction || loading}
-          ? "bg-blue-500 text-white"
+            className={cn(
-          : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
+              "inline-flex size-7 items-center justify-center rounded-full",
-      )}
+              reaction === "+"
-    >
+                ? "bg-blue-500 text-white"
-      {loading ? (
+                : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
-        <LoaderIcon className="size-4 animate-spin" />
+            )}
-      ) : (
+          >
-        <ArrowUpIcon className="size-4" />
+            {loading ? (
-      )}
+              <LoaderIcon className="size-4 animate-spin" />
-    </button>
+            ) : (
+              <ArrowUpIcon className="size-4" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] dark:bg-neutral-50 dark:text-neutral-950">
+            {t("note.buttons.upvote")}
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
   );
 }

packages/ui/src/note/menu.tsx

@@ -95,6 +95,7 @@ export function NoteMenu() {
               {t("note.menu.copyRaw")}
             </button>
           </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

src-tauri/src/main.rs

@@ -106,6 +106,10 @@ fn main() {
       nostr::metadata::get_interest,
       nostr::metadata::set_settings,
       nostr::metadata::get_settings,
+      nostr::metadata::get_nwc_status,
+      nostr::metadata::set_nwc,
+      nostr::metadata::zap_profile,
+      nostr::metadata::zap_event,
       nostr::event::get_event,
       nostr::event::get_events_from,
       nostr::event::get_local_events,

src-tauri/src/nostr/keys.rs

@@ -3,6 +3,7 @@ use keyring::Entry;
 use nostr_sdk::prelude::*;
 use std::io::{BufReader, Read};
 use std::iter;
+use std::time::Duration;
 use std::{fs::File, io::Write, str::FromStr};
 use tauri::{Manager, State};
 
@@ -139,11 +140,34 @@ pub async fn load_selected_account(
       // Build nostr signer
       let secret_key = SecretKey::from_bech32(nsec_key).expect("Get secret key failed");
       let keys = Keys::new(secret_key);
+      let public_key = keys.public_key();
       let signer = NostrSigner::Keys(keys);
 
       // Update signer
       client.set_signer(Some(signer)).await;
 
+      // Get user's relay list
+      let filter = Filter::new()
+        .author(public_key)
+        .kind(Kind::RelayList)
+        .limit(1);
+      let query = client
+        .get_events_of(vec![filter], Some(Duration::from_secs(10)))
+        .await;
+
+      // Connect user's relay list
+      if let Ok(events) = query {
+        if let Some(event) = events.first() {
+          let list = nip65::extract_relay_list(&event);
+          for item in list.into_iter() {
+            client
+              .connect_relay(item.0.to_string())
+              .await
+              .unwrap_or_default();
+          }
+        }
+      }
+
       Ok(true)
     } else {
       Ok(false)

src-tauri/src/nostr/metadata.rs

@@ -272,3 +272,93 @@ pub async fn get_settings(id: &str, state: State<'_, Nostr>) -> Result<String, S
     Err("Get settings failed".into())
   }
 }
+
+#[tauri::command]
+pub async fn get_nwc_status(state: State<'_, Nostr>) -> Result<bool, ()> {
+  let client = &state.client;
+  let zapper = client.zapper().await.is_ok();
+
+  Ok(zapper)
+}
+
+#[tauri::command]
+pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String> {
+  let client = &state.client;
+
+  if let Ok(uri) = NostrWalletConnectURI::from_str(&uri) {
+    if let Ok(nwc) = NWC::new(uri).await {
+      let _ = client.set_zapper(nwc);
+      Ok(true)
+    } else {
+      Ok(false)
+    }
+  } else {
+    Err("Set NWC failed".into())
+  }
+}
+
+#[tauri::command]
+pub async fn zap_profile(
+  id: &str,
+  amount: u64,
+  message: &str,
+  state: State<'_, Nostr>,
+) -> Result<bool, String> {
+  let client = &state.client;
+  let public_key: Option<PublicKey> = match Nip19::from_bech32(id) {
+    Ok(val) => match val {
+      Nip19::Pubkey(pubkey) => Some(pubkey),
+      Nip19::Profile(profile) => Some(profile.public_key),
+      _ => None,
+    },
+    Err(_) => match PublicKey::from_str(id) {
+      Ok(val) => Some(val),
+      Err(_) => None,
+    },
+  };
+
+  if let Some(recipient) = public_key {
+    let details = ZapDetails::new(ZapType::Public).message(message);
+
+    if let Ok(_) = client.zap(recipient, amount, Some(details)).await {
+      Ok(true)
+    } else {
+      Err("Zap profile failed".into())
+    }
+  } else {
+    Err("Parse public key failed".into())
+  }
+}
+
+#[tauri::command]
+pub async fn zap_event(
+  id: &str,
+  amount: u64,
+  message: &str,
+  state: State<'_, Nostr>,
+) -> Result<bool, String> {
+  let client = &state.client;
+  let event_id: Option<EventId> = match Nip19::from_bech32(id) {
+    Ok(val) => match val {
+      Nip19::EventId(id) => Some(id),
+      Nip19::Event(event) => Some(event.event_id),
+      _ => None,
+    },
+    Err(_) => match EventId::from_hex(id) {
+      Ok(val) => Some(val),
+      Err(_) => None,
+    },
+  };
+
+  if let Some(recipient) = event_id {
+    let details = ZapDetails::new(ZapType::Public).message(message);
+
+    if let Ok(_) = client.zap(recipient, amount, Some(details)).await {
+      Ok(true)
+    } else {
+      Err("Zap event failed".into())
+    }
+  } else {
+    Err("Parse public key failed".into())
+  }
+}