fix: use satspay for onchain payments (#56)

* use satspay
* safeguard satspay
* add fasttrack and 0conf

static/js/display.js

@@ -27,11 +27,7 @@ window.PageEventsDisplay = {
         show: false,
         status: 'pending',
         paymentReq: null,
-        isFiat: false,
-        isOnchain: false,
-        onchainAddress: null,
-        onchainAmountSat: 0,
-        mempoolEndpoint: null
+        isFiat: false
       },
       paymentDismissMsg: null,
       paymentWebsocket: null
@@ -99,16 +95,6 @@ window.PageEventsDisplay = {
         options.push({label: 'Bitcoin', value: 'onchain'})
       }
       return options
-    },
-    onchainPaymentUri() {
-      if (!this.receive.onchainAddress) return ''
-      const btc = (this.receive.onchainAmountSat / 100000000).toFixed(8)
-      return `bitcoin:${this.receive.onchainAddress}?amount=${btc}`
-    },
-    mempoolAddressUrl() {
-      if (!this.receive.onchainAddress || !this.receive.mempoolEndpoint)
-        return null
-      return `${this.receive.mempoolEndpoint}/address/${this.receive.onchainAddress}`
     }
   },
   methods: {
@@ -161,11 +147,7 @@ window.PageEventsDisplay = {
         show: false,
         status: 'pending',
         paymentReq: null,
-        isFiat: false,
-        isOnchain: false,
-        onchainAddress: null,
-        onchainAmountSat: 0,
-        mempoolEndpoint: null
+        isFiat: false
       }
     },
     nameValidation(val) {
@@ -203,11 +185,7 @@ window.PageEventsDisplay = {
         show: false,
         status: 'complete',
         paymentReq: null,
-        isFiat: false,
-        isOnchain: false,
-        onchainAddress: null,
-        onchainAmountSat: 0,
-        mempoolEndpoint: null
+        isFiat: false
       }
       this.ticketLink = {
         show: true,
@@ -235,13 +213,15 @@ window.PageEventsDisplay = {
               : 'lightning'
           }
         )
-        const isOnchain = Boolean(data.onchain_address)
-        const isFiat = !isOnchain && Boolean(data.is_fiat)
+        if (data.satspay_charge_url) {
+          window.location.href = data.satspay_charge_url
+          return
+        }
+
+        const isFiat = Boolean(data.is_fiat)
         this.paymentReq = isFiat
           ? data.fiat_payment_request || null
-          : isOnchain
-            ? null
-            : data.payment_request
+          : data.payment_request
         this.paymentHash = data.payment_hash
 
         this.paymentDismissMsg = Quasar.Notify.create({
@@ -252,11 +232,7 @@ window.PageEventsDisplay = {
           show: true,
           status: 'pending',
           paymentReq: this.paymentReq,
-          isFiat,
-          isOnchain,
-          onchainAddress: data.onchain_address || null,
-          onchainAmountSat: data.onchain_amount_sat || 0,
-          mempoolEndpoint: data.onchain_mempool_endpoint || null
+          isFiat
         }
         if (isFiat && this.paymentReq) {
           window.open(this.paymentReq, '_blank', 'noopener')
@@ -291,8 +267,12 @@ window.PageEventsDisplay = {
         console.error('WebSocket error:', error)
       }
       ws.onclose = () => {
-        if (this.paymentWebsocket === ws) {
-          this.paymentWebsocket = null
+        if (this.paymentWebsocket !== ws) return
+        this.paymentWebsocket = null
+        if (this.receive.show) {
+          setTimeout(() => {
+            if (this.receive.show) this.paymentWatcher(paymentHash)
+          }, 3000)
         }
       }
     }

static/js/display.vue

@@ -138,7 +138,7 @@
 
     <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
       <q-card
-        v-if="!receive.paymentReq && !receive.isOnchain"
+        v-if="!receive.paymentReq"
         class="q-pa-lg q-pt-xl lnbits__dialog-card"
       >
       </q-card>
@@ -173,51 +173,6 @@
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
         </div>
       </q-card>
-      <q-card
-        v-else-if="receive.isOnchain"
-        class="q-pa-lg q-pt-xl lnbits__dialog-card"
-      >
-        <div class="text-center q-mb-lg">
-          <div class="text-h6 q-mb-sm">Pay with Bitcoin</div>
-          <lnbits-qrcode
-            :href="onchainPaymentUri"
-            :value="onchainPaymentUri.toUpperCase()"
-          ></lnbits-qrcode>
-          <div class="text-body1 q-mt-md">
-            <strong
-              >{{
-                (receive.onchainAmountSat / 100000000).toFixed(8)
-              }}
-              BTC</strong
-            >
-          </div>
-          <div
-            class="text-caption text-grey q-mt-xs"
-            style="word-break: break-all"
-          >
-            {{ receive.onchainAddress }}
-          </div>
-        </div>
-        <div class="row q-mt-lg q-col-gutter-sm">
-          <q-btn
-            outline
-            color="grey"
-            @click="utils.copyText(receive.onchainAddress)"
-            >Copy address</q-btn
-          >
-          <q-btn
-            v-if="mempoolAddressUrl"
-            outline
-            color="grey"
-            type="a"
-            :href="mempoolAddressUrl"
-            target="_blank"
-            rel="noopener"
-            >View on mempool</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
-        </div>
-      </q-card>
       <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
         <div class="text-center q-mb-lg">
           <lnbits-qrcode

static/js/index.js

@@ -442,6 +442,8 @@ window.PageEvents = {
             nostr_notifications: false,
             onchain_enabled: false,
             onchain_wallet_id: null,
+            onchain_zeroconf: false,
+            onchain_fasttrack: false,
             ticket_waves: [
               {
                 id: 'primary',

static/js/index.vue

@@ -616,13 +616,14 @@
 
           <q-expansion-item
             group="advanced"
-            icon="currency_bitcoin"
+            icon="view_in_ar"
             label="Onchain payments"
           >
             <div class="q-mt-lg">
               <div class="text-caption q-mb-md">
-                Accept Bitcoin onchain payments. Requires the Watchonly
-                extension.
+                Accept Bitcoin onchain payments. Requires the
+                <strong>SatsPay</strong> and <strong>Watchonly</strong>
+                extensions to be installed and enabled.
               </div>
               <q-toggle
                 v-model="formDialog.data.extra.onchain_enabled"
@@ -647,6 +648,18 @@
                 map-options
                 hint="Bitcoin watchonly wallet for receiving onchain payments"
               ></q-select>
+              <div v-if="formDialog.data.extra.onchain_enabled" class="q-mt-md">
+                <q-toggle
+                  v-model="formDialog.data.extra.onchain_zeroconf"
+                  label="Zero-conf (accept unconfirmed transactions)"
+                  left-label
+                ></q-toggle>
+                <q-toggle
+                  v-model="formDialog.data.extra.onchain_fasttrack"
+                  label="Fasttrack (treat pending as paid)"
+                  left-label
+                ></q-toggle>
+              </div>
             </div>
           </q-expansion-item>