Skip to content

Commit 229cfa8

Browse files
thecrypt0hunterdangershony
thecrypt0hunter
and
dangershony
authored
UI Changes (#157)
* Fix width of sidebar * Add wallet selector * Display segwit address when segwit enabled * Make inputs have a dark background * Add icon & change message whilst syncing * Staking UI improvements * Tidy tables * Add staking balance + tidy table * Simplify wording * Fix sidebar * Add IsVisible to Navigation Item * Don't display drop down when only one wallet * Enable hide nav-item with IsVisible flag * When no wallets don't allow staking * No wallets supress page, hide selector with 1 wallet * Add close function * Make create & recover modal; deal with no wallets * Only CS enabled wallets in selector * Ensure drop pops to left to stop display issues * Add close functionality to View Tx modal * Disable staking if balance is zero * Show a "working" button on submit * Minor formatting changes * Update message * Fix logic for staking status message * Move modals to separate folder * change styling & add copy icon * Improve Send UI * Inject wallet to navitem * Update IsVisible and remove method to simplify * Hide ViewTx modal until implemention complete * Update sync icon to be based on IBD flag Co-authored-by: dangershony <dan.gershony@gmail.com>
1 parent 7e99384 commit 229cfa8

33 files changed

Lines changed: 1016 additions & 592 deletions

‎src/Blockcore/Interfaces/UI/INavigationItem.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@ public interface INavigationItem
99
public string Name { get; }
1010
public string Navigation { get; }
1111
public string Icon { get; }
12+
public bool IsVisible {get; }
13+
1214
}
1315
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@typeparam TItem
2-
<div class="dropdown">
2+
<div class="dropdown dropleft">
33
<button class="btn btn-primary btn-sm dropdown-toggle mr-1" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show "
44
aria-haspopup="true" aria-expanded="false">
55
@Tip

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
using Blockcore.Interfaces.UI;
2+
using Blockcore.Features.Wallet.Interfaces;
3+
using System.Linq;
24

35
namespace Blockcore.Features.Wallet.UI
46
{
57
public class ColdStakingNavigationItem : INavigationItem
68
{
9+
private readonly IWalletManager WalletManager;
10+
11+
public ColdStakingNavigationItem(IWalletManager WalletManager)
12+
{
13+
this.WalletManager = WalletManager;
14+
}
15+
716
public string Name => "Cold Staking";
817
public string Navigation => "ColdStaking";
918
public string Icon => "oi-pulse";
19+
public bool IsVisible => this.WalletManager?.ContainsWallets ?? false;
20+
1021
}
1122
}

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

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,49 @@
1010
@inject NodeDeployments NodeDeployments
1111
@inject Network Network
1212

13+
1314
@if (!NodeDeployments.GetFlags().ScriptFlags.HasFlag(ScriptVerify.CheckColdStakeVerify))
1415
{
1516
<h2>Cold staking is not activated</h2>
1617
return;
1718
}
1819

20+
@if (!this.WalletManager.ContainsWallets) {
21+
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
22+
<h1 class="h2"><strong>No wallets available</strong></h1>
23+
<div class="btn-toolbar mb-2 mb-md-0">
24+
</div>
25+
</div>
26+
} else {
1927
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
2028
<h1 class="h2"><strong>Cold Staking</strong></h1>
21-
<div class="btn-toolbar mb-2 mb-md-0">
22-
@foreach (var walletName in this.WalletManager.GetWalletsNames()) {
23-
var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
24-
if (coldStakingWalletEnabled != null) {} else {
25-
<button class="btn btn-sm btn-primary" @onclick="() => { NavigateToEnableWallet(); }">Enable Cold Staking</button>
26-
break;
27-
}
29+
<div class="btn-toolbar mb-2 mb-md-0 mr-3">
30+
@if (this.ColdStakingManager.GetWalletsNames().Count() > 1) {
31+
<Dropdown TItem="string" OnSelected="@OnSelected" >
32+
<InitialTip>Select Wallet</InitialTip>
33+
<ChildContent>
34+
@foreach (var walletName in this.ColdStakingManager.GetWalletsNames()) {
35+
var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
36+
if (coldStakingWalletEnabled != null) {
37+
foreach (var account in this.ColdStakingManager.GetAccounts(walletName))
38+
{
39+
<DropdownListItem Item="@walletName">@walletName</DropdownListItem>
40+
}
41+
}
42+
}
43+
</ChildContent>
44+
</Dropdown>
2845
}
29-
</div>
46+
@foreach (var walletName in this.WalletManager.GetWalletsNames()) {
47+
var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
48+
if (coldStakingWalletEnabled != null) {} else {
49+
<button class="btn btn-sm btn-primary" @onclick="() => { NavigateToEnableWallet(); }">Enable Cold Staking</button>
50+
break;
51+
}
52+
}
53+
</div>
3054
</div>
31-
@{
55+
3256
<div class="row mb-3">
3357
<div class="col-xl-6 col-sm-6 grid-margin stretch-card">
3458
<div class="card">
@@ -67,7 +91,7 @@
6791
<div class="row ">
6892
<div class="col-12 grid-margin">
6993
<div class="card">
70-
<div class="card-body">
94+
<div class="mx-3 mt-3">
7195
<h4 class="card-title">Balances</h4>
7296
<div class="table-responsive small">
7397
<table class="table table-border-bottom table-striped table-sm table-hover">
@@ -205,4 +229,10 @@
205229
{
206230
NavigationManager.NavigateTo("coldstakeview/" + walletName + "/coldStakingColdAddresses");
207231
}
232+
private void OnSelected(string selection)
233+
{
234+
Console.WriteLine(selection);
235+
NavigateToColdStakeView(selection);
236+
}
237+
208238
}

‎src/Features/Blockcore.Features.ColdStaking/UI/Pages/ColdStakeDelegate.razor‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,28 @@
1414
@inject NodeDeployments NodeDeployments
1515

1616
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
17-
<h1 class="h2"><strong>Delegate Staking from @walletname</strong></h1>
17+
<h1 class="h2"><strong>Delegate Staking</strong></h1>
1818
<div class="btn-toolbar mb-2 mb-md-0">
19+
@if (this.ColdStakingManager.GetWalletsNames().Count() > 1) {
20+
<Dropdown TItem="string" OnSelected="@OnSelected" >
21+
<InitialTip>@walletname</InitialTip>
22+
<ChildContent>
23+
@foreach (var walletName in this.ColdStakingManager.GetWalletsNames()) {
24+
var coldStakingWalletEnabled = ColdStakingManager.GetColdStakingAccount(this.WalletManager.GetWallet(walletName), true);
25+
if (coldStakingWalletEnabled != null) {
26+
foreach (var account in this.ColdStakingManager.GetAccounts(walletName))
27+
{
28+
<DropdownListItem Item="@walletName">@walletName</DropdownListItem>
29+
}
30+
}
31+
}
32+
</ChildContent>
33+
</Dropdown>
34+
}
35+
<button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToSetup(walletname); }">
36+
<span class="oi oi-pulse" aria-hidden="true"></span> Coldstake</button>
37+
<button class="btn btn-sm btn-primary" @onclick="() => { NavigateToWithdraw(walletname); }">
38+
<span class="oi oi-cloud-download" aria-hidden="true"></span> Withdraw</button>
1939
</div>
2040
</div>
2141

@@ -24,7 +44,7 @@ var accountBalance = this.WalletManager.GetBalances(walletname, "coldStakingCold
2444
var mainAccountBalance = this.WalletManager.GetBalances(walletname, "account 0").Single();
2545

2646
<div class="row mb-3">
27-
<div class="col-xl-6 col-sm-6 grid-margin stretch-card">
47+
<div class="col-xl-6 col-sm-6 ">
2848
<div class="card">
2949
<div class="card-body">
3050
<h5>Main Balance</h5>
@@ -40,7 +60,7 @@ var mainAccountBalance = this.WalletManager.GetBalances(walletname, "account 0")
4060
</div>
4161
</div>
4262
</div>
43-
<div class="col-xl-6 col-sm-6 grid-margin stretch-card">
63+
<div class="col-xl-6 col-sm-6 ">
4464
<div class="card">
4565
<div class="card-body">
4666
<h5>Cold Balance</h5>
@@ -63,44 +83,41 @@ var mainAccountBalance = this.WalletManager.GetBalances(walletname, "account 0")
6383
<div class="card-body">
6484
<div class="input-group mb-3">
6585
<div class="input-group-prepend">
66-
<span style="min-width: 15em" class="input-group-text" id="basic-addon1">Delegated Staking Address:</span>
86+
<span style="min-width: 15em" class="input-group-text m-1" id="basic-addon1">Delegated Staking Address:</span>
6787
</div>
68-
<input @bind="HotWalletAddress" type="text" class="form-control" placeholder="Your third party delegated staking address" />
88+
<input @bind="HotWalletAddress" type="text" class="form-control bg-secondary text-light m-1" placeholder="Your third party delegated staking address" />
6989
</div>
7090

7191
<div class="input-group mb-3">
7292
<div class="input-group-prepend">
73-
<span style="min-width: 15em" class="input-group-text">Amount (@this.Network.CoinTicker.ToUpper()):</span>
93+
<span style="min-width: 15em" class="input-group-text m-1">Amount (@this.Network.CoinTicker.ToUpper()):</span>
7494
</div>
75-
<input @bind="Amount" type="text" class="form-control" placeholder="amount" />
95+
<input @bind="Amount" type="text" class="form-control bg-secondary text-light m-1" placeholder="amount" />
7696
<div class="input-group-append">
77-
<button class="btn btn-secondary" @onclick="MaxAmount">Max</button>
97+
<button class="btn btn-secondary m-1" @onclick="MaxAmount">Max</button>
7898
</div>
7999
</div>
80100

81101
<div class="input-group mb-3">
82102
<div class="input-group-prepend">
83-
<span style="min-width: 15em" class="input-group-text">Fee:</span>
84-
</div>
85-
<input @bind="Fee" type="text" class="form-control" placeholder="fee" />
86-
<div class="input-group-append">
87-
<span style="min-width: 6em" class="input-group-text"><abbr title="The low fee may not be enough for every transaction">Default to low</abbr></span>
103+
<span style="min-width: 15em" class="input-group-text m-1">Fee:</span>
88104
</div>
105+
<input @bind="Fee" type="text" class="form-control bg-secondary text-ligh m-1" placeholder="fee" />
89106
</div>
90107

91108
<div class="input-group mb-3">
92109
<div class="input-group-prepend">
93-
<span style="min-width: 15em" class="input-group-text">Password:</span>
110+
<span style="min-width: 15em" class="input-group-text m-1">Password:</span>
94111
</div>
95-
<input @bind="Password" type="password" class="form-control" placeholder="Please enter your password" />
112+
<input @bind="Password" type="password" class="form-control bg-secondary text-light m-1" placeholder="Please enter your password" />
96113
</div>
97114

98115
<div class="btn-toolbar mb-2 mb-md-0">
99116
<button class="btn btn-primary mr-1" @onclick="Setup">Delegate Staking Now</button>
100117
<button class="btn btn-primary" @onclick="ChangePayToScript">PayToScript: @PayToScript</button>
101118
</div>
102119
<div class="input-group">
103-
<div class="alert-warning">@Alert</div>
120+
<div class="text-danger">@Alert</div>
104121
</div>
105122
</div>
106123
</div>
@@ -206,4 +223,25 @@ var mainAccountBalance = this.WalletManager.GetBalances(walletname, "account 0")
206223
//TODO: Add confirmation screen
207224
NavigationManager.NavigateTo("coldstakeview/" + walletname + "/coldStakingColdAddresses");
208225
}
226+
private void NavigateToWithdraw(string walletName)
227+
{
228+
NavigationManager.NavigateTo("coldstaking-withdraw/" + walletName);
229+
}
230+
private void NavigateToSetup(string walletName)
231+
{
232+
NavigationManager.NavigateTo("coldstaking-setup/" + walletName);
233+
}
234+
private void NavigateToDelegate(string walletName)
235+
{
236+
NavigationManager.NavigateTo("coldstaking-delegate/" + walletName);
237+
}
238+
private void NavigateToColdStakeView(string walletName)
239+
{
240+
NavigationManager.NavigateTo("coldstakeview/" + walletName + "/coldStakingColdAddresses");
241+
}
242+
private void OnSelected(string selection)
243+
{
244+
Console.WriteLine(selection);
245+
NavigateToColdStakeView(selection);
246+
}
209247
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<span style="min-width: 10em" class="input-group-text" id="wallet-label">Wallet Name:</span>
2020
</div>
2121

22-
<select @bind="WalletName" type="text" class="form-control">
22+
<select @bind="WalletName" type="text" class="form-control bg-secondary text-light">
2323
<option value=""></option>
2424
@{
2525
foreach (var walletName in this.WalletManager.GetWalletsNames()) {
@@ -39,15 +39,15 @@
3939
<div class="input-group-prepend">
4040
<span style="min-width: 10em" class="input-group-text">Password:</span>
4141
</div>
42-
<input @bind="Password" type="password" class="form-control" placeholder="Please enter your password" />
42+
<input @bind="Password" type="password" class="form-control bg-secondary text-light" placeholder="Please enter your password" />
4343
</div>
4444

4545
<div class="input-group mb-3">
4646
<button class="btn btn-primary" @onclick="CreateColdStakeAccount">Enable Cold Staking</button>
4747
</div>
4848

4949
<div class="input-group mb-3">
50-
<div class="alert-warning">@Alert</div>
50+
<div class="text-danger">@Alert</div>
5151
</div>
5252
</div>
5353
</div>

0 commit comments

Comments
 (0)