feat: add remove relays

static/components/market-config/market-config.html

@@ -11,7 +11,7 @@
         <q-tab-panels v-model="tab">
           <q-tab-panel name="merchants">
             <div>
-              <q-input outlined v-model="inputPubkey" @keydown.enter="addMerchant" type="text" label="Pubkey/Npub"
+              <q-input outlined v-model="merchantPubkey" @keydown.enter="addMerchant" type="text" label="Pubkey/Npub"
                 hint="Add merchants">
                 <q-btn @click="addMerchant" dense flat icon="add"></q-btn>
               </q-input>
@@ -43,24 +43,53 @@
           </q-tab-panel>
           <q-tab-panel name="relays">
             <div>
-              Relays
+              <div>
+                <q-input outlined v-model="relayUrl" @keydown.enter="addRelay" type="text" label="wss://"
+                  hint="Add realays">
+                  <q-btn @click="addRelay" dense flat icon="add"></q-btn>
+                </q-input>
+                <q-list class="q-mt-md">
+                  <q-item v-for="relay in relays" :key="relay">
+
+                    <q-item-section avatar>
+                      <!-- <q-avatar>
+                        <img v-if="profile?.picture" :src="profile.picture" />
+                        <img v-else src="/nostrmarket/static/images/blank-avatar.webp" />
+                      </q-avatar> -->
+                    </q-item-section>
+                    <q-item-section class="q-mt-sm">
+                      <q-item-label><strong>{{ relay}}</strong></q-item-label>
+                      <!-- <q-item-label>
+                        <div class="text-caption text-grey ellipsis-2-lines">
+                          <p>{{ publicKey }}</p>
+                        </div>
+                      </q-item-label> -->
+                      <!-- <q-tooltip>{{ publicKey }}</q-tooltip> -->
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-btn size="12px" flat dense round icon="delete" @click="removeRelay(relay)" />
+                    </q-item-section>
+
+                  </q-item>
+                </q-list>
+              </div>
             </div>
           </q-tab-panel>
           <q-tab-panel name="marketplace">
             <div class="q-mb-md"> <strong>Information</strong></div>
-            <q-input outlined v-model="inputPubkey" type="text" label="Marketplace Name" class="q-mb-md">
+            <q-input outlined v-model="info.name" type="text" label="Marketplace Name" class="q-mb-md">
             </q-input>
 
-            <q-input outlined v-model="inputPubkey" type="textarea" rows="3" label="Marketplace Description"
+            <q-input outlined v-model="info.description" type="textarea" rows="3" label="Marketplace Description"
               class="q-mb-lg"></q-input>
             <div class="q-mb-md q-mt-lg">
               <strong>UI Configurations</strong>
             </div>
-            <q-input outlined v-model="inputPubkey" type="text" label="Theme" class="q-mb-md">
+            <q-input outlined v-model="info.theme" type="text" label="Theme" class="q-mb-md">
             </q-input>
-            <q-input outlined v-model="inputPubkey" type="text" label="Logo" class="q-mb-md">
+            <q-input outlined v-model="info.logo" type="text" label="Logo" class="q-mb-md">
             </q-input>
-            <q-input outlined v-model="inputPubkey" type="text" label="Banner" class="q-mb-md">
+            <q-input outlined v-model="info.banner" type="text" label="Banner" class="q-mb-md">
             </q-input>
 
 

static/components/market-config/market-config.js

@@ -2,7 +2,7 @@ async function marketConfig(path) {
     const template = await loadTemplateAsync(path)
     Vue.component('market-config', {
         name: 'market-config',
-        props: ['merchants',],
+        props: ['merchants', 'relays'],
         template,
 
         data: function () {
@@ -10,25 +10,63 @@ async function marketConfig(path) {
                 tab: 'merchants',
                 pubkeys: new Set(),
                 profiles: new Map(),
-                inputPubkey: null,
+                merchantPubkey: null,
+                relayUrl: null,
+                info: {
+                    name: null,
+                    description: null,
+                    theme: null,
+                    logo: null,
+                    banner: null
+                }
             }
         },
         methods: {
             addMerchant: async function () {
-                if (!isValidKey(this.inputPubkey, 'npub')) {
+                if (!isValidKey(this.merchantPubkey, 'npub')) {
                     this.$q.notify({
                         message: 'Invalid Public Key!',
                         type: 'warning'
                     })
                     return
                 }
-                const publicKey = isValidKeyHex(this.inputPubkey) ? this.inputPubkey : NostrTools.nip19.decode(this.inputPubkey).data
+                const publicKey = isValidKeyHex(this.merchantPubkey) ? this.merchantPubkey : NostrTools.nip19.decode(this.merchantPubkey).data
                 this.$emit('add-merchant', publicKey)
-                this.inputPubkey = null
+                this.merchantPubkey = null
             },
             removeMerchant: async function (publicKey) {
                 this.$emit('remove-merchant', publicKey)
             },
+            addRelay: async function () {
+                const relayUrl = (this.relayUrl || '').trim()
+                if (!relayUrl.startsWith('wss://') && !relayUrl.startsWith('ws://')) {
+                    this.relayUrl = null
+                    this.$q.notify({
+                        timeout: 5000,
+                        type: 'warning',
+                        message: `Invalid relay URL.`,
+                        caption: "Should start with 'wss://'' or 'ws://'"
+                    })
+                    return
+                }
+                try {
+                    new URL(relayUrl);
+                    this.$emit('add-relay', relayUrl)
+                } catch (error) {
+                    this.$q.notify({
+                        timeout: 5000,
+                        type: 'warning',
+                        message: `Invalid relay URL.`,
+                        caption: `Error: ${error}`
+                    })
+                }
+
+
+                this.relayUrl = null
+            },
+            removeRelay: async function (relay) {
+                this.$emit('remove-relay', relay)
+            },
         },
         created: async function () {
 

static/js/market.js

@@ -213,7 +213,7 @@ const market = async () => {
       // Check for stored merchants and relays on localStorage
       try {
         let merchants = this.$q.localStorage.getItem(`diagonAlley.merchants`)
-        let relays = this.$q.localStorage.getItem(`diagonAlley.relays`)
+        let relays = this.$q.localStorage.getItem(`nostrmarket.relays`)
         if (merchants && merchants.length) {
           this.pubkeys = new Set(merchants)
         }
@@ -604,29 +604,25 @@ const market = async () => {
         )
         this.initNostr()
       },
-      async addRelay() {
-        let relay = String(this.inputRelay).trim()
-        if (!relay.startsWith('ws')) {
-          console.debug('invalid url')
-          return
-        }
-        this.relays.add(relay)
-        this.$q.localStorage.set(`diagonAlley.relays`, Array.from(this.relays))
-        this.inputRelay = null
-        this.initNostr()
-      },
-      removeRelay(relay) {
-        // Needs a hack for Vue reactivity
-        let relays = this.relays
-        relays.delete(relay)
-        this.relays = new Set(Array.from(relays))
-        this.$q.localStorage.set(`diagonAlley.relays`, Array.from(this.relays))
-        this.initNostr()
-      },
 
       setActivePage(page = 'market') {
         this.activePage = page
       },
+      async addRelay(relayUrl) {
+        let relay = String(relayUrl).trim()
+
+        this.relays.add(relay)
+        this.$q.localStorage.set(`nostrmarket.relays`, Array.from(this.relays))
+        this.initNostr() // todo: improve
+      },
+      removeRelay(relayUrl) {
+        this.relays.delete(relayUrl)
+        this.relays = new Set(Array.from(this.relays))
+        this.$q.localStorage.set(`nostrmarket.relays`, Array.from(this.relays))
+        this.initNostr()  // todo: improve
+      },
+
+
 
       addMerchant(publicKey) {
         console.log('### addMerchat', publicKey)

templates/nostrmarket/market.html

@@ -265,7 +265,8 @@
         <q-separator class="q-mt-sm q-mb-md"></q-separator>
 
         <market-config v-if="activePage === 'market-config'" :merchants="merchants" @add-merchant="addMerchant"
-          @remove-merchant="removeMerchant"></market-config>
+          @remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay"
+          @remove-relay="removeRelay"></market-config>
 
         <user-config v-else-if="activePage === 'user-config'"></user-config>