From e75a1a8b70bb47ade67b806a2a0531e2bd29dd45 Mon Sep 17 00:00:00 2001
From: "nicolas.dorier" <nicolas.dorier@gmail.com>
Date: Tue, 4 Dec 2018 21:22:27 +0900
Subject: [PATCH] Improve ledger feedback for asking authorization to access
 xpub

---
 .../Views/Stores/AddDerivationScheme.cshtml   | 12 +++++++++---
 .../wwwroot/js/StoreAddDerivationScheme.js    | 19 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
index c3c0b4ad9..7ea390f8e 100644
--- a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
+++ b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
@@ -15,7 +15,7 @@
 <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>
@@ -26,13 +26,19 @@
                     <label asp-for="DerivationScheme"></label>
                     <input asp-for="DerivationScheme" class="form-control" />
                     <span asp-validation-for="DerivationScheme" class="text-danger"></span>
+                    <div id="ledger-loading" class="form-text text-muted">
+                        Checking if a ledger wallet is connected...
+                    </div>
+                    <div id="ledger-validate" class="form-text text-muted" style="display: none;">
+                        Please validate access on your screen...
+                    </div>
                     <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>
                             }
@@ -100,7 +106,7 @@
                             </tr>
                         </thead>
                         <tbody>
-                            @foreach(var sample in Model.AddressSamples)
+                            @foreach (var sample in Model.AddressSamples)
                             {
                                 <tr>
                                     <td>@sample.KeyPath</td>
diff --git a/BTCPayServer/wwwroot/js/StoreAddDerivationScheme.js b/BTCPayServer/wwwroot/js/StoreAddDerivationScheme.js
index 9a96571a1..2c9cdf0c6 100644
--- a/BTCPayServer/wwwroot/js/StoreAddDerivationScheme.js
+++ b/BTCPayServer/wwwroot/js/StoreAddDerivationScheme.js
@@ -20,22 +20,32 @@
     function WriteAlert(type, message) {
         
     }
-
+    function showFeedback(id) {
+        $("#ledger-loading").css("display", id === "ledger-loading" ? "block" : "none");
+        $("#no-ledger-info").css("display", id === "no-ledger-info" ? "block" : "none");
+        $("#ledger-validate").css("display", id === "ledger-validate" ? "block" : "none");
+        $("#ledger-info").css("display", id === "ledger-info" ? "block" : "none");
+    }
     function Write(prefix, type, message) {
         if (type === "error") {
-            $("#no-ledger-info").css("display", "block");
-            $("#ledger-in   fo").css("display", "none");
+            showFeedback("no-ledger-info");
         }
     }
 
     $(".ledger-info-recommended").on("click", function (elem) {
         elem.preventDefault();
+
+        showFeedback("ledger-validate");
+
         var account = elem.currentTarget.getAttribute("data-ledgeraccount");
         var cryptoCode = GetSelectedCryptoCode();
         bridge.sendCommand("getxpub", "cryptoCode=" + cryptoCode + "&account=" + account)
             .then(function (result) {
                 if (cryptoCode !== GetSelectedCryptoCode())
                     return;
+
+                showFeedback("ledger-info");
+
                 $("#DerivationScheme").val(result.extPubKey);
                 $("#DerivationSchemeFormat").val("BTCPay");
             })
@@ -60,8 +70,7 @@
                 }
                 else {
                     Write('check', 'success', 'This store is configured to use your ledger');
-                    $("#no-ledger-info").css("display", "none");
-                    $("#ledger-info").css("display", "block");
+                    showFeedback("ledger-info");
                 }
             });
     };