Adding last seen relays on note

src/js/components/events/buttons/ReactionButtons.tsx

@@ -10,6 +10,7 @@ import ReactionsList from '../ReactionsList';
 import Like from './Like';
 import Repost from './Repost';
 import Zap from './Zap';
+import Relay from '../note/Relay';
 
 const ReactionButtons = (props) => {
   const [state, setState] = useState({
@@ -40,17 +41,20 @@ const ReactionButtons = (props) => {
   return (
     <>
       {props.standalone && <ReactionsList event={props.event} />}
-      <div className="flex gap-4">
-        <a
-          className="btn-ghost btn-sm hover:bg-transparent hover:text-iris-blue btn content-center gap-2 rounded-none text-neutral-500"
-          onClick={() => replyBtnClicked()}
-        >
-          <ChatBubbleOvalLeftIcon width={18} />
-          <span>{state.replyCount || ''}</span>
-        </a>
-        <Repost event={props.event} />
-        <Like event={props.event} />
-        <Zap event={props.event} />
+      <div class="flex justify-between">
+        <div className="flex gap-4">
+          <a
+            className="btn-ghost btn-sm hover:bg-transparent hover:text-iris-blue btn content-center gap-2 rounded-none text-neutral-500"
+            onClick={() => replyBtnClicked()}
+          >
+            <ChatBubbleOvalLeftIcon width={18} />
+            <span>{state.replyCount || ''}</span>
+          </a>
+          <Repost event={props.event} />
+          <Like event={props.event} />
+          <Zap event={props.event} />
+        </div>
+        <Relay event={event} />
       </div>
     </>
   );

src/js/components/events/note/Relay.tsx

@@ -0,0 +1,37 @@
+import { Event } from 'nostr-tools';
+import { useEffect, useState } from 'react';
+import Events from '@/nostr/Events';
+import { EventMetadata } from '@/nostr/EventsMeta';
+import { getOriginalPostEventId } from '@/nostr/utils.ts';
+import { hsl, stringToHue } from '@/utils/Helpers';
+const NoteRelaysList = ({ event }: { event: Event }) => {
+
+    const [eventMeta, setEventMeta] = useState(null as null | EventMetadata);
+
+    useEffect(() => {
+        if (!event?.id) {
+        return;
+        }
+        const id = getOriginalPostEventId(event);
+        const val = id && Events.eventsMetaDb.get(id);
+        if (val) {
+        setEventMeta(val);
+        }
+    }, [event]);
+
+    const relays = Array.from(eventMeta?.relays || []) as string[];
+    //console.log(relays);
+    return (
+        <div className="flex" style="align-items: center">
+        {relays.length > 0 ? (
+            relays.map((r) => (
+                <div
+                    class="h-3 w-3 rounded-full border border-solid border-gray-6 tooltip"
+                    style={`background: ${hsl(stringToHue(r))}`} data-tip={r} />
+              ))
+        ) : (<span></span>)}
+        </div>
+    );
+};
+
+export default NoteRelaysList;

src/js/utils/Helpers.tsx

@@ -14,6 +14,19 @@ const noteRegex =
 
 const hashtagRegex = /(#[^\s!@#$%^&*()=+./,[{\]};:'"?><]+)/g;
 
+export const hsl = (hue: number, {saturation = 100, lightness = 50, opacity = 1} = {}) =>
+  `hsl(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+
+// https://stackoverflow.com/a/21682946
+export const stringToHue = (value: string) => {
+  let hash = 0
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash)
+    hash = hash & hash
+  }
+
+  return hash % 360
+}  
 let existingIrisToAddress: any = {};
 localState.get('existingIrisToAddress').on((a) => (existingIrisToAddress = a));