bump

We'll need to heavily refactor this HTML and CSS... way to many styles and complex structure

BTCPayServer/BTCPayServer.csproj

@@ -2,7 +2,7 @@
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>netcoreapp2.0</TargetFramework>
-		<Version>1.0.1.70</Version>
+		<Version>1.0.1.71</Version>
     <NoWarn>NU1701,CA1816,CA1308,CA1810,CA2208</NoWarn>
   </PropertyGroup>
   <ItemGroup>

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -21,6 +21,7 @@ using System.Threading;
 using BTCPayServer.Events;
 using NBXplorer;
 using BTCPayServer.Payments;
+using BTCPayServer.Payments.Lightning;
 
 namespace BTCPayServer.Controllers
 {
@@ -229,6 +230,7 @@ namespace BTCPayServer.Controllers
                 InvoiceBitcoinUrl = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 :
                                     paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11 :
                                     throw new NotSupportedException(),
+                PeerInfo = (paymentMethodDetails as LightningLikePaymentMethodDetails)?.NodeInfo,
                 InvoiceBitcoinUrlQR = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 :
                                     paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11.ToUpperInvariant() :
                                     throw new NotSupportedException(),

BTCPayServer/Models/InvoicingModels/PaymentModel.cs

@@ -49,5 +49,6 @@ namespace BTCPayServer.Models.InvoicingModels
         public string PaymentMethodId { get; internal set; }
 
         public bool AllowCoinConversion { get; set; }
+        public string PeerInfo { get; set; }
     }
 }

BTCPayServer/Services/LanguageService.cs

@@ -29,6 +29,7 @@ namespace BTCPayServer.Services
                 new Language("pt-BR", "Portuguese (Brazil)"),
                 new Language("nl-NL", "Dutch"),
                 new Language("cs-CZ", "Česky"),
+                new Language("is-IS", "Íslenska"),
             };
         }
     }

BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@@ -3,7 +3,7 @@
 <div class="top-header">
     <div class="header">
         <div class="header__icon">
-            @if(Model.CustomLogoLink != null)
+            @if (Model.CustomLogoLink != null)
             {
                 <img class="header__icon__img" src="@Model.CustomLogoLink" height="40">
             }
@@ -33,7 +33,7 @@
     </div>
 </div>
 <div class="order-details">
-    @if(Model.AvailableCryptos.Count > 1)
+    @if (Model.AvailableCryptos.Count > 1)
     {
         <div class="currency-selection">
             <div class="single-item-order__left">
@@ -43,7 +43,7 @@
             </div>
             <div class="single-item-order__right">
                 <div class="payment__currencies">
-                    @foreach(var crypto in Model.AvailableCryptos)
+                    @foreach (var crypto in Model.AvailableCryptos)
                     {
                         <a href="@crypto.Link" onclick="return changeCurrency('@crypto.PaymentMethodId');">
                             <img style="height:32px; margin-left:5px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
@@ -108,7 +108,7 @@
         <div class="payment-tabs__tab" id="copy-tab">
             <span>{{$t("Copy")}}</span>
         </div>
-        @if(Model.AllowCoinConversion)
+        @if (Model.AllowCoinConversion)
         {
             <div class="payment-tabs__tab" id="altcoins-tab">
                 <span>{{$t("Conversion")}}</span>
@@ -160,57 +160,59 @@
             </a>
         </div>
     </div>
+
     <div class="bp-view payment manual-flow" id="copy">
         <div class="manual__step-two__instructions">
             <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
         </div>
-        <div class="manual-box flipped" style="margin-bottom: 30px;">
-            <div class="manual-box__amount">
-                <div class="manual-box__amount__label label">{{$t("Amount")}}</div>
-
-                <div class="manual-box__amount__value copy-cursor" ngxclipboard="">
-                    <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
-                    <div class="copied-label">
-                        <span>{{$t("Copied")}}</span>
-                    </div>
-                </div>
-
-            </div>
-            <div class="manual-box__address">
-                <div class="flipper flipped-initially">
-                    <div class="back"></div>
-                    <div class="front">
-                        <div class="manual-box__address__arrow"></div>
-                        <div class="manual-box__address__label label">{{$t("Address")}}</div>
-
-                        <div class="manual-box__address__value copy-cursor" ngxclipboard="">
-                            <div class="manual-box__address__wrapper">
-                                <div class="manual-box__address__wrapper__logo">
-                                    <img :src="srvModel.cryptoImage" height="16" />
-                                </div>
-                                <div class="manual-box__address__wrapper__value" style="overflow:hidden;max-width:240px;">{{srvModel.btcAddress}}</div>
-                            </div>
-                            <div class="copied-label" style="top: 5px;">
-                                <span>{{$t("Copied")}}</span>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
+        <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("Peer 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">
+            <div class="copySectionBox bottomBorder">
+                <label>{{$t("Amount")}}</label>
+                <div class="copyAmountText copy-cursor _copySpan">
+                    <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
+                </div>
+            </div>
+            <div class="separatorGem"></div>
+            <div class="copySectionBox">
+                <label>{{$t("Address")}}</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>
+        </nav>
     </div>
-    @if(Model.AllowCoinConversion)
+    @if (Model.AllowCoinConversion)
     {
         <div id="altcoins" class="bp-view payment manual-flow">
-            <div v-if="srvModel.isLightning">
+            <nav v-if="srvModel.isLightning">
                 <div class="manual__step-two__instructions">
                     <span>
                         {{$t("ConversionTab_Lightning")}}
                     </span>
                 </div>
-            </div>
-            <div v-else>
+            </nav>
+            <nav v-else>
                 <div class="manual__step-two__instructions">
                     <span>
                         {{$t("ConversionTab_BodyTop", srvModel)}}
@@ -230,7 +232,7 @@
                             <img src="https://changelly.com/pay_button_pay_with.png" alt="Changelly" />
                         </a>*@
                 </center>
-            </div>
+            </nav>
         </div>
     }
 

BTCPayServer/Views/Invoice/Checkout.cshtml

@@ -112,7 +112,8 @@
                 'fr-FR': { translation: locales_fr },
                 'pt-BR': { translation: locales_pt_br },
                 'nl': { translation: locales_nl },
-                'cs-CZ': { translation: locales_cs }
+                'cs-CZ': { translation: locales_cs },
+                'is-IS': { translation: locales_is }
             },
         });
 

BTCPayServer/wwwroot/css/normalizer.css

@@ -8625,10 +8625,10 @@ strong {
         max-height: 300px;
     }
 
-.copy-cursor {
-    cursor: copy;
-}
-
+/* 
+    After refactoring Copy tab, this section until EOF REFACTOR can likely be deleted 
+    Leaving it since there are some references in refund that I need to look into
+*/
 .manual-box {
     border-radius: 5px;
     margin-left: calc(-40px + 10%);
@@ -8882,6 +8882,10 @@ strong {
         opacity: 1;
     }
 
+    .manual-box__address__value .copied-label {
+        margin-top: 5px;
+    }
+
 .manual-box__address__wrapper {
     background: rgba(182, 182, 182, 0.13);
     border: 1px solid rgba(77, 77, 77, 0.07);
@@ -8903,6 +8907,7 @@ strong {
     font-size: 10.2px;
     color: #4A4A4A;
 }
+/* EOF REFACTOR */
 
 .status-block {
     position: relative;
@@ -11286,3 +11291,128 @@ low-fee-timeline {
 .no-bounce * .status-icon__wrapper__outline {
     animation: none !important;
 }
+
+
+/* checkout additions */
+.copyBox {
+    text-align: center;
+    position: relative;
+    border-radius: 5px;
+    border: 1px solid #E9E9E9;
+    background: #fff;
+}
+
+.copySectionBox {
+    padding: 12px;
+}
+
+    .copySectionBox label {
+        text-transform: uppercase;
+        font-size: 10px;
+        color: #515664;
+        opacity: .5;
+        letter-spacing: .6px;
+        margin-bottom: 10px;
+    }
+
+    .copySectionBox.bottomBorder {
+        border-bottom: 1px solid #e9e9e9;
+    }
+
+.separatorGem {
+    position: relative;
+    height: 10px;
+    width: 10px;
+    left: 50%;
+    border-right: 1px solid #E9E9E9;
+    border-bottom: 1px solid #E9E9E9;
+    transform: rotateZ(45deg);
+    margin-left: -5px;
+    top: -5px;
+    background: #329F80;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    margin-bottom: -10px;
+}
+
+.checkoutTextbox {
+    width: 100%;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+    outline: none;
+    padding: 8px 10px;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    transition: .3s;
+    font-size: 11px;
+    color: #4a4a4a;
+    cursor: copy;
+}
+
+.inputWithIcon .checkoutTextbox {
+    padding-left: 40px;
+}
+
+.inputWithIcon {
+    position: relative;
+}
+
+    .inputWithIcon img {
+        position: absolute;
+        left: 2px;
+        top: 8px;
+        color: #aaa;
+        height: 16px;
+        padding: 0px 6px;
+        border-right: 1px solid #e9e9e9;
+    }
+
+    .inputWithIcon.inputIconBg img {
+        background-color: #aaa;
+        color: #fff;
+        padding: 9px 4px;
+        border-radius: 4px 0 0 4px;
+    }
+
+.copyAmountText {
+    color: #4A4A4A;
+    font-size: 30px;
+    font-weight: 300;
+    letter-spacing: 1px;
+    margin-top: -10px;
+    position: relative;
+}
+
+.copy-cursor {
+    cursor: copy;
+}
+
+.clipboardCopied {
+    transition: opacity 1s ease;
+    opacity: 0;
+}
+
+.copyLabelPopup {
+    pointer-events: none;
+    cursor: default;
+    transition: opacity 1s ease;
+    position: fixed;
+    width: 130px;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    font-weight: 300;
+    font-size: 14px;
+    color: white;
+    background: #4A4A4A;
+    padding: 10px 40px;
+    border-radius: 3px;
+    letter-spacing: .5px;
+    z-index: 999999;
+}
+
+    .copyLabelPopup.copied {
+        pointer-events: auto;
+        opacity: 1;
+        transition: opacity 1s ease;
+    }

BTCPayServer/wwwroot/js/checkout/core.js

@@ -306,26 +306,39 @@ $(document).ready(function () {
         }
     }
 
-    // Manual Copy
-    // Amount
-    var copyAmount = new Clipboard('.manual-box__amount__value', {
-        target: function () {
-            var $el = $(".manual-box__amount__value");
-            $el.removeClass("copy-cursor").addClass("copied");
-            setTimeout(function () { $el.removeClass("copied").addClass("copy-cursor"); }, 500);
-            return document.querySelector('.manual-box__amount__value span');
+    // Clipboard Copy
+    var copyAmount = new Clipboard('._copySpan', {
+        target: function (trigger) {
+            return copyElement(trigger, 0, 65).firstChild;
         }
     });
-    // Address
-    var copyAddress = new Clipboard('.manual-box__address__value', {
-        target: function () {
-            var $elm = $(".manual-box__address__value");
-            $elm.removeClass("copy-cursor").addClass("copied");
-            setTimeout(function () { $elm.removeClass("copied").addClass("copy-cursor"); }, 500);
-            return document.querySelector('.manual-box__address__value .manual-box__address__wrapper .manual-box__address__wrapper__value');
+    var copyAmount = 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;
+        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(); }
+    }
+    // EOF Copy
+
     // Disable enter key
     $(document).keypress(
         function (event) {

BTCPayServer/wwwroot/js/checkout/langs/en.js

@@ -44,5 +44,8 @@ You can return to {{storeName}} if you would like to submit your payment again."
     "This invoice has been paid": "This invoice has been paid",
     // Invoice archived
     "This invoice has been archived": "This invoice has been archived",
-    "Archived_Body": "Please contact the store for order information or assistance"
+    "Archived_Body": "Please contact the store for order information or assistance",
+    // Lightning
+    "BOLT 11 Invoice": "BOLT 11 Invoice",
+    "Peer Info": "Peer Info"
 };

BTCPayServer/wwwroot/js/checkout/langs/is.js

@@ -0,0 +1,48 @@
+const locales_is = {
+    nested: {
+        lang: 'Tungumál'
+    },
+    "Awaiting Payment...": "Bíð eftir greiðslu...",
+    "Pay with": "Borga með",
+    "Contact and Refund Email": "Netfang",
+    "Contact_Body": "Við munum hafa samband við þig á þessu netfangi ef það er vandamál með greiðsluna þína.",
+    "Your email": "Þitt netfang",
+    "Continue": "Áfram",
+    "Please enter a valid email address": "Þú verður að nota gilt netfang",
+    "Order Amount": "Upphæð",
+    "Network Cost": "Auka gjöld",
+    "Already Paid": "Nú þegar greitt",
+    "Due": "Due",
+    // Tabs
+    "Scan": "Skanna",
+    "Copy": "Afrita",
+    "Conversion": "Umbreyting",
+    // Scan tab
+    "Open in wallet": "Opna með veski",
+    // Copy tab
+    "CompletePay_Body": "Til að klára greiðsluna skaltu senda {{btcDue}} {{cryptoCode}} á lykilinn fyrir neðan.",
+    "Amount": "Magn",
+    "Address": "Lykill",
+    "Copied": "Afritað",
+    // Conversion tab
+    "ConversionTab_BodyTop": "Þú getur borgað {{btcDue}} {{cryptoCode}} með altcoins.",
+    "ConversionTab_BodyDesc": "Þessi þjónusta er veitt af þriðja aðila. Mundu að við höfum ekki stjórn á því hvernig birgja vilja senda peningana þína. Reikningur verður aðeins merktur þegar móttekinir eru á {{cryptoCode}} Blockchain.",
+    "Shapeshift_Button_Text": "Borga með Altcoins",
+    "ConversionTab_Lightning": "Engir viðskiptaveitendur eru í boði fyrir Lightning Network greiðslur.",
+    // Invoice expired
+    "Invoice expiring soon...": "Innheimt rennur út fljótlega...",
+    "Invoice expired": "Innheimt útrunnin",
+    "What happened?": "Hvað gerðist?",
+    "InvoiceExpired_Body_1": "Þessi innheimtun er útrunnin. Innheimtun er aðeins gild í {{maxTimeMinutes}} mínútur.  \
+Þú getur farið aftur á {{storeName}} ef þú vilt reyna aftur.",
+    "InvoiceExpired_Body_2": "Ef þú reyndir að senda greiðslu, þá hefur hún ekki verið samþykkt.",
+    "InvoiceExpired_Body_3": "Ef viðskiptin eru ekki samþykkt af Bitcoin netinu verða fjármunirnir aðgengilegar aftur í veskinu þínu. Það fer eftir veskinu þínu og getur tekið 48-72 klukkustundir.",
+    "Invoice ID": "Innheimtu ID",
+    "Order ID": "Pöntun ID",
+    "Return to StoreName": "Fara aftur á {{storeName}}",
+    // Invoice paid
+    "This invoice has been paid": "Þetta hefur verið greitt",
+    // Invoice archived
+    "This invoice has been archived": "Þessi innheimta hefur verið gerð ógild",
+    "Archived_Body": "Vinsamlega hafðu samband fyrir upplýsingar eða aðstoð."
+};