@@ -109,7 +113,15 @@ export function LiveChat({
)}
{zaps.length > 0 && (
diff --git a/src/element/new-goal.css b/src/element/new-goal.css
new file mode 100644
index 0000000..56af65e
--- /dev/null
+++ b/src/element/new-goal.css
@@ -0,0 +1,30 @@
+.add-stream {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+}
+
+.new-goal .h3 {
+ font-size: 24px;
+ margin: 0;
+}
+
+.zap-goals {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.new-goal .paper {
+ background: #262626;
+ height: 32px;
+}
+
+.new-goal .btn:disabled {
+ opacity: 0.3;
+}
+
+.new-goal .create-goal {
+ margin-top: 24px;
+}
diff --git a/src/element/new-goal.tsx b/src/element/new-goal.tsx
new file mode 100644
index 0000000..2c6050c
--- /dev/null
+++ b/src/element/new-goal.tsx
@@ -0,0 +1,104 @@
+import "./new-goal.css";
+import * as Dialog from "@radix-ui/react-dialog";
+
+import AsyncButton from "./async-button";
+import { NostrLink, EventPublisher } from "@snort/system";
+import { unixNow } from "@snort/shared";
+import { Icon } from "element/icon";
+import { useEffect, useState } from "react";
+import { eventLink } from "utils";
+import { NostrProviderDialog } from "./nostr-provider-dialog";
+import { System } from "index";
+import { GOAL } from "const";
+
+interface NewGoalDialogProps {
+ link: NostrLink;
+}
+
+export function NewGoalDialog({ link }: NewGoalDialogProps) {
+ const [open, setOpen] = useState(false);
+
+ const [goalAmount, setGoalAmount] = useState("");
+ const [goalName, setGoalName] = useState("");
+
+ async function publishGoal() {
+ const pub = await EventPublisher.nip7();
+ if (pub) {
+ const evNew = await pub.generic((eb) => {
+ eb.kind(GOAL)
+ .tag(["a", `${link.kind}:${link.author}:${link.id}`])
+ .tag(["amount", String(Number(goalAmount) * 1000)])
+ .content(goalName);
+ return eb;
+ });
+ console.debug(evNew);
+ System.BroadcastEvent(evNew);
+ setOpen(false);
+ setGoalName("");
+ setGoalAmount("");
+ }
+ }
+ const isValid = goalName.length && Number(goalAmount) > 0;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
Stream Zap Goals
+
+
+
Name
+
+ setGoalName(e.target.value)}
+ />
+
+
+
+
Amount
+
+ setGoalAmount(e.target.value)}
+ />
+
+
+
+
+ );
+}
diff --git a/src/hooks/goals.ts b/src/hooks/goals.ts
new file mode 100644
index 0000000..b946902
--- /dev/null
+++ b/src/hooks/goals.ts
@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import {
+ RequestBuilder,
+ FlatNoteStore,
+ NostrEvent,
+ EventKind,
+ NostrLink,
+} from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
+import { GOAL } from "const";
+import { System } from "index";
+import { findTag } from "utils";
+
+export function useGoal(link: NostrLink, leaveOpen = true) {
+ const sub = useMemo(() => {
+ const b = new RequestBuilder(`goals:${link.author!.slice(0, 12)}`);
+ b.withOptions({ leaveOpen });
+ b.withFilter()
+ .kinds([GOAL])
+ .tag("a", [`${link.kind}:${link.author!}:${link.id}`]);
+ return b;
+ }, [link]);
+
+ const { data } = useRequestBuilder
(System, FlatNoteStore, sub);
+
+ return data?.at(0);
+}
+
+export function useGoalZaps(goal: NostrEvent) {
+ const a = findTag(goal, "a") ?? "";
+ const sub = useMemo(() => {
+ const b = new RequestBuilder(`goal-zaps:${goal.id.slice(0, 12)}`);
+ b.withFilter()
+ .kinds([EventKind.ZapReceipt])
+ .tag("e", [goal.id])
+ .tag("p", [goal.pubkey]); // todo: ability to tag one or more p in goals?
+ return b;
+ }, [goal]);
+
+ const { data } = useRequestBuilder(System, FlatNoteStore, sub);
+
+ return data ?? [];
+}
diff --git a/src/index.css b/src/index.css
index 990e4fe..080443f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -92,7 +92,7 @@ a {
gap: 8px;
}
-input[type="text"], textarea, input[type="datetime-local"], input[type="password"] {
+input[type="text"], textarea, input[type="datetime-local"], input[type="password"], input[type="number"] {
font-family: inherit;
border: unset;
background-color: unset;
diff --git a/src/pages/chat-popout.tsx b/src/pages/chat-popout.tsx
index 86f07d7..924bfa7 100644
--- a/src/pages/chat-popout.tsx
+++ b/src/pages/chat-popout.tsx
@@ -2,14 +2,17 @@ import "./chat-popout.css";
import { LiveChat } from "element/live-chat";
import { useParams } from "react-router-dom";
import { parseNostrLink } from "@snort/system";
+import useEventFeed from "../hooks/event-feed";
export function ChatPopout() {
const params = useParams();
const link = parseNostrLink(params.id!);
+ const { data: ev } = useEventFeed(link);
return (
- {viewers > 0 && {formatSats(viewers)} viewers}
- {status === StreamState.Live && }
+ {viewers > 0 && (
+
+ {formatSats(viewers)} viewers
+
+ )}
+ {status === StreamState.Live && (
+
+
+
+ )}
)}
{isMine && (
- {ev && (
-
- )}
+ {ev &&
}
)}
@@ -103,12 +108,13 @@ export function StreamPage() {
const params = useParams();
const link = parseNostrLink(params.id!);
const { data: ev } = useEventFeed(link, true);
+ const goal = useGoal(link);
return (
<>
-
-
+
+
);
}
diff --git a/yarn.lock b/yarn.lock
index a06209f..2fc6453 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1380,6 +1380,15 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-slot" "1.0.2"
+"@radix-ui/react-progress@^1.0.3":
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.3.tgz#8380272fdc64f15cbf263a294dea70a7d5d9b4fa"
+ integrity sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ "@radix-ui/react-context" "1.0.1"
+ "@radix-ui/react-primitive" "1.0.3"
+
"@radix-ui/react-roving-focus@1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"