Displaying Node Info as QR code for Lightning payments (#318)

* Styling elements required for Node info

* Allowing switching QR between bolt11 and node info for lightning

* Equal width for Bolt11 and Node info buttons

* Certain languages were too verbose for display of "Pay with"

Fixes: #317

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -307,7 +307,7 @@ namespace BTCPayServer.Controllers
         private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
             return paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
-                network.DisplayName : network.DisplayName + " (via Lightning)";
+                network.DisplayName : network.DisplayName + " (Lightning)";
         }
 
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)

BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@@ -188,9 +188,15 @@
         </form>
     </div>
     <div class="bp-view payment scan" id="scan">
+        <div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null }">
+            <div class="btnGroupLnd">
+                <button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }">{{$t("BOLT 11 Invoice")}}</button>
+                <button onclick="lndToggleNode()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 1 }">{{$t("Node Info")}}</button>
+            </div>
+        </div>
         <div class="payment__scan">
             <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
-            <qrcode v-bind:val="srvModel.invoiceBitcoinUrlQR" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
+            <qrcode v-bind:val="scanDisplayQr" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
             </qrcode>
         </div>
         <div class="payment__details__instruction__open-wallet">

BTCPayServer/Views/Invoice/Checkout.cshtml

@@ -151,6 +151,8 @@
             },
             data: {
                 srvModel: srvModel,
+                lndModel: null,
+                scanDisplayQr: "",
                 expiringSoon: false
             }
         });

BTCPayServer/wwwroot/checkout/css/normalizer.css

@@ -9236,7 +9236,7 @@ strong {
     }
 
     .bp-view.scan {
-        padding-top: .9em !important;
+        padding-top: 0em !important;
     }
 
     .bp-view:not(.active) {
@@ -9376,11 +9376,64 @@ strong {
     border-bottom: 1px dotted;
 }
 
+.wrapBtnGroup {
+    text-align: center;
+    margin: -2px 0px 12px;
+    padding: 0 15px;
+}
+
+.btnGroupLnd {
+    margin: 0 auto;
+    text-align: center;
+    width: inherit;
+    display: table;
+    background-color: #fff;
+    color: #000;
+    font-size: 0px;
+    width:100%;
+}
+
+    .btnGroupLnd button:first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+        border-right: 0px;
+    }
+
+    .btnGroupLnd button:last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+
+    .btnGroupLnd button {
+        display: table-cell;
+        border: solid 1px #24725B;
+        padding: 6px 9px;
+        margin: 0px;
+        font-size: 12px;
+        width: 50%;
+    }
+
+        .btnGroupLnd button:hover {
+            background-color: #eeffee;
+        }
+
+        .btnGroupLnd button.active {
+            background-color: #329F80;
+            border-color: #329F80;
+            color: #fff;
+        }
+
+            .btnGroupLnd button.active:hover {
+                background-color: #24725B;
+                border-color: #24725B;
+                color: #fff;
+            }
+
 .payment__details__instruction__open-wallet {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    margin: 15px 15px 18px;
+    margin: 0px 15px 18px;
     text-align: center;
 }
 

BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css

@@ -54,6 +54,7 @@
 
 .clickable_underline {
     border-bottom: 1px dotted #ccc;
+    font-size: 13px;
 }
 
 .payment__currencies:hover .clickable_underline {

BTCPayServer/wwwroot/checkout/js/core.js

@@ -20,6 +20,17 @@ function resetTabsSlider() {
     closePaymentMethodDialog(null);
 }
 
+function changeCurrency(currency) {
+    if (currency !== null && srvModel.paymentMethodId !== currency) {
+        $(".payment__currencies").hide();
+        $(".payment__spinner").show();
+        checkoutCtrl.scanDisplayQr = "";
+        srvModel.paymentMethodId = currency;
+        fetchStatus();
+    }
+    return false;
+}
+
 function onDataCallback(jsonData) {
     // extender properties used 
     jsonData.shapeshiftUrl = "https://shapeshift.io/shifty.html?destination=" + jsonData.btcAddress + "&output=" + jsonData.paymentMethodId + "&amount=" + jsonData.btcDue;
@@ -66,18 +77,24 @@ function onDataCallback(jsonData) {
         $(".payment__spinner").hide();
     }
 
-    // updating ui
+    if (checkoutCtrl.scanDisplayQr === "") {
-    checkoutCtrl.srvModel = jsonData;
+        checkoutCtrl.scanDisplayQr = jsonData.invoiceBitcoinUrlQR;
     }
 
-function changeCurrency(currency) {
+    if (jsonData.isLightning && checkoutCtrl.lndModel === null) {
-    if (currency !== null && srvModel.paymentMethodId !== currency) {
+        var lndModel = {
-        $(".payment__currencies").hide();
+            toggle: 0
-        $(".payment__spinner").show();
+        };
-        srvModel.paymentMethodId = currency;
+
-        fetchStatus();
+        checkoutCtrl.lndModel = lndModel;
     }
-    return false;
+
+    if (!jsonData.isLightning) {
+        checkoutCtrl.lndModel = null;
+    }
+
+    // updating ui
+    checkoutCtrl.srvModel = jsonData;
 }
 
 function fetchStatus() {
@@ -93,6 +110,16 @@ function fetchStatus() {
     });
 }
 
+function lndToggleBolt11() {
+    checkoutCtrl.lndModel.toggle = 0;
+    checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.invoiceBitcoinUrlQR;
+}
+
+function lndToggleNode() {
+    checkoutCtrl.lndModel.toggle = 1;
+    checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.peerInfo;
+}
+
 // private methods
 $(document).ready(function () {
     // initialize