add in ui

This commit is contained in:
Kukks 2018-10-28 18:55:25 +01:00
parent 2be1f97419
commit 9614721fa8
3 changed files with 194 additions and 67 deletions

View File

@ -1,36 +1,79 @@
using System;
using System.Collections.Generic;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Rendering;
using NBitcoin;
namespace BTCPayServer.Models.StoreViewModels
{
public class DerivationSchemeViewModel
{
private string _derivationScheme;
public DerivationSchemeViewModel()
{
}
public string DerivationScheme
{
get; set;
get => _derivationScheme;
set
{
_derivationScheme = value;
var split = _derivationScheme.Split("-");
ExtPubKey = split[0];
if (split.Length <= 1) return;
var suffix = "";
if (split.Length > 1)
{
suffix = "-" + split[1];
}
var type = AddressTypes.SingleOrDefault(addressType => addressType.Suffix == suffix);
AddressType = type?.Type;
}
}
public List<(string KeyPath, string Address)> AddressSamples
{
get; set;
} = new List<(string KeyPath, string Address)>();
public List<(string KeyPath, string Address)> AddressSamples { get; set; } =
new List<(string KeyPath, string Address)>();
public string CryptoCode { get; set; }
[Display(Name = "Hint address")]
public string HintAddress { get; set; }
[Display(Name = "Hint address")] public string HintAddress { get; set; }
public bool Confirmation { get; set; }
public bool Enabled { get; set; } = true;
public string ServerUrl { get; set; }
public string StatusMessage { get; internal set; }
public KeyPath RootKeyPath { get; set; }
[Display(Name = "xpub / ypub key")]
public string ExtPubKey { get; set; }
public string AddressType { get; set; }
public IEnumerable<AddressType> AddressTypes = new List<AddressType>()
{
new AddressType()
{
Suffix = "",
Type = "P2WPKH / Multi-sig P2WSH"
},
new AddressType()
{
Suffix = "-[p2sh]",
Type = "P2SH-P2WPKH / Multi-sig P2SH-P2WSH"
},
new AddressType()
{
Suffix = "-[legacy]",
Type = "P2PKH / Multi-sig P2SH"
}
};
}
public class AddressType
{
public string Type { get; set; }
public string Suffix { get; set; }
}
}

View File

@ -4,7 +4,7 @@
ViewData.SetActivePageAndTitle(StoreNavPages.Index, $"{Model.CryptoCode} Derivation scheme");
}
<partial name="_StatusMessage" for="StatusMessage" />
<partial name="_StatusMessage" for="StatusMessage"/>
<h4>@ViewData["Title"]</h4>
<div class="row">
@ -15,70 +15,97 @@
<div class="row">
<div class="col-md-8">
<form method="post">
@if(!Model.Confirmation)
@if (!Model.Confirmation)
{
<div class="form-group">
<h5>Derivation Scheme</h5>
<span>The DerivationScheme represents the destination of the funds received by your invoice. It is generated by your wallet software. Please, verify that you are generating the right addresses by clicking on 'Check ExtPubKey'</span>
</div>
<input id="CryptoCurrency" asp-for="CryptoCode" type="hidden" />
<div class="form-group">
<input id="CryptoCurrency" asp-for="CryptoCode" type="hidden"/>
<div class="pull-right">
<a href id="derivation-input-method" >Toggle Derivation Input method</a>
</div>
<div id="smart-derivation-input">
<div class="form-group">
<label asp-for="ExtPubKey"></label>
<input asp-for="ExtPubKey" class="form-control"/>
</div>
<div class="form-group">
<label asp-for="AddressType"></label>
<select asp-for="AddressType" class="form-control">
@foreach (var addressType in Model.AddressTypes)
{
<option value="@addressType.Type" data-suffix="@addressType.Suffix" > @addressType.Type </option>
}
</select>
</div>
</div>
<div class="form-group classic-derivation-input" style="display: none;">
<label asp-for="DerivationScheme"></label>
<input asp-for="DerivationScheme" class="form-control" />
<input asp-for="DerivationScheme" class="form-control"/>
</div>
<p>
<span asp-validation-for="DerivationScheme" class="text-danger"></span>
</p>
<div class="form-group">
<p id="no-ledger-info" class="form-text text-muted" style="display: none;">
No ledger wallet detected. If you own one, use chrome, open the app, and refresh this page.
</p>
<div id="ledger-info" class="form-text text-muted" style="display: none;">
<span>A ledger wallet is detected, which account do you want to use?</span>
<ul>
@for(int i = 0; i < 4; i++)
@for (int i = 0; i < 4; i++)
{
<li><a class="ledger-info-recommended" data-ledgeraccount="@i" href="#">Account @i (<span>@Model.RootKeyPath.Derive(i, true)</span>)</a></li>
<li>
<a class="ledger-info-recommended" data-ledgeraccount="@i" href="#">Account @i (<span>@Model.RootKeyPath.Derive(i, true)</span>)</a>
</li>
}
</ul>
</div>
</div>
<div class="form-group">
<div class="form-group classic-derivation-input" style="display: none;" >
<span>BTCPay format memo</span>
<table class="table table-sm table-responsive-md">
<thead>
<tr>
<th>Address type</th>
<th>Example</th>
</tr>
<tr>
<th>Address type</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>P2WPKH</td>
<td>xpub</td>
</tr>
<tr>
<td>P2SH-P2WPKH</td>
<td>xpub-[p2sh]</td>
</tr>
<tr>
<td>P2PKH</td>
<td>xpub-[legacy]</td>
</tr>
<tr>
<td>Multi-sig P2WSH</td>
<td>2-of-xpub1-xpub2</td>
</tr>
<tr>
<td>Multi-sig P2SH-P2WSH</td>
<td>2-of-xpub1-xpub2-[p2sh]</td>
</tr>
<tr>
<td>Multi-sig P2SH</td>
<td>2-of-xpub1-xpub2-[legacy]</td>
</tr>
<tr>
<td>P2WPKH</td>
<td>xpub</td>
</tr>
<tr>
<td>P2SH-P2WPKH</td>
<td>xpub-[p2sh]</td>
</tr>
<tr>
<td>P2PKH</td>
<td>xpub-[legacy]</td>
</tr>
<tr>
<td>Multi-sig P2WSH</td>
<td>2-of-xpub1-xpub2</td>
</tr>
<tr>
<td>Multi-sig P2SH-P2WSH</td>
<td>2-of-xpub1-xpub2-[p2sh]</td>
</tr>
<tr>
<td>Multi-sig P2SH</td>
<td>2-of-xpub1-xpub2-[legacy]</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<label asp-for="Enabled"></label>
<input asp-for="Enabled" type="checkbox" class="form-check" />
<input asp-for="Enabled" type="checkbox" class="form-check"/>
</div>
<button name="command" type="submit" class="btn btn-primary" value="save">Continue</button>
}
@ -88,25 +115,25 @@
<h5>Confirm the addresses (@Model.CryptoCode)</h5>
<span>Please check that your @Model.CryptoCode wallet is generating the same addresses as below.</span>
</div>
<input type="hidden" asp-for="Confirmation" />
<input type="hidden" asp-for="DerivationScheme" />
<input type="hidden" asp-for="Enabled" />
<input type="hidden" asp-for="Confirmation"/>
<input type="hidden" asp-for="DerivationScheme"/>
<input type="hidden" asp-for="Enabled"/>
<div class="form-group">
<table class="table table-sm table-responsive-md">
<thead>
<tr>
<th>Key path</th>
<th>Address</th>
</tr>
<tr>
<th>Key path</th>
<th>Address</th>
</tr>
</thead>
<tbody>
@foreach(var sample in Model.AddressSamples)
{
<tr>
<td>@sample.KeyPath</td>
<td>@sample.Address</td>
</tr>
}
@foreach (var sample in Model.AddressSamples)
{
<tr>
<td>@sample.KeyPath</td>
<td>@sample.Address</td>
</tr>
}
</tbody>
</table>
</div>
@ -117,7 +144,7 @@
</div>
<div class="form-group">
<label asp-for="HintAddress"></label>
<input asp-for="HintAddress" class="form-control" />
<input asp-for="HintAddress" class="form-control"/>
<span asp-validation-for="HintAddress" class="text-danger"></span>
</div>
<button name="command" type="submit" class="btn btn-primary" value="save">Confirm</button>
@ -129,7 +156,7 @@
@section Scripts {
@await Html.PartialAsync("_ValidationScriptsPartial")
<script type="text/javascript">
var srvModel = @Html.Raw(Json.Serialize(Model.ServerUrl));
var srvModel = @Html.Raw(Json.Serialize(Model.ServerUrl));
</script>
<script src="~/js/ledgerwebsocket.js" type="text/javascript" defer="defer"></script>
<script src="~/js/StoreAddDerivationScheme.js" type="text/javascript" defer="defer"></script>

View File

@ -1,14 +1,67 @@
$(function () {
var classicDerivationInputElement = $("#DerivationScheme");
var smartDerivationInputElement = $("#ExtPubKey");
var smartDerivationTypeElement = $("#AddressType");
var smartDerivationInputContainer = $("#smart-derivation-input");
var classDerivationInputContainer = $(".classic-derivation-input");
var derivationInputMethodElement = $("#derivation-input-method");
function toggleClassicDerivationInput() {
classDerivationInputContainer.toggle();
smartDerivationInputContainer.toggle();
}
function setClassicDerivationInput() {
var newVal = smartDerivationInputElement.val();
var typeSuffix = smartDerivationTypeElement.find(":selected").data("suffix");
newVal += typeSuffix;
classicDerivationInputElement.val(newVal);
}
classicDerivationInputElement.on("input", function () {
var newValue = $(this).val();
var split = newValue.split("-");
smartDerivationInputElement.val(split[0]);
var suffix = "";
var typeValue = "";
if (split.length > 1) {
suffix = "-" + split[1];
typeValue = smartDerivationTypeElement.find("[data-suffix='" + suffix + "']").attr("value");
}
if (!typeValue) {
smartDerivationTypeElement.find("[data-suffix]").each(function (i, x) {
x = $(x);
if (!x.data("data-suffix")) {
typeValue = x.val();
}
});
}
smartDerivationTypeElement.val(typeValue);
});
smartDerivationInputElement.on("input", setClassicDerivationInput);
smartDerivationTypeElement.on("input", setClassicDerivationInput);
derivationInputMethodElement.on("click", function (event) {
event.preventDefault();
toggleClassicDerivationInput();
});
var ledgerDetected = false;
var bridge = new ledgerwebsocket.LedgerWebSocketBridge(srvModel);
var cryptoSelector = $("#CryptoCurrency");
function GetSelectedCryptoCode() {
return cryptoSelector.val();
}
function WriteAlert(type, message) {
}
function Write(prefix, type, message) {
@ -29,7 +82,9 @@
$("#DerivationScheme").val(result.extPubKey);
$("#DerivationSchemeFormat").val("BTCPay");
})
.catch(function (reason) { Write('check', 'error', reason); });
.catch(function (reason) {
Write('check', 'error', reason);
});
return false;
});
@ -38,7 +93,9 @@
return false;
var cryptoCode = GetSelectedCryptoCode();
bridge.sendCommand("getxpub", "cryptoCode=" + cryptoCode)
.catch(function (reason) { Write('check', 'error', reason); })
.catch(function (reason) {
Write('check', 'error', reason);
})
.then(function (result) {
if (!result)
return;