[VDG] Privacy warnings Improved UX

WalletWasabi.Fluent/Behaviors/PrivacyWarningFadeOutBehavior.cs

@@ -0,0 +1,54 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using ReactiveUI;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
+using WalletWasabi.Fluent.Extensions;
+using WalletWasabi.Fluent.Models.Transactions;
+
+namespace WalletWasabi.Fluent.Behaviors;
+
+public class PrivacyWarningFadeOutBehavior : AttachedToVisualTreeBehavior<Control>
+{
+	private const string FadeOutClassName = "fadeout";
+
+	public static readonly StyledProperty<IEnumerable<PrivacyWarning>> PreviewWarningsProperty =
+		AvaloniaProperty.Register<PrivacyWarningFadeOutBehavior, IEnumerable<PrivacyWarning>>(nameof(PreviewWarnings));
+
+	public IEnumerable<PrivacyWarning> PreviewWarnings
+	{
+		get => GetValue(PreviewWarningsProperty);
+		set => SetValue(PreviewWarningsProperty, value);
+	}
+
+	protected override void OnAttachedToVisualTree(CompositeDisposable disposable)
+	{
+		if (AssociatedObject?.DataContext is not PrivacyWarning current)
+		{
+			return;
+		}
+
+		this.WhenAnyValue(x => x.PreviewWarnings)
+			.WhereNotNull()
+			.Throttle(TimeSpan.FromMilliseconds(250), RxApp.MainThreadScheduler)
+			.Do(_ =>
+			{
+				var fadeOut = !PreviewWarnings.Any(p => p == current);
+				if (fadeOut && !AssociatedObject.Classes.Contains(FadeOutClassName))
+				{
+					AssociatedObject.Classes.Add(FadeOutClassName);
+				}
+				else if (!fadeOut && AssociatedObject.Classes.Contains(FadeOutClassName))
+				{
+					AssociatedObject.Classes.Remove(FadeOutClassName);
+				}
+			})
+			.Subscribe()
+			.DisposeWith(disposable);
+	}
+}

WalletWasabi.Fluent/Models/Transactions/PrivacySuggestion.cs

@@ -14,11 +14,13 @@
 
 public record LabelManagementSuggestion(BuildTransactionResult? Transaction = null, LabelsArray? NewLabels = null) : PrivacySuggestion(Transaction);
 
-public record FullPrivacySuggestion(BuildTransactionResult Transaction, decimal Difference, string DifferenceFiatText, IEnumerable<SmartCoin> Coins, bool IsChangeless) : PrivacySuggestion(Transaction);
+public record FullPrivacySuggestion(BuildTransactionResult Transaction, decimal Difference, string DifferenceText, string DifferenceAmountText, IEnumerable<SmartCoin> Coins, bool IsChangeless) : PrivacySuggestion(Transaction);
 
-public record BetterPrivacySuggestion(BuildTransactionResult Transaction, string DifferenceFiatText, IEnumerable<SmartCoin> Coins, bool IsChangeless) : PrivacySuggestion(Transaction);
+public record BetterPrivacySuggestion(BuildTransactionResult Transaction, string DifferenceText, string DifferenceAmountText, IEnumerable<SmartCoin> Coins, bool IsChangeless) : PrivacySuggestion(Transaction);
 
-public record ChangeAvoidanceSuggestion(BuildTransactionResult Transaction, string DifferenceFiatText, bool IsMore, bool IsLess) : PrivacySuggestion(Transaction)
+public record ChangeAvoidanceSuggestion(BuildTransactionResult Transaction, string DifferenceText, string DifferenceAmountText, bool IsMore, bool IsLess) : PrivacySuggestion(Transaction)
 {
 	public Money GetAmount(BitcoinAddress destination) => Transaction!.CalculateDestinationAmount(destination);
+
+	public bool IsSameAmount => !IsMore && !IsLess;
 }

WalletWasabi.Fluent/Models/Transactions/PrivacySuggestionsModel.cs

@@ -1,4 +1,4 @@
 using DynamicData;
 using NBitcoin;
 using Nito.AsyncEx;
 using System.Collections.Generic;
@@ -173,9 +173,10 @@
 
 			if (amountDifferencePercentage <= MaximumDifferenceTolerance && (canModifyTransactionAmount || amountDifference == 0m))
 			{
-				var differenceFiat = GetDifferenceFiat(transactionInfo, newTransaction, usdExchangeRate);
-				var differenceFiatText = GetDifferenceFiatText(differenceFiat);
-				fullPrivacySuggestion = new FullPrivacySuggestion(newTransaction, amountDifference, differenceFiatText, allPrivateCoin, isChangeless);
+				var (differenceBtc, differenceFiat) = GetDifference(transactionInfo, newTransaction, usdExchangeRate);
+				var differenceText = GetDifferenceText(differenceBtc);
+				var differenceAmountText = GetDifferenceAmountText(differenceBtc, differenceFiat);
+				fullPrivacySuggestion = new FullPrivacySuggestion(newTransaction, amountDifference, differenceText, differenceAmountText, allPrivateCoin, isChangeless);
 				yield return fullPrivacySuggestion;
 			}
 		}
@@ -196,9 +197,10 @@
 
 			if (amountDifferencePercentage <= MaximumDifferenceTolerance && (canModifyTransactionAmount || amountDifference == 0m))
 			{
-				var differenceFiat = GetDifferenceFiat(transactionInfo, newTransaction, usdExchangeRate);
-				var differenceFiatText = GetDifferenceFiatText(differenceFiat);
-				yield return new BetterPrivacySuggestion(newTransaction, differenceFiatText, coins, isChangeless);
+				var (btcDifference, fiatDifference) = GetDifference(transactionInfo, newTransaction, usdExchangeRate);
+				var differenceText = GetDifferenceText(btcDifference);
+				var differenceAmountText = GetDifferenceAmountText(btcDifference, fiatDifference);
+				yield return new BetterPrivacySuggestion(newTransaction, differenceText, differenceAmountText, coins, isChangeless);
 			}
 		}
 	}
@@ -331,8 +333,10 @@
 
 			if (transaction is not null)
 			{
-				var differenceFiat = GetDifferenceFiat(transactionInfo, transaction, usdExchangeRate);
-				yield return new ChangeAvoidanceSuggestion(transaction, GetDifferenceFiatText(differenceFiat), IsMore: differenceFiat > 0, IsLess: differenceFiat < 0);
+				var (btcDifference, fiatDifference) = GetDifference(transactionInfo, transaction, usdExchangeRate);
+				var differenceText = GetDifferenceText(btcDifference);
+				var differenceAmountText = GetDifferenceAmountText(btcDifference, fiatDifference);
+				yield return new ChangeAvoidanceSuggestion(transaction, differenceText, differenceAmountText, IsMore: fiatDifference > 0, IsLess: fiatDifference < 0);
 			}
 		}
 	}
@@ -380,25 +384,31 @@
 		return true;
 	}
 
-	private decimal GetDifferenceFiat(TransactionInfo transactionInfo, BuildTransactionResult transaction, decimal usdExchangeRate)
+	private (decimal BtcDifference, decimal FiatDifference) GetDifference(TransactionInfo transactionInfo, BuildTransactionResult transaction, decimal usdExchangeRate)
 	{
 		var originalAmount = transactionInfo.Amount.ToDecimal(MoneyUnit.BTC);
 		var totalAmount = transaction.CalculateDestinationAmount(transactionInfo.Destination);
 		var total = totalAmount.ToDecimal(MoneyUnit.BTC);
+		var btcDifference = total - originalAmount;
 		var fiatTotal = total * usdExchangeRate;
 		var fiatOriginal = originalAmount * usdExchangeRate;
 		var fiatDifference = fiatTotal - fiatOriginal;
 
-		return fiatDifference;
+		return (btcDifference, fiatDifference);
 	}
 
-	private string GetDifferenceFiatText(decimal fiatDifference)
+	private string GetDifferenceText(decimal btcDifference)
 	{
-		return fiatDifference switch
+		return btcDifference switch
 		{
-			> 0 => $"{fiatDifference.ToUsd()} more",
-			< 0 => $"{Math.Abs(fiatDifference).ToUsd()} less",
+			> 0 => "more",
+			< 0 => "less",
 			_ => "the same amount"
 		};
 	}
+
+	private string GetDifferenceAmountText(decimal btcDifference, decimal fiatDifference)
+	{
+		return $"{Math.Abs(btcDifference).FormattedBtc()} BTC {Math.Abs(fiatDifference).ToUsdAproxBetweenParens()}";
+	}
 }

WalletWasabi.Fluent/ViewModels/Wallets/Send/PrivacySuggestionsFlyoutViewModel.cs

@@ -1,5 +1,10 @@
+using DynamicData;
+using ReactiveUI;
+using System.Collections;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
+using System.Reactive.Subjects;
 using System.Threading;
 using System.Threading.Tasks;
 using WalletWasabi.Blockchain.TransactionBuilding;
@@ -11,6 +16,7 @@ namespace WalletWasabi.Fluent.ViewModels.Wallets.Send;
 public partial class PrivacySuggestionsFlyoutViewModel : ViewModelBase
 {
 	private readonly PrivacySuggestionsModel _privacySuggestionsModel;
+	private readonly Subject<IEnumerable<PrivacyWarning>> _previewWarnings = new();
 
 	[AutoNotify] private PrivacySuggestion? _previewSuggestion;
 	[AutoNotify] private PrivacySuggestion? _selectedSuggestion;
@@ -28,6 +34,27 @@ public PrivacySuggestionsFlyoutViewModel(Wallet wallet)
 
 	public ObservableCollection<PrivacyWarning> Warnings { get; } = new();
 	public ObservableCollection<PrivacySuggestion> Suggestions { get; } = new();
+	public IObservable<IEnumerable<PrivacyWarning>> PreviewWarnings => _previewWarnings;
+
+	public async Task UpdatePreviewWarningsAsync(TransactionInfo info, BuildTransactionResult transaction, CancellationToken cancellationToken)
+	{
+		var previewWarningList = new List<PrivacyWarning>();
+
+		await foreach (var item in _privacySuggestionsModel.BuildPrivacySuggestionsAsync(info, transaction, cancellationToken))
+		{
+			if (item is PrivacyWarning warning)
+			{
+				previewWarningList.Add(warning);
+			}
+		}
+
+		_previewWarnings.OnNext(previewWarningList);
+	}
+
+	public void ClearPreviewWarnings()
+	{
+		_previewWarnings.OnNext(Warnings);
+	}
 
 	/// <remarks>Method supports being called multiple times. In that case the last call cancels the previous one.</remarks>
 	public async Task BuildPrivacySuggestionsAsync(TransactionInfo info, BuildTransactionResult transaction, CancellationToken cancellationToken)

WalletWasabi.Fluent/ViewModels/Wallets/Send/TransactionPreviewViewModel.cs

@@ -65,17 +65,20 @@
 		DisplayedTransactionSummary = CurrentTransactionSummary;
 
 		PrivacySuggestions.WhenAnyValue(x => x.PreviewSuggestion)
-			.Subscribe(x =>
+			.DoAsync(async x =>
 			{
 				if (x?.Transaction is { } transaction)
 				{
 					UpdateTransaction(PreviewTransactionSummary, transaction);
+					await PrivacySuggestions.UpdatePreviewWarningsAsync(_info, transaction, _cancellationTokenSource.Token);
 				}
 				else
 				{
 					DisplayedTransactionSummary = CurrentTransactionSummary;
+					PrivacySuggestions.ClearPreviewWarnings();
 				}
-			});
+			})
+			.Subscribe();
 
 		PrivacySuggestions.WhenAnyValue(x => x.SelectedSuggestion)
 			.SubscribeAsync(async suggestion =>

WalletWasabi.Fluent/Views/Wallets/Send/PrivacyWarningsView.axaml

@@ -70,6 +70,23 @@
       <Setter Property="Background" Value="{DynamicResource NavBarItemPointerOverBackgroundBrush}" />
       <Setter Property="Padding" Value="5" />
       <Setter Property="Margin" Value="5 0 5 5" />
+      <Setter Property="(Interaction.Behaviors)">
+        <BehaviorCollectionTemplate>
+          <BehaviorCollection>
+            <behaviors:PrivacyWarningFadeOutBehavior PreviewWarnings="{Binding PreviewWarnings^}" />
+          </BehaviorCollection>
+        </BehaviorCollectionTemplate>
+      </Setter>
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Opacity" Duration="0:0:0.275" Easing="{StaticResource FluentEasing}" />
+        </Transitions>
+      </Setter>
+    </Style>
+
+    <Style Selector="Border.warning.fadeout">
+      <Setter Property="Opacity" Value=".4" />
+      <Setter Property="IsEnabled" Value="False" />
     </Style>
 
     <Style Selector="Border.warning PathIcon">
@@ -235,8 +252,9 @@
                 <TextBlock Text="Full Privacy" Classes="title" />
                 <StackPanel Orientation="Horizontal" Classes="description">
                   <TextBlock Text="Send" />
-                  <TextBlock Text="{Binding DifferenceFiatText}" FontWeight="Bold" Foreground="{DynamicResource SystemAccentColor}" />
-                  <TextBlock Text="to use only private coins." />
+                  <TextBlock Text="{Binding DifferenceText}"
+                             Foreground="{DynamicResource SystemAccentColor}" />
+                  <TextBlock Text="{Binding DifferenceAmountText, StringFormat='by {0}'}" />
                 </StackPanel>
               </StackPanel>
             </DockPanel>
@@ -252,8 +270,9 @@
                 <TextBlock Text="Better Privacy" Classes="title" />
                 <StackPanel Orientation="Horizontal" Classes="description">
                   <TextBlock Text="Send" />
-                  <TextBlock Text="{Binding DifferenceFiatText}" FontWeight="Bold" Foreground="{DynamicResource SystemAccentColor}" />
-                  <TextBlock Text="to avoid non-private coins." />
+                  <TextBlock Text="{Binding DifferenceText}"
+                             Foreground="{DynamicResource SystemAccentColor}" />
+                  <TextBlock Text="{Binding DifferenceAmountText, StringFormat='by {0}'}" />
                 </StackPanel>
               </StackPanel>
             </DockPanel>
@@ -281,8 +300,9 @@
                 <TextBlock Text="Change Avoidance" Classes="title" />
                 <StackPanel Orientation="Horizontal" Classes="description">
                   <TextBlock Text="Send" />
-                  <TextBlock Text="{Binding DifferenceFiatText}" FontWeight="Bold" Foreground="{DynamicResource SystemAccentColor}" />
-                  <TextBlock Text="to remove change." />
+                  <TextBlock Text="{Binding DifferenceText}"
+                             Foreground="{DynamicResource SystemAccentColor}" />
+                  <TextBlock Text="{Binding DifferenceAmountText, StringFormat='by {0}'}" IsVisible="{Binding !IsSameAmount}" />
                 </StackPanel>
               </StackPanel>
             </DockPanel>