From a729dd1380ad30444cf975738818c2a8d3e7f1f5 Mon Sep 17 00:00:00 2001
From: Kukks <evilkukka@gmail.com>
Date: Fri, 6 Nov 2020 08:41:03 +0100
Subject: [PATCH] Separate views of Bitcoin and LN

---
 BTCPayServer/BTCPayServer.csproj              |   4 -
 .../Payments/IPaymentMethodHandler.cs         |   8 +-
 .../Lightning/LightningLikePaymentHandler.cs  |  11 ++
 BTCPayServer/Payments/PaymentTypes.Bitcoin.cs |   2 +-
 .../Payments/PaymentTypes.Lightning.cs        |   2 +-
 .../EthereumLikePaymentMethodHandler.cs       |   2 +-
 .../Services/NBXSyncSummaryProvider.cs        |   2 +-
 .../BitcoinLikeMethodCheckout.cshtml}         |  68 +------
 .../BitcoinLikeMethodCheckoutNoScript.cshtml} |   4 -
 .../{ => Bitcoin}/NBXSyncSummary.cshtml       |   0
 .../ViewBitcoinLikePaymentData.cshtml         |   0
 .../LightningLikeMethodCheckout.cshtml        | 174 ++++++++++++++++++
 ...LightningLikeMethodCheckoutNoScript.cshtml |   9 +
 .../ViewLightningLikePaymentData.cshtml       |   0
 14 files changed, 210 insertions(+), 76 deletions(-)
 rename BTCPayServer/Views/Shared/{Bitcoin_Lightning_LikeMethodCheckout.cshtml => Bitcoin/BitcoinLikeMethodCheckout.cshtml} (76%)
 rename BTCPayServer/Views/Shared/{Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml => Bitcoin/BitcoinLikeMethodCheckoutNoScript.cshtml} (79%)
 rename BTCPayServer/Views/Shared/{ => Bitcoin}/NBXSyncSummary.cshtml (100%)
 rename BTCPayServer/Views/Shared/{ => Bitcoin}/ViewBitcoinLikePaymentData.cshtml (100%)
 create mode 100644 BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
 create mode 100644 BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckoutNoScript.cshtml
 rename BTCPayServer/Views/Shared/{ => Lightning}/ViewLightningLikePaymentData.cshtml (100%)

diff --git a/BTCPayServer/BTCPayServer.csproj b/BTCPayServer/BTCPayServer.csproj
index fc1a654ac..692df20b9 100644
--- a/BTCPayServer/BTCPayServer.csproj
+++ b/BTCPayServer/BTCPayServer.csproj
@@ -21,10 +21,6 @@
     <None Remove="Build\**" />
     <None Remove="wwwroot\bundles\jqueryvalidate\**" />
     <None Remove="wwwroot\vendor\jquery-nice-select\**" />
-    <Content Update="Views\Shared\NBXSyncSummary.cshtml">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Remove="Currencies.txt" />
diff --git a/BTCPayServer/Payments/IPaymentMethodHandler.cs b/BTCPayServer/Payments/IPaymentMethodHandler.cs
index acf5a4d1a..adb639591 100644
--- a/BTCPayServer/Payments/IPaymentMethodHandler.cs
+++ b/BTCPayServer/Payments/IPaymentMethodHandler.cs
@@ -76,10 +76,10 @@ namespace BTCPayServer.Payments
         {
             return new CheckoutUIPaymentMethodSettings()
             {
-                ExtensionPartial = "Bitcoin_Lightning_LikeMethodCheckout",
-                CheckoutBodyVueComponentName = "BitcoinLightningLikeMethodCheckout",
-                CheckoutHeaderVueComponentName = "BitcoinLightningLikeMethodCheckoutHeader",
-                NoScriptPartialName = "Bitcoin_Lightning_LikeMethodCheckoutNoScript"
+                ExtensionPartial = "Bitcoin/BitcoinLikeMethodCheckout",
+                CheckoutBodyVueComponentName = "BitcoinLikeMethodCheckout",
+                CheckoutHeaderVueComponentName = "BitcoinLikeMethodCheckoutHeader",
+                NoScriptPartialName = "Bitcoin/BitcoinLikeMethodCheckoutNoScript"
             };
         }
 
diff --git a/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs b/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs
index b1a7cacec..5490aba5f 100644
--- a/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs
+++ b/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs
@@ -199,6 +199,17 @@ namespace BTCPayServer.Payments.Lightning
             return GetPaymentMethodName(network);
         }
 
+        public override CheckoutUIPaymentMethodSettings GetCheckoutUISettings()
+        {
+            return new CheckoutUIPaymentMethodSettings()
+            {
+                ExtensionPartial = "Lightning/LightningLikeMethodCheckout",
+                CheckoutBodyVueComponentName = "LightningLikeMethodCheckout",
+                CheckoutHeaderVueComponentName = "LightningLikeMethodCheckoutHeader",
+                NoScriptPartialName = "Lightning/LightningLikeMethodCheckoutNoScript"
+            };
+        }
+
         private string GetPaymentMethodName(BTCPayNetworkBase network)
         {
             return $"{network.DisplayName} (Lightning)";
diff --git a/BTCPayServer/Payments/PaymentTypes.Bitcoin.cs b/BTCPayServer/Payments/PaymentTypes.Bitcoin.cs
index 0f2580e21..0c509540c 100644
--- a/BTCPayServer/Payments/PaymentTypes.Bitcoin.cs
+++ b/BTCPayServer/Payments/PaymentTypes.Bitcoin.cs
@@ -81,6 +81,6 @@ namespace BTCPayServer.Payments
             return bip21;
         }
 
-        public override string InvoiceViewPaymentPartialName { get; } = "ViewBitcoinLikePaymentData";
+        public override string InvoiceViewPaymentPartialName { get; } = "Bitcoin/ViewBitcoinLikePaymentData";
     }
 }
diff --git a/BTCPayServer/Payments/PaymentTypes.Lightning.cs b/BTCPayServer/Payments/PaymentTypes.Lightning.cs
index d69c4bb38..e63848580 100644
--- a/BTCPayServer/Payments/PaymentTypes.Lightning.cs
+++ b/BTCPayServer/Payments/PaymentTypes.Lightning.cs
@@ -61,6 +61,6 @@ namespace BTCPayServer.Payments
                 $"lightning:{paymentMethodDetails.GetPaymentDestination().ToUpperInvariant().Replace("LIGHTNING:", "", StringComparison.InvariantCultureIgnoreCase)}";
         }
 
-        public override string InvoiceViewPaymentPartialName { get; } = "ViewLightningLikePaymentData";
+        public override string InvoiceViewPaymentPartialName { get; } = "Lightning/ViewLightningLikePaymentData";
     }
 }
diff --git a/BTCPayServer/Services/Altcoins/Ethereum/Payments/EthereumLikePaymentMethodHandler.cs b/BTCPayServer/Services/Altcoins/Ethereum/Payments/EthereumLikePaymentMethodHandler.cs
index ffc6ba91b..69c8d5d08 100644
--- a/BTCPayServer/Services/Altcoins/Ethereum/Payments/EthereumLikePaymentMethodHandler.cs
+++ b/BTCPayServer/Services/Altcoins/Ethereum/Payments/EthereumLikePaymentMethodHandler.cs
@@ -108,7 +108,7 @@ namespace BTCPayServer.Services.Altcoins.Ethereum.Payments
                 ExtensionPartial = "Ethereum/EthereumLikeMethodCheckout",
                 CheckoutBodyVueComponentName = "EthereumLikeMethodCheckout",
                 CheckoutHeaderVueComponentName = "EthereumLikeMethodCheckoutHeader",
-                NoScriptPartialName = "Bitcoin_Lightning_LikeMethodCheckoutNoScript"
+                NoScriptPartialName = "Bitcoin/BitcoinLikeMethodCheckoutNoScript"
             };
         }
 
diff --git a/BTCPayServer/Services/NBXSyncSummaryProvider.cs b/BTCPayServer/Services/NBXSyncSummaryProvider.cs
index 32d4451af..460d03e10 100644
--- a/BTCPayServer/Services/NBXSyncSummaryProvider.cs
+++ b/BTCPayServer/Services/NBXSyncSummaryProvider.cs
@@ -17,6 +17,6 @@ namespace BTCPayServer.Services
             return _nbXplorerDashboard.IsFullySynched();
         }
 
-        public string Partial { get; } = "NBXSyncSummary";
+        public string Partial { get; } = "Bitcoin/NBXSyncSummary";
     }
 }
diff --git a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
similarity index 76%
rename from BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml
rename to BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
index 5fa2c1dc5..1974104a0 100644
--- a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml
+++ b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
@@ -1,25 +1,9 @@
 @using BTCPayServer.Services
 @model BTCPayServer.Models.InvoicingModels.PaymentModel
 
-<script type="text/x-template" id="bitcoin-lightning-method-checkout-template">
+<script type="text/x-template" id="bitcoin-method-checkout-template">
     <div>
         <div class="bp-view payment scan" id="scan" v-bind:class="{ 'active': currentTab == 'scan'}">
-            <div class="wrapBtnGroup" v-bind:class="{ invisible: !srvModel.isLightning || !scanDisplayQr }">
-                <div class="btnGroupLnd">
-                    <button 
-                            v-on:click="toggleLightningData('bolt11')" 
-                            v-bind:class="{ active: currentLightningDisplay === 'bolt11' }"
-                            v-bind:title="$t('BOLT 11 Invoice')">
-                            {{$t("BOLT 11 Invoice")}}
-                    </button>
-                    <button 
-                        v-on:click="toggleLightningData('node')" 
-                        v-bind:class="{ active: currentLightningDisplay === 'node' }"
-                        v-bind:title="$t('Node Info')">
-                        {{$t("Node Info")}}
-                    </button>
-                </div>
-            </div>
             <div class="payment__scan">
                 <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
                 <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
@@ -40,24 +24,7 @@
             <div class="copyLabelPopup">
                 <span>{{$t("Copied")}}</span>
             </div>
-            <nav v-if="srvModel.isLightning" class="copyBox">
-                <div class="copySectionBox bottomBorder">
-                    <label>{{$t("BOLT 11 Invoice")}}</label>
-                    <div class="inputWithIcon _copyInput">
-                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly"/>
-                        <img v-bind:src="srvModel.cryptoImage"/>
-                    </div>
-                </div>
-                <div class="separatorGem"></div>
-                <div class="copySectionBox">
-                    <label>{{$t("Node Info")}}</label>
-                    <div class="inputWithIcon _copyInput">
-                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly"/>
-                        <img v-bind:src="srvModel.cryptoImage"/>
-                    </div>
-                </div>
-            </nav>
-            <nav v-else class="copyBox">
+            <nav class="copyBox">
                 <div class="copySectionBox bottomBorder">
                     <label>{{$t("Amount")}}</label>
                     <div class="copyAmountText copy-cursor _copySpan">
@@ -86,14 +53,7 @@
         @if (Model.CoinSwitchEnabled)
         {
             <div id="altcoins" class="bp-view payment manual-flow" v-bind:class="{ 'active': currentTab == 'altcoins'}">
-                <nav v-if="srvModel.isLightning">
-                    <div class="manual__step-two__instructions">
-                        <span>
-                            {{$t("ConversionTab_Lightning")}}
-                        </span>
-                    </div>
-                </nav>
-                <nav v-else>
+                <nav>
                     <div class="manual__step-two__instructions">
                         <span>
                             {{$t("ConversionTab_BodyTop", srvModel)}}
@@ -143,7 +103,7 @@
     </div>          
 </script>
 
-<script type="text/x-template" id="bitcoin-lightning-method-checkout-header-template">
+<script type="text/x-template" id="bitcoin-method-checkout-header-template">
     <div class="payment-tabs">
         <div class="payment-tabs__tab " id="scan-tab" v-on:click="switchTab('scan')"  v-bind:class="{ 'active': currentTab == 'scan'}" >
             <span>{{$t("Scan")}}</span>
@@ -166,17 +126,16 @@
 </script>
 
 <script type="text/javascript">
-    Vue.component('BitcoinLightningLikeMethodCheckout',
+    Vue.component('BitcoinLikeMethodCheckout',
         {
             props: ["srvModel"],
-            template: "#bitcoin-lightning-method-checkout-template",
+            template: "#bitcoin-method-checkout-template",
             components: {
                 qrcode: VueQrcode,
                 coinswitch: CoinSwitchComponent
             },
             data: function() {
                 return {
-                    currentLightningDisplay: "bolt11",
                     selectedThirdPartyProcessor: "",
                     currentTab: "scan"
                 }
@@ -191,20 +150,9 @@
                         : this.srvModel.btcDue;
                 },
                 scanDisplayQr: function() {
-                    if (this.srvModel.isLightning && this.currentLightningDisplay === "node") {
-                        return this.srvModel.peerInfo;
-                    }
                     return this.srvModel.invoiceBitcoinUrlQR;
                 }
             },
-            methods: {
-                toggleLightningData: function(display) {
-                    if (!this.srvModel.isLightning) {
-                        return;
-                    }
-                    this.currentLightningDisplay = display;
-                }
-            },
             mounted: function() {
                 var self = this;
                 eventBus.$on("tab-switched",
@@ -214,9 +162,9 @@
         }
     });
 
-    Vue.component('BitcoinLightningLikeMethodCheckoutHeader', {
+    Vue.component('BitcoinLikeMethodCheckoutHeader', {
         props: ["srvModel"],
-        template: "#bitcoin-lightning-method-checkout-header-template",
+        template: "#bitcoin-method-checkout-header-template",
         data: function() {
             return {
                 currentTab: "scan"
diff --git a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckoutNoScript.cshtml
similarity index 79%
rename from BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml
rename to BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckoutNoScript.cshtml
index 257af8923..87b665d01 100644
--- a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml
+++ b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckoutNoScript.cshtml
@@ -5,8 +5,4 @@
     <p>
         <a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a>
     </p>
-    @if (Model.IsLightning)
-    {
-        <p>Peer Info: <b>@Model.PeerInfo</b></p>
-    }
 </div>
diff --git a/BTCPayServer/Views/Shared/NBXSyncSummary.cshtml b/BTCPayServer/Views/Shared/Bitcoin/NBXSyncSummary.cshtml
similarity index 100%
rename from BTCPayServer/Views/Shared/NBXSyncSummary.cshtml
rename to BTCPayServer/Views/Shared/Bitcoin/NBXSyncSummary.cshtml
diff --git a/BTCPayServer/Views/Shared/ViewBitcoinLikePaymentData.cshtml b/BTCPayServer/Views/Shared/Bitcoin/ViewBitcoinLikePaymentData.cshtml
similarity index 100%
rename from BTCPayServer/Views/Shared/ViewBitcoinLikePaymentData.cshtml
rename to BTCPayServer/Views/Shared/Bitcoin/ViewBitcoinLikePaymentData.cshtml
diff --git a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
new file mode 100644
index 000000000..ac0f173b1
--- /dev/null
+++ b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
@@ -0,0 +1,174 @@
+@using BTCPayServer.Services
+@model BTCPayServer.Models.InvoicingModels.PaymentModel
+
+<script type="text/x-template" id="lightning-method-checkout-template">
+    <div>
+        <div class="bp-view payment scan" id="scan" v-bind:class="{ 'active': currentTab == 'scan'}">
+            <div class="wrapBtnGroup" v-bind:class="{ invisible: !scanDisplayQr }">
+                <div class="btnGroupLnd">
+                    <button 
+                            v-on:click="toggleLightningData('bolt11')" 
+                            v-bind:class="{ active: currentLightningDisplay === 'bolt11' }"
+                            v-bind:title="$t('BOLT 11 Invoice')">
+                            {{$t("BOLT 11 Invoice")}}
+                    </button>
+                    <button 
+                        v-on:click="toggleLightningData('node')" 
+                        v-bind:class="{ active: currentLightningDisplay === 'node' }"
+                        v-bind:title="$t('Node Info')">
+                        {{$t("Node Info")}}
+                    </button>
+                </div>
+            </div>
+            <div class="payment__scan">
+                <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
+                <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
+                <div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
+                    <partial name="Checkout-Spinner"/>
+                </div>
+            </div>
+            <div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">
+                <a class="payment__details__instruction__open-wallet__btn action-button" target="_top" v-bind:href="srvModel.invoiceBitcoinUrl">
+                    <span>{{$t("Open in wallet")}}</span>
+                </a>
+            </div>
+        </div>
+        <div class="bp-view payment manual-flow" id="copy" v-bind:class="{ 'active': currentTab == 'copy'}">
+            <div class="manual__step-two__instructions">
+                <span v-html="$t('CompletePay_Body', srvModel)"></span>
+            </div>
+            <div class="copyLabelPopup">
+                <span>{{$t("Copied")}}</span>
+            </div>
+            <nav  class="copyBox">
+                <div class="copySectionBox bottomBorder">
+                    <label>{{$t("BOLT 11 Invoice")}}</label>
+                    <div class="inputWithIcon _copyInput">
+                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly"/>
+                        <img v-bind:src="srvModel.cryptoImage"/>
+                    </div>
+                </div>
+                <div class="separatorGem"></div>
+                <div class="copySectionBox">
+                    <label>{{$t("Node Info")}}</label>
+                    <div class="inputWithIcon _copyInput">
+                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly"/>
+                        <img v-bind:src="srvModel.cryptoImage"/>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>          
+</script>
+
+<script type="text/x-template" id="lightning-method-checkout-header-template">
+    <div class="payment-tabs">
+        <div class="payment-tabs__tab " id="scan-tab" v-on:click="switchTab('scan')"  v-bind:class="{ 'active': currentTab == 'scan'}" >
+            <span>{{$t("Scan")}}</span>
+        </div>
+        <div class="payment-tabs__tab" id="copy-tab" v-on:click="switchTab('copy')"  v-bind:class="{ 'active': currentTab == 'copy'}" >
+            <span>{{$t("Copy")}}</span>
+        </div>
+        <div id="tabsSlider" class="payment-tabs__slider"  v-bind:class="['slide-'+currentTab]"></div>
+    </div>
+</script>
+
+<script type="text/javascript">
+    Vue.component('LightningLikeMethodCheckout',
+        {
+            props: ["srvModel"],
+            template: "#lightning-method-checkout-template",
+            components: {
+                qrcode: VueQrcode
+            },
+            data: function() {
+                return {
+                    currentLightningDisplay: "bolt11",
+                    selectedThirdPartyProcessor: "",
+                    currentTab: "scan"
+                }
+            },
+            computed: {
+                scanDisplayQr: function() {
+                    if (this.currentLightningDisplay === "node") {
+                        return this.srvModel.peerInfo;
+                    }
+                    return this.srvModel.invoiceBitcoinUrlQR;
+                }
+            },
+            methods: {
+                toggleLightningData: function(display) {
+                    this.currentLightningDisplay = display;
+                }
+            },
+            mounted: function() {
+                var self = this;
+                eventBus.$on("tab-switched",
+                    function(tab) {
+                        self.currentTab = tab;
+            });
+        }
+    });
+
+    Vue.component('LightningLikeMethodCheckoutHeader', {
+        props: ["srvModel"],
+        template: "#lightning-method-checkout-header-template",
+        data: function() {
+            return {
+                currentTab: "scan"
+            };
+        },
+        methods: {
+            switchTab: function(tab) {
+                this.currentTab = tab;
+                eventBus.$emit("tab-switched", tab);
+            }
+        }
+    });
+
+    $(document).ready(function() {
+        // Clipboard Copy
+        var copySpan = new Clipboard('._copySpan', {
+                target: function(trigger) {
+                    return copyElement(trigger, 0, 65).firstChild;
+                }
+        });
+        var copyInput = new Clipboard('._copyInput', {
+                target: function(trigger) {
+                    return copyElement(trigger, 4, 65).firstChild;
+                }
+        });
+
+        function copyElement(trigger, popupLeftModifier, popupTopModifier) {
+            var elm = $(trigger);
+            var position = elm.offset();
+            position.top -= popupLeftModifier + $(window).scrollTop();
+            position.left += (elm.width() / 2) - popupTopModifier;
+            $(".copyLabelPopup").css(position).addClass("copied");
+            elm.removeClass("copy-cursor").addClass("clipboardCopied");
+            setTimeout(clearSelection, 100);
+            setTimeout(function() {
+                    elm.removeClass("clipboardCopied").addClass("copy-cursor");
+                    $(".copyLabelPopup").removeClass("copied");
+                },
+                1000);
+            return trigger;
+        }
+
+        function clearSelection() {
+            if (window.getSelection) {
+                window.getSelection().removeAllRanges();
+            } else if (document.selection) {
+                document.selection.empty();
+            }
+        }
+        // Disable enter key
+        $(document).keypress(
+            function(event) {
+                if (event.which === '13') {
+                    event.preventDefault();
+                }
+            }
+        );
+    });
+</script>
diff --git a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckoutNoScript.cshtml b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckoutNoScript.cshtml
new file mode 100644
index 000000000..1492adf31
--- /dev/null
+++ b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckoutNoScript.cshtml
@@ -0,0 +1,9 @@
+@model PaymentModel
+<div>
+    <p>To complete payment, please send <b>@Model.BtcDue @Model.CryptoCode</b> to <b style="word-break: break-word;">@Model.BtcAddress</b></p>
+    <p>Time remaining: @Model.TimeLeft</p>
+    <p>
+        <a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a>
+    </p>
+    <p>Peer Info: <b>@Model.PeerInfo</b></p>
+</div>
diff --git a/BTCPayServer/Views/Shared/ViewLightningLikePaymentData.cshtml b/BTCPayServer/Views/Shared/Lightning/ViewLightningLikePaymentData.cshtml
similarity index 100%
rename from BTCPayServer/Views/Shared/ViewLightningLikePaymentData.cshtml
rename to BTCPayServer/Views/Shared/Lightning/ViewLightningLikePaymentData.cshtml