Adding relay options

index.html

@@ -50,6 +50,24 @@
         <form>
           <div>
             <form>
+              <div class="space-between-small">
+                <div class="space-between">
+                  <b>From Relays</b>
+                </div>
+              </div>
+
+              <div class="space-between-small">
+                <p>
+                  <input
+                    type="text"
+                    id="relaySet"
+                    name="relaySet"
+                    placeholder="wss://nos.lol"
+                    style="width: 180px"
+                    value="" />
+                </p>
+              </div>
+
               <div class="space-between-small">
                 <p>
                   <input
@@ -103,6 +121,22 @@
             #pubkey::placeholder {
               color: #999;
             }
+
+            #relaySet {
+              width: 600px; /* change width value */
+              font-size: 16px;
+              padding: 5px;
+              border: 1px solid #ccc;
+              border-radius: 4px;
+              box-sizing: border-box;
+              max-width: 100%;
+              margin: 0 auto;
+              display: block;
+            }
+            
+            #relaySet::placeholder {
+              color: #999;
+            }
             </style>
         
             <p>

js/nostr-broadcast.js

@@ -18,6 +18,8 @@ const fetchAndBroadcast = async () => {
   }
   $('#checking-relays-header').text("Waiting for Relays: ")
   // parse pubkey ('npub' or hexa)
+  const relaySet = parseRelaySet($('#relaySet').val())
+  console.log(relaySet, $('#relaySet').val())
   const pubkey = parsePubkey($('#pubkey').val())
   if (!pubkey) return
   // disable button (will be re-enable at the end of the process)
@@ -35,7 +37,7 @@ const fetchAndBroadcast = async () => {
 
   // get all events from relays
   const filters =[{ authors: [pubkey] }, { "#p": [pubkey] }]
-  const data = (await getEvents(filters, pubkey)).sort((a, b) => b.created_at - a.created_at)
+  const data = (await getEvents(filters, pubkey, relaySet)).sort((a, b) => b.created_at - a.created_at)
 
   // inform user fetching is done
   $('#fetching-status').html(txt.fetching + checkMark)

js/nostr-utils.js

@@ -37,6 +37,15 @@ const hexa2npub = (hex) => {
 const parsePubkey = (pubkey) =>
   pubkey.match('npub1') ? npub2hexa(pubkey) : pubkey
 
+const parseRelaySet = (commaSeparatedRelayString) => {
+  let list = commaSeparatedRelayString.split(",")
+
+  if (list.length == 0) return undefined
+  if (list.length == 1 && list[0].trim() === "") return undefined
+  
+  return list
+}
+
 // download js file
 const downloadFile = (data, fileName) => {
   const prettyJs = 'const data = ' + JSON.stringify(data, null, 2)
@@ -242,12 +251,19 @@ const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
   })
 
 // query relays for events published by this pubkey
-const getEvents = async (filters, pubkey) => {
+const getEvents = async (filters, pubkey, relaySet) => {
   // events hash
   const events = {}
 
+  let myRelaySet = null
+  
+  if (relaySet.length > 0) 
+    myRelaySet = relaySet 
+  else 
+    myRelaySet = relays
+
   // batch processing of 10 relays
-  await processInPool(relays, (relay, poolStatus) => fetchFromRelay(relay, filters, pubkey, events, poolStatus), 10)
+  await processInPool(myRelaySet, (relay, poolStatus) => fetchFromRelay(relay, filters, pubkey, events, poolStatus), 10)
 
   displayRelayStatus({})
 

style.css

@@ -214,6 +214,28 @@ h2 {
 
 
 
+#relaySet {
+  width: 600px !important;
+}
+
+@media screen and (max-width: 1080px) {
+  #relaySet {
+    width: 450px !important;
+  }
+}
+@media screen and (max-width: 800px) {
+  #relaySet {
+    width: 350px !important;
+  }
+}
+@media screen and (max-width: 600px) {
+  #relaySet {
+    width: 250px !important;
+  }
+}
+
+
+
 
 
 main div p img {