webrtc works in dev, add some missing list keys

packages/app/src/Element/Event/Create/TrendingHashTagsLine.tsx

@@ -25,7 +25,7 @@ export function TrendingHashTagsLine(props: { onClick: (tag: string) => void })
       </small>
       <div className="flex g4 flex-wrap">
         {hashtags.slice(0, 5).map(a => (
-          <span className="px-2 py-1 bg-dark rounded-full pointer nowrap" onClick={() => props.onClick(a.hashtag)}>
+          <span key={a.hashtag} className="px-2 py-1 bg-dark rounded-full pointer nowrap" onClick={() => props.onClick(a.hashtag)}>
             #{a.hashtag}
           </span>
         ))}

packages/app/src/Element/Event/Create/util.ts

@@ -10,6 +10,7 @@ export async function sendEventToRelays(
 ) {
   getWebRtcPool()?.send(ev);
   if (customRelays) {
+    system.HandleEvent({...ev, relays: []});
     return removeUndefined(
       await Promise.all(
         customRelays.map(async r => {

packages/app/src/Element/Feed/TimelineRenderer.tsx

@@ -91,8 +91,8 @@ export function TimelineRenderer(props: TimelineRendererProps) {
   }, [inView, props.latest]);
 
   const renderNotes = () => {
-    return props.frags.map(frag => (
+    return props.frags.map((frag, index) => (
-      <ErrorBoundary>
+      <ErrorBoundary key={frag.events[0]?.id + index}>
         <TimelineFragment
           frag={frag}
           related={props.related}

packages/app/src/Element/Text.tsx

@@ -120,12 +120,12 @@ export default function Text({
 
     return (
       <>
-        {fragments.map(f => {
+        {fragments.map((f, index) => {
           if (typeof f === "string") {
             return f;
           }
 
-          return <HighlightedText content={f.content} />;
+          return <HighlightedText key={index} content={f.content} />;
         })}
       </>
     );

packages/app/src/Element/Trending/TrendingPosts.tsx

@@ -62,7 +62,7 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
     return (
       <div className="grid grid-cols-3 gap-px md:gap-1">
         {filteredAndLimitedPosts().map(e => (
-          <ImageGridItem event={e as TaggedNostrEvent} onClick={() => setModalThread(NostrLink.fromEvent(e))} />
+          <ImageGridItem key={e.id} event={e as TaggedNostrEvent} onClick={() => setModalThread(NostrLink.fromEvent(e))} />
         ))}
       </div>
     );
@@ -71,9 +71,9 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
   const renderList = () => {
     return filteredAndLimitedPosts().map(e =>
       small ? (
-        <ShortNote event={e as TaggedNostrEvent} />
+        <ShortNote key={e.id} event={e as TaggedNostrEvent} />
       ) : (
-        <Note data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
+        <Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
       ),
     );
   };

packages/app/src/Pages/Layout/Footer.tsx

@@ -49,8 +49,8 @@ const Footer = () => {
   return (
     <footer className="md:hidden fixed bottom-0 z-10 w-full bg-base-200 pb-safe-area bg-bg-color">
       <div className="flex">
-        {MENU_ITEMS.map(item => (
+        {MENU_ITEMS.map((item, index) => (
-          <FooterNavItem item={item} readonly={readonly} />
+          <FooterNavItem key={index} item={item} readonly={readonly} />
         ))}
         {publicKey && (
           <ProfileLink

packages/app/src/Tasks/TaskList.tsx

@@ -1,5 +1,5 @@
 import "./TaskList.css";
-import { useSyncExternalStore } from "react";
+import {Fragment, useSyncExternalStore} from "react";
 import { useUserProfile } from "@snort/system-react";
 
 import useLogin from "@/Hooks/useLogin";
@@ -54,7 +54,11 @@ export const TaskList = () => {
         .filter(a => (user ? a.check(user, session) : false))
         .map(a => {
           if (a.noBaseStyle) {
-            return a.render();
+            return (
+              <Fragment key={a.id}>
+                {a.render()}
+              </Fragment>
+            );
           } else {
             return (
               <div key={a.id} className="card">

packages/system/src/nostr-system.ts

@@ -192,7 +192,7 @@ export class NostrSystem extends EventEmitter<NostrSystemEvents> implements Syst
   }
 
   #onEvent(sub: string, ev: TaggedNostrEvent) {
-    this.#relayMetrics.onEvent(ev.relays[0]);
+    ev.relays?.length && this.#relayMetrics.onEvent(ev.relays[0]);
 
     if (!EventExt.isValid(ev)) {
       this.#log("Rejecting invalid event %O", ev);