Merge pull request 'feat: allow to configure a stream goal' (#90) from stream-goal into main

Reviewed-on: Kieran/stream#90
Reviewed-by: Kieran <kieran@noreply.localhost>

src/element/live-chat.tsx

@@ -12,7 +12,6 @@ import { Profile } from "element/profile";
 import { ChatMessage } from "element/chat-message";
 import { Goal } from "element/goal";
 import { Badge } from "element/badge";
-import { NewGoalDialog } from "element/new-goal";
 import { WriteMessage } from "element/write-message";
 import useEmoji, { packId } from "hooks/emoji";
 import { useLiveChatFeed } from "hooks/live-chat";
@@ -117,7 +116,6 @@ export function LiveChat({
             <TopZappers zaps={zaps} />
           </div>
           {goal && <Goal ev={goal} />}
-          {login?.pubkey === host && <NewGoalDialog link={link} />}
         </div>
       )}
       <div className="messages">

src/element/new-goal.tsx

@@ -2,19 +2,15 @@ import "./new-goal.css";
 import * as Dialog from "@radix-ui/react-dialog";
 
 import AsyncButton from "./async-button";
-import { NostrLink } from "@snort/system";
 import { Icon } from "element/icon";
 import { useState } from "react";
 import { System } from "index";
 import { GOAL } from "const";
 import { useLogin } from "hooks/login";
 import { FormattedMessage } from "react-intl";
+import { defaultRelays } from "const";
 
-interface NewGoalDialogProps {
+export function NewGoalDialog() {
-  link: NostrLink;
-}
-
-export function NewGoalDialog({ link }: NewGoalDialogProps) {
   const [open, setOpen] = useState(false);
   const login = useLogin();
 
@@ -26,12 +22,9 @@ export function NewGoalDialog({ link }: NewGoalDialogProps) {
     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)])
+          .tag(["relays", ...Object.keys(defaultRelays)])
           .content(goalName);
-        if (link.relays?.length) {
-          eb.tag(["relays", ...link.relays]);
-        }
         return eb;
       });
       console.debug(evNew);

src/element/stream-editor.tsx

@@ -3,12 +3,14 @@ import { useEffect, useState, useCallback } from "react";
 import { NostrEvent } from "@snort/system";
 import { unixNow } from "@snort/shared";
 import { TagsInput } from "react-tag-input-component";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AsyncButton from "./async-button";
 import { StreamState } from "../index";
 import { findTag } from "../utils";
 import { useLogin } from "hooks/login";
-import { FormattedMessage, useIntl } from "react-intl";
+import { NewGoalDialog } from "element/new-goal";
+import { useGoals } from "hooks/goals";
 
 export interface StreamEditorProps {
   ev?: NostrEvent;
@@ -24,6 +26,27 @@ export interface StreamEditorProps {
   };
 }
 
+interface GoalSelectorProps {
+  goal?: string;
+  pubkey: string;
+  onGoalSelect: (g: string) => void;
+}
+
+function GoalSelector({ goal, pubkey, onGoalSelect }: GoalSelectorProps) {
+  const goals = useGoals(pubkey, true);
+  const { formatMessage } = useIntl();
+  return (
+    <select defaultValue={goal} onChange={ev => onGoalSelect(ev.target.value)}>
+      <option value="">{formatMessage({ defaultMessage: "Select a goal..." })}</option>
+      {goals?.map(goal => (
+        <option key={goal.id} value={goal.id}>
+          {goal.content}
+        </option>
+      ))}
+    </select>
+  );
+}
+
 export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
   const [title, setTitle] = useState("");
   const [summary, setSummary] = useState("");
@@ -34,6 +57,7 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
   const [tags, setTags] = useState<string[]>([]);
   const [contentWarning, setContentWarning] = useState(false);
   const [isValid, setIsValid] = useState(false);
+  const [goal, setGoal] = useState<string | undefined>();
   const login = useLogin();
   const { formatMessage } = useIntl();
 
@@ -46,6 +70,7 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
     setStart(findTag(ev, "starts"));
     setTags(ev?.tags.filter(a => a[0] === "t").map(a => a[1]) ?? []);
     setContentWarning(findTag(ev, "content-warning") !== undefined);
+    setGoal(findTag(ev, "goal"));
   }, [ev?.id]);
 
   const validate = useCallback(() => {
@@ -90,6 +115,9 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
         if (contentWarning) {
           eb.tag(["content-warning", "nsfw"]);
         }
+        if (goal && goal.length > 0) {
+          eb.tag(["goal", goal]);
+        }
         return eb;
       });
       console.debug(evNew);
@@ -201,6 +229,19 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
           </div>
         </div>
       )}
+      {login?.pubkey && (
+        <>
+          <div>
+            <p>
+              <FormattedMessage defaultMessage="Goal" />
+            </p>
+            <div className="paper">
+              <GoalSelector goal={goal} pubkey={login?.pubkey} onGoalSelect={setGoal} />
+            </div>
+          </div>
+          <NewGoalDialog />
+        </>
+      )}
       {(options?.canSetContentWarning ?? true) && (
         <div className="flex g12 content-warning">
           <div>

src/hooks/goals.ts

@@ -1,22 +1,31 @@
 import { useMemo } from "react";
-import { RequestBuilder, ReplaceableNoteStore, NostrLink } from "@snort/system";
+import { RequestBuilder, FlatNoteStore, ReplaceableNoteStore } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
-import { unwrap } from "@snort/shared";
 import { GOAL } from "const";
 
-export function useZapGoal(host: string, link?: NostrLink, leaveOpen = false) {
+export function useZapGoal(id?: string) {
   const sub = useMemo(() => {
-    if (!link) return null;
+    if (!id) return null;
-    const b = new RequestBuilder(`goals:${host.slice(0, 12)}`);
+    const b = new RequestBuilder(`goal:${id.slice(0, 12)}`);
-    b.withOptions({ leaveOpen });
+    b.withFilter().kinds([GOAL]).ids([id]);
-    b.withFilter()
-      .kinds([GOAL])
-      .authors([host])
-      .tag("a", [`${link.kind}:${unwrap(link.author)}:${link.id}`]);
     return b;
-  }, [link, leaveOpen]);
+  }, [id]);
 
   const { data } = useRequestBuilder(ReplaceableNoteStore, sub);
 
   return data;
 }
+
+export function useGoals(pubkey?: string, leaveOpen = false) {
+  const sub = useMemo(() => {
+    if (!pubkey) return null;
+    const b = new RequestBuilder(`goals:${pubkey.slice(0, 12)}`);
+    b.withOptions({ leaveOpen });
+    b.withFilter().kinds([GOAL]).authors([pubkey]);
+    return b;
+  }, [pubkey, leaveOpen]);
+
+  const { data } = useRequestBuilder(FlatNoteStore, sub);
+
+  return data;
+}

src/index.css

@@ -190,6 +190,16 @@ input[type="number"] {
   font-weight: 500;
 }
 
+select {
+  font-family: inherit;
+  border: unset;
+  background-color: unset;
+  color: inherit;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 500;
+}
+
 input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;

src/lang.json

@@ -23,6 +23,9 @@
   "0GfNiL": {
     "defaultMessage": "Stream Zap Goals"
   },
+  "0VV/sK": {
+    "defaultMessage": "Goal"
+  },
   "1EYCdR": {
     "defaultMessage": "Tags"
   },
@@ -128,6 +131,9 @@
   "HAlOn1": {
     "defaultMessage": "Name"
   },
+  "I/TubD": {
+    "defaultMessage": "Select a goal..."
+  },
   "I1kjHI": {
     "defaultMessage": "Supports {markdown}"
   },

src/pages/stream-page.tsx

@@ -114,7 +114,7 @@ export function StreamPage({ link, evPreload }: { evPreload?: NostrEvent; link:
   const ev = useCurrentStreamFeed(link, true, evPreload);
   const host = getHost(ev);
   const evLink = ev ? eventToLink(ev) : undefined;
-  const goal = useZapGoal(host, evLink, true);
+  const goal = useZapGoal(findTag(ev, "goal"));
 
   const title = findTag(ev, "title");
   const summary = findTag(ev, "summary");

src/providers/zsz.ts

@@ -59,12 +59,14 @@ export class Nip103StreamProvider implements StreamProvider {
     const image = findTag(ev, "image");
     const tags = ev?.tags.filter(a => a[0] === "t").map(a => a[1]);
     const contentWarning = findTag(ev, "content-warning");
+    const goal = findTag(ev, "goal");
     await this.#getJson("PATCH", "event", {
       title,
       summary,
       image,
       tags,
       content_warning: contentWarning,
+      goal,
     });
   }
 

src/translations/af_ZA.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/ar_SA.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/ca_ES.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/cs_CZ.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/da_DK.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/de_DE.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/el_GR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/en.json

@@ -7,6 +7,7 @@
   "/GCoTA": "Clear",
   "04lmFi": "Save Key",
   "0GfNiL": "Stream Zap Goals",
+  "0VV/sK": "Goal",
   "1EYCdR": "Tags",
   "1qsXCO": "eg. name@wallet.com",
   "2/2yg+": "Add",
@@ -42,6 +43,7 @@
   "H/bNs9": "Save this and keep it safe! If you lose this key, you won't be able to access your account ever again. Yep, it's that serious!",
   "H5+NAX": "Balance",
   "HAlOn1": "Name",
+  "I/TubD": "Select a goal...",
   "I1kjHI": "Supports {markdown}",
   "IJDKz3": "Zap amount in {currency}",
   "INlWvJ": "OR",
@@ -126,4 +128,4 @@
   "x82IOl": "Mute",
   "yzKwBQ": "eg. nsec1xyz",
   "zVDHAu": "Zap Alert"
-}
+}

src/translations/es_ES.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Alerta de Zap"
   }
 }
-

src/translations/fa_IR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "هشدار زپ"
   }
 }
-

src/translations/fi_FI.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/fr_FR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/he_IL.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/hu_HU.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/it_IT.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/ja_JP.json

@@ -381,4 +381,3 @@
     "defaultMessage": "ザップアラート"
   }
 }
-

src/translations/ko_KR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/nl_NL.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/no_NO.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/pl_PL.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/pt_BR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/pt_PT.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/ro_RO.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/ru_RU.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/sr_SP.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/sv_SE.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/sw_KE.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Tahadhari ya Zap"
   }
 }
-

src/translations/th_TH.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/tr_TR.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/uk_UA.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/vi_VN.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/zh_CN.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-

src/translations/zh_TW.json

@@ -381,4 +381,3 @@
     "defaultMessage": "Zap Alert"
   }
 }
-