Add modal component service & create add node modal (#152)

* Add modal component service & creat add node modal

* Add error message

* move the code for blazor modal to its own feature

* Fix modal

* Add refresh button

* Lay foundations for tx details

* Add wallet selection dropdown

* Additional navigation

* Move some components to node host

* Fix wallet sync calculation

Co-authored-by: dangershony <dan.gershony@gmail.com>

src/Blockcore/UI/BlazorModal/ModalService.cs

@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Components;
+using System;
+
+namespace BlazorModal.Services
+{
+    public class ModalService
+    {
+        public event Action<string, RenderFragment> OnShow;
+
+        public event Action OnClose;
+
+        public void Show(string title, Type contentType)
+        {
+            if (contentType.BaseType != typeof(ComponentBase))
+            {
+                throw new ArgumentException($"{contentType.FullName} must be a Blazor Component");
+            }
+
+            var content = new RenderFragment(x => { x.OpenComponent(1, contentType); x.CloseComponent(); });
+
+            OnShow?.Invoke(title, content);
+        }
+
+        public void Close()
+        {
+            OnClose?.Invoke();
+        }
+    }
+}

src/Features/Blockcore.Features.ColdStaking/UI/Dropdown.razor

@@ -0,0 +1,33 @@
+@typeparam TItem
+<div class="dropdown">
+    <button class="btn btn-primary btn-sm dropdown-toggle mr-1" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show " 
+            aria-haspopup="true" aria-expanded="false">
+            @Tip
+    </button>
+    <CascadingValue name="Dropdown" Value="@this">
+    <div class="dropdown-menu @(show? "show":"")" >
+        @ChildContent
+    </div>
+    </CascadingValue>
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment InitialTip{get;set;}
+    [Parameter]
+    public RenderFragment ChildContent{get;set;}
+    [Parameter]
+    public EventCallback<TItem> OnSelected {get;set;}
+
+    private bool show = false;
+    private RenderFragment Tip ;
+
+    protected override void OnInitialized(){ this.Tip = InitialTip; }
+    public async Task HandleSelect(TItem item, RenderFragment<TItem> contentFragment)
+    {
+        this.Tip= contentFragment.Invoke(item);
+        this.show=false;
+        StateHasChanged();
+        await this.OnSelected.InvokeAsync(item);
+    }
+}

src/Features/Blockcore.Features.ColdStaking/UI/DropdownListItem.razor

@@ -0,0 +1,12 @@
+@typeparam TItem
+<a class="dropdown-item" Item="@Item" @onclick="e=> Dropdown.HandleSelect(Item, ChildContent)" >@ChildContent(Item)</a>
+
+@code {
+    [CascadingParameter(Name="Dropdown")]
+    public Dropdown<TItem> Dropdown {get;set;}
+
+    [Parameter]
+    public TItem Item{get;set;}
+    [Parameter]
+    public RenderFragment<TItem> ChildContent {get;set;}
+}

src/Features/Blockcore.Features.ColdStaking/UI/Pages/ColdStake.razor

@@ -120,7 +120,7 @@
                                         }
                                 }
                                 <td class="text-center">
-                                    <button class="btn btn-sm btn-primary"><span class="oi oi-zoom-in" aria-hidden="true"></span></button>
+                                    <button class="btn btn-sm btn-secondary"><span class="oi oi-arrow-right" aria-hidden="true"></span></button>
                                 </td>
                             </tr>
                             }

src/Features/Blockcore.Features.ColdStaking/UI/Pages/ColdStakeEnableWallet.razor

@@ -3,7 +3,6 @@
 @using Blockcore.Features.ColdStaking
 @using Blockcore.Features.Wallet.Interfaces
 @using Blockcore.Base.Deployments
-@using NBitcoin;
 
 @inject IWalletManager WalletManager
 @inject NavigationManager NavigationManager

src/Features/Blockcore.Features.ColdStaking/UI/Pages/ColdStakeView.razor

@@ -8,12 +8,25 @@
 @inject NavigationManager NavigationManager
 @inject IWalletManager WalletManager
 @inject Network Network
+@inject ModalService ModalService
 
 @{
-
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-    <h1 style="max-width: 18em" class="h2"><strong>Cold Staking - @walletname</strong></h1>
+    <h1 style="max-width: 18em" class="h2"><strong>Cold Staking</strong></h1>
     <div class="btn-toolbar mb-2 mb-md-0">
+        <Dropdown TItem="string" OnSelected="@OnSelected" >
+            <InitialTip>@walletname</InitialTip>
+            <ChildContent>
+                @{
+                    foreach (var walletName in this.WalletManager.GetWalletsNames()) {
+                        foreach (var account in this.WalletManager.GetAccounts(walletName))
+                        {
+                        <DropdownListItem Item="@walletName">@walletName</DropdownListItem>
+                        }
+                    }
+                }
+            </ChildContent>
+        </Dropdown>
         <button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToSetup(walletname); }">
             <span class="oi oi-pulse" aria-hidden="true"></span> Coldstake</button>
         <button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToDelegate(walletname); }">
@@ -77,18 +90,22 @@ var model = WalletModelBuilder.GetHistory(this.WalletManager, Network, new Walle
                                 <th class="text-primary text-center"><strong>DATE/TIME</strong></th>
                                 <th class="text-primary text-right"><strong>AMOUNT</strong></th>
                                 <th class="text-primary text-right"><strong>BLOCK</strong></th>
+                                <th class="text-primary text-center"><strong>DETAILS</strong></th>
                             </tr>
                         </thead>
                         <tbody>
                             @foreach (var history in model.AccountsHistoryModel)
                             {
                                 foreach (var transaction in history.TransactionsHistory)
                                 {
-                                    <tr> @* @onclick="() => { NavigateToViewTx(transaction.Id); }" *@
+                                    <tr @onclick="ViewTransaction">
                                         <td>@transaction.Type</td>
                                         <td class="text-center">@String.Format("{0:f}", transaction.Timestamp)</td>
                                         <td class="text-right">@transaction.Amount</td>
                                         <td class="text-right">@transaction.ConfirmedInBlock</td>
+                                        <td class="text-center">
+                                            <button class="btn btn-sm btn-secondary"><span class="oi oi-list" aria-hidden="true"></span></button>
+                                        </td>                                     
                                     </tr>
                                 }
                             }
@@ -107,7 +124,12 @@ var model = WalletModelBuilder.GetHistory(this.WalletManager, Network, new Walle
     public string walletname { get; set; }
     [Parameter]
     public string accountname { get; set; }
-
+    ColdStakingManager ColdStakingManager;
+    protected override Task OnInitializedAsync()
+    {
+        ColdStakingManager = this.WalletManager as ColdStakingManager;
+        return Task.CompletedTask;
+    }
     private void NavigateToEnableWallet()
     {
         NavigationManager.NavigateTo("coldstaking-enablewallet");
@@ -126,8 +148,17 @@ var model = WalletModelBuilder.GetHistory(this.WalletManager, Network, new Walle
         NavigationManager.NavigateTo("coldstaking-delegate/" + walletName);
     }
 
-    private void NavigateToViewTx(uint256 txId)
+    private void ViewTransaction()
+    {
+        ModalService.Show("Transaction Details", typeof(ViewTransaction));
+    }
+    private void NavigateToColdStakeView(string walletName)
+    {
+        NavigationManager.NavigateTo("coldstakeview/" + walletName + "/coldStakingColdAddresses");
+    }    
+    private void OnSelected(string selection)
     {
-        NavigationManager.NavigateTo("coldStakeviewtx");
+        Console.WriteLine(selection);
+        NavigateToColdStakeView(selection);
     }
 }

src/Features/Blockcore.Features.ColdStaking/UI/Pages/ViewTransaction.razor

@@ -0,0 +1,13 @@
+@if (ShowForm)
+{
+
+}
+
+@code
+{
+	bool ShowForm { get; set; } = true;
+	private void SubmitForm()
+	{
+		ShowForm = false;
+	}
+}

src/Features/Blockcore.Features.ColdStaking/UI/_Imports.razor

@@ -1 +1,3 @@
-@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web
+@using BlazorModal
+@using BlazorModal.Services

src/Features/Blockcore.Features.NodeHost/MvcBuilderExtensions.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Reflection;
+using BlazorModal.Services;
 using Blockcore.Builder.Feature;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.DependencyInjection;
@@ -40,5 +41,10 @@ public static IMvcBuilder AddControllers(this IMvcBuilder builder, IEnumerable<I
 
             return builder;
         }
+
+        public static IServiceCollection AddBlazorModal(this IServiceCollection services)
+        {
+            return services.AddScoped<ModalService>();
+        }
     }
 }

src/Features/Blockcore.Features.NodeHost/Startup.cs

@@ -15,6 +15,7 @@
 using Microsoft.OpenApi.Models;
 using Newtonsoft.Json;
 using Swashbuckle.AspNetCore.SwaggerUI;
+using BlazorModal;
 
 namespace Blockcore.Features.NodeHost
 {
@@ -82,6 +83,9 @@ public void ConfigureServices(IServiceCollection services)
                     // The UI elements moved under the UI folder
                     options.RootDirectory = "/UI/Pages";
                 });
+
+            	services.AddBlazorModal();
+
             }
 
             if (hostSettings.EnableWS)

src/Features/Blockcore.Features.NodeHost/UI/Pages/AddNode.razor

@@ -0,0 +1,38 @@
+@using Blockcore.Utilities.Extensions
+
+@inject Blockcore.Connection.IConnectionManager ConnectionManager
+
+@if (ShowForm)
+{
+
+<div class="input-group">
+		<input @bind="NodeIp" type="text" class="form-control" placeholder="Node IP Address" />
+		<div class="input-group-append">
+			<button class="btn btn-primary" @onclick="Addnode">
+				<span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
+		</div>
+        <div class="input-group mt-2">
+            <div class="alert-warning">
+                @Alert
+            </div>
+        </div>
+</div>
+}
+
+@code
+{
+	bool ShowForm { get; set; } = true;
+    private string NodeIp { get; set; }
+    string Alert { get; set; }
+    private void Addnode()
+    {
+
+        if (string.IsNullOrEmpty(this.NodeIp)) { this.Alert = "Please enter an IP address"; return; }
+        this.Alert = string.Empty;
+        var endpoint = this.NodeIp.ToIPEndPoint(this.ConnectionManager.Network.DefaultPort);
+        this.ConnectionManager.AddNodeAddress(endpoint);
+        this.Alert = $"Added Node: {endpoint}";
+    }
+
+
+}

src/Features/Blockcore.Features.NodeHost/UI/Pages/Index.razor

@@ -8,31 +8,20 @@
 @inject Blockcore.Connection.IConnectionManager ConnectionManager
 @inject Blockcore.Interfaces.IInitialBlockDownloadState InitialBlockDownloadState
 @inject NavigationManager NavigationManager
+@inject ModalService ModalService
 
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
     <h1 class="h2"><strong>@this.Network.CoinTicker.ToUpper() Network</strong></h1>
     <div class="btn-toolbar mb-2 mb-md-0">
-        <div class="input-group">
-            <input @bind="NodeIp" type="text" class="form-control-sm" placeholder="Node IP Address" />
-            <div class="input-group-append">
-                <button class="btn btn-sm btn-primary mr-1" @onclick="Addnode">
-                    <span class="oi oi-plus" aria-hidden="true"></span> Add Node
-                </button>
-            </div>
-            <button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }">
-                <span class="oi oi-list" aria-hidden="true"></span> View Logs
-            </button>
-            <button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }">
-                <span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown
-            </button>
-        </div>
+                 <button class="btn btn-sm btn-primary mr-1" @onclick="AddNode">
+                    <span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
+                <button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }">
+                    <span class="oi oi-list" aria-hidden="true"></span> View Logs</button>
+                <button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }">
+                    <span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown</button>
     </div>
 </div>
 
-<div class="input-group mb-3">
-    <div class="alert-warning">@Alert</div>
-</div>
-
 @{
     if (this.InitialBlockDownloadState.IsInitialBlockDownload())
     {
@@ -152,6 +141,7 @@
         <div class="col-xl-12 col-sm-12 grid-margin stretch-card">
             <div class="card">
                 <div class="card-body">
+                    <h4 class="card-title">Peers</h4>
                     <div class="table-responsive small">
                         <table class="table table-border-bottom table-striped table-sm table-hover">
                             <thead class="thead">
@@ -179,29 +169,20 @@
             </div>
         </div>
     </div>
+
 }
 @code
 {
-    private string NodeIp { get; set; }
-    string Alert { get; set; }
-    private void Addnode()
-    {
-        if (string.IsNullOrEmpty(this.NodeIp)) { this.Alert = "Please enter an IP address"; return; }
-        this.Alert = string.Empty;
-
-        var endpoint = this.NodeIp.ToIPEndPoint(this.ConnectionManager.Network.DefaultPort);
-
-        this.ConnectionManager.AddNodeAddress(endpoint);
-
-        this.Alert = $"node {endpoint} added";
-    }
     private void Shutdown()
     {
         this.FullNode?.NodeLifetime.StopApplication();
     }
-
     private void NavigateToLogs()
     {
         NavigationManager.NavigateTo("logs");
     }
-}
+    private void AddNode()
+    {
+        ModalService.Show("Add Node", typeof(AddNode));
+    }
+}

src/Features/Blockcore.Features.NodeHost/UI/Pages/Logs.razor

@@ -5,11 +5,19 @@
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
     <h1 class="h2"><strong>Node Logs</strong></h1>
     <div class="btn-toolbar mb-2 mb-md-0">
+            <button class="btn btn-sm btn-secondary" @onclick="ReloadPage"><span class="oi oi-reload" aria-hidden="true"></span></button>
     </div>
 </div>
 
 @{
 <pre>
 @(((Blockcore.FullNode)this.FullNode).LastLogOutput.TrimStart(' '))
 </pre>
+}
+
+@code {
+    private async Task ReloadPage()
+    {
+
+    }
 }

src/Features/Blockcore.Features.NodeHost/UI/Pages/_Host.cshtml

@@ -1,6 +1,7 @@
 @page "/"
 @namespace Blockcore.Features.NodeHost.UI.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, BlazorModal
 @{
     Layout = null;
 }