Improve UX of Send/QRCode
Adds the content of the QR Code so the user knows exactly what was scanned.
Includes some visual improvements
Update WalletWasabi.Fluent/ViewModels/Dialogs/ShowQrCameraDialogViewModel.cs
MODIFY
WalletWasabi.Fluent/ViewModels/Dialogs/ShowQrCameraDialogViewModel.cs
WalletWasabi.Fluent/ViewModels/Dialogs/ShowQrCameraDialogViewModel.cs
@@ -16,10 +16,11 @@ namespace WalletWasabi.Fluent.ViewModels.Dialogs;
public partial class ShowQrCameraDialogViewModel : DialogViewModelBase<string?>
{
[AutoNotify] private Bitmap? _qrImage;
- [AutoNotify] private string _message = "";
+ [AutoNotify] private string _errorMessage = "";
+ [AutoNotify] private string _qrContent = "";
private CancellationTokenSource CancellationTokenSource { get; } = new();
- private WebcamQrReader _qrReader;
+ private readonly WebcamQrReader _qrReader;
public ShowQrCameraDialogViewModel(Network network)
{
@@ -46,7 +47,11 @@ public partial class ShowQrCameraDialogViewModel : DialogViewModelBase<string?>
Observable.FromEventPattern<string>(_qrReader, nameof(_qrReader.InvalidAddressFound))
.ObserveOn(RxApp.MainThreadScheduler)
- .Subscribe(args => Message = $"Invalid QR code.")
+ .Subscribe(args =>
+ {
+ ErrorMessage = "No valid Bitcoin address found";
+ QrContent = args.EventArgs;
+ })
.DisposeWith(disposables);
Observable.FromEventPattern<Exception>(_qrReader, nameof(_qrReader.ErrorOccurred))

MODIFY
WalletWasabi.Fluent/Views/Dialogs/ShowQrCameraDialogView.axaml
WalletWasabi.Fluent/Views/Dialogs/ShowQrCameraDialogView.axaml
<c:ContentArea EnableNext="False"
EnableCancel="{Binding EnableCancel}"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
- <DockPanel>
- <TextBlock DockPanel.Dock="Bottom" Text="{Binding Message}" />
- <!-- QR Camera -->
- <Panel Width="400" Height="300">
+
+ <DockPanel Width="400" Height="250">
+ <Grid Margin="12 12 12 12" RowDefinitions="Auto,Auto" DockPanel.Dock="Bottom">
+ <TextBlock FontWeight="Bold" Classes="monoSpaced" Grid.Row="0" Text="{Binding ErrorMessage}"
+ Foreground="{StaticResource SystemErrorTextColor}" TextAlignment="Center" TextWrapping="Wrap" />
+ <TextBlock Margin="0 6 0 0" Foreground="{StaticResource TextControlForeground}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
+ Grid.Row="1"
+ Text="{Binding QrContent}"
+ TextAlignment="Center"
+ IsVisible="{Binding QrContent, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
+ </Grid>
+ <Panel>
<c:ProgressRing IsIndeterminate="True" Height="100" IsVisible="{Binding QrImage,Converter={x:Static ObjectConverters.IsNull}}" />
- <Image Name="qrImage" Source="{Binding QrImage}" IsVisible="{Binding QrImage,Converter={x:Static ObjectConverters.IsNotNull}}" />
+ <Image Name="qrImage" Source="{Binding QrImage}"
+ IsVisible="{Binding QrImage,Converter={x:Static ObjectConverters.IsNotNull}}" />
</Panel>
</DockPanel>
- <!-- Insert message binding & display here -->
+
</c:ContentArea>
+
</UserControl>
\ No newline at end of file

Improve UX of Send/QRCode

Adds the content of the QR Code so the user knows exactly what was scanned.

Includes some visual improvements

Update WalletWasabi.Fluent/ViewModels/Dialogs/ShowQrCameraDialogViewModel.cs

Co-authored-by: yahiheb <52379387+yahiheb@users.noreply.github.com>