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>

Author: thecrypt0hunter

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)