From f1bfc2f3a63516401550f2d51d40ea2563ceee6a Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Fri, 18 Aug 2023 19:11:31 +0100
Subject: [PATCH] Zaps with POW UX

---
 packages/app/src/Element/SendSats.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/Element/SendSats.tsx b/packages/app/src/Element/SendSats.tsx
index a9f0b588..368095d9 100644
--- a/packages/app/src/Element/SendSats.tsx
+++ b/packages/app/src/Element/SendSats.tsx
@@ -17,6 +17,7 @@ import { useWallet } from "Wallet";
 import useLogin from "Hooks/useLogin";
 import { generateRandomKey } from "Login";
 import { ZapPoolController } from "ZapPoolController";
+import AsyncButton from "Element/AsyncButton";
 
 import messages from "./messages";
 
@@ -121,8 +122,8 @@ export default function SendSats(props: SendSatsProps) {
     setAmount(a);
   };
 
-  async function loadInvoice() {
-    if (!amount || !handler || !publisher) return null;
+  async function loadInvoice(): Promise<void> {
+    if (!amount || !handler || !publisher) return;
 
     let zap: NostrEvent | undefined;
     if (author && zapType !== ZapType.NonZap) {
@@ -250,7 +251,7 @@ export default function SendSats(props: SendSatsProps) {
         </div>
         {zapTypeSelector()}
         {(amount ?? 0) > 0 && (
-          <button type="button" className="zap-action" onClick={() => loadInvoice()}>
+          <AsyncButton className="zap-action" onClick={() => loadInvoice()}>
             <div className="zap-action-container">
               <Icon name="zap" />
               {target ? (
@@ -259,7 +260,7 @@ export default function SendSats(props: SendSatsProps) {
                 <FormattedMessage {...messages.ZapSats} values={{ n: formatShort(amount) }} />
               )}
             </div>
-          </button>
+          </AsyncButton>
         )}
       </>
     );