layout fixes

tests/gui/vuejs/noogle/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@rust-nostr/nostr-sdk": "^0.8.0",
+    "@rust-nostr/nostr-sdk": "^0.9.0",
     "bootstrap": "^5.3.2",
     "daisyui": "^4.6.0",
     "mini-toastr": "^0.8.1",

tests/gui/vuejs/noogle/src/App.vue

@@ -14,6 +14,7 @@ import Nip07 from "@/components/Nip07.vue";
     </template>
     </ThreeColumnLayout>
 
+
   </main>
 </template>
 
@@ -22,10 +23,7 @@ header {
   line-height: 1.5;
 }
 
-.logo {
+
-  display: block;
-  margin: 0 auto 2rem;
-}
 
 @media (min-width: 768px) {
   header {

tests/gui/vuejs/noogle/src/components/Donate.vue

@@ -2,21 +2,60 @@
 import { requestProvider } from "webln";
 import miniToastr from "mini-toastr";
 import VueNotifications from "vue-notifications";
+import {PublicKey, ZapDetails, ZapEntity, ZapType} from "@rust-nostr/nostr-sdk";
+import store from "@/store.js";
+import {data} from "autoprefixer";
+
+
 export default {
 
+ data() {
+    return {
+      dvmlnaddress:  "hype@bitcoinfixesthis.org",
+      dvmpaymentaddr:  "",
+      dvminvoice: "",
+      nostrsdklnaddress: "yuki@getalby.com",
+      nostrsdkpaymentaddr: "",
+      nostrsdkinvoice: "",
+      amount: 1000
+    }},
+
   methods: {
-    async zap() {
+   async  handleZap(){
+    try {
+      let pk = PublicKey.fromBech32("npub1nxa4tywfz9nqp7z9zp7nr7d4nchhclsf58lcqt5y782rmf2hefjquaa6q8");
+      let entity = ZapEntity.publicKey(pk);
+      let details = new ZapDetails(ZapType.Private).message("Zap for Rust Nostr!");
+      await store.state.client.zap(entity, 1000, details);
+    } catch (error) {
+        console.log(error)
+    }
+  },
+
+    async copyinvoice(invoice){
+       await navigator.clipboard.writeText(invoice)
+       miniToastr.showMessage("", "Copied Invoice to clipboard", VueNotifications.types.info)
+    },
+
+    async zap(lnaddress, amount) {
       let webln;
-      let invoice = await this.createBolt11Lud16("hype@bitcoinfixesthis.org", 1000)
+      let invoice = await this.createBolt11Lud16(lnaddress, amount)
+      if (lnaddress === this.nostrsdklnaddress){
+         this.nostrsdkpaymentaddr = `https://chart.googleapis.com/chart?cht=qr&chl=${invoice}&chs=250x250&chld=M|0`;
+         this.nostrsdkinvoice = invoice
+      }
+      else{
+        this.dvmpaymentaddr =  `https://chart.googleapis.com/chart?cht=qr&chl=${invoice}&chs=250x250&chld=M|0`;
+        this.dvminvoice = invoice
+      }
+
       try {
         webln = await requestProvider();
       } catch (err) {
-       await navigator.clipboard.writeText(invoice)
+          await this.copyinvoice(invoice)
-       miniToastr.showMessage("", "Copied Invoice to clipboard", VueNotifications.types.info)
       }
 
       if (webln) {
-
         console.log(invoice)
         let response = await webln.sendPayment(invoice)
         console.log(response)
@@ -41,35 +80,52 @@ export default {
         const callbackResponse = await fetch(`${callback}?amount=${amountInSats}`);
         const obCallback = await callbackResponse.json();
         return obCallback.pr;
-      } catch (e) {
+        }
+    catch (e) {
             console.log(`LUD16: ${e}`);
             return null;
       }
     }
-
   }
 }
 
-
 </script>
 
 <template>
+  <div className="dropdown dropdown-top">
+    <div tabIndex={0} role="button"  class="v-Button"><svg class="relative  w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Donate</div>
+      <div tabIndex={0} className="dropdown-content z-[1] -start-20 card card-compact w-64 p-2 shadow bg-primary text-primary-content">
+        <div className="card-body">
+          <div>
+            <p>Sats:</p><input  class="c-Input" v-model="amount" placeholder="1000">
+          </div>
 
+          <h3 className="card-title">Donate to Noogle</h3>
+            <button class="v-Button2" @click="zap(this.dvmlnaddress, amount)"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Donate</button>
+            <img v-if="this.dvmpaymentaddr" alt="Invoice" width="250"  :src=this.dvmpaymentaddr @click="this.copyinvoice(this.dvminvoice)" />
 
-<button class="v-Button" @click="zap()"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+          <h3 className="card-title">Donate to NostrSDK</h3>
-Donate</button>
+            <button class="v-Button2" @click="zap(this.nostrsdklnaddress, amount)"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Donate</button>
-
+            <img v-if="this.nostrsdkpaymentaddr" alt="Invoice" width="250"  :src=this.nostrsdkpaymentaddr @click="this.copyinvoice(this.nostrsdkinvoice)" />
-
+        </div>
-
+    </div>
+  </div>
 </template>
 
 <style scoped>
 
-
 .v-Button {
  @apply  tracking-wide bg-black hover:bg-amber-400 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
    height: 24px;
-
-
 }
+.v-Button2 {
+ @apply  tracking-wide bg-black hover:bg-amber-400 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+}
+
+.c-Input {
+    @apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+    color: white;
+    background: black;
+}
+
 </style>

tests/gui/vuejs/noogle/src/components/Home.vue

@@ -11,15 +11,11 @@ export default {
 </script>
 
 <template>
-<div class="center">
+  <div class="center">
     <br>
-
     <Search/>
     <br>
     <ResultsTable/>
-  <br>
-  <br>
-<Donate/>
   </div>
 </template>
 
@@ -27,11 +23,6 @@ export default {
 
 .center {
   text-align: center;
-
-  justify-content: center;
-}
-.containertwo {
-  display: flex;
   justify-content: center;
 }
 

tests/gui/vuejs/noogle/src/components/Nip07.vue

@@ -4,9 +4,7 @@
         <img class="avatar" @click="sign_out()" :src="this.avatar" alt="" />
          <p>{{ this.current_user }}</p>
      </div>
-   <!-- <template v-if="current_user">
+
-     <button class="v-Button" @click="sign_out()">Sign out</button>
-    </template> -->
     <template v-if="!current_user">
       <div className="dropdown">
       <div tabIndex={0} role="button" class="v-Button" >Sign in</div>
@@ -18,10 +16,7 @@
         </div>
       </div>
     </div>
-
-
     </template>
-
   </div>
 </template>
 
@@ -34,7 +29,7 @@ import {
   Filter,
   initLogger,
   LogLevel,
-  Timestamp, Keys, NostrDatabase, ClientBuilder
+  Timestamp, Keys, NostrDatabase, ClientBuilder, ClientZapper
 } from "@rust-nostr/nostr-sdk";
 import VueNotifications from "vue-notifications";
 import store from '../store';
@@ -51,8 +46,6 @@ export default {
   },
   async mounted() {
      try{
-       //let testsginer = new Nip07Signer()
-
         if (localStorage.getItem('nostr-key-method') === 'nip07')
         {
            await this.sign_in_nip07()
@@ -60,22 +53,17 @@ export default {
         else {
           await this.sign_in_anon()
         }
-
      }
     catch (error){
        console.log(error);
-        console.log("nah");
     }
 
   },
 
   methods: {
     async sign_in_anon() {
-
       try {
-
          await loadWasmAsync();
-
          try {
             initLogger(LogLevel.debug());
         } catch (error) {
@@ -84,12 +72,7 @@ export default {
 
         let keys = Keys.fromSkStr("ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e")
         this.signer = ClientSigner.keys(keys) //TODO store keys
-
+        let client = new ClientBuilder().signer(this.signer).build()
-
-
-
-        let database =  await NostrDatabase.open("test.db")
-        let client = new ClientBuilder().database(database).signer(this.signer).build()
 
         for (const relay of store.state.relays){
            await client.addRelay(relay);
@@ -118,14 +101,6 @@ export default {
         console.log("Client connected")
 
 
-
-        //await this.get_user_info(pubkey)
-        //miniToastr.showMessage("Login successful!", "Logged in as " + this.current_user, VueNotifications.types.success)
-
-
-
-
-
       } catch (error) {
         console.log(error);
       }
@@ -152,10 +127,8 @@ export default {
              this.signer = ClientSigner.keys(Keys.generate())
           }
 
-
+        let zapper = ClientZapper.webln()
-
+        let client = new ClientBuilder().signer(this.signer).zapper(zapper).build();
-        let database =  await NostrDatabase.open("test.db")
-        let client = new ClientBuilder().database(database).signer(this.signer).build()
 
         for (const relay of store.state.relays){
                  await client.addRelay(relay);
@@ -173,25 +146,15 @@ export default {
           console.log(ev.asJson())
         }*/
 
-
-
-
         store.commit('set_client', client)
         store.commit('set_pubkey', pubkey)
         store.commit('set_hasEventListener', false)
         localStorage.setItem('nostr-key-method', "nip07")
         localStorage.setItem('nostr-key', "")
         console.log("Client connected")
-
-
-
         await this.get_user_info(pubkey)
         //miniToastr.showMessage("Login successful!", "Logged in as " + this.current_user, VueNotifications.types.success)
 
-
-
-
-
       } catch (error) {
         console.log(error);
       }
@@ -221,6 +184,7 @@ export default {
 
     async sign_out(){
       this.current_user = ""
+      await this.state.client.shutdown();
       localStorage.setItem('nostr-key-method', "")
       localStorage.setItem('nostr-key', "")
       await this.sign_in_anon()
@@ -250,12 +214,6 @@ export default {
   box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 10%);
 }
 
-.b-Button {
-  height: 30px;
-  color: white;
-  background: purple;
-
-}
 .v-Button {
   @apply bg-black  text-center hover:bg-nostr focus:ring-nostr mb-2 inline-flex flex-none items-center rounded-lg border border-nostr px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
   margin-right: 14px;
@@ -263,9 +221,4 @@ export default {
   width: 70px
 }
 
-.c-Button {
-  height: 30px;
-  color: white;
-  background: #8e30eb;
-}
 </style>

tests/gui/vuejs/noogle/src/components/Nip89.vue

@@ -22,9 +22,6 @@
           <br>
       </div>
     </div>
-
-
-
   </div>
 
 </template>
@@ -45,8 +42,7 @@ async function getnip89s(){
         let keys = Keys.fromSkStr("ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e")
 
         let signer = ClientSigner.keys(keys) //TODO store keys
-        let database =  await NostrDatabase.open("nip89.db")
+        let client = new ClientBuilder().signer(signer).build()
-        let client = new ClientBuilder().database(database).signer(signer).build()
         //await client.addRelay("wss://nos.lol");
         await client.addRelay("wss://relay.f7z.io")
         await client.addRelay("wss://pablof7z.nostr1.com")
@@ -112,9 +108,6 @@ export default {
 
 async mounted(){
       await getnip89s()
-
-
-
     },
 
   setup() {

tests/gui/vuejs/noogle/src/components/Search.vue

@@ -129,11 +129,6 @@ async function  listen() {
                 try {
                     console.log("7000:", event.content);
                     miniToastr.showMessage("DVM replied", event.content, VueNotifications.types.info)
-
-
-                    //if (content === "stop") {
-                    //    return true
-                    //}
                 } catch (error) {
                     console.log("Error: ", error);
                 }
@@ -194,21 +189,12 @@ function nextInput(e) {
 
   }
 }
-function prevInput(e) {
-  const prev = e.currentTarget.previousElementSibling;
-  if (prev) {
-    prev.focus();
-  }
-}
-
 
 defineProps({
   msg: {
     type: String,
     required: false
   },
-
-
 })
 
 </script>
@@ -218,25 +204,14 @@ defineProps({
 
   <div class="greetings">
     <img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
-<br>
+    <br>
     <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
     <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin">
-				Search the Nostr with Data Vending Machines
+    Search the Nostr with Data Vending Machines</h2>
-			</h2>
-
     <h3>
-
      <br>
-
+     <input class="c-Input" placeholder="Search..." v-model="message"  @keyup.enter="send_search_request(message)" @keydown.enter="nextInput">
-          <!-- <input class="c-Input" v-model="message"  @keyup.enter="send_search_request(message)"> -->
+     <button class="v-Button"  @click="send_search_request(message)">Search the Nostr</button>
-        <input class="c-Input" v-model="message"  @keyup.enter="send_search_request(message)" @keydown.enter="nextInput">
-
-          <button class="v-Button"  @click="send_search_request(message)">Search the Nostr
-          </button>
-
-<!--
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. -->
     </h3>
 
   </div>
@@ -253,15 +228,12 @@ defineProps({
 .c-Input {
     @apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
 
-
   width: 350px;
   height: 48px;
   color: white;
   background: black;
 }
 
-
-
 .logo {
      display: flex;
     width:100%;
@@ -285,7 +257,6 @@ h3 {
   .greetings h1,
   .greetings h3 {
     text-align: center;
-
   }
 }
 </style>

tests/gui/vuejs/noogle/src/components/SearchResultTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <EasyDataTable class="customize-table" alternating  header-text-direction="left" expand  v-if="store.state.results.length != 0" table-class-name="customize-table"
+  <EasyDataTable class="customize-table"   header-text-direction="left" expand  v-if="store.state.results.length != 0" table-class-name="customize-table"
     :headers="headers"
     :items="store.state.results">
    <template #item-content="{ content, author, authorurl, avatar, indicator, links}">
@@ -122,7 +122,6 @@ const headers: Header[] = [
   --easy-table-rows-per-page-selector-z-index: 1;
 
 
-  --next-page__click-button : #c0c7d2;
 
 
 

tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue

@@ -1,29 +1,20 @@
 <script setup>
 import Nip07 from "@/components/Nip07.vue";
-
+import Donate from "@/components/Donate.vue"
+import {isVisible} from "bootstrap/js/src/util/index.js";
 </script>
 
 <template>
 
-
-
-
-
   <div className="navbar bg-base-100">
   <div className="flex-none">
-   <!-- <button className="btn btn-square btn-ghost">
+
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-    test</button>-->
   </div>
   <div className="flex-1">
     <router-link  class="menu" to="/">Noogle</router-link>
     <router-link class="menu" to="/about">About</router-link>
     <router-link class="menu" to="/nip89">DVMs</router-link>
 
-  <div className="flex-none">
-
-
-      </div>
 
   </div>
  <Nip07/>
@@ -37,18 +28,18 @@ import Nip07 from "@/components/Nip07.vue";
 
     </header>
 
-    <main>
+    <main  >
-
-
-
       <router-view />
-      <slot />
+      <slot/>
     </main>
 
     <aside>
       <slot name="aside" />
-      <!-- <AppFooter /> -->
+
     </aside>
+<footer>
+     <Donate style="margin-top: 4px"/>
+    </footer>
  </div>
 </template>
 
@@ -58,24 +49,40 @@ import Nip07 from "@/components/Nip07.vue";
   grid-template-areas:
     "header"
     "main"
-    "aside";
+    "aside"
+    "footer";
 
   header {
     grid-area: header;
     margin-top: 30px;
   }
   main {
+
     grid-area: main;
     margin-top: 10px;
+    margin-bottom: 100px;
     padding: 20px;
 
   }
+  footer{
+
+    position: fixed;
+    bottom:0;
+    background: rgba(0, 0, 0, 0.5);;
+    grid-area: footer;
+    width: 100vw;
+    height: 32px;
+
+    z-index: 10;
+    text-align: center;
+  }
   aside {
     grid-area: aside;
     margin-top: 10px;
     padding: 20px;
   }
 
+
 .router-link-exact-active{
   color: rgba(255, 255, 255, 0.87);
 }
@@ -92,7 +99,8 @@ import Nip07 from "@/components/Nip07.vue";
 
   @media (min-width: 768px) {
     grid-template-columns: 1fr 3fr 1fr;
-    grid-template-areas: "header main aside";
+    grid-template-areas: "header main aside footer";
   }
 }
+
 </style>