feat: add predefined relay list

plus code format

templates/nostrclient/index.html

@@ -6,18 +6,18 @@
       <q-form @submit="addRelay">
         <div class="row q-pa-md">
           <div class="col-9">
-            <q-input
+            <q-input outlined v-model="relayToAdd" dense filled label="Relay URL"></q-input>
-              outlined
-              v-model="relayToAdd"
-              dense
-              filled
-              label="Relay URL"
-            ></q-input>
           </div>
           <div class="col-3">
-            <q-btn unelevated color="primary" class="float-right" type="submit"
+
-              >Add relay
+            <q-btn-dropdown unelevated split color="primary" class="float-right" type="submit" label="Add Relay">
-            </q-btn>
+              <q-item v-for="relay in predefinedRelays" :key="relay" @click="addCustomRelay(relay)" clickable
+                v-close-popup>
+                <q-item-section>
+                  <q-item-label><span v-text="relay"></span></q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-btn-dropdown>
           </div>
         </div>
       </q-form>
@@ -29,36 +29,18 @@
             <h5 class="text-subtitle1 q-my-none">Nostrclient</h5>
           </div>
           <div class="col-auto">
-            <q-input
+            <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
-              borderless
-              dense
-              debounce="300"
-              v-model="filter"
-              placeholder="Search"
-            >
               <template v-slot:append>
                 <q-icon name="search"></q-icon>
               </template>
             </q-input>
           </div>
         </div>
-        <q-table
+        <q-table flat dense :data="nostrrelayLinks" row-key="id" :columns="relayTable.columns"
-          flat
+          :pagination.sync="relayTable.pagination" :filter="filter">
-          dense
-          :data="nostrrelayLinks"
-          row-key="id"
-          :columns="relayTable.columns"
-          :pagination.sync="relayTable.pagination"
-          :filter="filter"
-        >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th
+              <q-th v-for="col in props.cols" :key="col.name" :props="props" auto-width>
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                auto-width
-              >
                 <div v-if="col.name == 'id'"></div>
                 <div v-else>{{ col.label }}</div>
               </q-th>
@@ -67,12 +49,7 @@
 
           <template v-slot:body="props">
             <q-tr :props="props">
-              <q-td
+              <q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                auto-width
-              >
                 <div v-if="col.name == 'id'"></div>
                 <div v-else>
                   <div v-if="col.value == true" style="background-color: green">
@@ -82,14 +59,7 @@
                 </div>
               </q-td>
               <q-td auto-width>
-                <q-btn
+                <q-btn flat dense size="xs" @click="deleteRelay(props.row.url)" icon="cancel" color="pink"></q-btn>
-                  flat
-                  dense
-                  size="xs"
-                  @click="deleteRelay(props.row.url)"
-                  icon="cancel"
-                  color="pink"
-                ></q-btn>
               </q-td>
             </q-tr>
           </template>
@@ -101,32 +71,15 @@
         <div class="row">
           <div class="col">
             <div class="text-weight-bold">
-              <q-btn
+              <q-btn flat dense size="0.6rem" class="q-px-none q-mx-none" color="grey" icon="content_copy"
-                flat
+                @click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"><q-tooltip>Copy address</q-tooltip></q-btn>
-                dense
-                size="0.6rem"
-                class="q-px-none q-mx-none"
-                color="grey"
-                icon="content_copy"
-                @click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"
-                ><q-tooltip>Copy address</q-tooltip></q-btn
-              >
               Your endpoint:
-              <q-badge
+              <q-badge outline class="q-ml-sm text-subtitle2" :label="`wss://${host}/nostrclient/api/v1/relay`" />
-                outline
-                class="q-ml-sm text-subtitle2"
-                :label="`wss://${host}/nostrclient/api/v1/relay`"
-              />
             </div>
           </div>
         </div>
       </q-card-section>
-      <q-expansion-item
+      <q-expansion-item group="advanced" icon="settings" label="Test this endpoint" @click="toggleTestPanel">
-        group="advanced"
-        icon="settings"
-        label="Test this endpoint"
-        @click="toggleTestPanel"
-      >
         <q-separator></q-separator>
         <q-card-section>
           <div class="row">
@@ -134,13 +87,8 @@
               <span>Sender Private Key:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.senderPrivateKey" dense filled
-                outlined
+                label="Private Key (optional)"></q-input>
-                v-model="testData.senderPrivateKey"
-                dense
-                filled
-                label="Private Key (optional)"
-              ></q-input>
             </div>
           </div>
           <div class="row q-mt-sm q-mb-lg">
@@ -149,8 +97,7 @@
               <q-badge color="yellow" text-color="black">
                 <span>
                   No not use your real private key! Leave empty for a randomly
-                  generated key.</span
+                  generated key.</span>
-                >
               </q-badge>
             </div>
           </div>
@@ -159,13 +106,7 @@
               <span>Sender Public Key:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.senderPublicKey" dense readonly filled></q-input>
-                outlined
-                v-model="testData.senderPublicKey"
-                dense
-                readonly
-                filled
-              ></q-input>
             </div>
           </div>
           <div class="row q-mt-md">
@@ -173,15 +114,8 @@
               <span>Test Message:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.message" dense filled rows="3" type="textarea"
-                outlined
+                label="Test Message *"></q-input>
-                v-model="testData.message"
-                dense
-                filled
-                rows="3"
-                type="textarea"
-                label="Test Message *"
-              ></q-input>
             </div>
           </div>
           <div class="row q-mt-md">
@@ -189,35 +123,22 @@
               <span>Receiver Public Key:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.recieverPublicKey" dense filled
-                outlined
+                label="Public Key (hex or npub) *"></q-input>
-                v-model="testData.recieverPublicKey"
-                dense
-                filled
-                label="Public Key (hex or npub) *"
-              ></q-input>
             </div>
           </div>
           <div class="row q-mt-sm q-mb-lg">
             <div class="col-3"></div>
             <div class="col-9">
               <q-badge color="yellow" text-color="black">
-                <span
+                <span>This is the recipient of the message. Field required.</span>
-                  >This is the recipient of the message. Field required.</span
-                >
               </q-badge>
             </div>
           </div>
           <div class="row">
             <div class="col-12">
-              <q-btn
+              <q-btn :disabled="!testData.recieverPublicKey || !testData.message" @click="sendTestMessage" unelevated
-                :disabled="!testData.recieverPublicKey || !testData.message"
+                color="primary" class="float-right">Send Message</q-btn>
-                @click="sendTestMessage"
-                unelevated
-                color="primary"
-                class="float-right"
-                >Send Message</q-btn
-              >
             </div>
           </div>
         </q-card-section>
@@ -229,14 +150,7 @@
               <span>Sent Data:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.sentData" dense filled rows="5" type="textarea"></q-input>
-                outlined
-                v-model="testData.sentData"
-                dense
-                filled
-                rows="5"
-                type="textarea"
-              ></q-input>
             </div>
           </div>
           <div class="row q-mt-md">
@@ -244,14 +158,7 @@
               <span>Received Data:</span>
             </div>
             <div class="col-9">
-              <q-input
+              <q-input outlined v-model="testData.receivedData" dense filled rows="5" type="textarea"></q-input>
-                outlined
-                v-model="testData.receivedData"
-                dense
-                filled
-                rows="5"
-                type="textarea"
-              ></q-input>
             </div>
           </div>
         </q-card-section>
@@ -270,12 +177,8 @@
         </p>
 
         <p>
-          <q-badge
+          <q-badge outline class="q-ml-sm text-subtitle2" color="primary"
-            outline
+            :label="`wss://${host}/nostrclient/api/v1/relay`" />
-            class="q-ml-sm text-subtitle2"
-            color="primary"
-            :label="`wss://${host}/nostrclient/api/v1/relay`"
-          />
         </p>
         Only Admin users can manage this extension.
         <q-card-section></q-card-section>
@@ -356,7 +259,15 @@
           pagination: {
             rowsPerPage: 10
           }
-        }
+        },
+        predefinedRelays: [
+          "wss://relay.damus.io",
+          "wss://nostr-pub.wellorder.net",
+          "wss://nostr.zebedee.cloud",
+          "wss://nodestr.fmt.wiz.biz",
+          "wss://nostr.oxtr.dev",
+          "wss://nostr.wine"
+        ],
       }
     },
     methods: {
@@ -399,7 +310,7 @@
             'POST',
             '/nostrclient/api/v1/relay?usr=' + this.g.user.id,
             this.g.user.wallets[0].adminkey,
-            {url: this.relayToAdd}
+            { url: this.relayToAdd }
           )
           .then(function (response) {
             console.log('response:', response)
@@ -414,6 +325,10 @@
           })
         return false
       },
+      async addCustomRelay(relayUrl) {
+        this.relayToAdd = relayUrl
+        await this.addRelay()
+      },
       deleteRelay(url) {
         console.log('DELETE RELAY ' + url)
         LNbits.api
@@ -421,7 +336,7 @@
             'DELETE',
             '/nostrclient/api/v1/relay?usr=' + this.g.user.id,
             this.g.user.wallets[0].adminkey,
-            {url: url}
+            { url: url }
           )
           .then(function (response) {
             if (response.data) {
@@ -469,7 +384,7 @@
       },
       sendTestMessage: async function () {
         try {
-          const {data} = await LNbits.api.request(
+          const { data } = await LNbits.api.request(
             'PUT',
             '/nostrclient/api/v1/relay/test?usr=' + this.g.user.id,
             this.g.user.wallets[0].adminkey,
@@ -490,7 +405,7 @@
           const subscription = JSON.stringify([
             'REQ',
             'test-dms',
-            {kinds: [4], '#p': [event.pubkey]}
+            { kinds: [4], '#p': [event.pubkey] }
           ])
           this.testData.wsConnection.send(subscription)
         } catch (error) {
@@ -555,4 +470,4 @@
     }
   })
 </script>
-{% endblock %}
+{% endblock %}