aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-18 14:34:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding PeerInfo textbox

Browse Source 
We'll need to heavily refactor this HTML and CSS... way to many styles and complex structure
This commit is contained in:
lepipele
2018-03-28 02:13:00 -05:00
committed by nicolas.dorier
parent 46f94d7175
commit a171e00280
5 changed files with 91 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
BTCPayServer/Controllers/InvoiceController.UI.cs
View File

@@ -229,6 +229,9 @@ namespace BTCPayServer.Controllers
InvoiceBitcoinUrl = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 : InvoiceBitcoinUrl = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 :
paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11 : paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11 :
throw new NotSupportedException(), throw new NotSupportedException(),
// TEST PLACEHOLDER FOR PEER INFO DATA... REPLACE!
PeerInfo = "039cc950286a8fa99218283d1adc2456e0d5e81be558da77dd6e85ba9a1fff5ad3@34.200.252.146",
// EOF
InvoiceBitcoinUrlQR = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 : InvoiceBitcoinUrlQR = paymentMethodId.PaymentType == PaymentTypes.BTCLike ? cryptoInfo.PaymentUrls.BIP21 :
paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11.ToUpperInvariant() : paymentMethodId.PaymentType == PaymentTypes.LightningLike ? cryptoInfo.PaymentUrls.BOLT11.ToUpperInvariant() :
throw new NotSupportedException(), throw new NotSupportedException(),

1
BTCPayServer/Models/InvoicingModels/PaymentModel.cs
View File

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

104
BTCPayServer/Views/Invoice/Checkout-Body.cshtml
View File

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

4
BTCPayServer/wwwroot/css/normalizer.css
View File

@@ -8882,6 +8882,10 @@ strong {
opacity: 1; opacity: 1;
} }
.manual-box__address__value .copied-label {
margin-top: 5px;
}
.manual-box__address__wrapper { .manual-box__address__wrapper {
background: rgba(182, 182, 182, 0.13); background: rgba(182, 182, 182, 0.13);
border: 1px solid rgba(77, 77, 77, 0.07); border: 1px solid rgba(77, 77, 77, 0.07);

15
BTCPayServer/wwwroot/js/checkout/core.js
View File

@@ -317,12 +317,21 @@ $(document).ready(function () {
} }
}); });
// Address // Address
var copyAddress = new Clipboard('.manual-box__address__value', { var copyAddress = new Clipboard('#btcAddress', {
target: function () { target: function () {
var $elm = $(".manual-box__address__value"); var $elm = $("#btcAddress");
$elm.removeClass("copy-cursor").addClass("copied"); $elm.removeClass("copy-cursor").addClass("copied");
setTimeout(function () { $elm.removeClass("copied").addClass("copy-cursor"); }, 500); 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'); return document.querySelector('#btcAddressValue');
}
});
// PeerInfo
var copyAddress = new Clipboard('#peerInfo', {
target: function () {
var $elm = $("#peerInfo");
$elm.removeClass("copy-cursor").addClass("copied");
setTimeout(function () { $elm.removeClass("copied").addClass("copy-cursor"); }, 500);
return document.querySelector('#peerInfoValue');
} }
}); });