UI updates

.gitignore

@@ -265,3 +265,6 @@ src/.idea/.idea.Stratis.Bitcoin.FullNode/.idea/
 *.iml
 /src/.idea
 /src/Blockcore.Benchmark/BenchmarkDotNet.Artifacts/results
+.vscode/launch.json
+.vscode/tasks.json
+.gitignore

src/Blockcore/Interfaces/UI/INavigationItem.cs

@@ -7,7 +7,7 @@ namespace Blockcore.Interfaces.UI
     public interface INavigationItem
     {
         public string Name { get; }
-
         public string Navigation { get; }
+        public string Icon { get; }
     }
 }

src/Features/Blockcore.Features.ColdStaking/UI/NavItem.cs

@@ -5,7 +5,7 @@ namespace Blockcore.Features.Wallet.UI
     public class ColdStakingNavigationItem : INavigationItem
     {
         public string Name => "Cold Staking";
-
         public string Navigation => "ColdStaking";
+        public string Icon => "oi-pulse";
     }
 }

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

@@ -8,154 +8,182 @@
 @inject IWalletManager WalletManager
 @inject NavigationManager NavigationManager
 @inject NodeDeployments NodeDeployments
+@inject Network Network
 
 @if (!NodeDeployments.GetFlags().ScriptFlags.HasFlag(ScriptVerify.CheckColdStakeVerify))
 {
     <h2>Cold staking is not activated</h2>
     return;
 }
 
-<h2>Cold staking wallets</h2>
-
-<p>Enable cold staking on an existing wallet.</p>
-
-    <hr />
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span style="min-width: 10em" class="input-group-text" id="basic-addon1">Wallet Name:</span>
-        </div>
-        <input @bind="WalletName" type="text" class="form-control" placeholder="wallet name" />
+<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>Cold Staking</strong></h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        @foreach (var walletName in this.WalletManager.GetWalletsNames()) {
+            var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
+            if (coldStakingWalletEnabled != null) {} else {
+                <button class="btn btn-sm btn-primary" @onclick="() => { NavigateToEnableWallet(); }">Enable Cold Staking</button>
+                break;
+            }
+        }
     </div>
-
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span style="min-width: 10em" class="input-group-text">Password:</span>
+</div>
+@{
+<div class="row mb-3">
+    <div class="col-xl-6 col-sm-6 grid-margin stretch-card">
+        <div class="card">
+            <div class="card-body">
+                <h5>Main Balance</h5>
+                <div class="row">
+                    <div class="col-12">
+                        <div class="d-flex align-items-center align-self-start">
+                            <h3 class="text-left">@totalBalance().balance </h3>
+                            <p class="text-success ml-2 mb-0 font-weight-medium">@this.Network.CoinTicker.ToUpper()</p>
+                        </div>
+                    </div>
+                </div>
+                <h6 class="text-left text-muted font-weight-normal">@totalUnconfirmedBalance().balance (unconfirmed)</h6>
+            </div>
         </div>
-        <input @bind="Password" type="password" class="form-control" placeholder="password" />
     </div>
-
-    <div class="input-group mb-3">
-        <button class="btn btn-info" @onclick="CreateColdStakeAccount">Create account</button>
+    <div class="col-xl-6 col-sm-6 grid-margin stretch-card">
+        <div class="card">
+            <div class="card-body">
+                <h5>Cold Balance</h5>
+                <div class="row">
+                    <div class="col-12">
+                        <div class="d-flex align-items-center align-self-start">
+                            <h3 class="text-left">@totalBalance().coldBalance </h3>
+                            <p class="text-success ml-2 mb-0 font-weight-medium">@this.Network.CoinTicker.ToUpper()</p>
+                        </div>
+                    </div>
+                </div>
+                <h6 class="text-left text-muted font-weight-normal">@totalUnconfirmedBalance().coldBalance (unconfirmed)</h6>
+            </div>
+        </div>
     </div>
-    <hr />
-
-<p>Information about the deployed wallets.</p>
-
-@{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Wallet / Account</th>
-                <th>Confirmed balance</th>
-                <th>Unconfirmed balance</th>
-                <th>Action</th>
-            </tr>
-        </thead>
-        <tbody>
-            @{
-                foreach (var walletName in this.WalletManager.GetWalletsNames())
-                {
-                    var coldStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
-                    if (coldStakingAccount != null)
-                    {
-                        var coldAccountBalance = ColdStakingManager.GetBalances(walletName, coldStakingAccount.Name).Single();
-
-                        <tr title="Withdraw">
-                            <td> @walletName <strong>/</strong> @coldStakingAccount.Name</td>
-                            <td>@coldAccountBalance.AmountConfirmed</td>
-                            <td>@coldAccountBalance.AmountUnconfirmed</td>
-                            <td>
-                                @if (coldAccountBalance.AmountConfirmed + coldAccountBalance.AmountUnconfirmed > 0)
-                                {
-                                    <button class="btn btn-link btn-sm" @onclick="() => { NavigateToWithdraw(walletName); }">Withdraw</button>
+</div>
+
+<div class="row ">
+    <div class="col-12 grid-margin">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="card-title">Balances</h4>
+                <div class="table-responsive">
+                    <table class="table table-border-bottom table-striped table-sm table-hover">
+                        <thead class="thead">
+                            <tr>
+                                <th>Wallet</th>
+                                <th>Account balance</th>
+                                <th>Cold balance</th>
+                                <th>Hot balance</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach (var walletName in this.WalletManager.GetWalletsNames()) {
+
+                                var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
+                                if (coldStakingWalletEnabled != null) {
+                                    <tr @onclick="() => { NavigateToColdStakeView(walletName); }" >
+                                    <td>@walletName</td>
+                                    @foreach (var account in this.WalletManager.GetAccounts(walletName)) {
+
+                                        var accountBalance = this.WalletManager.GetBalances(walletName, account.Name).Single();
+
+                                        @if (@accountBalance.AmountUnconfirmed >0) {
+                                            <td>@accountBalance.AmountConfirmed (@accountBalance.AmountUnconfirmed )</td>
+                                        } else {
+                                            <td>@accountBalance.AmountConfirmed</td>
+                                        }
+
+                                        var coldStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
+
+                                        if (coldStakingAccount != null) {
+                                            var coldAccountBalance = ColdStakingManager.GetBalances(walletName, coldStakingAccount.Name).Single();
+                                            @if (@coldAccountBalance.AmountUnconfirmed >0) {
+                                                <td>@coldAccountBalance.AmountConfirmed (@coldAccountBalance.AmountUnconfirmed )</td>
+                                            } else {
+                                                <td>@coldAccountBalance.AmountConfirmed</td>
+                                            }
+                                        }
+
+                                        var hotStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), false);
+
+                                        if (hotStakingAccount != null) {
+                                            var hotAccountBalance = ColdStakingManager.GetBalances(walletName, hotStakingAccount.Name).Single();
+                                            @if (@hotAccountBalance.AmountUnconfirmed >0) {
+                                                <td>@hotAccountBalance.AmountConfirmed (@hotAccountBalance.AmountUnconfirmed )</td>
+                                            } else {
+                                                <td>@hotAccountBalance.AmountConfirmed</td>
+                                            }
+                                        }
                                 }
-                            </td>
-                        </tr>
-                    }
-                    else
-                    {
-                        <tr>
-                            <td>@walletName</td>
-                            <td>-</td>
-                            <td>-</td>
-                            <td>-</td>
-                        </tr>
-                    }
-
-                    var hotStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), false);
-                    if (hotStakingAccount != null)
-                    {
-                        var hotAccountBalance = ColdStakingManager.GetBalances(walletName, hotStakingAccount.Name).Single();
-
-                        <tr>
-                            <td> @walletName <strong>/</strong> @hotStakingAccount.Name</td>
-                            <td>@hotAccountBalance.AmountConfirmed</td>
-                            <td>@hotAccountBalance.AmountUnconfirmed</td>
-                            <td>
-                            </td>
-                        </tr>
-                    }
-                    else
-                    {
-                        <tr>
-                            <td>@walletName</td>
-                            <td>-</td>
-                            <td>-</td>
-                            <td>-</td>
-                        </tr>
-                    }
-
-                    foreach (var account in this.WalletManager.GetAccounts(walletName))
-                    {
-                        var accountBalance = this.WalletManager.GetBalances(walletName, account.Name).Single();
-
-                        <tr>
-                            <td> @walletName <strong>/</strong> @account.Name</td>
-                            <td>@accountBalance.AmountConfirmed</td>
-                            <td>@accountBalance.AmountUnconfirmed</td>
-                            <td>
-                                @if (accountBalance.AmountConfirmed + accountBalance.AmountUnconfirmed > 0)
-                                {
-                                    <button class="btn btn-link btn-sm" @onclick="() => { NavigateToSetup(walletName); }">Delegate</button>
-                                }
-                            </td>
-                        </tr>
-                    }
-                }
-            }
-        </tbody>
-    </table>
+                            </tr>
+                            }
+                        }                               
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 }
-
 @code
 {
     ColdStakingManager ColdStakingManager;
-
     string Alert { get; set; }
-
-    private string WalletName { get; set; }
-
-    private string Password { get; set; }
-
-    public bool IsColdWalletAccount { get; set; }
-
     protected override Task OnInitializedAsync()
     {
         ColdStakingManager = this.WalletManager as ColdStakingManager;
 
         return Task.CompletedTask;
     }
-
-    private void CreateColdStakeAccount()
+    private (dynamic balance, dynamic coldBalance) totalBalance()
     {
-        if (string.IsNullOrEmpty(this.Password)) { this.Alert = "Please enter a password"; return; }
-        if (string.IsNullOrEmpty(this.WalletName)) { this.Alert = "Please enter a wallet name"; return; }
-        this.Alert = string.Empty;
+        dynamic balance = 0;
+        dynamic coldBalance = 0;
+              foreach (var walletName in this.WalletManager.GetWalletsNames())
+                {
+                    foreach (var account in this.WalletManager.GetAccounts(walletName))
+                    {
+                        var accountBalance = this.WalletManager.GetBalances(walletName, account.Name).Single();
+                        balance = balance + accountBalance.AmountConfirmed;
 
-        this.ColdStakingManager.GetOrCreateColdStakingAccount(this.WalletName, true, this.Password);
-        this.ColdStakingManager.GetOrCreateColdStakingAccount(this.WalletName, false, this.Password);
+                        var coldStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
+                        if (coldStakingAccount != null) {
+                            var coldAccountBalance = ColdStakingManager.GetBalances(walletName, coldStakingAccount.Name).Single();
+                            coldBalance = coldBalance + coldAccountBalance.AmountConfirmed;
+                        }
+                    }
+                }
+        return (balance,coldBalance);
     }
 
+    private (dynamic balance, dynamic coldBalance) totalUnconfirmedBalance()
+    {
+        dynamic balance = 0;
+        dynamic coldBalance = 0;
+              foreach (var walletName in this.WalletManager.GetWalletsNames())
+                {
+                    foreach (var account in this.WalletManager.GetAccounts(walletName))
+                    {
+                        var accountBalance = this.WalletManager.GetBalances(walletName, account.Name).Single();
+                        balance = balance + accountBalance.AmountUnconfirmed;
+
+                        var coldStakingAccount = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
+                        if (coldStakingAccount != null) {
+                            var coldAccountBalance = ColdStakingManager.GetBalances(walletName, coldStakingAccount.Name).Single();
+                            coldBalance = coldBalance + coldAccountBalance.AmountUnconfirmed;
+                        }
+                    }
+                }
+        return (balance,coldBalance);
+    }
+    private void NavigateToEnableWallet()
+    {
+        NavigationManager.NavigateTo("coldstaking-enablewallet");
+    }
     private void NavigateToWithdraw(string walletName)
     {
         NavigationManager.NavigateTo("coldstaking-withdraw/" + walletName);
@@ -165,4 +193,12 @@
     {
         NavigationManager.NavigateTo("coldstaking-setup/" + walletName);
     }
+    private void NavigateToDelegate(string walletName)
+    {
+        NavigationManager.NavigateTo("coldstaking-delegate/" + walletName);
+    }
+    private void NavigateToColdStakeView(string walletName)
+    {
+        NavigationManager.NavigateTo("coldstakeview/" + walletName + "/coldStakingColdAddresses");
+    }    
 }