add in ui

BTCPayServer/Models/StoreViewModels/DerivationSchemeViewModel.cs

@@ -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];
                 }
 
-        public List<(string KeyPath, string Address)> AddressSamples
+                var type = AddressTypes.SingleOrDefault(addressType => addressType.Suffix == suffix);
-        {
+                AddressType = type?.Type;
-            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")]
+        [Display(Name = "Hint address")] public string HintAddress { get; set; }
-        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; }
     }
 }

BTCPayServer/Views/Stores/AddDerivationScheme.cshtml

@@ -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,31 +15,58 @@
 <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" />
+                <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>
@@ -78,7 +105,7 @@
                 </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,9 +115,9 @@
                     <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="Confirmation"/>
-                <input type="hidden" asp-for="DerivationScheme" />
+                <input type="hidden" asp-for="DerivationScheme"/>
-                <input type="hidden" asp-for="Enabled" />
+                <input type="hidden" asp-for="Enabled"/>
                 <div class="form-group">
                     <table class="table table-sm table-responsive-md">
                         <thead>
@@ -100,7 +127,7 @@
                         </tr>
                         </thead>
                         <tbody>
-                            @foreach(var sample in Model.AddressSamples)
+                        @foreach (var sample in Model.AddressSamples)
                         {
                             <tr>
                                 <td>@sample.KeyPath</td>
@@ -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>

BTCPayServer/wwwroot/js/StoreAddDerivationScheme.js

@@ -1,8 +1,61 @@
 $(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();
     }
@@ -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;