Send and Review: Use back button for cancelling transaction

btcpayserver · Dec 8, 2024 · b6e7777 · b6e7777
1 parent 1b3ca22
commit b6e7777
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/BTCPayApp.UI/Components/Layout/Titlebar.razor b/BTCPayApp.UI/Components/Layout/Titlebar.razor
@@ -1,9 +1,17 @@
+@inject IJSRuntime JS
+
 <section id="Titlebar" class="@(Fixed ? "fixed" : null)">
     <div class="container d-flex align-items-center justify-content-between">
         <div class="titlebar-start">
-            @if (!string.IsNullOrEmpty(BackLink) || Back)
+            @if (BackCallback.HasDelegate)
+            {
+                <button type="button" class="btn-icon" @onclick="BackCallback">
+                    <Icon Symbol="back"/>
+                </button>
+            }
+            else if (!string.IsNullOrEmpty(BackLink) || Back)
             {
-                <a class="btn-icon" href="@(BackLink ?? "#")" onclick="@(string.IsNullOrEmpty(BackLink) ? "history.back();return false;" : null)">
+                <a class="btn-icon" href="@(BackLink ?? "#")" onclick="history.back();return false;">
                     <Icon Symbol="back"/>
                 </a>
             }
@@ -23,6 +31,9 @@
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    [Parameter]
+    public EventCallback BackCallback { get; set; }
+
     [Parameter]
     public string? BackLink { get; set; }
 

diff --git a/BTCPayApp.UI/Pages/SendPage.razor b/BTCPayApp.UI/Pages/SendPage.razor
@@ -28,7 +28,7 @@
 <PageTitle>@GetTitle()</PageTitle>
 
 <SectionContent SectionId="_Layout.Top">
-    <Titlebar Back>
+    <Titlebar BackCallback="OnBackClick">
         <h1>@GetTitle()</h1>
     </Titlebar>
 </SectionContent>
@@ -159,10 +159,6 @@
                             <span>Send @(Model.Bolt11 != null ? "via Lightning" : Model.Address != null ? "onchain" : "")</span>
                         }
                     </button>
-                    @if (Model.Transaction != null)
-                    {
-                        <button type="button" class="btn btn-outline-secondary w-100 mt-3" @onclick="CancelTx">Cancel transaction</button>
-                    }
                 </fieldset>
             </ValidationEditContext>
             <QrScanModal OnScan="@OnQrCodeScan"/>
@@ -414,6 +410,14 @@
         _ = LoadTransactions();
     }
 
+    private async Task OnBackClick()
+    {
+        if (Model.Transaction == null)
+            await JS.InvokeVoidAsync("history.back");
+        else
+            await CancelTx();
+    }
+
     private async Task LoadTransactions()
     {
         TransactionsError = null;