Skip to content

Commit

Permalink
Improve UX of Wallet balance Transfer modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@AleksKSoftware
AleksKSoftware committed Oct 5, 2023
1 parent 910458b commit fe9da30
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 60 deletions.
133 changes: 73 additions & 60 deletions src/Pages/Wallets.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@page "/wallets"
@using System.Security.Claims
@using System.Linq;
@using Blazorise.Extensions
@using NodeGuard.Jobs
@using Humanizer
@using NBitcoin
Expand Down Expand Up @@ -412,8 +413,6 @@
</Validation>
</Column>
}
</Validations>
</Fields>
Expand All @@ -426,93 +425,86 @@
</ModalContent>
</Modal>
<Modal @ref="_transferFundsModal">
<ModalContent Centered Size="ModalSize.Default">
<ModalContent Centered Size="ModalSize.Large ">
<ModalHeader>
<ModalTitle>Transfer funds to another wallet</ModalTitle>
<CloseButton/>
</ModalHeader>
<ModalBody>
<Fields>
<Validations @ref="_transferFundsValidations">
<Column ColumnSize="ColumnSize.Is12">
<Validation Validator="@ValidationRule.IsSelected">
<Column ColumnSize="ColumnSize.Is6">
<Validation Validator="args => ValidationHelper.ValidateWithdrawalAmount(args, _transferAllFunds)">
<Field>
<FieldLabel>Target wallet</FieldLabel>
<FieldHelp>Select the wallet you want to transfer your funds to</FieldHelp>
<FieldLabel>Amount</FieldLabel>
<FieldBody>
<SelectList TItem="Wallet"
TValue="int"
Data="_walletsForTransfer"
TextField="@((item) => item.Name)"
ValueField="@((item) => item.Id)"
SelectedValue="@_selectedTransferWalletId"
SelectedValueChanged="(id) => OnSelectedWallet(id)"
DefaultItemText="Choose the wallet">
<NumericPicker TValue="decimal" Disabled="_transferAllFunds" @bind-Value="@_amountToTransfer" CurrencySymbol="₿ " Max="@_maxWithdrawal" Min="@_minWithdrawal" Decimals="8">
<Feedback>
<ValidationError>You must select a valid wallet</ValidationError>
<ValidationError/>
</Feedback>
</SelectList>
</NumericPicker>
</FieldBody>
<FieldHelp>
@($"Current amount: {Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _amountToTransfer, _btcPrice), 2)} USD")
</FieldHelp>
</Field>
</Validation>
</Column>
<Column ColumnSize="ColumnSize.Is6">
<Field>
<FieldLabel>@($"{_sourceWalletName} Balance (this wallet)")</FieldLabel>
<TextEdit @bind-Text="_sourceWalletBalance" PlainText Disabled/>
<FieldBody>
<Check TValue="bool" @bind-Checked="@_transferAllFunds">Transfer all funds</Check>
</FieldBody>
</Field>
</Column>
<Column ColumnSize="ColumnSize.Is6">
<Column ColumnSize="ColumnSize.Is6" @bind-Value="@_amountToTransfer">
<Field>
<FieldLabel>@($"{_targetWalletName} Balance")</FieldLabel>
<TextEdit @bind-Text="_transferTargetWalletBalance" PlainText Disabled/>
<FieldLabel><strong>From</strong> (this wallet)</FieldLabel>
<FieldBody>
<div class="flex-container">
<p class="source-wallet-name">@_sourceWalletName</p>
<div class="arrow-icon-container">
<Icon Name="IconName.ArrowRight" class="arrow-icon" />
</div>
</div>
</FieldBody>
<FieldHelp class="field-help">
Current balance: @_sourceWalletBalance
</FieldHelp>
<FieldHelp>
Balance after transfer: @CalculateAmountWalletSourceAfterTransaction():f8 BTC (@Math.Round(PriceConversionService.BtcToUsdConversion(_sourceBalanceAfterTransaction, _btcPrice), 2) USD)
</FieldHelp>
</Field>
</Column>
<Column ColumnSize="ColumnSize.Is12" style="display: flex; flex-direction: row; align-items: center;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<Field>
<FieldBody>
<Check TValue="bool" @bind-Checked="@_transferAllFunds">Transfer all funds</Check>
</FieldBody>
</Field>
</div>
</Column>
<Column ColumnSize="ColumnSize.Is6">
<Validation Validator="args => ValidationHelper.ValidateWithdrawalAmount(args, _transferAllFunds)">
<Column ColumnSize="ColumnSize.Is6" @bind-Value="@_amountToTransfer">
<Validation Validator="@ValidationRule.IsSelected">
<Field>
<FieldLabel>Amount</FieldLabel>
<FieldLabel><strong>To</strong></FieldLabel>
<FieldBody>
<NumericPicker TValue="decimal" Disabled="_transferAllFunds" @bind-Value="@_amountToTransfer" CurrencySymbol="₿ " Max="@_maxWithdrawal" Min="@_minWithdrawal" Decimals="8">
<SelectList TItem="Wallet"
TValue="int"
Data="_walletsForTransfer"
TextField="@((item) => item.Name)"
ValueField="@((item) => item.Id)"
SelectedValue="@_selectedTransferWalletId"
SelectedValueChanged="(id) => OnSelectedWallet(id)"
DefaultItemText="Choose the wallet">
<Feedback>
<ValidationError/>
<ValidationError>You must select a valid wallet</ValidationError>
</Feedback>
</NumericPicker>
</SelectList>
</FieldBody>
<FieldHelp>
@($"Current amount: {Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _amountToTransfer, _btcPrice), 2)} USD")
<FieldHelp Visibility="@(_transferTargetWalletBalance.IsNullOrEmpty() ? Visibility.Invisible : Visibility.Visible)">
@($"Current balance: {_transferTargetWalletBalance}")
</FieldHelp>
<FieldHelp Visibility="@(_transferTargetWalletBalance.IsNullOrEmpty() ? Visibility.Invisible : Visibility.Visible)">
@($"Balance after transfer: {(CalculateAmountWalletTargetAfterTransaction()):f8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion((decimal)(targetBalance + _amountToTransfer), _btcPrice), 2)} USD)")
</FieldHelp>
</Field>
</Validation>
</Column>
<Validation Validator="args => ValidationHelper.ValidateWithdrawalAmount(args, _transferAllFunds)">
<Field>
<FieldLabel>Amount</FieldLabel>
<FieldBody>
<NumericPicker TValue="decimal" Disabled="_transferAllFunds" @bind-Value="@_amountToTransfer" CurrencySymbol="₿ " Max="@_maxWithdrawal" Min="@_minWithdrawal" Decimals="8">
<Feedback>
<ValidationError/>
</Feedback>
</NumericPicker>
</FieldBody>
<FieldHelp>
@($"Current amount: {Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _amountToTransfer, _btcPrice), 2)} USD")
</FieldHelp>
</Field>
</Validation>
</Validations>
</Fields>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary" Clicked="@CloseAndCleanTransferFundsModal">Close</Button>
Expand Down Expand Up @@ -585,6 +577,9 @@
private string _sourceWalletName => _sourceTransferWallet != null ? $"{_sourceTransferWallet.Name} " : "";
private string _targetWalletName => _targetTransferWallet != null ? $"{_targetTransferWallet.Name} " : "";
private string _transferTargetWalletBalance;
private decimal targetBalance;
private decimal _sourceBalance;
private decimal _sourceBalanceAfterTransaction => _sourceBalance > _amountToTransfer ? _sourceBalance - _amountToTransfer : 0;
private string _sourceWalletBalance;
private bool _transferAllFunds;
private decimal _maxWithdrawal = Constants.MAXIMUM_WITHDRAWAL_BTC_AMOUNT;
Expand Down Expand Up @@ -716,7 +711,25 @@
}
}
private decimal CalculateAmountWalletTargetAfterTransaction()
{
if (_transferAllFunds)
{
return targetBalance + _sourceBalance;
}
return targetBalance + _amountToTransfer;
}
private decimal CalculateAmountWalletSourceAfterTransaction()
{
if (_transferAllFunds)
{
return 0;
}
return _sourceBalanceAfterTransaction;
}
private async Task OnRowUpdated(SavedRowItem<Wallet, Dictionary<string, object>> arg)
{
if (arg.Item == null) return;
Expand Down Expand Up @@ -1060,8 +1073,8 @@
_sourceTransferWallet = wallet;
_targetTransferWallet = null;
var (balance,_) = await BitcoinService.GetWalletConfirmedBalance(wallet);
_sourceWalletBalance = $"{balance:f8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion((decimal) balance, _btcPrice), 2)} USD)";
(_sourceBalance,_) = await BitcoinService.GetWalletConfirmedBalance(wallet);
_sourceWalletBalance = $"{_sourceBalance:f8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _sourceBalance, _btcPrice), 2)} USD)";
await _transferFundsModal?.Show();
}
Expand Down Expand Up @@ -1258,10 +1271,10 @@
if (targetWallet != null)
{
var (targetBalance,_) = await BitcoinService.GetWalletConfirmedBalance(targetWallet);
(targetBalance,_) = await BitcoinService.GetWalletConfirmedBalance(targetWallet);
_transferTargetWalletBalance = $"{targetBalance:f8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion((decimal) targetBalance, _btcPrice), 2)} USD)";
}
}
}
private async Task ValidateDerivationPath(ValidatorEventArgs arg1, CancellationToken arg2)
Expand Down
22 changes: 22 additions & 0 deletions src/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,4 +269,26 @@ a, .btn-link {

.checkbox-drop {
padding: 5px;
}

.arrow-icon {
font-size: 24px;
}

.flex-container {
display: flex;
align-items: center;
}

.source-wallet-name {
margin-top: 2px;
}

.arrow-icon-container {
margin-left: auto;
margin-top: -5px;
}

.field-help {
margin-top: -5px;
}

0 comments on commit fe9da30

Please sign in to comment.