Add Lightning page with services (#3308)

* Add Lightning page with services

* Adapt other services pages

* Display Lightning services only for internal node

BTCPayServer.Tests/SeleniumTester.cs

@@ -245,10 +245,12 @@ namespace BTCPayServer.Tests
         {
             AddLightningNode(null, null, true);
         }
+        
         public void AddLightningNode(LightningConnectionType? connectionType = null, bool test = true)
         {
             AddLightningNode(null, connectionType, test);
         }
+        
         public void AddLightningNode(string cryptoCode = null, LightningConnectionType? connectionType = null, bool test = true)
         {
             cryptoCode ??= "BTC";
@@ -407,6 +409,11 @@ namespace BTCPayServer.Tests
         {
             GoToStore(StoreNavPages.PaymentMethods);
             Driver.FindElement(By.Id($"StoreNav-Lightning{cryptoCode}")).Click();
+            // if Lightning is already set up we need to navigate to the settings
+            if (Driver.PageSource.Contains("id=\"SectionNav-LightningSettings\""))
+            {
+                Driver.FindElement(By.Id("SectionNav-LightningSettings")).Click();
+            }
         }
 
         public void SelectStoreContext(string storeId)
@@ -431,7 +438,7 @@ namespace BTCPayServer.Tests
         {
             if (storeId is null)
             {
-                this.Driver.FindElement(By.Id("StoreNav-Invoices")).Click();
+                Driver.FindElement(By.Id("StoreNav-Invoices")).Click();
             }
             else
             {

BTCPayServer/Components/MainNav/Default.cshtml

@@ -78,7 +78,7 @@
                                     <li class="nav-item">
                                         @if (isSetUp)
                                         {
-                                            <a asp-area="" asp-controller="UIStores" asp-action="LightningSettings" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.LightningSettings)" id="@($"StoreNav-Lightning{scheme.CryptoCode}")">
+                                            <a asp-area="" asp-controller="UIStores" asp-action="Lightning" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Lightning) @ViewData.IsActivePage(StoreNavPages.LightningSettings)" id="@($"StoreNav-Lightning{scheme.CryptoCode}")">
                                                 <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "disabled")"></span>
                                                 <span>@(Model.AltcoinsBuild ? $"{scheme.CryptoCode} " : "")Lightning</span>
                                             </a>

BTCPayServer/Controllers/UIStoresController.LightningLike.cs

@@ -2,9 +2,11 @@ using System;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
+using BTCPayServer.Configuration;
 using BTCPayServer.Data;
 using BTCPayServer.Lightning;
 using BTCPayServer.Logging;
+using BTCPayServer.Models;
 using BTCPayServer.Models.StoreViewModels;
 using BTCPayServer.Payments;
 using BTCPayServer.Payments.Lightning;
@@ -15,7 +17,66 @@ namespace BTCPayServer.Controllers
 {
     public partial class UIStoresController
     {
+        private readonly ExternalServiceTypes[] _externalServiceTypes =
+        {
+            ExternalServiceTypes.Spark,
+            ExternalServiceTypes.RTL,
+            ExternalServiceTypes.ThunderHub
+        };
+        private readonly string[] _externalServiceNames =
+        {
+            "Lightning Terminal"
+        };
+        
         [HttpGet("{storeId}/lightning/{cryptoCode}")]
+        public async Task<IActionResult> Lightning(string storeId, string cryptoCode)
+        {
+            var store = HttpContext.GetStoreData();
+            if (store == null)
+                return NotFound();
+
+            var vm = new LightningViewModel
+            {
+                CryptoCode = cryptoCode,
+                StoreId = storeId
+            };
+            await SetExistingValues(store, vm);
+
+            if (vm.LightningNodeType == LightningNodeType.Internal)
+            {
+                var services = _externalServiceOptions.Value.ExternalServices.ToList()
+                    .Where(service => _externalServiceTypes.Contains(service.Type))
+                    .Select(service => new AdditionalServiceViewModel
+                    {
+                        DisplayName = service.DisplayName,
+                        ServiceName = service.ServiceName,
+                        CryptoCode = service.CryptoCode,
+                        Type = service.Type.ToString()
+                    })
+                    .ToList();
+            
+                // other services
+                foreach ((string key, Uri value) in _externalServiceOptions.Value.OtherExternalServices)
+                {
+                    if (_externalServiceNames.Contains(key))
+                    {
+                        services.Add(new AdditionalServiceViewModel
+                        {
+                            DisplayName = key,
+                            ServiceName = key,
+                            Type = key.Replace(" ", ""),
+                            Link = Request.GetAbsoluteUriNoPathBase(value).AbsoluteUri
+                        });
+                    }
+                }
+
+                vm.Services = services;
+            }
+            
+            return View(vm);
+        }
+        
+        [HttpGet("{storeId}/lightning/{cryptoCode}/setup")]
         public async Task<IActionResult> SetupLightningNode(string storeId, string cryptoCode)
         {
             var store = HttpContext.GetStoreData();
@@ -31,7 +92,7 @@ namespace BTCPayServer.Controllers
             return View(vm);
         }
 
-        [HttpPost("{storeId}/lightning/{cryptoCode}")]
+        [HttpPost("{storeId}/lightning/{cryptoCode}/setup")]
         public async Task<IActionResult> SetupLightningNode(string storeId, LightningNodeViewModel vm, string command, string cryptoCode)
         {
             vm.CryptoCode = cryptoCode;

BTCPayServer/Controllers/UIStoresController.cs

@@ -26,6 +26,7 @@ using Microsoft.AspNetCore.DataProtection;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.Rendering;
+using Microsoft.Extensions.Options;
 using NBitcoin;
 using NBitcoin.DataEncoders;
 using StoreData = BTCPayServer.Data.StoreData;
@@ -38,8 +39,6 @@ namespace BTCPayServer.Controllers
     [AutoValidateAntiforgeryToken]
     public partial class UIStoresController : Controller
     {
-        readonly RateFetcher _RateFactory;
-        public string CreatedStoreId { get; set; }
         public UIStoresController(
             IServiceProvider serviceProvider,
             BTCPayServerOptions btcpayServerOptions,
@@ -60,7 +59,8 @@ namespace BTCPayServer.Controllers
             AppService appService,
             WebhookSender webhookNotificationManager,
             IDataProtectionProvider dataProtector,
-            NBXplorerDashboard Dashboard)
+            NBXplorerDashboard Dashboard,
+            IOptions<ExternalServicesOptions> externalServiceOptions)
         {
             _RateFactory = rateFactory;
             _Repo = repo;
@@ -82,18 +82,20 @@ namespace BTCPayServer.Controllers
             _BtcpayServerOptions = btcpayServerOptions;
             _BTCPayEnv = btcpayEnv;
             _Dashboard = Dashboard;
+            _externalServiceOptions = externalServiceOptions;
         }
 
         readonly BTCPayServerOptions _BtcpayServerOptions;
         readonly BTCPayServerEnvironment _BTCPayEnv;
         readonly IServiceProvider _ServiceProvider;
         readonly BTCPayNetworkProvider _NetworkProvider;
-        private readonly ExplorerClientProvider _ExplorerProvider;
         readonly BTCPayWalletProvider _WalletProvider;
         readonly BitpayAccessTokenController _TokenController;
         readonly StoreRepository _Repo;
         readonly TokenRepository _TokenRepository;
         readonly UserManager<ApplicationUser> _UserManager;
+        readonly RateFetcher _RateFactory;
+        private readonly ExplorerClientProvider _ExplorerProvider;
         private readonly LanguageService _LangService;
         private readonly PaymentMethodHandlerDictionary _paymentMethodHandlerDictionary;
         private readonly SettingsRepository _settingsRepository;
@@ -101,6 +103,8 @@ namespace BTCPayServer.Controllers
         private readonly AppService _appService;
         private readonly EventAggregator _EventAggregator;
         private readonly NBXplorerDashboard _Dashboard;
+        private readonly IOptions<ExternalServicesOptions> _externalServiceOptions;
+        public string CreatedStoreId { get; set; }
 
         [TempData]
         public bool StoreNotConfigured

BTCPayServer/Models/AdditionalServiceViewModel.cs

@@ -0,0 +1,10 @@
+namespace BTCPayServer.Models;
+
+public class AdditionalServiceViewModel
+{
+    public string Type { get; set; }
+    public string DisplayName { get; set; }
+    public string ServiceName { get; set; }
+    public string CryptoCode { get; set; }
+    public string Link { get; set; }
+}

BTCPayServer/Models/StoreViewModels/LightningViewModel.cs

@@ -0,0 +1,8 @@
+using System.Collections.Generic;
+
+namespace BTCPayServer.Models.StoreViewModels;
+
+public class LightningViewModel : LightningNodeViewModel
+{
+    public List<AdditionalServiceViewModel> Services { get; set; }
+}

BTCPayServer/Views/UILightning/_Nav.cshtml

@@ -0,0 +1,8 @@
+@using BTCPayServer.Client
+@using BTCPayServer.Views.Stores
+@using BTCPayServer.Abstractions.Extensions
+<nav id="SectionNav" class="nav">
+    <a class="nav-link @ViewData.IsActivePage(StoreNavPages.Lightning)" asp-controller="UIStores" asp-action="Lightning" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-Lightning" permission="@Policies.CanModifyStoreSettings">Lightning</a>
+    <a class="nav-link @ViewData.IsActivePage(StoreNavPages.LightningSettings)" asp-controller="UIStores" asp-action="LightningSettings" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-LightningSettings" permission="@Policies.CanModifyStoreSettings">Settings</a>
+    <vc:ui-extension-point location="lightning-nav" model="@Model"/>
+</nav>

BTCPayServer/Views/UIServer/CLightningRestServices.cshtml

@@ -5,128 +5,122 @@
 
 <h2 class="mb-4">@ViewData["Title"]</h2>
 
-<div class="row">
-    <div class="col-md-8">
-        @if (!ViewContext.ModelState.IsValid)
-        {
-            <div asp-validation-summary="All" class="text-danger"></div>
-        }
+@if (!ViewContext.ModelState.IsValid)
+{
+    <div asp-validation-summary="All" class="text-danger"></div>
+}
+<div class="form-group">
+    <p>
+        <span>BTCPay exposes Clightning-Rest's service for outside consumption, you will find connection information here.<br /></span>
+    </p>
+</div>
+
+<h5 class="mb-3">Compatible wallets</h5>
+<div class="services-list">
+    <a href="https://github.com/ZeusLN/zeus" target="_blank" class="service" rel="noreferrer noopener">
+        <img src="~/img/zeus.jpg" asp-append-version="true" alt="Zeus" />
+        <h6>Zeus</h6>
+    </a>
+</div>
+
+<h4 class="mt-4 mb-3">QR Code connection</h4>
+<p>
+    <span>You can use this QR Code to connect external software to your C-Lightning instance.<br /></span>
+    <span>This QR Code is only valid for 10 minutes</span>
+</p>
+
+<div class="form-group">
+    @if (Model.QRCode == null)
+    {
         <div class="form-group">
-            <p>
-                <span>BTCPay exposes Clightning-Rest's service for outside consumption, you will find connection information here.<br /></span>
-            </p>
+            <form method="post">
+                <button type="submit" class="btn btn-primary mt-2">Show QR Code</button>
+            </form>
         </div>
-
-        <h5>Compatible wallets</h5>
-
-            <div>
-                <a href="https://github.com/ZeusLN/zeus" target="_blank" class="d-inline-block me-3 mb-3 text-center" rel="noreferrer noopener">
-                    <img src="~/img/zeus.jpg" width="100" height="100" asp-append-version="true" alt="Zeus" />
-                    <div class="mt-2">Zeus</div>
-                </a>
-            </div>
-        
+    }
+    else
+    {
         <div class="form-group">
-            <h5>QR Code connection</h5>
-            <p>
-                <span>You can use this QR Code to connect external software to your C-Lightning instance.<br /></span>
-                <span>This QR Code is only valid for 10 minutes</span>
-            </p>
+            <div id="qrCode"></div>
+            <div id="qrCodeData" data-url="@Model.QRCode"></div>
         </div>
-        <div class="form-group">
-            @if (Model.QRCode == null)
-            {
-                <div class="form-group">
-                    <form method="post">
-                        <button type="submit" class="btn btn-primary mt-2">Show QR Code</button>
-                    </form>
-                </div>
-            }
-            else
-            {
-                <div class="form-group">
-                    <div id="qrCode"></div>
-                    <div id="qrCodeData" data-url="@Model.QRCode"></div>
-                </div>
-                <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
-                <div id="detailsQR" class="collapse">
-                    <div class="form-group">
-                        <label class="form-label">QR Code data</label>
-                        <input asp-for="QRCode" readonly class="form-control" />
-                    </div>
-                    <div class="form-group">
-                        Click <a href="@Model.QRCodeLink" target="_blank" rel="noreferrer noopener">here</a> to open the configuration file.
-                    </div>
-                </div>
-            }
-
+        <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
+        <div id="detailsQR" class="collapse"><h4 class="mt-4 mb-3">QR Code connection</h4>
             <div class="form-group">
-                <h5>More details...</h5>
-                <p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a></p>
+                <label class="form-label">QR Code data</label>
+                <input asp-for="QRCode" readonly class="form-control" />
             </div>
-            <div id="details" class="collapse">
-                @if (Model.Uri == null)
-                {
-                    <div class="form-group">
-                        <label asp-for="Host" class="form-label"></label>
-                        <input asp-for="Host" readonly class="form-control" />
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="SSL" class="form-label"></label>
-                        <input asp-for="SSL" disabled type="checkbox" class="btcpay-toggle ms-2" />
-                    </div>
-                }
-                else
-                {
-                    <div class="form-group">
-                        <label asp-for="Uri" class="form-label"></label>
-                        <input asp-for="Uri" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.Macaroon != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="Macaroon" class="form-label"></label>
-                        <input asp-for="Macaroon" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.AdminMacaroon != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="AdminMacaroon" class="form-label"></label>
-                        <input asp-for="AdminMacaroon" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.InvoiceMacaroon != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="InvoiceMacaroon" class="form-label"></label>
-                        <input asp-for="InvoiceMacaroon" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.ReadonlyMacaroon != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="ReadonlyMacaroon" class="form-label"></label>
-                        <input asp-for="ReadonlyMacaroon" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.GRPCSSLCipherSuites != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="GRPCSSLCipherSuites" class="form-label"></label>
-                        <input asp-for="GRPCSSLCipherSuites" readonly class="form-control" />
-                    </div>
-                }
-                @if (Model.CertificateThumbprint != null)
-                {
-                    <div class="form-group">
-                        <label asp-for="CertificateThumbprint" class="form-label"></label>
-                        <input asp-for="CertificateThumbprint" readonly class="form-control" />
-                    </div>
-                }
+            <div class="form-group">
+                Click <a href="@Model.QRCodeLink" target="_blank" rel="noreferrer noopener">here</a> to open the configuration file.
             </div>
         </div>
+    }
+
+    <div class="form-group">
+        <h5>More details...</h5>
+        <p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a></p>
+    </div>
+    <div id="details" class="collapse">
+        @if (Model.Uri == null)
+        {
+            <div class="form-group">
+                <label asp-for="Host" class="form-label"></label>
+                <input asp-for="Host" readonly class="form-control" />
+            </div>
+            <div class="form-group">
+                <label asp-for="SSL" class="form-label"></label>
+                <input asp-for="SSL" disabled type="checkbox" class="btcpay-toggle ms-2" />
+            </div>
+        }
+        else
+        {
+            <div class="form-group">
+                <label asp-for="Uri" class="form-label"></label>
+                <input asp-for="Uri" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.Macaroon != null)
+        {
+            <div class="form-group">
+                <label asp-for="Macaroon" class="form-label"></label>
+                <input asp-for="Macaroon" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.AdminMacaroon != null)
+        {
+            <div class="form-group">
+                <label asp-for="AdminMacaroon" class="form-label"></label>
+                <input asp-for="AdminMacaroon" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.InvoiceMacaroon != null)
+        {
+            <div class="form-group">
+                <label asp-for="InvoiceMacaroon" class="form-label"></label>
+                <input asp-for="InvoiceMacaroon" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.ReadonlyMacaroon != null)
+        {
+            <div class="form-group">
+                <label asp-for="ReadonlyMacaroon" class="form-label"></label>
+                <input asp-for="ReadonlyMacaroon" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.GRPCSSLCipherSuites != null)
+        {
+            <div class="form-group">
+                <label asp-for="GRPCSSLCipherSuites" class="form-label"></label>
+                <input asp-for="GRPCSSLCipherSuites" readonly class="form-control" />
+            </div>
+        }
+        @if (Model.CertificateThumbprint != null)
+        {
+            <div class="form-group">
+                <label asp-for="CertificateThumbprint" class="form-label"></label>
+                <input asp-for="CertificateThumbprint" readonly class="form-control" />
+            </div>
+        }
     </div>
 </div>
 

BTCPayServer/Views/UIServer/LndServices.cshtml

@@ -3,134 +3,129 @@
     ViewData.SetActivePage(ServerNavPages.Services, $"LND {Model.ConnectionType}");
 }
 
-<div class="row">
-    <div class="col-md-8">
-        <h3 class="mb-4">@ViewData["Title"]</h3>
-        <p>
-            BTCPay exposes LND's @Model.ConnectionType service for outside consumption, you will find connection information here.
-        </p>
+<h3 class="mb-4">@ViewData["Title"]</h3>
+<p>
+    BTCPay exposes LND's @Model.ConnectionType service for outside consumption, you will find connection information here.
+</p>
 
-        <h4 class="mb-3">Compatible wallets</h4>
+<h4 class="mb-3">Compatible wallets</h4>
+<div class="services-list">
+    @if (Model.Uri == null) // if GRPC
+    {
+        <a href="https://zaphq.io/" target="_blank" class="service" rel="noreferrer noopener">
+            <img src="~/img/zapwallet.jpg" asp-append-version="true" alt="Zap" />
+            <h6>Zap</h6>
+        </a>
+    }
+    else
+    {
+        <a href="https://lightningjoule.com/" target="_blank" class="service" rel="noreferrer noopener">
+            <img src="~/img/joule.png" asp-append-version="true" alt="Joule" />
+            <h6>Joule</h6>
+        </a>
+        <a href="https://github.com/ZeusLN/zeus" target="_blank" class="service" rel="noreferrer noopener">
+            <img src="~/img/zeus.jpg" asp-append-version="true" alt="Zeus" />
+            <h6>Zeus</h6>
+        </a>
+    }
+</div>
 
-        <div>
-            @if (Model.Uri == null) // if GRPC
-            {
-                <a href="https://zaphq.io/" target="_blank" class="d-inline-block me-3 text-center" rel="noreferrer noopener">
-                    <img src="~/img/zapwallet.jpg" width="100" height="100" asp-append-version="true" alt="Zap" />
-                    <div class="mt-2">Zap</div>
-                </a>
-            }
-            else
-            {
-                <a href="https://lightningjoule.com/" target="_blank" class="d-inline-block me-3 mb-3 text-center" rel="noreferrer noopener">
-                    <img src="~/img/joule.png" width="100" height="100" asp-append-version="true" alt="Joule" />
-                    <div class="mt-2">Joule</div>
-                </a>
-                <a href="https://github.com/ZeusLN/zeus" target="_blank" class="d-inline-block me-3 mb-3 text-center" rel="noreferrer noopener">
-                    <img src="~/img/zeus.jpg" width="100" height="100" asp-append-version="true" alt="Zeus" />
-                    <div class="mt-2">Zeus</div>
-                </a>
-            }
-        </div>
+<h4 class="mt-4 mb-3">QR Code connection</h4>
+<p>
+    You can use this QR Code to connect external software to your LND instance.<br/>
+    This QR Code is only valid for 10 minutes.
+</p>
 
-        <h4 class="mt-5 mb-3">QR Code connection</h4>
-        <p>
-            You can use this QR Code to connect external software to your LND instance.<br/>
-            This QR Code is only valid for 10 minutes.
-        </p>
-
-        @if (Model.QRCode == null)
-        {
-            <div class="form-group">
-                <form method="post">
-                    <button type="submit" class="btn btn-primary">Show QR Code</button>
-                </form>
-            </div>
-        }
-        else
-        {
-            <div class="form-group">
-                <div id="qrCode"></div>
-                <div id="qrCodeData" data-url="@Model.QRCode"></div>
-            </div>
-            <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a>.</p>
-            <div id="detailsQR" class="collapse">
-                <div class="form-group">
-                    <label asp-for="QRCode" class="form-label">QR Code data</label>
-                    <input asp-for="QRCode" class="form-control" readonly />
-                </div>
-                <p>
-                    Click <a href="@Model.QRCodeLink" target="_blank" rel="noreferrer noopener">here</a> to open the configuration file.
-                </p>
-            </div>
-        }
-
-        <h4 class="mt-5 mb-3">More details</h4>
-        <p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a>.</p>
-
-        <div id="details" class="collapse">
-            @if (Model.Uri == null)
-            {
-                <div class="form-group">
-                    <label asp-for="Host" class="form-label"></label>
-                    <input asp-for="Host" readonly class="form-control"/>
-                </div>
-                <div class="form-group">
-                    <label asp-for="SSL" class="form-label"></label>
-                    <input asp-for="SSL" disabled type="checkbox" class="btcpay-toggle ms-2" />
-                </div>
-            }
-            else
-            {
-                <div class="form-group">
-                    <label asp-for="Uri" class="form-label"></label>
-                    <input asp-for="Uri" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.Macaroon != null)
-            {
-                <div class="form-group">
-                    <label asp-for="Macaroon" class="form-label"></label>
-                    <input asp-for="Macaroon" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.AdminMacaroon != null)
-            {
-                <div class="form-group">
-                    <label asp-for="AdminMacaroon" class="form-label"></label>
-                    <input asp-for="AdminMacaroon" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.InvoiceMacaroon != null)
-            {
-                <div class="form-group">
-                    <label asp-for="InvoiceMacaroon" class="form-label"></label>
-                    <input asp-for="InvoiceMacaroon" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.ReadonlyMacaroon != null)
-            {
-                <div class="form-group">
-                    <label asp-for="ReadonlyMacaroon" class="form-label"></label>
-                    <input asp-for="ReadonlyMacaroon" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.GRPCSSLCipherSuites != null)
-            {
-                <div class="form-group">
-                    <label asp-for="GRPCSSLCipherSuites" class="form-label"></label>
-                    <input asp-for="GRPCSSLCipherSuites" readonly class="form-control"/>
-                </div>
-            }
-            @if (Model.CertificateThumbprint != null)
-            {
-                <div class="form-group">
-                    <label asp-for="CertificateThumbprint" class="form-label"></label>
-                    <input asp-for="CertificateThumbprint" readonly class="form-control"/>
-                </div>
-            }
-        </div>
+@if (Model.QRCode == null)
+{
+    <div class="form-group">
+        <form method="post">
+            <button type="submit" class="btn btn-primary">Show QR Code</button>
+        </form>
     </div>
+}
+else
+{
+    <div class="form-group">
+        <div id="qrCode"></div>
+        <div id="qrCodeData" data-url="@Model.QRCode"></div>
+    </div>
+    <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a>.</p>
+    <div id="detailsQR" class="collapse">
+        <div class="form-group">
+            <label asp-for="QRCode" class="form-label">QR Code data</label>
+            <input asp-for="QRCode" class="form-control" readonly />
+        </div>
+        <p>
+            Click <a href="@Model.QRCodeLink" target="_blank" rel="noreferrer noopener">here</a> to open the configuration file.
+        </p>
+    </div>
+}
+
+<h4 class="mt-5 mb-3">More details</h4>
+<p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a>.</p>
+
+<div id="details" class="collapse">
+    @if (Model.Uri == null)
+    {
+        <div class="form-group">
+            <label asp-for="Host" class="form-label"></label>
+            <input asp-for="Host" readonly class="form-control"/>
+        </div>
+        <div class="form-group">
+            <label asp-for="SSL" class="form-label"></label>
+            <input asp-for="SSL" disabled type="checkbox" class="btcpay-toggle ms-2" />
+        </div>
+    }
+    else
+    {
+        <div class="form-group">
+            <label asp-for="Uri" class="form-label"></label>
+            <input asp-for="Uri" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.Macaroon != null)
+    {
+        <div class="form-group">
+            <label asp-for="Macaroon" class="form-label"></label>
+            <input asp-for="Macaroon" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.AdminMacaroon != null)
+    {
+        <div class="form-group">
+            <label asp-for="AdminMacaroon" class="form-label"></label>
+            <input asp-for="AdminMacaroon" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.InvoiceMacaroon != null)
+    {
+        <div class="form-group">
+            <label asp-for="InvoiceMacaroon" class="form-label"></label>
+            <input asp-for="InvoiceMacaroon" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.ReadonlyMacaroon != null)
+    {
+        <div class="form-group">
+            <label asp-for="ReadonlyMacaroon" class="form-label"></label>
+            <input asp-for="ReadonlyMacaroon" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.GRPCSSLCipherSuites != null)
+    {
+        <div class="form-group">
+            <label asp-for="GRPCSSLCipherSuites" class="form-label"></label>
+            <input asp-for="GRPCSSLCipherSuites" readonly class="form-control"/>
+        </div>
+    }
+    @if (Model.CertificateThumbprint != null)
+    {
+        <div class="form-group">
+            <label asp-for="CertificateThumbprint" class="form-label"></label>
+            <input asp-for="CertificateThumbprint" readonly class="form-control"/>
+        </div>
+    }
 </div>
 
 @section PageFootContent {

BTCPayServer/Views/UIServer/P2PService.cshtml

@@ -18,57 +18,53 @@
     </div>
 }
 
-<div class="row">
-    <div class="col-md-8">
-        @if (!ViewContext.ModelState.IsValid)
-        {
-            <div asp-validation-summary="All" class="text-danger"></div>
-        }
+@if (!ViewContext.ModelState.IsValid)
+{
+    <div asp-validation-summary="All" class="text-danger"></div>
+}
 
-        <h4 class="mb-3">Full node connection</h4>
-        <p>This page exposes information to connect remotely to your full node via the P2P protocol.</p>
+<h4 class="mb-3">Full node connection</h4>
+<p>This page exposes information to connect remotely to your full node via the P2P protocol.</p>
 
-        <h4 class="mb-3">Compatible wallets</h4>
-        <div>
-            <a href="https://play.google.com/store/apps/details?id=com.greenaddress.greenbits_android_wallet" target="_blank" class="d-inline-block me-3 mb-3 text-center" rel="noreferrer noopener">
-                <img src="~/img/GreenWallet.png" width="100" height="100" asp-append-version="true" alt="Blockstream Green" />
-                <div class="mt-2">Blockstream Green</div>
-            </a>
-            <a href="https://www.wasabiwallet.io/" target="_blank" class="d-inline-block me-3 mb-3 text-center" rel="noreferrer noopener">
-                <img src="~/img/wasabi.png" width="100" height="100" asp-append-version="true" alt="Wasabi Wallet" />
-                <div class="mt-2">Wasabi Wallet</div>
-            </a>
-        </div>
+<h4 class="mb-3">Compatible wallets</h4>
+<div class="services-list">
+    <a href="https://play.google.com/store/apps/details?id=com.greenaddress.greenbits_android_wallet" target="_blank" class="service" rel="noreferrer noopener">
+        <img src="~/img/GreenWallet.png" asp-append-version="true" alt="Blockstream Green" />
+        <h6>Blockstream Green</h6>
+    </a>
+    <a href="https://www.wasabiwallet.io/" target="_blank" class="service" rel="noreferrer noopener">
+        <img src="~/img/wasabi.png" asp-append-version="true" alt="Wasabi Wallet" />
+        <h6>Wasabi Wallet</h6>
+    </a>
+</div>
 
-        <h4 class="mt-5 mb-3">QR Code connection</h4>
-        <p>You can use QR Code to connect to @Model.WalletName with compatible wallets.</p>
+<h4 class="mt-4 mb-3">QR Code connection</h4>
+<p>You can use QR Code to connect to @Model.WalletName with compatible wallets.</p>
 
+<div class="form-group">
+    @if (!Model.ShowQR)
+    {
         <div class="form-group">
-            @if (!Model.ShowQR)
-            {
-                <div class="form-group">
-                    <form method="get">
-                        <input type="hidden" asp-for="ShowQR" value="true" />
-                        <button type="submit" class="btn btn-primary">Show Confidential QR Code</button>
-                    </form>
-                </div>
-            }
-            else
-            {
-                <div class="form-group">
-                    <div id="qrCode"></div>
-                    <div id="qrCodeData" data-url="@Model.ServiceLink"></div>
-                </div>
-                <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
-                <div id="detailsQR" class="collapse">
-                    <div class="form-group">
-                        <label asp-for="ServiceLink" class="form-label">QR Code data</label>
-                        <input asp-for="ServiceLink" class="form-control" readonly />
-                    </div>
-                </div>
-            }
+            <form method="get">
+                <input type="hidden" asp-for="ShowQR" value="true" />
+                <button type="submit" class="btn btn-primary">Show Confidential QR Code</button>
+            </form>
         </div>
-    </div>
+    }
+    else
+    {
+        <div class="form-group">
+            <div id="qrCode"></div>
+            <div id="qrCodeData" data-url="@Model.ServiceLink"></div>
+        </div>
+        <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
+        <div id="detailsQR" class="collapse">
+            <div class="form-group">
+                <label asp-for="ServiceLink" class="form-label">QR Code data</label>
+                <input asp-for="ServiceLink" class="form-control" readonly />
+            </div>
+        </div>
+    }
 </div>
 
 @section PageFootContent {

BTCPayServer/Views/UIServer/RPCService.cshtml

@@ -18,57 +18,53 @@
     </div>
 }
 
-<div class="row">
-    <div class="col-md-8">
-        @if (!ViewContext.ModelState.IsValid)
-        {
-            <div asp-validation-summary="All" class="text-danger"></div>
-        }
+@if (!ViewContext.ModelState.IsValid)
+{
+    <div asp-validation-summary="All" class="text-danger"></div>
+}
 
-        <h4 class="mb-3">Full node connection</h4>
-        <p>This page exposes information to connect remotely to your full node via the RPC protocol.</p>
+<h4 class="mb-3">Full node connection</h4>
+<p>This page exposes information to connect remotely to your full node via the RPC protocol.</p>
 
-        <h4 class="mb-3">Compatible wallets</h4>
-        <div>
-            <a href="https://apps.apple.com/us/app/fully-noded/id1436425586" target="_blank" class="d-inline-block me-3 text-center" rel="noreferrer noopener">
-                <img src="~/img/fullynoded.png" width="100" height="100" asp-append-version="true" alt="Fully Noded" />
-                <div class="mt-2">Fully Noded</div>
-            </a>
-            <a href="https://github.com/cryptoadvance/specter-desktop" target="_blank" class="d-inline-block me-3 text-center" rel="noreferrer noopener">
-                <img src="~/img/specter.png" width="100" height="100" asp-append-version="true" alt="Specter Desktop" />
-                <div class="mt-2">Specter Desktop</div>
-            </a>
-        </div>
+<h4 class="mb-3">Compatible wallets</h4>
+<div class="services-list">
+    <a href="https://apps.apple.com/us/app/fully-noded/id1436425586" target="_blank" class="service" rel="noreferrer noopener">
+        <img src="~/img/fullynoded.png" width="100" height="100" asp-append-version="true" alt="Fully Noded" />
+        <h6>Fully Noded</h6>
+    </a>
+    <a href="https://github.com/cryptoadvance/specter-desktop" target="_blank" class="service" rel="noreferrer noopener">
+        <img src="~/img/specter.png" asp-append-version="true" alt="Specter Desktop" />
+        <h6>Specter Desktop</h6>
+    </a>
+</div>
 
-        <h4 class="mt-5 mb-3">QR Code connection</h4>
-        <p>You can use QR Code to connect to @Model.WalletName with compatible wallets.</p>
+<h4 class="mt-4 mb-3">QR Code connection</h4>
+<p>You can use QR Code to connect to @Model.WalletName with compatible wallets.</p>
 
+<div class="form-group">
+    @if (!Model.ShowQR)
+    {
         <div class="form-group">
-            @if (!Model.ShowQR)
-            {
-                <div class="form-group">
-                    <form method="get">
-                        <input type="hidden" asp-for="ShowQR" value="true"/>
-                        <button type="submit" class="btn btn-primary">Show Confidential QR Code</button>
-                    </form>
-                </div>
-            }
-            else
-            {
-                <div class="form-group">
-                    <div id="qrCode"></div>
-                    <div id="qrCodeData" data-url="@Model.ServiceLink"></div>
-                </div>
-                <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
-                <div id="detailsQR" class="collapse">
-                    <div class="form-group">
-                        <label class="form-label">QR Code data</label>
-                        <input asp-for="ServiceLink" readonly class="form-control"/>
-                    </div>
-                </div>
-            }
+            <form method="get">
+                <input type="hidden" asp-for="ShowQR" value="true"/>
+                <button type="submit" class="btn btn-primary">Show Confidential QR Code</button>
+            </form>
         </div>
-    </div>
+    }
+    else
+    {
+        <div class="form-group">
+            <div id="qrCode"></div>
+            <div id="qrCodeData" data-url="@Model.ServiceLink"></div>
+        </div>
+        <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
+        <div id="detailsQR" class="collapse">
+            <div class="form-group">
+                <label class="form-label">QR Code data</label>
+                <input asp-for="ServiceLink" readonly class="form-control"/>
+            </div>
+        </div>
+    }
 </div>
 
 @section PageFootContent {

BTCPayServer/Views/UIStores/Lightning.cshtml

@@ -0,0 +1,65 @@
+@using BTCPayServer.Lightning
+@using BTCPayServer.Client
+@model LightningViewModel
+@{
+    Layout = "../Shared/_NavLayout.cshtml";
+    ViewData["NavPartialName"] = "../UILightning/_Nav";
+    ViewData.SetActivePage(StoreNavPages.Lightning, $"{Model.CryptoCode} Lightning", Context.GetStoreData().Id);
+}
+
+<div class="mb-5">
+    <h4 class="mb-3">@ViewData["Title"]</h4>
+    <div class="mb-3">
+        <span class="me-2">@Model.LightningNodeType Node</span>
+        
+        @if (Model.LightningNodeType != LightningNodeType.Internal)
+        {
+            <span class="me-2">
+                @if (LightningConnectionString.TryParse(Model.ConnectionString, out var cs))
+                {
+                    @typeof(LightningConnectionType).DisplayName(cs.ConnectionType.ToString())
+                    <span>(@cs.BaseUri)</span>
+                }
+                else
+                {
+                    @Model.ConnectionString
+                }
+            </span>
+        }
+
+        <a class="text-secondary"
+           asp-controller="UIPublicLightningNodeInfo"
+           asp-action="ShowLightningNodeInfo"
+           asp-route-cryptoCode="@Model.CryptoCode"
+           asp-route-storeId="@Model.StoreId"
+           target="_blank">
+            Public Node Info
+        </a>
+    </div>
+    
+    @if (Model.Services != null && Model.Services.Any())
+    {
+        <div permission="@Policies.CanModifyServerSettings" class="mt-4">
+            <h5 class="mb-3">Services</h5>
+            <div id="Services" class="services-list">
+                @foreach (var service in Model.Services)
+                {
+                    @if (string.IsNullOrEmpty(service.Link))
+                    {
+                        <a asp-controller="UIServer" asp-action="Service" asp-route-serviceName="@service.ServiceName" asp-route-cryptoCode="@service.CryptoCode" class="service" id="@($"Service-{service.ServiceName}")">
+                            <img src="@($"~/img/{service.Type.ToLower()}.png")" asp-append-version="true" alt="@service.DisplayName" />
+                            <h6>@service.DisplayName</h6>
+                        </a>
+                    }
+                    else
+                    {
+                        <a href="@service.Link" target="_blank" rel="noreferrer noopener" class="service" id="@($"Service-{service.ServiceName}")">
+                            <img src="@($"~/img/{service.Type.ToLower()}.png")" asp-append-version="true" alt="@service.DisplayName" />
+                            <h6>@service.DisplayName</h6>
+                        </a>
+                    }
+                }
+            </div>
+        </div>
+    }
+</div>

BTCPayServer/Views/UIStores/LightningSettings.cshtml

@@ -2,6 +2,7 @@
 @model LightningSettingsViewModel
 @{
     Layout = "../Shared/_NavLayout.cshtml";
+    ViewData["NavPartialName"] = "../UILightning/_Nav";
     ViewData.SetActivePage(StoreNavPages.LightningSettings, $"{Model.CryptoCode} Lightning Settings", Context.GetStoreData().Id);
 }
 
@@ -9,41 +10,35 @@
     <div class="col-lg-10 col-xl-9">
         <div class="mb-5">
             <h4 class="mb-3">@ViewData["Title"]</h4>
-            <table class="table table-borderless table-responsive-md">
-                <tbody>
-                <tr>
-                    <th class="w-150px">Node Type</th>
-                    <td class="text-break">
-                        <span class="me-3">@Model.LightningNodeType</span>
-                        <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupLightningNodeLink" class="text-secondary">
-                            Change connection
-                        </a>
-                    </td>
-                </tr>
+            <div class="text-break">
+                <span class="me-2">@Model.LightningNodeType Node</span>
                 @if (Model.LightningNodeType != LightningNodeType.Internal)
                 {
-                    if (LightningConnectionString.TryParse(Model.ConnectionString, out var cs))
-                    {
-                        <tr>
-                            <th>Connection Type</th>
-                            <td>@typeof(LightningConnectionType).DisplayName(cs.ConnectionType.ToString())</td>
-                        </tr>
-                        <tr>
-                            <th>Base URI</th>
-                            <td>@cs.BaseUri</td>
-                        </tr>
-                    }
-                    else
-                    {
-                        <tr>
-                            <th>Connection String</th>
-                            <td>@Model.ConnectionString</td>
-                        </tr>
-                    }
+                    <span class="me-2">
+                        @if (LightningConnectionString.TryParse(Model.ConnectionString, out var cs))
+                        {
+                            @typeof(LightningConnectionType).DisplayName(cs.ConnectionType.ToString())
+                            <span>(@cs.BaseUri)</span>
+                        }
+                        else
+                        {
+                            @Model.ConnectionString
+                        }
+                    </span>
                 }
-                </tbody>
-            </table>
-            
+
+                <a class="text-secondary me-2"
+                   asp-controller="UIPublicLightningNodeInfo"
+                   asp-action="ShowLightningNodeInfo"
+                   asp-route-cryptoCode="@Model.CryptoCode"
+                   asp-route-storeId="@Model.StoreId"
+                   target="_blank">
+                    Public Node Info
+                </a>
+                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupLightningNodeLink" class="text-secondary">
+                    Change connection
+                </a>
+            </div>
             <form method="post" class="mt-n2 text-center">
                 <div class="text-start">
                     <h4 class="mt-5 mb-3">Payment</h4>

BTCPayServer/Views/UIStores/StoreNavPages.cs

@@ -2,6 +2,6 @@ namespace BTCPayServer.Views.Stores
 {
     public enum StoreNavPages
     {
-        Create, Dashboard, Rates, PaymentMethods, OnchainSettings, LightningSettings, CheckoutAppearance, General, Tokens, Users, PayButton, Integrations, Webhooks, PullPayments, Payouts
+        Create, Dashboard, Rates, PaymentMethods, OnchainSettings, LightningSettings, Lightning, CheckoutAppearance, General, Tokens, Users, PayButton, Integrations, Webhooks, PullPayments, Payouts
     }
 }

BTCPayServer/wwwroot/img/icon-sprite.svg

@@ -34,4 +34,8 @@
 <symbol id="shopify" viewBox="0 0 32 32"><path transform="scale(.7) translate(5, 5)" d="m20.45 31.97 9.62-2.08-3.5-23.64c-.03-.16-.15-.26-.28-.26l-2.57-.18s-1.7-1.7-1.92-1.88a.41.41 0 0 0-.16-.1l-1.22 28.14zm-4.83-16.9s-1.09-.56-2.37-.56c-1.93 0-2 1.2-2 1.52 0 1.64 4.31 2.29 4.31 6.17 0 3.06-1.92 5.01-4.54 5.01-3.14 0-4.72-1.95-4.72-1.95l.86-2.78s1.66 1.42 3.04 1.42c.9 0 1.3-.72 1.3-1.24 0-2.16-3.54-2.26-3.54-5.81-.04-2.98 2.1-5.9 6.44-5.9 1.68 0 2.5.49 2.5.49l-1.26 3.62zM14.9 1.1c.17 0 .36.06.53.19-1.31.62-2.75 2.18-3.34 5.32-.88.28-1.73.54-2.52.77.69-2.38 2.36-6.26 5.33-6.26zm1.64 3.94v.18l-3.2.98c.63-2.37 1.79-3.53 2.79-3.96.26.67.41 1.57.41 2.8zm.72-2.98c.92.1 1.52 1.15 1.9 2.34-.46.15-.98.3-1.54.49v-.34c0-1-.13-1.82-.36-2.5zm3.99 1.72-.1.03c-.03 0-.39.1-.96.28-.56-1.65-1.56-3.16-3.34-3.16h-.16C16.2.28 15.56 0 15.02 0 10.88 0 8.9 5.17 8.28 7.8c-1.6.48-2.75.84-2.88.9-.9.28-.93.3-1.03 1.15-.1.62-2.44 18.75-2.44 18.75L20.01 32z" fill="currentColor"/></symbol>
 <symbol id="done" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="12" fill="#51B13E"/><path d="m7 12.14 3.55 3.54L17.5 9" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
 <symbol id="home" viewBox="0 0 24 24" fill="none"><path d="M19.9257 9.5143L19.0854 6.01717C18.9094 5.29694 18.2852 4.80078 17.557 4.80078H6.44138C5.72114 4.80078 5.08894 5.30494 4.92089 6.01717L4.08062 9.5143C3.88855 10.3306 4.06461 11.1628 4.57678 11.819C4.6408 11.9071 4.72882 11.9711 4.80085 12.0511V17.6049C4.80085 18.4852 5.52108 19.2054 6.40136 19.2054H17.605C18.4853 19.2054 19.2055 18.4852 19.2055 17.6049V12.0511C19.2775 11.9791 19.3655 11.9071 19.4296 11.827C19.9417 11.1708 20.1258 10.3306 19.9257 9.5143ZM17.5329 6.39329L18.3732 9.89042C18.4532 10.2265 18.3812 10.5626 18.1732 10.8267C18.0611 10.9708 17.821 11.2028 17.4209 11.2028C16.9328 11.2028 16.5086 10.8107 16.4526 10.2905L15.9884 6.4013L17.5329 6.39329ZM12.8034 6.4013H14.3719L14.8041 10.0185C14.8441 10.3306 14.748 10.6427 14.54 10.8747C14.3639 11.0828 14.1078 11.2028 13.7797 11.2028C13.2436 11.2028 12.8034 10.7307 12.8034 10.1545V6.4013ZM9.19426 10.0185L9.6344 6.4013H11.2029V10.1545C11.2029 10.7307 10.7628 11.2028 10.1706 11.2028C9.89849 11.2028 9.65041 11.0828 9.45835 10.8747C9.25828 10.6427 9.16225 10.3306 9.19426 10.0185ZM5.63312 9.89042L6.44138 6.4013H8.01788L7.55373 10.2905C7.48971 10.8107 7.07358 11.2028 6.58542 11.2028C6.1933 11.2028 5.94522 10.9708 5.84118 10.8267C5.62511 10.5706 5.55309 10.2265 5.63312 9.89042ZM6.40136 17.6049V12.7793C6.46538 12.7874 6.5214 12.8034 6.58542 12.8034C7.28165 12.8034 7.91385 12.5153 8.378 12.0431C8.85815 12.5233 9.49836 12.8034 10.2266 12.8034C10.9228 12.8034 11.547 12.5153 12.0112 12.0591C12.4833 12.5153 13.1235 12.8034 13.8438 12.8034C14.516 12.8034 15.1562 12.5233 15.6363 12.0431C16.1005 12.5153 16.7327 12.8034 17.4289 12.8034C17.4929 12.8034 17.549 12.7874 17.613 12.7793V17.6049H6.40136Z" fill="currentColor"/></symbol>
+<symbol id="spark" viewBox="0 0 24 24"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
+<symbol id="rtl" viewBox="0 0 610 524"><defs><path id="a" d="M.45.26h52.23V52H.45z"/></defs><g fill="none" fill-rule="evenodd"><path d="M418.62 107.6c1.95 4.6 2.73 8.24 2.63 10.24-7.56-4.56-18.93-8.43-25.14-9.54-4.03-.72 9.18-3.93 22.51-.7m10.99 169.33a476.42 476.42 0 0 1 14.43-2.8 447.25 447.25 0 0 0-5.98-3.71c-25.45-15.5-52.58-28.64-79.4-41.37-16.91-8.03-34.15-16.02-51.7-23.22 15.31-20.19 34.91-37.32 55.86-52 .02 0 .1-.07.23-.16 4.59 6.26 10.38 10.51 13.29 12.11 5.68 3.13 12.84 6.06 19.41 6.95a110.45 110.45 0 0 0 35.44-.55c1.06-.18 2.14-.3 3.2-.49a105.01 105.01 0 0 1 16.87-1.54c5.88-.1 8.79 1.14 9.48 1.32 2.1.54 3.89 1.44 4.88 2.64a39.71 39.71 0 0 0 3.7 4.13c3.96 3.93 7.89 6.11 13.58 6.74 7.34.8 12.53-2.07 16.2-6.83 1.74-2.25.9-5.78.71-6.47-.96-3.55-3.18-8.7-4.8-13.5a27.3 27.3 0 0 0-4.86-7.64l-2.42-2.56c-3.78-4-7.59-7.96-11.36-11.95-15.06-15.92-31.38-30.58-48.21-44.59l-5.24-4.36-3.82-3.16a1032.74 1032.74 0 0 0-6.06-4.96l-1.63-1.31c-.86-.7-2.81-2.34-4.46-3.66 5.46-5.44 9.86-8.83 17.68-13.95 1.12-.74 7.16-3.96 6.95-4.78-.13-.49-10.05-.38-21.4 1.09-4 .51-26.38 3.81-41.74 7.16-16.35 3.56-33.62 8.55-49.53 13.55-45.94 14.47-89.81 34.07-129.99 60.7-23.09 15.32-44.7 32.21-65.56 50.42a1066.8 1066.8 0 0 0-28.81 25.95 696.64 696.64 0 0 0-4.41 4.19c2 .37 4.01.76 6.02 1.18 16.6 3.4 33.04 7.97 49.02 12.53 19.53 5.59 39.3 11.6 58.41 19a583.18 583.18 0 0 0-31.63 32.21 765.5 765.5 0 0 0-53.37 66.63c-21.6 30.15-40.02 62.67-56.09 96.17a765.04 765.04 0 0 0-4.5 9.54c2.97-2.38 5.96-4.74 8.97-7.08 26.01-20.17 53.44-38.82 80.82-56.84 38.53-25.35 79.88-46.3 122.78-63.16 51.73-20.32 104.56-40.03 159.04-51.57" fill="currentColor"/></g></symbol>
+<symbol id="thunderhub" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(4, 4)"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><path d="M9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></g></symbol>
+<symbol id="lightningterminal" viewBox="0 0 28 55"><g fill="currentColor"><path d="m27.25 30.5-15.9 23.2a.84.84 0 1 1-1.38-.96l15.9-23.19a.84.84 0 1 1 1.38.96zm-2.09-4.13L9.63 49.08a.84.84 0 0 1-1.39-.95l15.54-22.71a.84.84 0 0 1 1.38.95zm-4.72-24.8L2.43 27.9h16.9l-1.14 1.68H.36a.84.84 0 0 1-.22-1.15L19 .62A.84.84 0 0 1 20.16.4c.4.26.52.78.28 1.19z"/><path d="M22.12 6.62 10.24 23.99H22l-1.15 1.68H7.05l1.14-1.68 12.53-18.3a.84.84 0 0 1 1.39.93z"/></g></symbol>
 </svg>

BTCPayServer/wwwroot/main/site.css

@@ -220,3 +220,24 @@ svg.icon {
 svg.icon-note {
   color: var(--btcpay-neutral-500);
 }
+
+/* Services */
+.services-list {
+    display: flex;
+}
+
+.services-list .service {
+    --service-width: 100px;
+    flex: 0 0 var(--service-width);
+    margin: 0 var(--btcpay-space-l) var(--btcpay-space-l) 0;
+    text-align: center;
+}
+
+.services-list .service img {
+    width: var(--service-width);
+    height: var(--service-width);
+}
+
+.services-list .service h6 {
+    margin: var(--btcpay-space-m) 0 0 0;
+}