Working

models.py

@@ -20,8 +20,8 @@ class MyExtension(BaseModel):
     lnurlpay: str = ""
     lnurlwithdraw: str = ""
 
+
 class CreatePayment(BaseModel):
     myextension_id: str
     amount: int
     memo: str
-

static/js/index.js

@@ -63,12 +63,6 @@ window.app = Vue.createApp({
           LNbits.utils.notifyApiError(err)
         })
     },
-    async openUrlDialog(tempid) {
-      this.urlDialog.data = _.findWhere(this.myex, {id: tempid})
-      this.qrValue = this.urlDialog.data.lnurlpay
-      await this.connectWebocket(this.urlDialog.data.id)
-      this.urlDialog.show = true
-    },
     async sendMyExtensionData() {
       const data = {
         name: this.formDialog.data.name,
@@ -172,11 +166,25 @@ window.app = Vue.createApp({
       this.formDialog.data.currency = myextension.currency
       this.formDialog.show = true
     },
+    async openUrlDialog(tempid) {
+      this.urlDialog.data = _.findWhere(this.myex, {id: tempid})
+      this.qrValue = this.urlDialog.data.lnurlpay
+
+      // Connecting to our websocket fired in tasks.py
+      this.connectWebocket(this.urlDialog.data.id)
+
+      // We can also use this Lnbits core websocket function for getting a payment reaction
+      const wallet = _.findWhere(this.g.user.wallets, {
+        id: this.urlDialog.data.wallet
+      })
+      eventReactionWebocket(wallet.inkey)
+
+      this.urlDialog.show = true
+    },
     async closeformDialog() {
       this.formDialog.show = false
       this.formDialog.data = {}
     },
-
     async createInvoice(tempid) {
       ///////////////////////////////////////////////////
       ///Simple call to the api to create an invoice/////
@@ -190,44 +198,15 @@ window.app = Vue.createApp({
       }
       await LNbits.api
         .request('POST', `/myextension/api/v1/myex/payment`, wallet.inkey, data)
-        .then(async response => {
+        .then(response => {
           this.qrValue = response.data.payment_request
-          await this.connectWebocket(wallet.id)
+          this.connectWebocket(wallet.inkey)
         })
         .catch(error => {
           LNbits.utils.notifyApiError(error)
         })
     },
-    async makeItRain() {
-      document.getElementById('vue').disabled = true
-      var end = Date.now() + 2 * 1000
-      var colors = ['#FFD700', '#ffffff']
-      async function frame() {
-        confetti({
-          particleCount: 2,
-          angle: 60,
-          spread: 55,
-          origin: {x: 0},
-          colors: colors,
-          zIndex: 999999
-        })
-        confetti({
-          particleCount: 2,
-          angle: 120,
-          spread: 55,
-          origin: {x: 1},
-          colors: colors,
-          zIndex: 999999
-        })
-        if (Date.now() < end) {
-          requestAnimationFrame(frame)
-        } else {
-          document.getElementById('vue').disabled = false
-        }
-      }
-      await frame()
-    },
-    async connectWebocket(wallet_id) {
+    connectWebocket(myextension_id) {
       //////////////////////////////////////////////////
       ///wait for pay action to happen and do a thing////
       ///////////////////////////////////////////////////
@@ -238,7 +217,7 @@ window.app = Vue.createApp({
           ':' +
           location.port +
           '/api/v1/ws/' +
-          wallet_id
+          myextension_id
       } else {
         localUrl =
           'ws://' +
@@ -246,11 +225,11 @@ window.app = Vue.createApp({
           ':' +
           location.port +
           '/api/v1/ws/' +
-          wallet_id
+          myextension_id
       }
       this.connection = new WebSocket(localUrl)
-      this.connection.onmessage = async function (e) {
-        await this.makeItRain()
+      this.connection.onmessage = () => {
+        this.urlDialog.show = false
       }
     }
   },

tasks.py

@@ -44,7 +44,6 @@ async def on_invoice_paid(payment: Payment) -> None:
 
     # here we could send some data to a websocket on
     # wss://<your-lnbits>/api/v1/ws/<myextension_id> and then listen to it on
-    # the frontend, which we do with index.html connectWebocket()
 
     some_payment_data = {
         "name": myextension.name,

views_api.py

@@ -2,7 +2,7 @@
 
 from http import HTTPStatus
 
-from fastapi import APIRouter, Depends, Query, Request
+from fastapi import APIRouter, Depends, Request
 from lnbits.core.crud import get_user
 from lnbits.core.models import WalletTypeInfo
 from lnbits.core.services import create_invoice
@@ -18,7 +18,7 @@ from .crud import (
     update_myextension,
 )
 from .helpers import lnurler
-from .models import CreateMyExtensionData, MyExtension, CreatePayment
+from .models import CreateMyExtensionData, CreatePayment, MyExtension
 
 myextension_api_router = APIRouter()
 
@@ -67,6 +67,7 @@ async def api_myextension(myextension_id: str, req: Request) -> MyExtension:
 
     return myex
 
+
 ## Create a new record
 
 
@@ -148,12 +149,8 @@ async def api_myextension_delete(
 ## This endpoint creates a payment
 
 
-@myextension_api_router.post(
-    "/api/v1/myex/payment", status_code=HTTPStatus.CREATED
-)
-async def api_myextension_create_invoice(
-    data: CreatePayment
-) -> dict:
+@myextension_api_router.post("/api/v1/myex/payment", status_code=HTTPStatus.CREATED)
+async def api_myextension_create_invoice(data: CreatePayment) -> dict:
     myextension = await get_myextension(data.myextension_id)
 
     if not myextension:
@@ -167,7 +164,9 @@ async def api_myextension_create_invoice(
     payment = await create_invoice(
         wallet_id=myextension.wallet,
         amount=data.amount,
-        memo=f"{data.memo} to {myextension.name}" if data.memo else f"{myextension.name}",
+        memo=(
+            f"{data.memo} to {myextension.name}" if data.memo else f"{myextension.name}"
+        ),
         extra={
             "tag": "myextension",
             "amount": data.amount,