Add a banner header (props to JoshuaM) (#41)

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add market name to stall page breadcrumbs

* Add usage description to readme

README.md

@@ -96,6 +96,28 @@ or by visiting `https://<LNbits instance URL>/nostrmarket/market`
 Make sure to add your `merchant` public key to the list:
 ![image](https://user-images.githubusercontent.com/2951406/236787686-0e300c0a-eb5d-4490-aa70-568738ac78f4.png)
 
+### Styling
+In order to create a customized Marketplace, we use `naddr` as defined in [NIP-19](https://github.com/nostr-protocol/nips/blob/master/19.md#shareable-identifiers-with-extra-metadata). You must create an event (kind: `30019`) that has all the custom properties, including merchants and relays, of your marketplace. Start by going to the marketplace page:
+![vanilla market](https://i.imgur.com/nCaMh1N.png)
+
+You'll need to Login, and head over to *Marketplace Info*. Optionally import some merchants and relays, that will be included in the event. Click on *Edit* and fill out your marketplace custom info:
+![edit](https://i.imgur.com/wEuHuN9.png)
+
+Fill in the optional fields:
+- Add a name to the Marketplace
+- Add a small description
+- Add a logo image URL
+- Add a banner image URL (max height: 250px)
+- Choose a theme 
+
+By clicking *Publish*, a `kind: 30019` event will be sent to the defined relays containing all the information about your custom Marketplace. On the left drawer, a button with *Copy Naddr* will show up.
+![copy naddr](https://i.imgur.com/VuNIMVf.png)
+
+You can then share your Marketplace, with the merchants and relays, banner, and style by using that Nostr identifier. The URL for the marketplace will be for example: `https://legend.lnbits.com/nostrmarket/market?naddr=naddr1qqfy6ctjddjhgurvv93k....`, you need to include the URL parameter `naddr=<your naddr>`. When a user visits that URL, the client will get the `30019` event and configure the Marketplace to what you defined. In the example bellow, a couple of merchants, relays, `autumn` theme, name (*Veggies Market*) and a header banner:
+![final](https://i.imgur.com/EYG7vYS.png)
+
+The nostr event is a replaceable event, so you can change it to what you like and publish a new one to replace a previous one. For example adding a new merchant, or remove, change theme, add more relays,e tc...
+
 
 ## Troubleshoot
 ### Check communication with Nostr

static/components/customer-market/customer-market.html

@@ -22,44 +22,27 @@
           </div>
         </q-card-section>
         <q-card-section>
-          <q-input
+          <q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="search"
-            class="q-ml-md"
+            label="Search products" @keydown.enter="searchProducts" hint="Enter search terms separated by spaces">
-            standout
-            square
-            dense
-            outlined
-            clearable
-            v-model.trim="search"
-            label="Search products"
-            @keydown.enter="searchProducts"
-            hint="Enter search terms separated by spaces"
-          >
             <template v-slot:after>
-              <q-btn
+              <q-btn dense flat icon="search" label="Search" @click="searchProducts" />
-                dense
-                flat
-                icon="search"
-                label="Search"
-                @click="searchProducts"
-              />
             </template>
           </q-input>
         </q-card-section>
       </q-card>
     </div>
   </div>
+  <q-banner v-if="styles?.ui?.banner" class="row q-pa-none q-mb-md">
+    <q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
+  </q-banner>
   <q-toolbar>
     <q-breadcrumbs>
-      <q-breadcrumbs-el label="Market" icon="home"></q-breadcrumbs-el>
+      <q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home"></q-breadcrumbs-el>
     </q-breadcrumbs>
   </q-toolbar>
   <div class="row q-col-gutter-md">
-    <div
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
-      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
-      v-for="(item, idx) in products"
-      :key="idx"
-    >
       <product-card :product="item" @change-page="changePageM"></product-card>
     </div>
   </div>
-</div>
+</div>

static/components/customer-market/customer-market.js

@@ -10,7 +10,8 @@ async function customerMarket(path) {
       'search-nostr',
       'relays',
       'update-products',
-      'update-stalls'
+      'update-stalls',
+      'styles'
     ],
     data: function () {
       return {

static/components/customer-stall/customer-stall.html

@@ -1,79 +1,35 @@
 <div>
   <q-toolbar>
     <q-breadcrumbs class="cursor">
-      <q-breadcrumbs-el
+      <q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home" @click="$emit('change-page', 'market')"
-        label="Market"
+        style="cursor: pointer"></q-breadcrumbs-el>
-        icon="home"
+      <q-breadcrumbs-el :label="stall?.name || 'Stall'" icon="widgets"></q-breadcrumbs-el>
-        @click="$emit('change-page', 'market')"
-        style="cursor: pointer"
-      ></q-breadcrumbs-el>
-      <q-breadcrumbs-el
-        :label="stall?.name || 'Stall'"
-        icon="widgets"
-      ></q-breadcrumbs-el>
     </q-breadcrumbs>
     <q-toolbar-title></q-toolbar-title>
-    <chat-dialog
+    <chat-dialog v-if="this.customerPrivkey || this.customerUseExtension" :account="account ? account : dropIn"
-      v-if="this.customerPrivkey || this.customerUseExtension"
+      :merchant="stall.pubkey" :relays="relays" :pool="pool" />
-      :account="account ? account : dropIn"
+    <shopping-cart :cart="cart" :cart-menu="cartMenu" :products="stallProducts" @add-to-cart="addToCart"
-      :merchant="stall.pubkey"
+      @remove-from-cart="removeFromCart" @update-qty="updateQty" @reset-cart="resetCart"
-      :relays="relays"
+      @open-checkout="openCheckout"></shopping-cart>
-      :pool="pool"
-    />
-    <shopping-cart
-      :cart="cart"
-      :cart-menu="cartMenu"
-      :products="stallProducts"
-      @add-to-cart="addToCart"
-      @remove-from-cart="removeFromCart"
-      @update-qty="updateQty"
-      @reset-cart="resetCart"
-      @open-checkout="openCheckout"
-    ></shopping-cart>
   </q-toolbar>
   <div class="row">
-    <product-detail
+    <product-detail class="col-12" v-if="productDetail && product" :product="product"
-      class="col-12"
+      @add-to-cart="addToCart"></product-detail>
-      v-if="productDetail && product"
-      :product="product"
-      @add-to-cart="addToCart"
-    ></product-detail>
     <div class="col-12 q-my-lg">
       <q-separator></q-separator>
     </div>
   </div>
   <div class="row q-col-gutter-md">
-    <div
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
-      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
+      <product-card :product="item" @change-page="changePageS" @add-to-cart="addToCart" :is-stall="true"></product-card>
-      v-for="(item, idx) in products"
-      :key="idx"
-    >
-      <product-card
-        :product="item"
-        @change-page="changePageS"
-        @add-to-cart="addToCart"
-        :is-stall="true"
-      ></product-card>
     </div>
   </div>
   <!-- BEGIN CHECKOUT DIALOG -->
   <q-dialog v-model="checkoutDialog.show" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="placeOrder" class="q-gutter-md">
-        <q-input
+        <q-input filled dense v-model.trim="checkoutDialog.data.username" label="Name (optional)"></q-input>
-          filled
+        <q-expansion-item v-if="!account" dense dense-toggle expand-separator icon="person_off" label="Not logged in?">
-          dense
-          v-model.trim="checkoutDialog.data.username"
-          label="Name (optional)"
-        ></q-input>
-        <q-expansion-item
-          v-if="!account"
-          dense
-          dense-toggle
-          expand-separator
-          icon="person_off"
-          label="Not logged in?"
-        >
           <q-card>
             <q-card-section>
               It seems you haven't logged in. You can:
@@ -91,131 +47,53 @@
               </ol>
             </q-card-section>
             <q-card-actions align="right">
-              <q-btn
+              <q-btn v-if="hasNip07" unelevated @click="getFromExtension" color="primary"
-                v-if="hasNip07"
+                label="Get from Extension"><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn>
-                unelevated
+              <q-btn v-if="!this.account && !this.customerPubkey && !this.customerPrivkey" unelevated @click="makeLogin"
-                @click="getFromExtension"
+                color="primary" label="Login"></q-btn>
-                color="primary"
-                label="Get from Extension"
-                ><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn
-              >
-              <q-btn
-                v-if="!this.account && !this.customerPubkey && !this.customerPrivkey"
-                unelevated
-                @click="makeLogin"
-                color="primary"
-                label="Login"
-              ></q-btn>
             </q-card-actions>
           </q-card>
         </q-expansion-item>
-        <q-input
+        <q-input filled dense :readonly="Boolean(customerPubkey)" v-model.trim="checkoutDialog.data.pubkey"
-          filled
+          label="Public key" hint="Enter your public key">
-          dense
-          :readonly="Boolean(customerPubkey)"
-          v-model.trim="checkoutDialog.data.pubkey"
-          label="Public key"
-          hint="Enter your public key"
-        >
         </q-input>
-        <q-input
+        <q-input filled dense :readonly="Boolean(customerPrivkey)" :type="isPwd ? 'password' : 'text'"
-          filled
+          v-if="!customerUseExtension" v-model.trim="checkoutDialog.data.privkey" label="Private key (optional)"
-          dense
+          hint="Enter your private key">
-          :readonly="Boolean(customerPrivkey)"
-          :type="isPwd ? 'password' : 'text'"
-          v-if="!customerUseExtension"
-          v-model.trim="checkoutDialog.data.privkey"
-          label="Private key (optional)"
-          hint="Enter your private key"
-        >
           <template v-slot:append>
-            <q-icon
+            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
-              :name="isPwd ? 'visibility_off' : 'visibility'"
-              class="cursor-pointer"
-              @click="isPwd = !isPwd"
-            />
           </template>
         </q-input>
-        <q-input
+        <q-input filled dense v-model.trim="checkoutDialog.data.address" label="Address (optional)"
-          filled
+          hint="If ordering a physical product make sure to fill this"></q-input>
-          dense
+        <q-input v-model="checkoutDialog.data.email" filled dense type="email" label="Email (optional)"
-          v-model.trim="checkoutDialog.data.address"
+          hint="Merchant may not use email"></q-input>
-          label="Address (optional)"
+        <q-input v-model="checkoutDialog.data.message" filled dense type="text" label="Message (optional)"></q-input>
-          hint="If ordering a physical product make sure to fill this"
-        ></q-input>
-        <q-input
-          v-model="checkoutDialog.data.email"
-          filled
-          dense
-          type="email"
-          label="Email (optional)"
-          hint="Merchant may not use email"
-        ></q-input>
-        <q-input
-          v-model="checkoutDialog.data.message"
-          filled
-          dense
-          type="text"
-          label="Message (optional)"
-        ></q-input>
         <p>Select the shipping zone:</p>
         <div class="row q-mt-lg">
-          <q-select
+          <q-select style="min-width: 200px" filled dense stack-label v-model="checkoutDialog.data.shippingzone"
-            style="min-width: 200px"
+            emit-value map-options :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
-            filled
+            label="Shipping Zone" />
-            dense
-            stack-label
-            v-model="checkoutDialog.data.shippingzone"
-            emit-value
-            map-options
-            :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
-            label="Shipping Zone"
-          />
         </div>
         <div class="row q-mt-lg">
           Total: {{ stall.currency != 'sat' ? getAmountFormated(finalCost,
           stall.currency) : finalCost + 'sats' }}
         </div>
         <div class="row q-mt-lg">
-          <q-btn
+          <q-btn v-if="!customerUseExtension && !checkoutDialog.data.privkey" :loading="loading" unelevated
-            v-if="!customerUseExtension && !checkoutDialog.data.privkey"
+            color="primary" :disable="checkoutDialog.data.shippingzone == null
-            :loading="loading"
+              || checkoutDialog.data.pubkey == null" @click="downloadOrder">Download Order</q-btn>
-            unelevated
+          <q-btn v-else :loading="loading" unelevated color="primary" :disable="checkoutDialog.data.shippingzone == null
-            color="primary"
+              || checkoutDialog.data.pubkey == null" type="submit">Checkout</q-btn>
-            :disable="checkoutDialog.data.shippingzone == null
+          <q-btn v-close-popup flat @click="checkoutDialog = {show: false, data: {pubkey: null}}" color="grey"
-              || checkoutDialog.data.pubkey == null"
+            class="q-ml-auto">Cancel</q-btn>
-            @click="downloadOrder"
-            >Download Order</q-btn
-          >
-          <q-btn
-            v-else
-            :loading="loading"
-            unelevated
-            color="primary"
-            :disable="checkoutDialog.data.shippingzone == null
-              || checkoutDialog.data.pubkey == null"
-            type="submit"
-            >Checkout</q-btn
-          >
-          <q-btn
-            v-close-popup
-            flat
-            @click="checkoutDialog = {show: false, data: {pubkey: null}}"
-            color="grey"
-            class="q-ml-auto"
-            >Cancel</q-btn
-          >
         </div>
       </q-form>
     </q-card>
   </q-dialog>
   <!-- END CHECKOUT DIALOG -->
   <!-- INVOICE DIALOG -->
-  <q-dialog
+  <q-dialog v-model="qrCodeDialog.show" position="top" @hide="closeQrCodeDialog">
-    v-model="qrCodeDialog.show"
-    position="top"
-    @hide="closeQrCodeDialog"
-  >
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <div class="text-center q-mb-lg">
         <div class="q-my-lg" v-if="qrCodeDialog.data.message">
@@ -223,12 +101,8 @@
         </div>
         <a v-else :href="'lightning:' + qrCodeDialog.data.payment_request">
           <q-responsive :ratio="1" class="q-mx-xl">
-            <qrcode
+            <qrcode v-if="qrCodeDialog.data.payment_request" :value="qrCodeDialog.data.payment_request"
-              v-if="qrCodeDialog.data.payment_request"
+              :options="{width: 340}" class="rounded-borders"></qrcode>
-              :value="qrCodeDialog.data.payment_request"
-              :options="{width: 340}"
-              class="rounded-borders"
-            ></qrcode>
           </q-responsive>
         </a>
         <q-inner-loading :showing="loading">
@@ -236,15 +110,8 @@
         </q-inner-loading>
       </div>
       <div class="row q-mt-lg">
-        <q-btn
+        <q-btn outline color="grey" @click="copyText(qrCodeDialog.data.payment_request)">Copy invoice</q-btn>
-          outline
+        <q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto">Close</q-btn>
-          color="grey"
-          @click="copyText(qrCodeDialog.data.payment_request)"
-          >Copy invoice</q-btn
-        >
-        <q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto"
-          >Close</q-btn
-        >
       </div>
     </q-card>
   </q-dialog>
@@ -271,18 +138,12 @@
 
       <q-card-section>
         <pre
-          style="font-size: 0.65rem; overflow-x: auto"
+          style="font-size: 0.65rem; overflow-x: auto"><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
-        ><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
       </q-card-section>
       <div class="row q-mt-lg">
-        <q-btn
+        <q-btn outline color="primary" @click="copyText(JSON.stringify(downloadOrderDialog.data))">Copy order</q-btn>
-          outline
-          color="primary"
-          @click="copyText(JSON.stringify(downloadOrderDialog.data))"
-          >Copy order</q-btn
-        >
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
       </div>
     </q-card>
   </q-dialog>
-</div>
+</div>

static/components/customer-stall/customer-stall.js

@@ -14,7 +14,8 @@ async function customerStall(path) {
       'product-detail',
       'change-page',
       'relays',
-      'pool'
+      'pool',
+      'styles'
     ],
     data: function () {
       return {
@@ -31,6 +32,7 @@ async function customerStall(path) {
         customerPrivkey: null,
         customerUseExtension: null,
         activeOrder: null,
+        banner: null,
         checkoutDialog: {
           show: false,
           data: {
@@ -269,7 +271,8 @@ async function customerStall(path) {
           items: Array.from(this.cart.products, p => {
             return {product_id: p[0], quantity: p[1].quantity}
           }),
-          shipping_id: orderData.shippingzone
+          shipping_id: orderData.shippingzone,
+          type: 0
         }
         let created_at = Math.floor(Date.now() / 1000)
         orderObj.id = await hash(
@@ -375,9 +378,8 @@ async function customerStall(path) {
             this.qrCodeDialog.data.message = json.message
             return cb()
           }
-          let payment_request = json.payment_options.find(
+          let payment_request = json.payment_options.find(o => o.type == 'ln')
-            o => o.type == 'ln'
+            .link
-          ).link
           if (!payment_request) return
           this.loading = false
           this.qrCodeDialog.data.payment_request = payment_request

static/js/market.js

@@ -61,7 +61,21 @@ const market = async () => {
         activePage: 'market',
         activeStall: null,
         activeProduct: null,
-        pool: null
+        pool: null,
+        config: null,
+        configDialog: {
+          show: false,
+          data: {
+            name: null,
+            about: null,
+            ui: {
+              picture: null,
+              banner: null,
+              theme: null
+            }
+          }
+        },
+        naddr: null,
       }
     },
     computed: {
@@ -103,11 +117,15 @@ const market = async () => {
           key = data
         }
         return key?.toLowerCase()?.match(/^[0-9a-f]{64}$/)
+      },
+      canEditConfig(){
+        return this.account && this.account.pubkey == this.config?.pubkey
       }
     },
     async created() {
       // Check for user stored
       this.account = this.$q.localStorage.getItem('diagonAlley.account') || null
+      //console.log("UUID", crypto.randomUUID())
 
       // Check for stored merchants and relays on localStorage
       try {
@@ -132,6 +150,23 @@ const market = async () => {
       let merchant_pubkey = params.get('merchant_pubkey')
       let stall_id = params.get('stall_id')
       let product_id = params.get('product_id')
+      let naddr = params.get('naddr')
+
+      if(naddr) {
+        try {
+          let {type, data} = NostrTools.nip19.decode(naddr)
+          if(type == 'naddr' && data.kind == '30019') { // just double check
+            this.config = {
+              d: data.identifier,
+              pubkey: data.pubkey,
+              relays: data.relays
+            }
+          }
+          this.naddr = naddr
+        }catch (err){
+          console.error(err)
+        }
+      }
 
       // What component to render on start
       if (stall_id) {
@@ -204,6 +239,79 @@ const market = async () => {
       openAccountDialog() {
         this.accountDialog.show = true
       },
+      editConfigDialog(){
+        if(this.canEditConfig && this.config?.opts){
+          let {name, about, ui} = this.config.opts
+          this.configDialog.data = {name, about, ui}
+          this.configDialog.data.identifier = this.config?.d
+        }
+        this.openConfigDialog()
+      },
+      openConfigDialog() {
+        if(!this.account){
+          this.$q.notify({
+            message: `You need to be logged in first.`,
+            color: 'negative',
+            icon: 'warning'
+          })
+          return 
+        }
+        this.configDialog.show = true
+      },
+      async sendConfig() {
+        let {name, about, ui} = this.configDialog.data
+        let merchants = Array.from(this.pubkeys)
+        let identifier = this.configDialog.data.identifier ?? crypto.randomUUID()
+        let event = {
+          ...(await NostrTools.getBlankEvent()),
+          kind: 30019,
+          content: JSON.stringify({name, about, ui, merchants}),
+          created_at: Math.floor(Date.now() / 1000),
+          tags: [['d', identifier]],
+          pubkey: this.account.pubkey
+        }
+        event.id = NostrTools.getEventHash(event)
+        try {
+          if(this.account.useExtension){
+            event = await window.nostr.signEvent(event)
+          }else if (this.account.privkey) {
+            event.sig = await NostrTools.signEvent(event, this.account.privkey)
+          }
+          let pub = this.pool.publish(Array.from(this.relays), event)
+          pub.on('ok', () => console.debug(`Config event was sent`))
+          pub.on('failed', error => console.error(error))
+        } catch (err) {
+          console.error(err)
+          this.$q.notify({
+            message: `Error signing event.`,
+            color: 'negative',
+            icon: 'warning'
+          })
+          return
+        }
+        this.naddr = NostrTools.nip19.naddrEncode({
+          pubkey: event.pubkey,
+          kind: 30019,
+          identifier: identifier,
+          relays: Array.from(this.relays)
+        })
+        this.config = this.configDialog.data
+        this.resetConfig()
+        return 
+      },
+      resetConfig() {
+        this.configDialog = {show: false,
+          identifier: null,
+        data: {
+          name: null,
+          about: null,
+          ui: {
+            picture: null,
+            banner: null,
+            theme: null
+          }
+        }}
+      },
       async updateData(events) {
         if (events.length < 1) {
           this.$q.notify({
@@ -254,6 +362,28 @@ const market = async () => {
       async initNostr() {
         this.$q.loading.show()
         const pool = new NostrTools.SimplePool()
+        
+        // If there is an naddr in the URL, get it and parse content
+        if (this.config) {  
+          // add relays to the set   
+          this.config.relays.forEach(r => this.relays.add(r))
+          await pool.get(this.config.relays, {
+            kinds: [30019],
+            limit: 1,
+            authors: [this.config.pubkey],
+            '#d': [this.config.d]
+          }).then(event => {
+            if(!event) return 
+            let content = JSON.parse(event.content)   
+            this.config = {... this.config, opts: content}            
+            // add merchants 
+            this.config.opts?.merchants.forEach(m => this.pubkeys.add(m))
+            // change theme
+            let {theme} = this.config.opts?.ui
+            theme && document.body.setAttribute('data-theme', theme)
+          }).catch(err => console.error(err))          
+        }
+        
         let relays = Array.from(this.relays)
 
         // Get metadata and market data from the pubkeys
@@ -323,6 +453,15 @@ const market = async () => {
         window.history.pushState({}, '', url)
         this.activePage = page
       },
+      copyText: function (text) {
+        var notify = this.$q.notify
+        Quasar.utils.copyToClipboard(text).then(function () {
+          notify({
+            message: 'Copied to clipboard!',
+            position: 'bottom'
+          })
+        })
+      },
       getAmountFormated(amount, unit = 'USD') {
         return LNbits.utils.formatCurrency(amount, unit)
       },

templates/nostrmarket/market.html

@@ -8,9 +8,7 @@
     <div>
       <div v-if="account" class="bg-transparent q-ma-md">
         <q-avatar size="56px" class="q-mb-sm">
-          <img
+          <img :src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'" />
-            :src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'"
-          />
         </q-avatar>
         {%raw%}
         <div class="text-weight-bold">
@@ -20,43 +18,22 @@
           {{ accountMetadata.name }}
         </div>
         {%endraw%}
-        <q-btn
+        <q-btn label="Delete data" class="q-mt-md" color="red" @click="deleteAccount"><q-tooltip>Delete account
-          label="Delete data"
+            data</q-tooltip></q-btn>
-          class="q-mt-md"
-          color="primary"
-          @click="deleteAccount"
-          ><q-tooltip>Delete account data</q-tooltip></q-btn
-        >
       </div>
       <div v-else class="q-pa-md">
-        <q-btn
+        <q-btn label="Login" class="q-mt-md" color="primary" @click="accountDialog.show = true"><q-tooltip>Login or
-          label="Login"
+            Create account</q-tooltip></q-btn>
-          class="q-mt-md"
-          color="primary"
-          @click="accountDialog.show = true"
-          ><q-tooltip>Login or Create account</q-tooltip></q-btn
-        >
       </div>
       <q-separator></q-separator>
     </div>
     <div class="q-pa-md">
       <q-list padding>
-        <q-expansion-item
+        <q-expansion-item expand-separator icon="perm_identity" label="Merchants" caption="Add/Remove pubkeys">
-          expand-separator
-          icon="perm_identity"
-          label="Merchants"
-          caption="Add/Remove pubkeys"
-        >
           <q-card>
             <q-card-section>
-              <q-input
+              <q-input filled v-model="inputPubkey" @keydown.enter="addPubkey(null)" type="text" label="Pubkey/Npub"
-                filled
+                hint="Add merchants">
-                v-model="inputPubkey"
-                @keydown.enter="addPubkey(null)"
-                type="text"
-                label="Pubkey/Npub"
-                hint="Add merchants"
-              >
                 <q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
               </q-input>
               <q-list class="q-mt-md">
@@ -64,37 +41,19 @@
                   {%raw%}
                   <q-item-section avatar>
                     <q-avatar>
-                      <img
+                      <img v-if="profiles.get(pub) && profiles.get(pub)?.picture" :src="profiles.get(pub).picture" />
-                        v-if="profiles.get(pub) && profiles.get(pub)?.picture"
+                      <img v-else src="/nostrmarket/static/images/blank-avatar.webp" />
-                        :src="profiles.get(pub).picture"
-                      />
-                      <img
-                        v-else
-                        src="/nostrmarket/static/images/blank-avatar.webp"
-                      />
                     </q-avatar>
                   </q-item-section>
                   <q-item-section>
-                    <q-item-label
+                    <q-item-label v-if="profiles.get(pub) && profiles.get(pub)?.name">{{ profiles.get(pub).name
-                      v-if="profiles.get(pub) && profiles.get(pub)?.name"
+                      }}</q-item-label>
-                      >{{ profiles.get(pub).name }}</q-item-label
+                    <q-item-label v-else>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
-                    >
+                      }}</q-item-label>
-                    <q-item-label v-else
-                      >{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
-                      }}</q-item-label
-                    >
                     <q-tooltip>{{ pub }}</q-tooltip>
                   </q-item-section>
                   <q-item-section side>
-                    <q-btn
+                    <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removePubkey(pub)" />
-                      class="gt-xs"
-                      size="12px"
-                      flat
-                      dense
-                      round
-                      icon="delete"
-                      @click="removePubkey(pub)"
-                    />
                   </q-item-section>
                   {%endraw%}
                 </q-item>
@@ -102,22 +61,11 @@
             </q-card-section>
           </q-card>
         </q-expansion-item>
-        <q-expansion-item
+        <q-expansion-item expand-separator icon="perm_identity" label="Relays" caption="Add/Remove relays">
-          expand-separator
-          icon="perm_identity"
-          label="Relays"
-          caption="Add/Remove relays"
-        >
           <q-card>
             <q-card-section>
-              <q-input
+              <q-input filled v-model="inputRelay" @keydown.enter="addRelay" type="text" label="Relay URL"
-                filled
+                hint="Add relays">
-                v-model="inputRelay"
-                @keydown.enter="addRelay"
-                type="text"
-                label="Relay URL"
-                hint="Add relays"
-              >
                 <q-btn @click="addRelay" dense flat icon="add"></q-btn>
               </q-input>
               <q-list dense class="q-mt-md">
@@ -127,15 +75,7 @@
                     <q-item-label>{{ url }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-btn
+                    <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removeRelay(url)" />
-                      class="gt-xs"
-                      size="12px"
-                      flat
-                      dense
-                      round
-                      icon="delete"
-                      @click="removeRelay(url)"
-                    />
                   </q-item-section>
                   {%endraw%}
                 </q-item>
@@ -143,6 +83,65 @@
             </q-card-section>
           </q-card>
         </q-expansion-item>
+        <q-expansion-item expand-separator icon="perm_identity" label="Marketplace" caption="Marketplace info">
+          <q-card>
+            <q-card-section>
+              <q-list class="q-mt-md">
+                <q-item-label header>Information</q-item-label>
+                <q-item>
+                  {%raw%}
+                  <q-item-section>
+                    <q-item-label>Marketplace name</q-item-label>
+                    <q-item-label caption>{{ config?.opts?.name }}</q-item-label>
+                  </q-item-section>
+                  {%endraw%}
+                </q-item>
+                <q-item>
+                  {%raw%}
+                  <q-item-section>
+                    <q-item-label>About the marketplace</q-item-label>
+                    <q-item-label caption>{{ config?.opts?.about }}</q-item-label>
+                  </q-item-section>
+                  {%endraw%}
+                </q-item>
+                <q-item-label header>UI Config</q-item-label>
+                <q-item>
+                  {%raw%}
+                  <q-item-section>
+                    <q-item-label>Logo</q-item-label>
+                    <q-item-label caption>{{ config?.opts?.ui?.picture }}</q-item-label>
+                  </q-item-section>
+                  {%endraw%}
+                </q-item>
+                <q-item>
+                  {%raw%}
+                  <q-item-section>
+                    <q-item-label>Banner URL</q-item-label>
+                    <q-item-label caption>{{ config?.opts?.ui?.banner }}</q-item-label>
+                  </q-item-section>
+                  {%endraw%}
+                </q-item>
+                <q-item>
+                  {%raw%}
+                  <q-item-section>
+                    <q-item-label>Theme</q-item-label>
+                    <q-item-label caption>{{ config?.opts?.ui?.theme }}</q-item-label>
+                  </q-item-section>
+                  {%endraw%}
+                </q-item>
+              </q-list>
+            </q-card-section>
+            <q-card-actions class="q-mx-md" align="right">
+              <q-btn v-if="naddr" label="Naddr" class="q-mt-md" color="primary" @click="copyText(naddr)"><q-tooltip>Copy
+                  the
+                  naddr for this configuration</q-tooltip></q-btn>
+              <q-btn v-if="naddr && canEditConfig" label="Edit" class="q-mt-md" color="primary"
+                @click="editConfigDialog"><q-tooltip>Edit configuration</q-tooltip></q-btn>
+              <q-btn label="New" class="q-mt-md" color="primary" @click="openConfigDialog"><q-tooltip>Create a new
+                  configuration</q-tooltip></q-btn>
+            </q-card-actions>
+          </q-card>
+        </q-expansion-item>
       </q-list>
     </div>
   </q-drawer>
@@ -157,24 +156,10 @@
           </q-toolbar-title>
           {%endraw%}
           <q-space></q-space>
-          <q-btn
+          <q-btn v-if="!activeStall" color="primary" label="Search" icon="travel_explore"
-            v-if="!activeStall"
+            @click="searchNostr = !searchNostr"><q-tooltip>Search for products on Nostr</q-tooltip></q-btn>
-            color="primary"
+          <q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="searchText"
-            label="Search"
+            label="Filter products">
-            icon="travel_explore"
-            @click="searchNostr = !searchNostr"
-            ><q-tooltip>Search for products on Nostr</q-tooltip></q-btn
-          >
-          <q-input
-            class="q-ml-md"
-            standout
-            square
-            dense
-            outlined
-            clearable
-            v-model.trim="searchText"
-            label="Filter products"
-          >
             <template v-slot:append>
               <q-icon v-if="!searchText" name="search" />
             </template>
@@ -182,26 +167,12 @@
         </q-toolbar>
       </div>
     </div>
-    <customer-stall
+    <customer-stall v-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
-      v-if="!isLoading && activeStall"
+      :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
-      :stall="stalls.find(stall => stall.id == activeStall)"
+      :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"
-      :products="filterProducts"
+      @login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall>
-      :stall-products="products.filter(p => p.stall_id == activeStall)"
+    <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
-      :product-detail="activeProduct"
+      :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
-      :relays="relays"
-      :account="account"
-      :pool="pool"
-      @login-dialog="openAccountDialog"
-      @change-page="navigateTo"
-    ></customer-stall>
-    <customer-market
-      v-else
-      :search-nostr="searchNostr"
-      :relays="relays"
-      :products="filterProducts"
-      @change-page="navigateTo"
-      @update-data="updateData"
-    ></customer-market>
   </q-page-container>
   <!-- ACCOUNT DIALOG -->
   <q-dialog v-model="accountDialog.show" persistent>
@@ -217,15 +188,9 @@
       </q-card-section>
 
       <q-card-section class="q-pt-none">
-        <q-input
+        <q-input dense label="nsec/npub/hex" v-model="accountDialog.data.key" autofocus @keyup.enter="createAccount"
-          dense
-          label="nsec/npub/hex"
-          v-model="accountDialog.data.key"
-          autofocus
-          @keyup.enter="createAccount"
           :error="accountDialog.data.key && !isValidKey"
-          hint="Enter you private key (recommended) or public key"
+          hint="Enter you private key (recommended) or public key"></q-input>
-        ></q-input>
 
         <q-item tag="label">
           <q-item-section avatar top>
@@ -244,22 +209,45 @@
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
-        <q-btn
+        <q-btn v-if="hasExtension" flat label="Use Public Key from Extension"
-          v-if="hasExtension"
+          @click="() => createAccount(true)"></q-btn>
-          flat
+        <q-btn v-if="isValidKey" label="Add key" color="primary" @click="() => createAccount()"></q-btn>
-          label="Use Public Key from Extension"
-          @click="() => createAccount(true)"
-        ></q-btn>
-        <q-btn
-          v-if="isValidKey"
-          label="Add key"
-          color="primary"
-          @click="() => createAccount()"
-        ></q-btn>
         <q-btn v-else flat label="Generate" @click="generateKeyPair"></q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>
+  <!-- Config/Naddr Dialog -->
+  <q-dialog v-model="configDialog.show" position="top">
+    <q-card>
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h6">Customize the Marketplace</div>
+      </q-card-section>
+      <q-card-section>
+        <p>Create an Nostr event with Market info</p>
+        <small> It will include all merchants on your merchants list and relays </small>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-form @submit="sendConfig" class="q-gutter-md">
+          <q-input filled dense v-model.trim="configDialog.data.name" label="Marketplace Name"></q-input>
+          <q-input filled dense v-model.trim="configDialog.data.about" label="Description"></q-input>
+          <p>Customize UI</p>
+          <q-input filled dense v-model.trim="configDialog.data.ui.picture" label="Marketplace Logo"
+            hint="URL to a logo image"></q-input>
+          <q-input filled dense v-model.trim="configDialog.data.ui.banner" label="Marketplace banner"
+            hint="URL to a header/banner image (max. 250px height)"></q-input>
+          <q-select filled dense v-model="configDialog.data.ui.theme" :options="g.allowedThemes" label="Theme">
+            <template v-slot:prepend>
+              <q-icon name="palette" />
+            </template>
+          </q-select>
+          <div class="row q-mt-lg">
+            <q-btn unelevated color="primary" type="submit">Publish</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          </div>
+        </q-form>
+    </q-card>
+  </q-dialog>
 </q-layout>
 {% endblock %} {% block scripts %}
 <script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
@@ -300,8 +288,7 @@
     width: auto;
   }
 
-  .chat-other {
+  .chat-other {}
-  }
 
   .chat-input {
     position: relative;
@@ -309,5 +296,11 @@
     align-items: end;
     margin-top: 1rem;
   }
+
+  .q-item__label--caption {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>
-{% endblock %}
+{% endblock %}