[UI] Send - move recipient entry to the first dialog (#12657)

* Add labels TagBox xaml * Add SuggestionLabels property * Add labels validation * Add TODO comments * Adjust Recipient label layout * Fix xaml * Convert suggestion labels into reactive property * Handle pasted content * Use binding to SuggestionLabels instead setting DataContext on TagsBox * Invalidate TagsBox on Items property changes * Remove unused usings * Set suggestion labels only on parse success * Do not initialize Labels here * Adjust margin between Amount and Recipient * Set CornerRadius for DualCurrencyEntryBox to be same as other fields in send view * Fix * Fix Shift+Tab navigation for TagsBox
WalletWasabi · Mar 25, 2024 · f4ce5dd · f4ce5dd
1 parent 926fdf6
commit f4ce5dd
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 13 deletions.
diff --git a/WalletWasabi.Fluent/Controls/DualCurrencyEntryBox.axaml b/WalletWasabi.Fluent/Controls/DualCurrencyEntryBox.axaml
@@ -154,6 +154,10 @@
       </Setter>
     </Style>
 
+    <Style Selector="^/template/ Border#PART_BorderElement">
+      <Setter Property="CornerRadius" Value="4" />
+    </Style>
+
     <Style Selector="^:noexchangerate /template/ Button#PART_SwapButton">
       <Setter Property="IsVisible" Value="False" />
     </Style>

diff --git a/WalletWasabi.Fluent/Controls/TagsBox.axaml b/WalletWasabi.Fluent/Controls/TagsBox.axaml
@@ -34,6 +34,7 @@
     <Setter Property="Padding" Value="{DynamicResource TagsBoxBorderPadding}" />
     <Setter Property="Cursor" Value="IBeam" />
     <Setter Property="Focusable" Value="True" />
+    <Setter Property="IsTabStop" Value="False" />
     <Setter Property="Template">
       <ControlTemplate>
         <DataValidationErrors>

diff --git a/WalletWasabi.Fluent/Controls/TagsBox.axaml.cs b/WalletWasabi.Fluent/Controls/TagsBox.axaml.cs
@@ -293,6 +293,14 @@ private void Initialize()
 				CheckIsCurrentTextValid();
 			})
 			.DisposeWith(_compositeDisposable);
+
+		this.WhenAnyValue(x => x.Items)
+			.Subscribe(_ =>
+			{
+				InvalidateWatermark();
+				CheckIsCurrentTextValid();
+			})
+			.DisposeWith(_compositeDisposable);
 	}
 
 	private void CheckIsCurrentTextValid()

diff --git a/WalletWasabi.Fluent/ViewModels/Wallets/Send/SendViewModel.cs b/WalletWasabi.Fluent/ViewModels/Wallets/Send/SendViewModel.cs
@@ -1,3 +1,4 @@
+using System.Linq;
 using System.Reactive.Concurrency;
 using System.Reactive.Disposables;
 using System.Reactive.Linq;
@@ -23,6 +24,7 @@
 using WalletWasabi.WebClients.PayJoin;
 using WalletWasabi.Fluent.Models.UI;
 using WalletWasabi.Fluent.Models.Wallets;
+using WalletWasabi.Fluent.ViewModels.Wallets.Labels;
 using WalletWasabi.Userfacing.Bip21;
 using Constants = WalletWasabi.Helpers.Constants;
 
@@ -46,7 +48,6 @@ public partial class SendViewModel : RoutableViewModel
 	private readonly ClipboardObserver _clipboardObserver;
 
 	private bool _parsingTo;
-	private LabelsArray _parsedLabel = LabelsArray.Empty;
 
 	[AutoNotify] private string _to;
 	[AutoNotify] private decimal? _amountBtc;
@@ -55,6 +56,7 @@ public partial class SendViewModel : RoutableViewModel
 	[AutoNotify] private bool _isPayJoin;
 	[AutoNotify] private string? _payJoinEndPoint;
 	[AutoNotify] private bool _conversionReversed;
+	[AutoNotify(SetterModifier = AccessModifier.Private)] private SuggestionLabelsViewModel _suggestionLabels;
 
 	public SendViewModel(UiContext uiContext, WalletViewModel walletVm)
 	{
@@ -71,6 +73,8 @@ public SendViewModel(UiContext uiContext, WalletViewModel walletVm)
 
 		Balance = walletVm.WalletModel.Balances;
 
+		_suggestionLabels = new SuggestionLabelsViewModel(WalletVm.WalletModel, Intent.Send, 3);
+
 		SetupCancel(enableCancel: true, enableCancelOnEscape: true, enableCancelOnPressed: true);
 
 		EnableBack = false;
@@ -99,25 +103,24 @@ public SendViewModel(UiContext uiContext, WalletViewModel walletVm)
 		});
 
 		var nextCommandCanExecute =
-			this.WhenAnyValue(x => x.AmountBtc, x => x.To)
+			this.WhenAnyValue(
+					x => x.AmountBtc,
+					x => x.To,
+					x => x.SuggestionLabels.Labels.Count,
+					x => x.SuggestionLabels.IsCurrentTextValid)
 				.Select(tup =>
 				{
-					var (amountBtc, to) = tup;
+					var (amountBtc, to, labelsCount, isCurrentTextValid) = tup;
 					var allFilled = !string.IsNullOrEmpty(to) && amountBtc > 0;
 					var hasError = Validations.Any;
 
-					return allFilled && !hasError;
+					return allFilled && !hasError && (labelsCount > 0 || isCurrentTextValid);
 				});
 
 		NextCommand = ReactiveCommand.CreateFromTask(
 			async () =>
 			{
-				var labelDialog = new LabelEntryDialogViewModel(WalletVm.WalletModel, _parsedLabel);
-				var result = await NavigateDialogAsync(labelDialog, NavigationTarget.CompactDialogScreen);
-				if (result.Result is not { } label)
-				{
-					return;
-				}
+				var label = new LabelsArray(SuggestionLabels.Labels.ToArray());
 
 				if (AmountBtc is not { } amountBtc)
 				{
@@ -285,7 +288,7 @@ private bool TryParseUrl(string? text)
 		{
 			result = true;
 
-			_parsedLabel = parserResult.Label is { } label ? new LabelsArray(label) : LabelsArray.Empty;
+			var parsedLabel = parserResult.Label is { } label ? new LabelsArray(label) : LabelsArray.Empty;
 
 			PayJoinEndPoint = parserResult.UnknownParameters.TryGetValue("pj", out var endPoint) ? endPoint : null;
 
@@ -303,12 +306,17 @@ private bool TryParseUrl(string? text)
 			{
 				IsFixedAmount = false;
 			}
+
+			SuggestionLabels = new SuggestionLabelsViewModel(
+				WalletVm.WalletModel,
+				Intent.Send,
+				3,
+				parsedLabel.AsEnumerable());
 		}
 		else
 		{
 			IsFixedAmount = false;
 			PayJoinEndPoint = null;
-			_parsedLabel = LabelsArray.Empty;
 		}
 
 		Dispatcher.UIThread.Post(() => _parsingTo = false);

diff --git a/WalletWasabi.Fluent/Views/Wallets/Send/SendView.axaml b/WalletWasabi.Fluent/Views/Wallets/Send/SendView.axaml
@@ -116,7 +116,7 @@
         </TextBox>
       </DockPanel>
       <!-- Amount -->
-      <DockPanel DockPanel.Dock="Top" Margin="0,0,0,10">
+      <DockPanel DockPanel.Dock="Top" Margin="0,0,0,15">
         <Label DockPanel.Dock="Left" Content="_Amount:" Target="amountTb" />
         <DockPanel>
           <Image Width="120" Source="avares://WalletWasabi.Fluent/Assets/TechnologyLogos/payjoin.png"
@@ -149,6 +149,24 @@
           </DualCurrencyEntryBox>
         </DockPanel>
       </DockPanel>
+      <!-- Recipient -->
+      <DockPanel DockPanel.Dock="Top" Margin="0,0,0,10">
+        <Label DockPanel.Dock="Left" Content="_Recipient:" Target="LabelTagBox"
+               Margin="0,10,0,10"/>
+        <TagsBox x:Name="LabelTagBox"
+                 VerticalAlignment="Top"
+                 Watermark="{StaticResource LabelsWatermarkText}"
+                 TagSeparator=","
+                 SuggestionsAreCaseSensitive="True"
+                 RestrictInputToSuggestions="False"
+                 Items="{Binding SuggestionLabels.Labels}"
+                 TopItems="{Binding SuggestionLabels.TopSuggestions}"
+                 Suggestions="{Binding SuggestionLabels.Suggestions}"
+                 MaxTextLength="{StaticResource MaxLabelLength}"
+                 IsCurrentTextValid="{Binding SuggestionLabels.IsCurrentTextValid, Mode=OneWayToSource}"
+                 ForceAdd="{Binding SuggestionLabels.ForceAdd, Mode=TwoWay}">
+        </TagsBox>
+      </DockPanel>
     </DockPanel>
   </ContentArea>
 </UserControl>