cashu wallet (beta) (testnet)

src/components/Arbor/ForumPost.ts

@@ -1,8 +1,12 @@
+import { wallet } from '@/wallet';
+import { StateController } from '@lit-app/state';
+import type { NDKUser } from '@nostr-dev-kit/ndk';
 import formatDateTime from '@utils/formatDateTime';
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import { ndk } from '@/ndk';
 import '@components/MarkdownContent';
 
 @customElement('arx-forum-post')
@@ -14,6 +18,16 @@ export class ForumPost extends LitElement {
   @property({ type: String }) content = '';
   @property({ type: Boolean }) isHighlighted = false;
 
+  @state() private zapAmountDialogOpen = false;
+  @state() public authorProfile: NDKUser | undefined = undefined;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.authorProfile = ndk.getUser({ pubkey: this.npub });
+    new StateController(this, wallet);
+    wallet.loadWallet();
+  }
+
   static override styles = [
     css`
       .post {
@@ -171,14 +185,24 @@ export class ForumPost extends LitElement {
   }
 
   private _handleZap() {
-    alert('Zapping is not yet implemented');
-    this.dispatchEvent(
-      new CustomEvent('zap', {
-        detail: { postId: this.id, npub: this.npub },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    // setting to false and then to true forces the dialog to open, even when it wasn't closed correctly
+    this.zapAmountDialogOpen = false;
+    setTimeout(() => {
+      this.zapAmountDialogOpen = true;
+    }, 0);
+  }
+
+  private async _doZap(e: Event) {
+    if (!(e instanceof CustomEvent)) return;
+    e.preventDefault();
+    const zapAmount = Number.parseInt(e.detail.value);
+    if (Number.isNaN(zapAmount) || zapAmount <= 10) {
+      alert('Zap amount must be greater or equal to 10');
+      return;
+    }
+    await wallet.nutZap(zapAmount, this.authorProfile!, this.id);
+
+    this.zapAmountDialogOpen = false;
   }
 
   private _handleDownzap() {
@@ -206,6 +230,16 @@ export class ForumPost extends LitElement {
     };
 
     return html`
+      <arx-prompt
+        promptText="Zap amount"
+        placeholder="Enter zap amount"
+        @save=${this._doZap}
+        @cancel=${() => {
+          this.zapAmountDialogOpen = false;
+        }}
+        showInput
+        .open=${this.zapAmountDialogOpen}
+      ></arx-prompt>
       <div class=${classMap(postClasses)} id="post-${this.id}">
         <div class="post__sidebar">
           <arx-nostr-profile
@@ -248,7 +282,7 @@ export class ForumPost extends LitElement {
               ></iconify-icon>
             </arx-button>
 
-            <arx-button label="Zap" @click=${this._handleZap} disabled>
+            <arx-button label="Zap" @click=${this._handleZap}>
               <iconify-icon
                 slot="prefix"
                 icon="mdi:lightning-bolt"