UI: Store setup finetuning (#2087)

* UI: Store setup finetuning

Incorporate @dstrukt's improvement feedback from [this comment](https://github.com/btcpayserver/btcpayserver/pull/2011#issuecomment-735909927).

* Clean up and fix test

BTCPayServer.Tests/SeleniumTests.cs

@@ -312,7 +312,7 @@ namespace BTCPayServer.Tests
                 await s.StartAsync();
                 var alice = s.RegisterNewUser();
                 var storeData = s.CreateNewStore();
-                var onchainHint = "A store requires a wallet to receive payments. Set up your wallet.";
+                var onchainHint = "Set up your wallet to receive payments at your store.";
                 var offchainHint = "A connection to a Lightning node is required to receive Lightning payments.";
 
                 // verify that hints are displayed on the store page
@@ -324,12 +324,13 @@ namespace BTCPayServer.Tests
                     "Warning hint on list not present");
 
                 s.GoToStore(storeData.storeId);
+                Assert.True(s.Driver.PageSource.Contains(onchainHint), "Wallet hint should be present at this point");
+                Assert.True(s.Driver.PageSource.Contains(offchainHint), "Lightning hint should be present at this point");
+
                 s.AddDerivationScheme(); // wallet hint should be dismissed
                 s.Driver.AssertNoError();
                 Assert.False(s.Driver.PageSource.Contains(onchainHint),
-                    "Wallet hint not dismissed on derivation scheme add");
+                    "Wallet hint not dismissed on derivation scheme add");// dismiss lightning hint
-
-                s.Driver.FindElement(By.Id("dismissLightningHint")).Click(); // dismiss lightning hint
 
                 Assert.Contains(storeData.storeName, s.Driver.PageSource);
                 var storeUrl = s.Driver.Url;

BTCPayServer/Controllers/StoresController.cs

@@ -996,29 +996,5 @@ namespace BTCPayServer.Controllers
                 storeId = CurrentStore.Id
             });
         }
-
-        [HttpPost]
-        [Route("{storeId}/dismissHint")]
-        [IgnoreAntiforgeryToken]
-        public async Task<IActionResult> DismissHint(string id)
-        {
-            var blob = CurrentStore.GetStoreBlob();
-            if (id == "Wallet" || id == "Lightning")
-            {
-                try
-                {
-                    var prop = blob.Hints.GetType().GetProperty(id);
-                    prop.SetValue(blob.Hints, false);
-                }
-                // disregard parse errors 
-                catch { }
-
-                if (CurrentStore.SetStoreBlob(blob))
-                {
-                    await _Repo.UpdateStore(CurrentStore);
-                }
-            }
-            return Content("ack");
-        }
     }
 }

BTCPayServer/Views/Stores/UpdateStore.cshtml

@@ -19,33 +19,21 @@
 <div class="row">
     <div class="col-lg-10 col-xl-9">
         <div class="mb-5">
-            <h4 class="mb-3">
+            <h4 class="mb-3">Wallet</h4>
-                <span class="mr-1">Wallet</span>
-                <span class="text-muted small">On-chain payments</span>
-            </h4>
             @if (Model.HintWallet)
             {
-                <div class="alert alert-light d-flex align-items-start mb-3">
+                <p>Set up your wallet to receive payments at your store.</p>
-                    <span class="fa fa-warning text-warning mt-1"></span>
-                    <p class="mb-0 mx-3 flex-fill">
-                        A store requires a wallet to receive payments. Set up your wallet.
-                    </p>
-                    <button type="button" class="close only-for-js" data-dismiss="alert" aria-label="Close" onclick="return dismissHint('Wallet', '@Model.Id');">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
             }
             <ul class="list-group mb-3">
                 @foreach (var scheme in Model.DerivationSchemes.OrderBy(scheme => scheme.Collapsed))
                 {
-                    <li class="list-group-item @(scheme.Collapsed ? "collapsed": "")">
+                    <li class="list-group-item bg-tile @(scheme.Collapsed ? "collapsed": "")">
-                        <div class="d-flex align-items-center">
+                        <div class="d-flex flex-wrap align-items-center">
-                            <span class="d-flex align-items-center flex-fill mr-3">
+                            <span class="d-flex flex-wrap align-items-center flex-fill">
-                                <strong>@scheme.Crypto</strong>
+                                <strong class="mr-3">@scheme.Crypto</strong>
                                 @if (!string.IsNullOrWhiteSpace(scheme.Value))
                                 {
-                                    <span class="text-light mx-2">|</span>
+                                    <span title="@scheme.Value" data-toggle="tooltip" class="d-flex mr-3">
-                                    <span title="@scheme.Value" data-toggle="tooltip" class="d-flex">
                                         <code class="text-truncate" style="max-width:10ch">
                                             @scheme.Value
                                         </code>
@@ -59,7 +47,6 @@
                                     </span>
                                     @if (scheme.WalletSupported)
                                     {
-                                        <span class="text-light mx-2">|</span>
                                         <a asp-action="WalletTransactions" asp-controller="Wallets" asp-route-walletId="@scheme.WalletId" class="text-secondary">Wallet</a>
                                     }
                                 }
@@ -79,7 +66,11 @@
                                         Disabled
                                     </strong>
                                 }
-                                <a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")" class="btn btn-@(scheme.Enabled ? "light" : "info") py-1 ml-3">
+                                @if (scheme.Enabled)
+                                {
+                                    <span class="text-light ml-3 mr-2">|</span>
+                                }
+                                <a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")" class="btn btn-sm btn-@(scheme.Enabled ? "link" : "primary ml-4 px-3") py-1">
                                     @(scheme.Enabled ? "Modify" : "Setup")
                                 </a>
                             </span>
@@ -102,33 +93,21 @@
         </div>
 
         <div class="mb-5">
-            <h4 class="mb-3">
+            <h4 class="mb-3">Lightning</h4>
-                <span class="mr-1">Lightning</span>
-                <span class="text-muted small">Off-chain payments</span>
-            </h4>
             @if (Model.HintLightning)
             {
-                <div class="alert alert-light d-flex align-items-start mb-3">
+                <p>A connection to a Lightning node is required to receive Lightning payments.</p>
-                    <span class="fa fa-warning text-warning mt-1"></span>
-                    <p class="mb-0 mx-3 flex-fill">
-                        A connection to a Lightning node is required to receive Lightning payments.
-                    </p>
-                    <button id="dismissLightningHint" type="button" class="close only-for-js" data-dismiss="alert" aria-label="Close" onclick="return dismissHint('Lightning', '@Model.Id');">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
             }
             <ul class="list-group mb-3">
                 @foreach (var scheme in Model.LightningNodes)
                 {
-                    <li class="list-group-item">
+                    <li class="list-group-item bg-tile">
-                        <div class="d-flex align-items-center">
+                        <div class="d-flex flex-wrap align-items-center">
-                            <span class="d-flex align-items-center flex-fill mr-3">
+                            <span class="d-flex align-items-center flex-fill">
-                                <strong>@scheme.CryptoCode</strong>
+                                <strong class="mr-3">@scheme.CryptoCode</strong>
                                 @if (!string.IsNullOrWhiteSpace(scheme.Address))
                                 {
-                                    <span class="text-light mx-2">|</span>
+                                    <code class="smMaxWidth text-truncate mr-3">@scheme.Address</code>
-                                    <code class="smMaxWidth text-truncate">@scheme.Address</code>
                                 }
                             </span>
                             <span class="d-flex align-items-center">
@@ -146,7 +125,11 @@
                                         Disabled
                                     </strong>
                                 }
-                                <a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-@(scheme.Enabled ? "light" : "info") py-1 ml-3">
+                                @if (scheme.Enabled)
+                                {
+                                    <span class="text-light ml-3 mr-2">|</span>
+                                }
+                                <a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-sm btn-@(scheme.Enabled ? "link" : "primary ml-4 px-3") py-1">
                                     @(scheme.Enabled ? "Modify" : "Setup")
                                 </a>
                             </span>

BTCPayServer/Views/Stores/_Nav.cshtml

@@ -9,13 +9,3 @@
     <a id="@(nameof(StoreNavPages.Webhooks))" class="nav-link @ViewData.IsActivePage(StoreNavPages.Webhooks)" asp-controller="Stores" asp-action="Webhooks" asp-route-storeId="@this.Context.GetRouteValue("storeId")">Webhooks</a>
     <vc:ui-extension-point location="store-nav" />
 </div>
-
-<script type="text/javascript">
-    function dismissHint(hintId, storeId) {
-        var url = "@Url.Action("DismissHint", "Stores", new { storeId = "store_Id", id="hint_Id" })"
-            .replace("hint_Id", hintId)
-            .replace("store_Id", storeId);
-        $.post(url);
-        return true;
-    }
-</script>

BTCPayServer/wwwroot/main/site.css

@@ -62,6 +62,10 @@ ul li {
     padding-bottom: .2em;
 }
 
+.bg-tile {
+    background-color: var(--btcpay-bg-tile);
+}
+
 .navbar .onion {
     margin-right: auto;
 }