Merge pull request #170 from lnbits/ui_tweaks

fix: frontend page

static/components/merchant-tab.js

@@ -31,8 +31,14 @@ window.app.component('merchant-tab', {
   },
   computed: {
     marketClientUrl: function () {
+      if (!this.publicKey) {
         return '/nostrmarket/market'
       }
+
+      const url = new URL('/nostrmarket/market', window.location.origin)
+      url.searchParams.set('merchant', this.publicKey)
+      return url.pathname + url.search
+    }
   },
   methods: {
     publishProfile: async function () {

static/market/js/utils.js

@@ -1,5 +1,43 @@
 var NostrTools = window.NostrTools
 
+;(function ensureRandomUUID() {
+    if (!globalThis.crypto) {
+        globalThis.crypto = {}
+    }
+    if (!globalThis.crypto.randomUUID) {
+        globalThis.crypto.randomUUID = function () {
+            const getRandomValues = globalThis.crypto.getRandomValues
+            if (getRandomValues) {
+                const bytes = new Uint8Array(16)
+                getRandomValues.call(globalThis.crypto, bytes)
+                bytes[6] = (bytes[6] & 0x0f) | 0x40
+                bytes[8] = (bytes[8] & 0x3f) | 0x80
+                const hex = Array.from(bytes, b =>
+                    b.toString(16).padStart(2, '0')
+                ).join('')
+                return (
+                    hex.slice(0, 8) +
+                    '-' +
+                    hex.slice(8, 12) +
+                    '-' +
+                    hex.slice(12, 16) +
+                    '-' +
+                    hex.slice(16, 20) +
+                    '-' +
+                    hex.slice(20)
+                )
+            }
+
+            let d = Date.now()
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+                const r = (d + Math.random() * 16) % 16 | 0
+                d = Math.floor(d / 16)
+                return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
+            })
+        }
+    }
+})()
+
 var defaultRelays = [
     'wss://relay.damus.io',
     'wss://relay.snort.social',
@@ -44,13 +82,24 @@ function confirm(message) {
 
 
 async function hash(string) {
+    const subtle = globalThis.crypto && globalThis.crypto.subtle
+    if (subtle && subtle.digest) {
         const utf8 = new TextEncoder().encode(string)
-    const hashBuffer = await crypto.subtle.digest('SHA-256', utf8)
+        const hashBuffer = await subtle.digest('SHA-256', utf8)
         const hashArray = Array.from(new Uint8Array(hashBuffer))
-    const hashHex = hashArray
-        .map(bytes => bytes.toString(16).padStart(2, '0'))
-        .join('')
-    return hashHex
+        return hashArray.map(bytes => bytes.toString(16).padStart(2, '0')).join('')
+    }
+
+    // Fallback for non-secure contexts where crypto.subtle is unavailable.
+    return fallbackHash(string)
+}
+
+function fallbackHash(string) {
+    let hash = 5381
+    for (let i = 0; i < string.length; i++) {
+        hash = ((hash << 5) + hash) + string.charCodeAt(i)
+    }
+    return (hash >>> 0).toString(16).padStart(8, '0')
 }
 
 function isJson(str) {

templates/nostrmarket/components/merchant-tab.html

@@ -9,29 +9,26 @@
             </div>
           </div>
           <div class="row q-mb-md q-gutter-sm">
-            <q-btn
-              outline
-              color="primary"
-              @click="showEditProfileDialog = true"
-              icon="edit"
-              >Edit</q-btn
-            >
-            <q-btn
-              outline
-              color="primary"
-              icon="qr_code"
-              @click="showKeysDialog = true"
-            >
-              <q-tooltip>Show Keys</q-tooltip>
-            </q-btn>
             <q-btn-dropdown
               split
               outline
               color="primary"
-              icon="swap_horiz"
-              label="Switch"
+              icon="vpn_key"
+              label="Keys"
             >
               <q-list>
+                <q-item clickable v-close-popup @click="showKeysDialog = true">
+                  <q-item-section avatar>
+                    <q-icon name="vpn_key" color="primary"></q-icon>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>View Keys</q-item-label>
+                    <q-item-label caption
+                      >Show public/private keys</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator></q-separator>
                 <q-item-label header>Saved Profiles</q-item-label>
                 <q-item>
                   <q-item-section avatar>
@@ -88,6 +85,13 @@
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+            <q-btn
+              outline
+              color="primary"
+              @click="showEditProfileDialog = true"
+              icon="edit"
+              label="Edit Profile"
+            ></q-btn>
             <q-btn-dropdown
               split
               outline
@@ -140,6 +144,15 @@
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+            <q-btn
+              outline
+              color="primary"
+              icon="storefront"
+              label="Marketplace"
+              :href="marketClientUrl"
+              target="_blank"
+              rel="noopener"
+            ></q-btn>
           </div>
         </q-card-section>