feat: separate invoice check from onchain check

lnbits/extensions/satspay/templates/satspay/display.html

@@ -218,6 +218,8 @@
     font-size: 25px;
   }
 </style>
+<!-- todo: use config mempool -->
+<script src="https://mempool.space/mempool.js"></script>
 <script>
   Vue.component(VueQrcode.name, VueQrcode)
 
@@ -246,31 +248,41 @@
         this.cancelListener = LNbits.events.onInvoicePaid(
           this.wallet,
           payment => {
-            this.checkBalance()
+            this.checkInvoiceBalance()
           }
         )
       },
-      checkBalance: async function () {
+      checkInvoiceBalance: async function () {
         try {
-          const {data} = await LNbits.api
-          .request(
+          const {data} = await LNbits.api.request(
             'GET',
             `/satspay/api/v1/charges/balance/${this.charge.id}`,
             'filla'
           )
 
-            this.charge.time_elapsed = data.time_elapsed
-            this.charge.amount = data.amount
-            this.charge.balance = data.balance
-            if (this.charge.balance >= this.charge.amount) {
-              this.charge.paid = true
-            }
+          this.charge.time_elapsed = data.time_elapsed
+          this.charge.amount = data.amount
+          this.charge.balance = data.balance
+          if (this.charge.balance >= this.charge.amount) {
+            this.charge.paid = true
+          }
         } catch (error) {
           LNbits.utils.notifyApiError(error)
         }
+      },
+      checkOnchainAddressBalance: async function () {
+        const {
+          bitcoin: {addresses: addressesAPI}
+        } = mempoolJS()
 
+          const fn = async () =>
+            addressesAPI.getAddressTxsUtxo({
+              address: charge.onchainaddress
+            })
 
-
+          const utxos = await retryWithDelay(fn)
+          charge.balance = utxos.reduce((t, u) => t + u.value, 0)
+        
       },
       payLN: function () {
         this.lnbtc = true
@@ -280,39 +292,35 @@
         this.lnbtc = false
         this.onbtc = true
       },
-      getTheTime: function () {
-        var timeToComplete =
+      refreshExpirationTime: function () {
+        this.timetoComplete =
           parseInt('{{ charge.time }}') * 60 -
           (Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
-        this.timetoComplete = timeToComplete
-        var timeLeft = Quasar.utils.date.formatDate(
-          new Date((timeToComplete - 3600) * 1000),
+
+        this.newTimeLeft = Quasar.utils.date.formatDate(
+          new Date((this.timeToComplete - 3600) * 1000),
           'HH:mm:ss'
         )
-        this.newTimeLeft = timeLeft
       },
-      getThePercentage: function () {
-        var timeToComplete =
-          parseInt('{{ charge.time }}') * 60 -
-          (Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
+      refreshProgres: function () {
+        this.refreshExpirationTime()
         this.newProgress =
-          1 - timeToComplete / (parseInt('{{ charge.time }}') * 60)
+          1 - this.timeToComplete / (parseInt('{{ charge.time }}') * 60)
       },
-
-      timerCount: function () {
-        self = this
-        var refreshIntervalId = setInterval(function () {
-          if (self.charge.paid|| self.timetoComplete < 1) {
+      loopRefresh: function () { // invoice only
+        const refreshIntervalId = setInterval(() => {
+          console.log('### 1111')
+          if (this.charge.paid || this.timetoComplete < 1) {
             clearInterval(refreshIntervalId)
           }
-          self.getTheTime()
-          self.getThePercentage()
-          self.counter++
-          if (self.counter % 10 === 0) {
-            self.checkBalance()
+          this.refreshProgres()
+          this.counter++
+          if (this.counter % 10 === 0) {
+            this.checkInvoiceBalance()
           }
         }, 1000)
-      }
+      },
+      
     },
     created: function () {
       console.log('### charge ', this.charge)
@@ -322,11 +330,9 @@
       // empty for onchain
       this.wallet.inkey = '{{ wallet_inkey }}'
 
-      this.getTheTime()
-      this.getThePercentage()
-      var timerCount = this.timerCount
+      this.refreshProgres()
       if (!this.charge.paid) {
-        timerCount()
+        this.loopRefresh()
       }
       this.startPaymentNotifier()
     }