fix: charge frontend with zeroconf = false (#53)

static/js/components.js

@@ -1,7 +1,7 @@
 Vue.component(VueQrcode.name, VueQrcode)
 
 Vue.component('satspay-paid', {
-  props: ['charge', 'timer'],
+  props: ['charge'],
   template: `
   <div>
     <q-icon
@@ -15,7 +15,6 @@ Vue.component('satspay-paid', {
           outline
           v-if="charge.completelink"
           :loading="charge.paid"
-          :percentage="timer"
           type="a"
           :href="charge.completelink"
           :label="charge.completelinktext"
@@ -98,14 +97,21 @@ Vue.component('satspay-time-elapsed', {
     this.timeSeconds = this.charge.timeSecondsLeft
     this.timeLeft = this.charge.timeLeft
     this.progress = this.charge.progress
+    if (this.charge.paid) {
+      this.barColor = 'positive'
+      this.progress = 1
+    }
     if (!this.charge.paid && this.timeSeconds > 0) {
       this.barColor = 'secondary'
       setInterval(() => {
         if (!this.charge.paid && this.timeSeconds > 0) {
           this.timeSeconds -= 1
           this.timeLeft = secondsToTime(this.timeSeconds)
-          this.progress = progress(chargeTimeSeconds, this.timeSeconds)
-          console.log(this.timeSeconds, chargeTimeSeconds, this.progress)
+          this.progress = progress(this.charge.time * 60, this.timeSeconds)
+        }
+        if (this.charge.paid) {
+          this.barColor = 'positive'
+          this.progress = 1
         }
       }, 1000)
     }

static/js/display.js

@@ -6,19 +6,22 @@ new Vue({
     return {
       charge: mapCharge(charge_data),
       network: network,
-      pendingFunds: 0,
       ws: null,
-      newProgress: 0.4,
-      counter: 1,
       wallet: {
         inkey: ''
       },
-      timer: 0,
-      cancelListener: () => {},
       tab: 'uqr'
     }
   },
   computed: {
+    mempoolLink() {
+      const onchainaddress = this.charge.onchainaddress
+      if (this.network === 'Testnet') {
+        return `https://mempool.space/testnet/address/${onchainaddress}`
+      } else {
+        return `https://mempool.space/address/${onchainaddress}`
+      }
+    },
     unifiedQR() {
       const bitcoin = (this.charge.onchainaddress || '').toUpperCase()
       let queryString = `bitcoin:${bitcoin}?amount=${(
@@ -44,8 +47,9 @@ new Vue({
       this.ws.addEventListener('message', async ({data}) => {
         const res = JSON.parse(data.toString())
         this.charge.balance = res.balance
+        this.charge.pending = res.pending
         if (res.paid) {
-          this.charge.progress = 0
+          this.charge.progress = 1
           this.charge.paid = true
           this.$q.notify({
             type: 'positive',
@@ -55,13 +59,11 @@ new Vue({
         }
       })
       this.ws.addEventListener('close', async () => {
-        console.log('ws closed')
         this.$q.notify({
           type: 'negative',
           message: 'WebSocket connection closed. Retrying...',
           timeout: 1000
         })
-        console.log('retrying ws connection...')
         setTimeout(() => {
           this.initWs()
         }, 3000)

tasks.py

@@ -30,10 +30,10 @@ async def send_success_websocket(charge: Charge):
         if charge_id == charge.id:
             await listener.send_json(
                 {
-                    "paid": True,
+                    "paid": charge.paid,
                     "balance": charge.balance,
                     "pending": charge.pending,
-                    "completelink": charge.completelink,
+                    "completelink": charge.completelink if charge.paid else None,
                 }
             )
 
@@ -96,19 +96,14 @@ def sum_transactions(address: str, txs):
 async def _handle_ws_message(address: str, data: dict):
     charge = await get_charge_by_onchain_address(address)
     assert charge, f"Charge with address `{address}` does not exist."
-
-    for charge_id, listener in public_ws_listeners.items():
-        if charge_id == charge.id:
-            await listener.send_json(data)
-
     unconfirmed_balance = sum_transactions(address, data.get("mempool", []))
     confirmed_balance = sum_transactions(address, data.get("confirmed", []))
     if charge.zeroconf:
         confirmed_balance += unconfirmed_balance
     charge.balance = confirmed_balance
     charge.pending = unconfirmed_balance
+    await send_success_websocket(charge)
     if charge.paid:
-        await send_success_websocket(charge)
         stop_onchain_listener(address)
         if charge.webhook:
             resp = await call_webhook(charge)

templates/satspay/display.html

@@ -48,15 +48,15 @@
               </q-badge>
             </q-item-section>
           </q-item>
-          <q-separator spaced v-if="pendingFunds"></q-separator>
-          <q-item v-if="pendingFunds" dense>
+          <q-separator spaced v-if="charge.pending"></q-separator>
+          <q-item v-if="charge.pending" dense>
             <q-item-section>
               <q-item-label>Amount pending:</q-item-label>
             </q-item-section>
 
             <q-item-section side>
               <q-badge color="gray">
-                <span class="text-subtitle2">${pendingFunds} sats</span>
+                <span class="text-subtitle2">${charge.pending} sats</span>
               </q-badge>
             </q-item-section>
           </q-item>
@@ -91,7 +91,6 @@
             <satspay-paid
               v-else-if="charge.paid"
               :charge="charge"
-              :timer="timer"
             ></satspay-paid>
           </div>
         </div>
@@ -161,7 +160,7 @@
                 <a
                   class="text-secondary"
                   style="color: unset"
-                  :href="'https://mempool.space/address/' + charge.onchainaddress"
+                  :href="mempoolLink"
                   target="_blank"
                   ><span
                     class="text-subtitle1"