feat: onchain payments (#53)

* feat: onchain payments

static/js/display.vue

@@ -80,20 +80,18 @@
               "
             ></q-select>
             <div class="row q-col-gutter-md q-pt-lg items-center">
-              <div v-if="allowFiatCheckout" class="col-auto">
+              <div v-if="showPaymentMethodSelector" class="col-auto">
                 <q-option-group
                   v-model="formDialog.data.payment_method"
                   inline
-                  :options="[
-                    {label: 'Lightning', value: 'lightning'},
-                    {
-                      label: fiatCheckoutLabel,
-                      value: 'fiat'
-                    }
-                  ]"
+                  :options="paymentMethodOptions"
                 ></q-option-group>
               </div>
-              <div :class="allowFiatCheckout ? 'col-12 col-md-3' : 'col-12'">
+              <div
+                :class="
+                  showPaymentMethodSelector ? 'col-12 col-md-3' : 'col-12'
+                "
+              >
                 <q-input
                   filled
                   dense
@@ -140,7 +138,7 @@
 
     <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
       <q-card
-        v-if="!receive.paymentReq"
+        v-if="!receive.paymentReq && !receive.isOnchain"
         class="q-pa-lg q-pt-xl lnbits__dialog-card"
       >
       </q-card>
@@ -175,6 +173,51 @@
           <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