fix: lnurl pay to use existing lightning address (#660)

fixes #650 @im-adithya how it was implemented before was very unstable. We should avoid editing internals and instead use the public API of the object.
getAlby · Sep 18, 2024 · 46e76d9 · 46e76d9
2 parents 8e12028 + a0df332
commit 46e76d9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/frontend/src/screens/wallet/Send.tsx b/frontend/src/screens/wallet/Send.tsx
@@ -35,7 +35,7 @@ export default function Send() {
       if (lnAddress.lnurlpData) {
         navigate(`/wallet/send/lnurl-pay`, {
           state: {
-            args: { lnurlDetails: lnAddress.lnurlpData },
+            args: { lnAddress },
           },
         });
         return;

diff --git a/frontend/src/screens/wallet/send/LnurlPay.tsx b/frontend/src/screens/wallet/send/LnurlPay.tsx
@@ -5,7 +5,7 @@ import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
 import { useToast } from "src/components/ui/use-toast";
 
-import { LightningAddress, LnUrlPayResponse } from "@getalby/lightning-tools";
+import { LightningAddress } from "@getalby/lightning-tools";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Loading from "src/components/Loading";
 
@@ -14,19 +14,18 @@ export default function LnurlPay() {
   const navigate = useNavigate();
   const { toast } = useToast();
 
-  const lnurlDetails = state?.args?.lnurlDetails as LnUrlPayResponse;
+  const lnAddress = state?.args?.lnAddress as LightningAddress;
   const [amount, setAmount] = React.useState("");
   const [comment, setComment] = React.useState("");
   const [isLoading, setLoading] = React.useState(false);
 
   const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     try {
+      if (!lnAddress) {
+        throw new Error("no lightning address set");
+      }
       setLoading(true);
-      const lnAddress = new LightningAddress(lnurlDetails.identifier);
-      // this is set instead of calling fetch because
-      // requestInvoice uses lnurlpData.callback
-      lnAddress.lnurlpData = lnurlDetails;
       const invoice = await lnAddress.requestInvoice({
         satoshi: parseInt(amount),
         comment,
@@ -49,23 +48,25 @@ export default function LnurlPay() {
   };
 
   React.useEffect(() => {
-    if (!lnurlDetails) {
+    if (!lnAddress) {
       navigate("/wallet/send");
     }
-  }, [navigate, lnurlDetails]);
+  }, [navigate, lnAddress]);
 
-  if (!lnurlDetails) {
+  if (!lnAddress) {
     return <Loading />;
   }
 
   return (
     <form onSubmit={onSubmit} className="grid gap-4">
       <div>
-        <p className="font-medium text-lg mb-2">{lnurlDetails.identifier}</p>
-        {lnurlDetails?.description && (
+        <p className="font-medium text-lg mb-2">{lnAddress.address}</p>
+        {lnAddress.lnurlpData?.description && (
           <div className="mb-2">
             <Label>Description</Label>
-            <p className="text-muted-foreground">{lnurlDetails.description}</p>
+            <p className="text-muted-foreground">
+              {lnAddress.lnurlpData.description}
+            </p>
           </div>
         )}
         <div className="mb-2">
@@ -83,7 +84,7 @@ export default function LnurlPay() {
             autoFocus
           />
         </div>
-        {!!lnurlDetails?.commentAllowed && (
+        {!!lnAddress.lnurlpData?.commentAllowed && (
           <div className="mb-2">
             <Label htmlFor="comment">Comment</Label>
             <Input