feat: add link to settings

src/element/new-stream.tsx

@@ -13,7 +13,7 @@ import { StreamEditor, StreamEditorProps } from "./stream-editor";
 import { eventLink, findTag } from "@/utils";
 import { NostrProviderDialog } from "./nostr-provider-dialog";
 
-function NewStream({ ev, onFinish }: StreamEditorProps) {
+function NewStream({ ev, onFinish }: Omit<StreamEditorProps, "onFinish"> & { onFinish: () => void }) {
   const system = useContext(SnortContext);
   const providers = useStreamProvider();
   const [currentProvider, setCurrentProvider] = useState<StreamProvider>();
@@ -43,10 +43,10 @@ function NewStream({ ev, onFinish }: StreamEditorProps) {
                   navigate(`/${eventLink(ex)}`, {
                     state: ex,
                   });
-                  onFinish?.(ex);
+                  onFinish?.();
                 }
               } else {
-                onFinish?.(ev);
+                onFinish?.();
               }
             }}
             ev={ev}
@@ -54,7 +54,15 @@ function NewStream({ ev, onFinish }: StreamEditorProps) {
         );
       }
       case StreamProviders.NostrType: {
-        return <NostrProviderDialog provider={currentProvider} onFinish={onFinish} ev={ev} showEndpoints={false} />;
+        return <>
+          <button className="btn btn-secondary" onClick={() => {
+            navigate("/settings");
+            onFinish?.();
+          }}>
+            <FormattedMessage defaultMessage="Get stream key" id="KdYELp" />
+          </button>
+          <NostrProviderDialog provider={currentProvider} onFinish={onFinish} ev={ev} showEndpoints={false} showEditor={true} />
+        </>;
       }
       case StreamProviders.Owncast: {
         return;

src/element/nostr-provider-dialog.tsx

@@ -12,8 +12,9 @@ import AsyncButton from "./async-button";
 export function NostrProviderDialog({
   provider,
   showEndpoints,
+  showEditor,
   ...others
-}: { provider: StreamProvider; showEndpoints: boolean } & StreamEditorProps) {
+}: { provider: StreamProvider; showEndpoints: boolean, showEditor: boolean } & StreamEditorProps) {
   const system = useContext(SnortContext);
   const [topup, setTopup] = useState(false);
   const [info, setInfo] = useState<StreamProviderInfo>();
@@ -198,7 +199,7 @@ export function NostrProviderDialog({
       {showEndpoints && streamEndpoints()}
       {info.tosAccepted === false ? (
         tosInput()
-      ) : (
+      ) : showEditor ? (
         <StreamEditor
           onFinish={ex => {
             provider.updateStreamInfo(system, ex);
@@ -221,7 +222,7 @@ export function NostrProviderDialog({
             canSetStatus: false,
           }}
         />
-      )}
+      ) : null}
     </>
   );
 }

src/element/send-zap.tsx

@@ -194,7 +194,7 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
 
   return (
     <div className="send-zap">
-      <h3>
+      <h3 className="flex gap-2 items-center">
         <FormattedMessage defaultMessage="Zap {name}" id="oHPB8Q" values={{ name }} />
         <Icon name="zap" />
       </h3>

src/pages/settings-page.tsx

@@ -11,8 +11,7 @@ import { useStreamProvider } from "@/hooks/stream-provider";
 
 const enum Tab {
   Account,
-  Notifications,
-  Stream,
+  Notifications
 }
 
 export function SettingsPage() {
@@ -55,16 +54,10 @@ export function SettingsPage() {
               <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
             </h1>
             <AlbyZapsButton />
-          </>
-        );
-      }
-      case Tab.Stream: {
-        return (
-          <>
             <h1>
               <FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
             </h1>
-            <NostrProviderDialog provider={unwrap(providers.find(a => a.name === "zap.stream"))} showEndpoints={true} />
+            <NostrProviderDialog provider={unwrap(providers.find(a => a.name === "zap.stream"))} showEndpoints={true} showEditor={false} />
           </>
         );
       }
@@ -75,8 +68,6 @@ export function SettingsPage() {
     switch (t) {
       case Tab.Account:
         return <FormattedMessage defaultMessage="Account" id="TwyMau" />;
-      case Tab.Stream:
-        return <FormattedMessage defaultMessage="Stream" id="uYw2LD" />;
     }
   }
 
@@ -88,7 +79,7 @@ export function SettingsPage() {
         </h1>
         <div className="flex flex-col gap-2">
           <div className="flex gap-2">
-            {[Tab.Account, Tab.Stream].map(t => (
+            {[Tab.Account].map(t => (
               <button onClick={() => setTab(t)} className="rounded-xl px-3 py-2 bg-gray-2 hover:bg-gray-1">
                 {tabName(t)}
               </button>