From a2150a78d7a773c897fbde1096faf1b7508548c9 Mon Sep 17 00:00:00 2001 From: Karpenko Alex <81957232+AlexFront2021@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:03:56 +0200 Subject: [PATCH] Improve transfer modal (#311) * Improve UX of Wallet balance Transfer modal --- src/Pages/Wallets.razor | 125 +++++++++++++++++++++++---------------- src/wwwroot/css/site.css | 22 +++++++ 2 files changed, 97 insertions(+), 50 deletions(-) diff --git a/src/Pages/Wallets.razor b/src/Pages/Wallets.razor index 8b761240..3e812871 100644 --- a/src/Pages/Wallets.razor +++ b/src/Pages/Wallets.razor @@ -1,6 +1,7 @@ @page "/wallets" @using System.Security.Claims @using System.Linq; +@using Blazorise.Extensions @using NodeGuard.Jobs @using Humanizer @using NBitcoin @@ -413,8 +414,6 @@ } - - @@ -427,7 +426,7 @@ - + Transfer funds to another wallet @@ -435,69 +434,75 @@ - - + + - Target wallet - Select the wallet you want to transfer your funds to + Amount - - - You must select a valid wallet - - + + + @($"Current amount: {Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _amountToTransfer, _btcPrice), 2)} USD") + - @($"{_sourceWalletName} Balance (this wallet)") - + + Transfer all funds + - + - @($"{_targetWalletName} Balance") - + From (this wallet) + +
+

@_sourceWalletName

+
+ +
+
+ + + @($"Current balance: {_sourceWalletBalance:F8}"); + + + @($"Balance after transfer: {CalculateAmountWalletSourceAfterTransaction():F8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion(_sourceBalanceAfterTransaction, _btcPrice), 2)} USD)") + - - + + - Amount + To - + - + You must select a valid wallet - + - - @($"Current amount: {Math.Round(PriceConversionService.BtcToUsdConversion((decimal) _amountToTransfer, _btcPrice), 2)} USD") + + @($"Current balance: {_transferTargetWalletBalance:f8}") + + + @($"Balance after transfer: {CalculateAmountWalletTargetAfterTransaction():F8} BTC ({Math.Round(PriceConversionService.BtcToUsdConversion((decimal)(targetBalance + _amountToTransfer), _btcPrice), 2)} USD)") - - - - Transfer all funds - - - - - - @@ -560,7 +565,7 @@ private Modal? _importWalletModal; private string? _importWalletSeedphrase; private Validations _importWalletValidations; - + private Validations? _walletValidation; private Modal? _transferFundsModal; private Validations _transferFundsValidations; private List _walletsForTransfer = new(); @@ -570,11 +575,14 @@ 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; private decimal _minWithdrawal = Constants.MINIMUM_WITHDRAWAL_BTC_AMOUNT; - private decimal _amountToTransfer = Constants.MINIMUM_WITHDRAWAL_BTC_AMOUNT; + private decimal _amountToTransfer { get; set; } private ConfirmationModal _multisigTransferModal; private ConfirmationModal _hotWalletTransferModal; @@ -701,7 +709,22 @@ } } + private decimal CalculateAmountWalletTargetAfterTransaction() + { + decimal amount = _transferAllFunds ? targetBalance + _sourceBalance : targetBalance + _amountToTransfer; + return amount; + } + private decimal CalculateAmountWalletSourceAfterTransaction() + { + if (_transferAllFunds) + { + return 0; + } + return _sourceBalanceAfterTransaction; + } + + private async Task OnRowUpdated(SavedRowItem> arg) { if (arg.Item == null) return; @@ -1044,9 +1067,11 @@ _transferTargetWalletBalance = string.Empty; _sourceTransferWallet = wallet; _targetTransferWallet = null; + _transferAllFunds = false; + _amountToTransfer = Constants.MINIMUM_WITHDRAWAL_BTC_AMOUNT; - 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(); } @@ -1120,6 +1145,7 @@ Description = @$"Funds transferred from {_sourceWalletName} to {_targetWalletName}", WithdrawAllFunds = _transferAllFunds, DestinationAddress = targetBitcoinAddress.ToString(), + Amount = _amountToTransfer, WalletId = _sourceTransferWallet.Id, Status = _sourceTransferWallet.IsHotWallet @@ -1148,7 +1174,7 @@ } else { - var withdrawal = await CreateWithdrawalRequestForFunds(); + await CreateWithdrawalRequestForFunds(); await _multisigTransferModal.ShowModal(); await CloseAndCleanTransferFundsModal(); } @@ -1222,7 +1248,6 @@ await _transferFundsModal?.Close(CloseReason.UserClosing); _selectedTransferWalletId = 0; - _amountToTransfer = Constants.MINIMUM_WITHDRAWAL_BTC_AMOUNT; _walletsForTransfer = new(); _transferTargetWalletBalance = string.Empty; _sourceWalletBalance = string.Empty; @@ -1242,10 +1267,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) diff --git a/src/wwwroot/css/site.css b/src/wwwroot/css/site.css index dfece025..ea005cf5 100644 --- a/src/wwwroot/css/site.css +++ b/src/wwwroot/css/site.css @@ -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; } \ No newline at end of file