Store setup: Restructuring basics

BTCPayServer.Tests/SeleniumTests.cs

@@ -301,11 +301,12 @@ namespace BTCPayServer.Tests
                 await s.StartAsync();
                 var alice = s.RegisterNewUser();
                 var storeData = s.CreateNewStore();
+                var onchainHint = "A store requires a wallet to receive on-chain payments.";
+                var offchainHint = "A connection to a Lightning node is required if you want to receive Lightning payments.";
+
                 // verify that hints are displayed on the store page
-                Assert.True(s.Driver.PageSource.Contains("Wallet not setup for the store, please provide Derviation Scheme"), 
+                Assert.True(s.Driver.PageSource.Contains(onchainHint), "Wallet hint not present");
-                    "Wallet hint not present");
+                Assert.True(s.Driver.PageSource.Contains(offchainHint), "Lightning hint not present");
-                Assert.True(s.Driver.PageSource.Contains("Review settings if you want to receive Lightning payments"),
-                    "Lightning hint not present");
 
                 s.GoToStores();
                 Assert.True(s.Driver.PageSource.Contains("warninghint_" + storeData.storeId),
@@ -314,7 +315,7 @@ namespace BTCPayServer.Tests
                 s.GoToStore(storeData.storeId);
                 s.AddDerivationScheme(); // wallet hint should be dismissed
                 s.Driver.AssertNoError();
-                Assert.False(s.Driver.PageSource.Contains("Wallet not setup for the store, please provide Derviation Scheme"),
+                Assert.False(s.Driver.PageSource.Contains(onchainHint),
                     "Wallet hint not dismissed on derivation scheme add");
 
                 s.Driver.FindElement(By.Id("dismissLightningHint")).Click(); // dismiss lightning hint
@@ -380,8 +381,7 @@ namespace BTCPayServer.Tests
                 s.Driver.FindElement(By.Id("Stores")).Click();
 
                 // there shouldn't be any hints now
-                Assert.False(s.Driver.PageSource.Contains("Review settings if you want to receive Lightning payments"),
+                Assert.False(s.Driver.PageSource.Contains(offchainHint), "Lightning hint should be dismissed at this point");
-                    "Lightning hint should be dismissed at this point");
 
                 s.Driver.FindElement(By.LinkText("Remove")).Click();
                 s.Driver.FindElement(By.Id("continue")).Click();

BTCPayServer/Models/StoreViewModels/StoreViewModel.cs

@@ -30,6 +30,7 @@ namespace BTCPayServer.Models.StoreViewModels
         }
 
         public bool CanDelete { get; set; }
+        [Display(Name = "Store ID")]
         public string Id { get; set; }
         [Display(Name = "Store Name")]
         [Required]

BTCPayServer/Views/Stores/AddDerivationScheme.cshtml

@@ -73,10 +73,12 @@
                 <input id="DerivationSchemeFormat" asp-for="DerivationSchemeFormat" type="hidden" />
                 <input id="AccountKey" asp-for="AccountKey" type="hidden" />
                 <div class="form-group">
-                    <h5>Derivation scheme</h5>
+                    <h5>
+                        Derivation scheme
+                        <a href="https://docs.btcpayserver.org/FAQ/FAQ-Wallet/#what-is-a-derivation-scheme" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
+                    </h5>
                     <p>
-                        The derivation scheme represents the destination of the funds received by your invoice.
+                        A derivation scheme facilitates generation of the destination addresses for your invoices so funds can be received on-chain.
-                        It is generated by your wallet software.
                     </p>
                 </div>
                 <div class="form-group">

BTCPayServer/Views/Stores/UpdateStore.cshtml

@@ -1,4 +1,4 @@
-@using System.Text.RegularExpressions
+@using System.Text.RegularExpressions
 @model StoreViewModel
 @{
     Layout = "../Shared/_NavLayout.cshtml";
@@ -10,50 +10,52 @@
 @if (!ViewContext.ModelState.IsValid)
 {
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-8">
             <div asp-validation-summary="All" class="text-danger"></div>
         </div>
     </div>
 }
 
 <div class="row">
-    <div class="col-md-8">
+    <div class="col-lg-10 col-xl-9">
-        <div>
+        <h4 class="mb-3">
-            <h4 class="mb-3">Wallet <span class="text-muted small">On-chain payments</span></h4>
+            <span class="mr-1">Wallet</span>
+            <span class="text-muted small">On-chain payments</span>
+        </h4>
         @if (Model.HintWallet)
         {
-                <p class="alert alert-warning">
+            <div class="alert alert-warning d-flex align-items-start mb-2">
-                    <span class="fa fa-warning"></span>
+                <span class="fa fa-warning mt-1"></span>
-                    Wallet not setup for the store, please provide Derviation Scheme
+                <p class="mb-0 mx-3 flex-fill">
-                    <button type="button" class="close only-for-js" data-dismiss="alert" aria-label="Close"
+                    A store requires a wallet to receive on-chain payments.
-                            onclick="return dismissHint('Wallet', '@Model.Id');">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </p>
-            }
-            <p>
-                The Derivation Scheme <a href="https://docs.btcpayserver.org/FAQ/FAQ-Wallet/#what-is-a-derivation-scheme" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
-                facilitates generation of the destination addresses for your invoices so funds can be received on-chain.
-            </p>
-            <p>
-                Until wallet is defined, no invoices can be created for this store.
                     Optionally, you can have a store that only receives Lightning payments, see the next section for more details.
                 </p>
-
+                <button type="button" class="close only-for-js" data-dismiss="alert" aria-label="Close" onclick="return dismissHint('Wallet', '@Model.Id');">
-            <table class="table table-sm table-responsive-md mt-0 mb-5">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+        }
+        <table class="table table-sm mt-0 mb-5">
             <thead>
                 <tr>
                     <th>Crypto</th>
                     <th>Derivation Scheme</th>
-                        <th style="text-align:center;">Enabled</th>
+                    <th class="text-center w-100px">Enabled</th>
-                        <th style="text-align:right;">Actions</th>
+                    <th class="text-right w-100px">Actions</th>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var scheme in Model.DerivationSchemes.OrderBy(scheme => scheme.Collapsed))
                 {
                     <tr class="@(@scheme.Collapsed? "collapsed": "")">
-                            <td>@scheme.Crypto</td>
+                        <td>
+                            @scheme.Crypto
+                            @if (!string.IsNullOrWhiteSpace(scheme.Value) && scheme.WalletSupported)
+                            {
+                                <span> - </span>
+                                <a asp-action="WalletTransactions" asp-controller="Wallets" asp-route-walletId="@scheme.WalletId">Wallet</a>
+                            }
+                        </td>
                         <td title="@scheme.Value" data-toggle="tooltip" class="d-flex">
                             @if (string.IsNullOrEmpty(scheme.Value))
                             {
@@ -73,7 +75,7 @@
                                 </code>
                             }
                         </td>
-                            <td style="text-align:center;">
+                        <td class="text-center">
                             @if (scheme.Enabled)
                             {
                                 <span class="text-success fa fa-check"></span>
@@ -83,16 +85,13 @@
                                 <span class="text-danger fa fa-times"></span>
                             }
                         </td>
-                            <td style="text-align:right">
+                        <td class="text-right">
-                                @if (!string.IsNullOrWhiteSpace(scheme.Value) && scheme.WalletSupported)
+                            <a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")">
-                                {
+                                @(scheme.Enabled ? "Modify" : "Setup")
-                                    <a asp-action="WalletTransactions" asp-controller="Wallets" asp-route-walletId="@scheme.WalletId">Wallet</a><span> - </span>
+                            </a>
-                                }
-                                <a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@this.Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")">Modify</a>
                         </td>
                     </tr>
                 }
-
                 @if (Model.DerivationSchemes.Any(scheme => scheme.Collapsed))
                 {
                     <tr class="only-for-js">
@@ -102,29 +101,31 @@
             </tbody>
         </table>
 
-            <h4 class="mt-5 mb-3">Lightning <span class="text-muted small">Off-chain payments</span></h4>
+        <h4 class="mb-3">
+            <span class="mr-1">Lightning</span>
+            <span class="text-muted small">Off-chain payments</span>
+        </h4>
         @if (Model.HintLightning)
         {
-                <p class="alert alert-warning">
+            <div class="alert alert-warning d-flex align-items-start mb-2">
-                    <span class="fa fa-warning"></span>
+                <span class="fa fa-warning mt-1"></span>
-                    Review settings if you want to receive Lightning payments
+                <p class="mb-0 mx-3 flex-fill">
-                    <button id="dismissLightningHint" type="button" class="close only-for-js" data-dismiss="alert" aria-label="Close"
+                    A connection to a Lightning node is required if you want to receive Lightning payments.
-                            onclick="return dismissHint('Lightning', '@Model.Id');">
+                </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>
-                </p>
+            </div>
         }
-            <p>
-                A connection to a Lightning Node is required to generate Lightning Network enabled invoices.
-            </p>
 
-            <table class="table table-sm table-responsive-md">
+        <div class="table-responsive-md">
+            <table class="table table-sm mb-5">
                 <thead>
                 <tr>
-                        <th>Crypto</th>
+                    <th class="w-100px">Crypto</th>
                     <th>Address</th>
-                        <th style="text-align:center;">Enabled</th>
+                    <th class="text-center w-100px">Enabled</th>
-                        <th style="text-align:right">Actions</th>
+                    <th class="text-right w-100px">Actions</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -133,7 +134,7 @@
                     <tr>
                         <td>@scheme.CryptoCode</td>
                         <td class="smMaxWidth text-truncate">@scheme.Address</td>
-                            <td style="text-align:center;">
+                        <td class="text-center">
                             @if (scheme.Enabled)
                             {
                                 <span class="text-success fa fa-check"></span>
@@ -143,24 +144,19 @@
                                 <span class="text-danger fa fa-times"></span>
                             }
                         </td>
-                            <td style="text-align:right"><a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@this.Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")">Modify</a></td>
+                        <td class="text-right">
+                            <a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")">
+                                @(scheme.Enabled ? "Modify" : "Setup")
+                            </a>
+                        </td>
                     </tr>
                 }
                 </tbody>
             </table>
-
-            <form method="post">
-                <div class="form-group mb-5">
-                    <label asp-for="LightningDescriptionTemplate"></label>
-                    <input asp-for="LightningDescriptionTemplate" class="form-control" />
-                    <span asp-validation-for="LightningDescriptionTemplate" class="text-danger"></span>
-                    <p class="form-text text-muted">
-                        Available placeholders:
-                        <code>{StoreName} {ItemDescription} {OrderId}</code>
-                    </p>
         </div>
 
-                <h4 class="mt-5 mb-3">Store settings</h4>
+        <form method="post" class="mb-5">
+            <h4 class="mb-3">General</h4>
             <div class="form-group">
                 <label asp-for="Id"></label>
                 <input asp-for="Id" readonly class="form-control" />
@@ -176,6 +172,7 @@
                 <span asp-validation-for="StoreWebsite" class="text-danger"></span>
             </div>
 
+            <h4 class="mt-5 mb-3">Payment</h4>
             <div class="form-group">
                 <div class="form-check">
                     <input asp-for="AnyoneCanCreateInvoice" type="checkbox" class="form-check-input" />
@@ -261,17 +258,28 @@
                     Choosing to accept an unconfirmed invoice can lead to double-spending and is strongly discouraged.
                 </div>
                 <span asp-validation-for="SpeedPolicy" class="text-danger"></span>
-                    <button name="command" type="submit" class="btn btn-primary mt-3" value="Save" id="Save">Save Store Settings</button>
             </div>
+            <div class="form-group">
+                <label asp-for="LightningDescriptionTemplate"></label>
+                <input asp-for="LightningDescriptionTemplate" class="form-control" />
+                <span asp-validation-for="LightningDescriptionTemplate" class="text-danger"></span>
+                <p class="form-text text-muted">
+                    Available placeholders:
+                    <code>{StoreName} {ItemDescription} {OrderId}</code>
+                </p>
+            </div>
+
+            <button name="command" type="submit" class="btn btn-primary" value="Save" id="Save">Save Store Settings</button>
         </form>
 
-            <h4 class="mt-5 mb-3">Additional Payment methods</h4>
+        <h4 class="mb-3">Additional payment methods</h4>
-            <table class="table table-sm table-responsive-md mt-1 mb-5">
+        <div class="table-responsive-md">
+            <table class="table table-sm mt-1 mb-5">
                 <thead>
                     <tr>
                         <th>Provider</th>
-                        <th class="text-center">Enabled</th>
+                        <th class="text-center w-100px">Enabled</th>
-                        <th class="text-right">Actions</th>
+                        <th class="text-right w-100px">Actions</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -289,18 +297,24 @@
                                     <span class="text-danger fa fa-times"></span>
                                 }
                             </td>
-                            <td class="text-right"><a asp-action="@scheme.Action" id='Modify-@scheme.Provider' asp-route-storeId="@this.Context.GetRouteValue("storeId")">Modify</a></td>
+                            <td class="text-right">
+                                <a asp-action="@scheme.Action" id='Modify-@scheme.Provider' asp-route-storeId="@Context.GetRouteValue("storeId")">
+                                    @(scheme.Enabled ? "Modify" : "Setup")
+                                </a>
+                            </td>
                         </tr>
                     }
                 </tbody>
             </table>
+        </div>
 
         <h4 class="mt-5 mb-3">Services</h4>
-            <table class="table table-sm table-responsive-md mt-1 mb-5">
+        <div class="table-responsive-md">
+            <table class="table table-sm mt-1 mb-5">
                 <thead>
                 <tr>
                     <th>Service</th>
-                        <th style="text-align:right">Actions</th>
+                    <th class="text-right w-100px">Actions</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -308,21 +322,27 @@
                     <td>
                         Email
                     </td>
-                        <td style="text-align:right"><a asp-action="Emails" asp-route-storeId="@this.Context.GetRouteValue("storeId")">Modify</a></td>
+                    <td class="text-right">
+                        <a asp-action="Emails" asp-route-storeId="@Context.GetRouteValue("storeId")">
+                            Setup
+                        </a>
+                    </td>
                 </tr>
                 </tbody>
             </table>
+        </div>
 
         @if (Model.CanDelete)
         {
             <h4 class="mt-5 mb-3">Other actions</h4>
-                <p><a href="#danger-zone" data-toggle="collapse"><b>Click here to see more actions</b></a></p>
+            <button class="btn btn-link text-secondary mb-3 p-0" type="button" data-toggle="collapse" data-target="#danger-zone">
+                See more actions
+            </button>
             <div id="danger-zone" class="collapse">
                 <a class="btn btn-outline-danger mb-5" asp-action="DeleteStore" asp-route-storeId="@Model.Id">Delete this store</a>
             </div>
         }
     </div>
-    </div>
 </div>
 
 @section Scripts {

BTCPayServer/wwwroot/main/bootstrap/bootstrap.css

@@ -3769,11 +3769,10 @@ input[type="button"].btn-block {
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
-  color: var(--btcpay-color-dark-accent);
+  color: inherit;
   text-shadow: 0 1px 0 var(--btcpay-color-white);
   opacity: .5; }
   .close:hover {
-    color: var(--btcpay-color-dark-accent);
     text-decoration: none; }
   .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
     opacity: .75; }