feat: add zap

apps/desktop2/package.json

@@ -26,6 +26,7 @@
     "i18next-resources-to-backend": "^1.2.0",
     "nostr-tools": "^2.3.1",
     "react": "^18.2.0",
+    "react-currency-input-field": "^3.8.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "slate": "^0.101.5",

apps/desktop2/src/components/balance.tsx

@@ -0,0 +1,51 @@
+import { useArk } from "@lume/ark";
+import { User } from "@lume/ui";
+import { getBitcoinDisplayValues } from "@lume/utils";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function Balance({
+  recipient,
+  account,
+}: {
+  recipient: string;
+  account: string;
+}) {
+  const [t] = useTranslation();
+  const [balance, setBalance] = useState(0);
+
+  const ark = useArk();
+  const value = useMemo(() => getBitcoinDisplayValues(balance), [balance]);
+
+  useEffect(() => {
+    async function getBalance() {
+      const val = await ark.get_balance();
+      setBalance(val);
+    }
+
+    getBalance();
+  }, []);
+
+  return (
+    <div
+      data-tauri-drag-region
+      className="flex h-16 items-center justify-end px-3"
+    >
+      <div className="flex items-center gap-2">
+        <div className="text-end">
+          <div className="text-sm leading-tight text-neutral-700 dark:text-neutral-300">
+            Your balance
+          </div>
+          <div className="font-medium leading-tight">
+            ₿ {value.bitcoinFormatted}
+          </div>
+        </div>
+        <User.Provider pubkey={account}>
+          <User.Root>
+            <User.Avatar className="size-9 rounded-full" />
+          </User.Root>
+        </User.Provider>
+      </div>
+    </div>
+  );
+}

apps/desktop2/src/routes/nwc.lazy.tsx

@@ -25,37 +25,43 @@ function Screen() {
   return (
     <Container withDrag>
       <div className="h-full w-full flex-1 px-5">
-        <div className="flex flex-col gap-2">
-          <div className="inline-flex size-14 items-center justify-center rounded-xl bg-black text-white shadow-md">
-            <ZapIcon className="size-5" />
-          </div>
-          <div>
-            <h3 className="text-2xl font-light">
-              Connect <span className="font-semibold">bitcoin wallet</span> to
-              start zapping to your favorite content and creator.
-            </h3>
-          </div>
-        </div>
-        <div className="mt-10 flex flex-col gap-2">
-          <div className="flex flex-col gap-1.5">
-            <label>Paste a Nostr Wallet Connect connection string</label>
-            <textarea
-              value={uri}
-              onChange={(e) => setUri(e.target.value)}
-              placeholder="nostrconnect://"
-              className="h-24 w-full resize-none rounded-lg border-transparent bg-white placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-black dark:focus:ring-blue-900"
-            />
-          </div>
-          <button
-            type="button"
-            onClick={save}
-            className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
-          >
-            <div className="size-5" />
-            <div>Save & Connect</div>
-            <ArrowRightIcon className="size-5" />
-          </button>
-        </div>
+        {!isDone ? (
+          <>
+            <div className="flex flex-col gap-2">
+              <div className="inline-flex size-14 items-center justify-center rounded-xl bg-black text-white shadow-md">
+                <ZapIcon className="size-5" />
+              </div>
+              <div>
+                <h3 className="text-2xl font-light">
+                  Connect <span className="font-semibold">bitcoin wallet</span>{" "}
+                  to start zapping to your favorite content and creator.
+                </h3>
+              </div>
+            </div>
+            <div className="mt-10 flex flex-col gap-2">
+              <div className="flex flex-col gap-1.5">
+                <label>Paste a Nostr Wallet Connect connection string</label>
+                <textarea
+                  value={uri}
+                  onChange={(e) => setUri(e.target.value)}
+                  placeholder="nostrconnect://"
+                  className="h-24 w-full resize-none rounded-lg border-transparent bg-white placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-black dark:focus:ring-blue-900"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={save}
+                className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
+              >
+                <div className="size-5" />
+                <div>Save & Connect</div>
+                <ArrowRightIcon className="size-5" />
+              </button>
+            </div>
+          </>
+        ) : (
+          <div>Done</div>
+        )}
       </div>
     </Container>
   );

apps/desktop2/src/routes/zap.$id.lazy.tsx

@@ -0,0 +1,108 @@
+import { Balance } from "@/components/balance";
+import { useArk } from "@lume/ark";
+import { Box, Container, User } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyInput from "react-currency-input-field";
+
+const DEFAULT_VALUES = [69, 100, 200, 500];
+
+export const Route = createLazyFileRoute("/zap/$id")({
+  component: Screen,
+});
+
+function Screen() {
+  const { t } = useTranslation();
+  const { id } = Route.useParams();
+  // @ts-ignore, magic !!!
+  const { pubkey, account } = Route.useSearch();
+
+  const [amount, setAmount] = useState(21);
+  const [message, setMessage] = useState("");
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const ark = useArk();
+
+  const submit = async () => {
+    const val = await ark.zap_event(id, amount, message);
+    console.log(val);
+  };
+
+  return (
+    <Container>
+      <Balance recipient={pubkey} account={account} />
+      <Box className="flex flex-col gap-3">
+        <div className="flex h-full flex-col justify-between py-5">
+          <div className="flex h-11 shrink-0 items-center justify-center gap-2">
+            {t("note.zap.modalTitle")}{" "}
+            <User.Provider pubkey={pubkey}>
+              <User.Root className="inline-flex items-center gap-2 rounded-full bg-neutral-100 p-1 dark:bg-neutral-900">
+                <User.Avatar className="size-6 rounded-full" />
+                <User.Name className="pr-2 text-sm font-medium" />
+              </User.Root>
+            </User.Provider>
+          </div>
+          <div className="flex flex-1 flex-col justify-between px-5">
+            <div className="relative flex flex-1 flex-col pb-8">
+              <div className="inline-flex h-full flex-1 items-center justify-center gap-1">
+                <CurrencyInput
+                  placeholder="0"
+                  defaultValue={21}
+                  value={amount}
+                  decimalsLimit={2}
+                  min={0} // 0 sats
+                  max={10000} // 1M sats
+                  maxLength={10000} // 1M sats
+                  onValueChange={(value) => setAmount(Number(value))}
+                  className="w-full flex-1 border-none bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+                />
+                <span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-500 dark:text-neutral-400">
+                  sats
+                </span>
+              </div>
+              <div className="inline-flex items-center justify-center gap-2">
+                {DEFAULT_VALUES.map((value) => (
+                  <button
+                    type="button"
+                    onClick={() => setAmount(value)}
+                    className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                  >
+                    {value} sats
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <input
+                name="message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                spellCheck={false}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                placeholder={t("note.zap.messagePlaceholder")}
+                className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:text-neutral-400"
+              />
+              <div className="flex flex-col gap-2">
+                <button
+                  type="button"
+                  onClick={() => submit()}
+                  className="inline-flex h-9 w-full items-center justify-center rounded-lg border-t border-neutral-900 bg-neutral-950 pb-[2px] font-semibold text-neutral-50 hover:bg-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                >
+                  {isCompleted
+                    ? t("note.zap.buttonFinish")
+                    : isLoading
+                      ? t("note.zap.buttonLoading")
+                      : t("note.zap.zap")}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Box>
+    </Container>
+  );
+}