move modal to main

shocknet · Sep 20, 2024 · 70b08d1 · 70b08d1
1 parent 5fb91fc
commit 70b08d1
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 72 deletions.
diff --git a/src/Components/Background.tsx b/src/Components/Background.tsx
@@ -26,6 +26,7 @@ import Toast from "./Toast";
 import { useHistory } from "react-router";
 import { RemoteBackup } from "./BackgroundJobs/RemoteBackup";
 import { App } from "@capacitor/app";
+import { DebitRequestHandler } from "./BackgroundJobs/DebitRequestHandler";
 
 
 export const Background = () => {
@@ -362,6 +363,7 @@ export const Background = () => {
 		<LnAddressCheck />
 		<NodeUpCheck />
 		<RemoteBackup />
+		<DebitRequestHandler />
 		<Modal isShown={isShown} hide={() => { toggle() }} modalContent={clipBoardContent} headerText={''} />
 	</div>
 }

diff --git a/src/Components/BackgroundJobs/DebitRequestHandler.tsx b/src/Components/BackgroundJobs/DebitRequestHandler.tsx
@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from "react";
+import { DebitAuthorization, LiveDebitRequest, LiveDebitRequest_debit_type } from "../../Api/pub/autogenerated/ts/types";
+import { SourceDebitRequest } from "../../globalTypes";
+import { getNostrClient, parseNprofile } from "../../Api/nostr";
+import { selectNostrSpends, useSelector } from "../../State/store";
+
+export const DebitRequestHandler = () => {
+    const nostrSpends = useSelector(selectNostrSpends);
+    const nodedUp = useSelector(state => state.nostrPrivateKey);
+    const [requestData, setRequestData] = useState<SourceDebitRequest | null>(null);
+    useEffect(() => {
+        if (!nodedUp) {
+            return;
+        }
+        console.log("inside")
+        nostrSpends.forEach(source => {
+            const { pubkey, relays } = parseNprofile(source.pasteField)
+            getNostrClient({ pubkey, relays }, source.keys).then(c => {
+                c.GetLiveDebitRequests(debitReq => {
+                    if (debitReq.status === "OK") {
+                        console.log("Got one")
+                        setRequestData({ request: debitReq, source })
+                    }
+                })
+            })
+        });
+    }, [nostrSpends, nodedUp])
+    const authroizeRequest = useCallback(async (request: SourceDebitRequest) => {
+        const res = await (await getNostrClient(request.source.pasteField, request.source.keys)).AuthorizeDebit({ authorize_npub: request.request.npub, rules: [] });
+        if (res.status !== "OK") {
+            throw new Error(res.reason);
+        }
+        setRequestData(null)
+    }, [])
+    if (!requestData) {
+        return null
+    }
+    return (
+        <>
+            <div className='Sources_modal_header'>Incoming Request</div>
+            <div className='Sources_modal_discription'>{requestData.request.npub}</div>
+            <div className='Sources_modal_discription'>
+                {
+                    requestData.request.debit.type === LiveDebitRequest_debit_type.FREQUENCY
+                        ?
+                        `Wants you to pay ${requestData.request.amount} sats per ${requestData.request.debit.frequency.interval}, ${requestData.request.debit.frequency.number_of_intervals} times`
+                        :
+                        `Wants you to pay ${requestData.request.amount} sats`
+                }
+            </div>
+            <div className='Sources_modal_discription'>Wants to spend</div>
+            <div className='Sources_modal_discription'>{requestData.request.amount}</div>
+            <div className="Sources_modal_add_btn">
+                <button onClick={() => close()}>Deny</button>
+                <button onClick={() => authroizeRequest(requestData)}>{requestData.request.debit.type === LiveDebitRequest_debit_type.FREQUENCY ? "Allow" : "Pay"}</button>
+            </div>
+        </>
+    )
+}
diff --git a/src/Pages/LinkedApp/index.tsx b/src/Pages/LinkedApp/index.tsx
@@ -5,21 +5,21 @@ import { selectNostrSpends, useSelector } from "../../State/store";
 import { getNostrClient, parseNprofile } from "../../Api/nostr";
 import { DebitAuthorization, LiveDebitRequest, LiveDebitRequest_debit_type } from "../../Api/pub/autogenerated/ts/types";
 import { SpendFrom } from "../../globalTypes";
-type SourceDebitRequest = { request: LiveDebitRequest, source: SpendFrom }
+
 export const LinkedApp = () => {
   const { isShown, toggle } = UseModal();
-  const [requestData, setRequestData] = useState<SourceDebitRequest | null>(null);
+  //const [requestData, setRequestData] = useState<SourceDebitRequest | null>(null);
   const [debitAuthorizations, setDebitAuthorizations] = useState<DebitAuthorization[]>([])
   const nodedUp = useSelector(state => state.nostrPrivateKey);
   const nostrSpends = useSelector(selectNostrSpends);
-  const [updatehook, setUpdateHook] = useState(0)
+  //const [updatehook, setUpdateHook] = useState(0)
   useEffect(() => {
-		if (!nodedUp) {
-			return;
-		}
-		nostrSpends.forEach(source => {
-			const { pubkey, relays } = parseNprofile(source.pasteField)
-			getNostrClient({ pubkey, relays }, source.keys).then(c => {
+    if (!nodedUp) {
+      return;
+    }
+    nostrSpends.forEach(source => {
+      const { pubkey, relays } = parseNprofile(source.pasteField)
+      getNostrClient({ pubkey, relays }, source.keys).then(c => {
         c.GetDebitAuthorizations().then(res => {
           if (res.status === "OK") {
             setDebitAuthorizations((state) => [
@@ -30,78 +30,50 @@ export const LinkedApp = () => {
             ])
           }
         })
-				
-			})
-		});
-	}, [nostrSpends, nodedUp, updatehook])
-  useEffect(() => {
-		if (!nodedUp) {
-			return;
-		}
-    console.log("inside")
-		nostrSpends.forEach(source => {
-			const { pubkey, relays } = parseNprofile(source.pasteField)
-			getNostrClient({ pubkey, relays }, source.keys).then(c => {
-				c.GetLiveDebitRequests(debitReq => {
-					if (debitReq.status === "OK") {
-            console.log("Got one")
-            setRequestData({ request: debitReq, source })
-            toggle();
-					}
-				})
-			})
-		});
-	}, [nostrSpends, nodedUp])
-  const authroizeRequest = useCallback(async (request: SourceDebitRequest) => {
-    const res = await (await getNostrClient(request.source.pasteField, request.source.keys)).AuthorizeDebit({ authorize_npub: request.request.npub, rules: [] });
-    if (res.status !=="OK") {
-      throw new Error(res.reason);
-    }
-    setUpdateHook(Math.random())
-    toggle();
-  }, [toggle])
-  
+
+      })
+    });
+  }, [nostrSpends, nodedUp, /* updatehook */])
+  /*   useEffect(() => {
+      if (!nodedUp) {
+        return;
+      }
+      console.log("inside")
+      nostrSpends.forEach(source => {
+        const { pubkey, relays } = parseNprofile(source.pasteField)
+        getNostrClient({ pubkey, relays }, source.keys).then(c => {
+          c.GetLiveDebitRequests(debitReq => {
+            if (debitReq.status === "OK") {
+              console.log("Got one")
+              setRequestData({ request: debitReq, source })
+              toggle();
+            }
+          })
+        })
+      });
+    }, [nostrSpends, nodedUp])
+    const authroizeRequest = useCallback(async (request: SourceDebitRequest) => {
+      const res = await (await getNostrClient(request.source.pasteField, request.source.keys)).AuthorizeDebit({ authorize_npub: request.request.npub, rules: [] });
+      if (res.status !== "OK") {
+        throw new Error(res.reason);
+      }
+      setUpdateHook(Math.random())
+      toggle();
+    }, [toggle]) */
+
   return (
     <div className="LinkedApp_container">
       <div className="LinkedApp">
         <div className="LinkedApp_header_text">Linked Apps</div>
         <div>
-          { debitAuthorizations.map(res => (
+          {debitAuthorizations.map(res => (
             <div key={res.debit_id}>
               <span>{res.npub}</span>
             </div>
-          )) }
+          ))}
         </div>
-        <Modal isShown={isShown} hide={toggle} modalContent={<IncomingRequestModal request={requestData!} authorize={authroizeRequest} toggle={toggle} />} headerText={''} />
       </div>
     </div>
   );
 };
-interface Props {
-  request: SourceDebitRequest,
-  authorize: (request: SourceDebitRequest) => Promise<void>,
-  toggle: () => void
-}
-const IncomingRequestModal = ({ request, authorize, toggle }: Props) => {
-  return (
-    <React.Fragment>
-      <div className='Sources_modal_header'>Incoming Request</div>
-      <div className='Sources_modal_discription'>{request.request.npub}</div>
-      <div className='Sources_modal_discription'>
-        {
-          request.request.debit.type === LiveDebitRequest_debit_type.FREQUENCY
-          ?
-          `Wants you to pay ${request.request.amount} sats per ${request.request.debit.frequency.interval}, ${request.request.debit.frequency.number_of_intervals} times`
-          :
-          `Wants you to pay ${request.request.amount} sats`
-        }
-      </div>
-      <div className='Sources_modal_discription'>Wants to spend</div>
-      <div className='Sources_modal_discription'>{request.request.amount}</div>
-      <div className="Sources_modal_add_btn">
-        <button onClick={() => toggle()}>Deny</button>
-        <button onClick={() => authorize(request)}>{request.request.debit.type === LiveDebitRequest_debit_type.FREQUENCY ? "Allow" : "Pay"}</button>
-      </div>
-    </React.Fragment>
-  )
-}
+
diff --git a/src/globalTypes.ts b/src/globalTypes.ts
@@ -1,5 +1,6 @@
 import React from "react";
 import { NostrKeyPair } from "./Api/nostrHandler";
+import { LiveDebitRequest } from "./Api/pub/autogenerated/ts/types";
 
 type PriceImgFunction = (arg1: string, arg2: number) => string;
 
@@ -154,4 +155,6 @@ export interface FiatCurrency {
   url: string;
   currency: string;
   symbol: string;
-}
+}
+
+export type SourceDebitRequest = { request: LiveDebitRequest, source: SpendFrom }