From b73aa55a757efa5785f03d62648f1ecc53fbe181 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 23 Oct 2020 17:15:07 +0200 Subject: [PATCH 1/5] Store setup: Restructuring basics --- BTCPayServer.Tests/SeleniumTests.cs | 14 +- .../Models/StoreViewModels/StoreViewModel.cs | 1 + .../Views/Stores/AddDerivationScheme.cshtml | 8 +- BTCPayServer/Views/Stores/UpdateStore.cshtml | 542 +++++++++--------- .../wwwroot/main/bootstrap/bootstrap.css | 3 +- 5 files changed, 295 insertions(+), 273 deletions(-) diff --git a/BTCPayServer.Tests/SeleniumTests.cs b/BTCPayServer.Tests/SeleniumTests.cs index 7fb42e173..c51c57da7 100644 --- a/BTCPayServer.Tests/SeleniumTests.cs +++ b/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"), - "Wallet hint not present"); - Assert.True(s.Driver.PageSource.Contains("Review settings if you want to receive Lightning payments"), - "Lightning hint not present"); + Assert.True(s.Driver.PageSource.Contains(onchainHint), "Wallet hint not present"); + Assert.True(s.Driver.PageSource.Contains(offchainHint), "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"), - "Lightning hint should be dismissed at this point"); + Assert.False(s.Driver.PageSource.Contains(offchainHint), "Lightning hint should be dismissed at this point"); s.Driver.FindElement(By.LinkText("Remove")).Click(); s.Driver.FindElement(By.Id("continue")).Click(); diff --git a/BTCPayServer/Models/StoreViewModels/StoreViewModel.cs b/BTCPayServer/Models/StoreViewModels/StoreViewModel.cs index ebe87c67f..93d2d1a5c 100644 --- a/BTCPayServer/Models/StoreViewModels/StoreViewModel.cs +++ b/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] diff --git a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml index 6b1b0943d..2c847a420 100644 --- a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml +++ b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml @@ -73,10 +73,12 @@
-
Derivation scheme
+
+ Derivation scheme + +

- The derivation scheme represents the destination of the funds received by your invoice. - It is generated by your wallet software. + A derivation scheme facilitates generation of the destination addresses for your invoices so funds can be received on-chain.

diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml index cc160cfab..0fdf2f476 100644 --- a/BTCPayServer/Views/Stores/UpdateStore.cshtml +++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml @@ -1,4 +1,4 @@ -@using System.Text.RegularExpressions +@using System.Text.RegularExpressions @model StoreViewModel @{ Layout = "../Shared/_NavLayout.cshtml"; @@ -10,268 +10,276 @@ @if (!ViewContext.ModelState.IsValid) {
-
+
}
-
-
-

Wallet On-chain payments

- @if (Model.HintWallet) - { -

- - Wallet not setup for the store, please provide Derviation Scheme - +

+

+ Wallet + On-chain payments +

+ @if (Model.HintWallet) + { +
+ +

+ A store requires a wallet to receive on-chain payments. + Optionally, you can have a store that only receives Lightning payments, see the next section for more details.

- } -

- The Derivation Scheme - facilitates generation of the destination addresses for your invoices so funds can be received on-chain. -

-

- 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. -

- - - - - - - - + + + } +
CryptoDerivation SchemeEnabledActions
+ + + + + + + + + + @foreach (var scheme in Model.DerivationSchemes.OrderBy(scheme => scheme.Collapsed)) + { + + + + + + } + @if (Model.DerivationSchemes.Any(scheme => scheme.Collapsed)) + { + + + + } + +
CryptoDerivation SchemeEnabledActions
+ @scheme.Crypto + @if (!string.IsNullOrWhiteSpace(scheme.Value) && scheme.WalletSupported) + { + - + Wallet + } + + @if (string.IsNullOrEmpty(scheme.Value)) + { + Not set + } + else + { + + @scheme.Value + + + @if (scheme.Value.Length > 20) + { + var match = Regex.Match(scheme.Value, @"((?:-\[(?:[^\]])+\])+|\S{6})$"); + @match.Value; + } + + } + + @if (scheme.Enabled) + { + + } + else + { + + } + + + @(scheme.Enabled ? "Modify" : "Setup") + +
+ +

+ Lightning + Off-chain payments +

+ @if (Model.HintLightning) + { +
+ +

+ A connection to a Lightning node is required if you want to receive Lightning payments. +

+ +
+ } + +
+ + + + + + + + - @foreach (var scheme in Model.DerivationSchemes.OrderBy(scheme => scheme.Collapsed)) - { - - - - - - - } - - @if (Model.DerivationSchemes.Any(scheme => scheme.Collapsed)) - { - - - - } - -
CryptoAddressEnabledActions
@scheme.Crypto - @if (string.IsNullOrEmpty(scheme.Value)) - { - Not set - } - else - { - - @scheme.Value - - - @if (scheme.Value.Length > 20) - { - var match = Regex.Match(scheme.Value, @"((?:-\[(?:[^\]])+\])+|\S{6})$"); - @match.Value; - } - - } - - @if (scheme.Enabled) - { - - } - else - { - - } - - @if (!string.IsNullOrWhiteSpace(scheme.Value) && scheme.WalletSupported) - { - Wallet - - } - Modify -
- -

Lightning Off-chain payments

- @if (Model.HintLightning) - { -

- - Review settings if you want to receive Lightning payments - -

- } -

- A connection to a Lightning Node is required to generate Lightning Network enabled invoices. -

- - - + @foreach (var scheme in Model.LightningNodes) + { - - - - + + + + - - - @foreach (var scheme in Model.LightningNodes) - { - - - - - - - } + }
CryptoAddressEnabledActions@scheme.CryptoCode@scheme.Address + @if (scheme.Enabled) + { + + } + else + { + + } + + + @(scheme.Enabled ? "Modify" : "Setup") + +
@scheme.CryptoCode@scheme.Address - @if (scheme.Enabled) - { - - } - else - { - - } - Modify
+
-
-
- - - -

- Available placeholders: - {StoreName} {ItemDescription} {OrderId} -

-
+ +

General

+
+ + +
+
+ + + +
+
+ + + +
-

Store settings

-
- - +

Payment

+
+
+ + +
-
- - - +
+
+
+ + + +
-
- - - +
+
+ + + +
+
+
+ +
+
+ +
+ minutes +
+
+ +
+
+
+ + +
+
+ +
+ minutes +
+
+ +
+
+
+ + +
+
+ +
+ percent +
+
+ +
+
+
+ + + + +
+ + + + +
+
+ + + +

+ Available placeholders: + {StoreName} {ItemDescription} {OrderId} +

+
-
-
- - - -
-
-
-
- - - - -
-
-
- - - -
-
-
- - -
-
- -
- minutes -
-
- -
-
-
- - -
-
- -
- minutes -
-
- -
-
-
- - -
-
- -
- percent -
-
- -
-
-
- - - - -
- - - - - -
- + + -

Additional Payment methods

- +

Additional payment methods

+
+
- - + + @@ -289,39 +297,51 @@ } - + }
ProviderEnabledActionsEnabledActions
Modify + + @(scheme.Enabled ? "Modify" : "Setup") + +
+
-

Services

- +

Services

+
+
- - - - + + + + - - - - + + + +
ServiceActions
ServiceActions
- Email - Modify
+ Email + + + Setup + +
- - @if (Model.CanDelete) - { -

Other actions

-

Click here to see more actions

- - }
+ + @if (Model.CanDelete) + { +

Other actions

+ + + }
diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index 78b941c4f..adeb6a4ae 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/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; } From 378d2bc8ba16678f6505292cfbadbae95b5c9141 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 23 Oct 2020 20:04:13 +0200 Subject: [PATCH 2/5] Store settings: Improve wallet display --- BTCPayServer/Views/Stores/UpdateStore.cshtml | 266 +++++++++---------- 1 file changed, 130 insertions(+), 136 deletions(-) diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml index 0fdf2f476..89c7cc404 100644 --- a/BTCPayServer/Views/Stores/UpdateStore.cshtml +++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml @@ -18,141 +18,145 @@
-

- Wallet - On-chain payments -

- @if (Model.HintWallet) - { -
- -

- A store requires a wallet to receive on-chain payments. - Optionally, you can have a store that only receives Lightning payments, see the next section for more details. -

- -
- } - - - - - - - - - - +
+

+ Wallet + On-chain payments +

+ @if (Model.HintWallet) + { +
+ +

+ A store requires a wallet to receive on-chain payments. + Optionally, you can have a store that only receives Lightning payments, see the next section for more details. +

+ +
+ } +
    @foreach (var scheme in Model.DerivationSchemes.OrderBy(scheme => scheme.Collapsed)) { -
- - - - - + } + + + @if (scheme.Enabled) + { + + + Enabled + + } + else + { + + + Disabled + + } + | + + @(scheme.Enabled ? "Modify" : "Setup") + + + + } - @if (Model.DerivationSchemes.Any(scheme => scheme.Collapsed)) - { - - - - } - -
CryptoDerivation SchemeEnabledActions
- @scheme.Crypto - @if (!string.IsNullOrWhiteSpace(scheme.Value) && scheme.WalletSupported) - { - - - Wallet - } - - @if (string.IsNullOrEmpty(scheme.Value)) - { - Not set - } - else - { - - @scheme.Value - - - @if (scheme.Value.Length > 20) +
  • +
    + + @scheme.Crypto + @if (!string.IsNullOrWhiteSpace(scheme.Value)) + { + | + + + @scheme.Value + + + @if (scheme.Value.Length > 20) + { + var match = Regex.Match(scheme.Value, @"((?:-\[(?:[^\]])+\])+|\S{6})$"); + @match.Value; + } + + + @if (scheme.WalletSupported) { - var match = Regex.Match(scheme.Value, @"((?:-\[(?:[^\]])+\])+|\S{6})$"); - @match.Value; + | + Wallet } - - } -
    		• - @if (scheme.Enabled) - { - - } - else - { - - } - - - @(scheme.Enabled ? "Modify" : "Setup") - -
    + + @if (Model.DerivationSchemes.Any(scheme => scheme.Collapsed)) + { + + + } +
    -

    - Lightning - Off-chain payments -

    - @if (Model.HintLightning) - { -
    - -

    - A connection to a Lightning node is required if you want to receive Lightning payments. -

    - -
    - } - -
    - - - - - - - - - - +
    +

    + Lightning + Off-chain payments +

    + @if (Model.HintLightning) + { +
    + +

    + A connection to a Lightning node is required if you want to receive Lightning payments. +

    + +
    + } +
      @foreach (var scheme in Model.LightningNodes) { -
    - - - - - +
  • +
    + + @scheme.CryptoCode + @if (!string.IsNullOrWhiteSpace(scheme.Address)) + { + | + @scheme.Address + } + + + @if (scheme.Enabled) + { + + + Enabled + + } + else + { + + + Disabled + + } + | + + @(scheme.Enabled ? "Modify" : "Setup") + + +
    +
    • } - -
    CryptoAddressEnabledActions
    @scheme.CryptoCode@scheme.Address - @if (scheme.Enabled) - { - - } - else - { - - } - - - @(scheme.Enabled ? "Modify" : "Setup") - -
    +
    @@ -347,14 +351,4 @@ @section Scripts { @await Html.PartialAsync("_ValidationScriptsPartial") - - } From b9af805ac1a432b54f302d772ea92584fb431369 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Mon, 26 Oct 2020 10:34:43 +0100 Subject: [PATCH 3/5] Store UI: Improve wallet status display --- BTCPayServer/Views/Stores/UpdateStore.cshtml | 16 +++++----- BTCPayServer/wwwroot/main/site.css | 31 ++++++++++++++++++++ 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml index 89c7cc404..81ae5993c 100644 --- a/BTCPayServer/Views/Stores/UpdateStore.cshtml +++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml @@ -68,20 +68,20 @@ @if (scheme.Enabled) { - - + + Enabled - + } else { - + Disabled } | - + @(scheme.Enabled ? "Modify" : "Setup") @@ -137,19 +137,19 @@ @if (scheme.Enabled) { - + Enabled } else { - + Disabled } | - + @(scheme.Enabled ? "Modify" : "Setup") diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css index 91e0d36ac..0852982f9 100644 --- a/BTCPayServer/wwwroot/main/site.css +++ b/BTCPayServer/wwwroot/main/site.css @@ -3,6 +3,8 @@ html { position: relative; min-height: 100%; font-size: var(--btcpay-font-size-base); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .logo { @@ -318,3 +320,32 @@ html[data-devenv]:before { .note-editor .table.table-sm td { border: 1px dotted var(--btcpay-color-neutral-400); } + +/* Custom */ +.btcpay-status { + display: inline-flex; + align-items: center; + justify-content: center; + border: .25em solid transparent; + border-radius: 50%; + width: 19px; + height: 19px; +} +.btcpay-status:before { + content: ''; + border-radius: 50%; + width: 9px; + height: 9px; +} +.btcpay-status--enabled { + background-color: rgba(0, 182, 52, .3); +} +.btcpay-status--enabled:before { + background-color: #00B634; +} +.btcpay-status--disabled { + background-color: rgba(251, 56, 61, .3); +} +.btcpay-status--disabled:before { + background-color: #FB383D; +} From 13509e31ca7d32f2e4092dd11606d0be8727504b Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Mon, 26 Oct 2020 18:33:44 +0100 Subject: [PATCH 4/5] Don't warn, but hint --- BTCPayServer/Views/Stores/UpdateStore.cshtml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml index 81ae5993c..37f627cdf 100644 --- a/BTCPayServer/Views/Stores/UpdateStore.cshtml +++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml @@ -25,7 +25,7 @@ @if (Model.HintWallet) { -
    +

    A store requires a wallet to receive on-chain payments. @@ -110,7 +110,7 @@ @if (Model.HintLightning) { -

    +

    A connection to a Lightning node is required if you want to receive Lightning payments. From f2daa6a15002ffaaa37372a562c31616bc9540e3 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 6 Nov 2020 11:14:00 +0100 Subject: [PATCH 5/5] Improve store setup display --- BTCPayServer.Tests/SeleniumTests.cs | 4 ++-- BTCPayServer/Views/Stores/UpdateStore.cshtml | 15 ++++++--------- BTCPayServer/wwwroot/main/site.css | 2 +- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/BTCPayServer.Tests/SeleniumTests.cs b/BTCPayServer.Tests/SeleniumTests.cs index c51c57da7..5cf19d7e4 100644 --- a/BTCPayServer.Tests/SeleniumTests.cs +++ b/BTCPayServer.Tests/SeleniumTests.cs @@ -301,8 +301,8 @@ 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."; + var onchainHint = "A store requires a wallet to receive payments. Set up your wallet."; + var offchainHint = "A connection to a Lightning node is required to receive Lightning payments."; // verify that hints are displayed on the store page Assert.True(s.Driver.PageSource.Contains(onchainHint), "Wallet hint not present"); diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml index 37f627cdf..2dd9ff0d0 100644 --- a/BTCPayServer/Views/Stores/UpdateStore.cshtml +++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml @@ -26,10 +26,9 @@ @if (Model.HintWallet) {

    - +

    - A store requires a wallet to receive on-chain payments. - Optionally, you can have a store that only receives Lightning payments, see the next section for more details. + A store requires a wallet to receive payments. Set up your wallet.