From 8efe0d41fe774d0948805a94c8b47dfac9a6de3f Mon Sep 17 00:00:00 2001
From: Roland <33993199+rolznz@users.noreply.github.com>
Date: Sun, 30 Jun 2024 16:13:35 +0700
Subject: [PATCH] feat: pay lsps1 orders with internal wallet (#538)

Co-authored-by: Michael Bumann <hello@michaelbumann.com>
---
 .../screens/channels/CurrentChannelOrder.tsx  | 89 +++++++++++++++++--
 frontend/src/screens/wallet/Send.tsx          |  9 +-
 2 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/frontend/src/screens/channels/CurrentChannelOrder.tsx b/frontend/src/screens/channels/CurrentChannelOrder.tsx
index 4c417124..47149a5e 100644
--- a/frontend/src/screens/channels/CurrentChannelOrder.tsx
+++ b/frontend/src/screens/channels/CurrentChannelOrder.tsx
@@ -6,6 +6,7 @@ import {
   Node,
   OpenChannelRequest,
   OpenChannelResponse,
+  PayInvoiceResponse,
 } from "src/types";
 
 import { Payment, init } from "@getalby/bitcoin-connect-react";
@@ -610,6 +611,18 @@ function PayLightningChannelOrder({ order }: { order: NewChannelOrder }) {
     order.lspUrl,
   ]);
 
+  const canPayInternally =
+    channels &&
+    wrappedInvoiceResponse &&
+    channels.some(
+      (channel) =>
+        channel.localSpendableBalance / 1000 >
+        wrappedInvoiceResponse.invoiceAmount
+    );
+  const [isPaying, setPaying] = React.useState(false);
+  const [paid, setPaid] = React.useState(false);
+  const [payExternally, setPayExternally] = React.useState(false);
+
   return (
     <div className="flex flex-col gap-5">
       <AppHeader
@@ -679,11 +692,77 @@ function PayLightningChannelOrder({ order }: { order: NewChannelOrder }) {
                 </TableBody>
               </Table>
             </div>
-            <Payment
-              invoice={wrappedInvoiceResponse.invoice}
-              payment={newChannel ? { preimage: "dummy preimage" } : undefined}
-              paymentMethods="external"
-            />
+            {paid ? (
+              <div className="flex gap-2 items-center justify-center">
+                <Loading /> <p>Waiting for channel to be opened...</p>
+              </div>
+            ) : (
+              <>
+                {canPayInternally && (
+                  <>
+                    <LoadingButton
+                      loading={isPaying}
+                      className="mt-4"
+                      onClick={async () => {
+                        try {
+                          if (!csrf) {
+                            throw new Error("csrf not loaded");
+                          }
+                          setPaying(true);
+                          const payInvoiceResponse =
+                            await request<PayInvoiceResponse>(
+                              `/api/payments/${wrappedInvoiceResponse.invoice}`,
+                              {
+                                method: "POST",
+                                headers: {
+                                  "X-CSRF-Token": csrf,
+                                  "Content-Type": "application/json",
+                                },
+                              }
+                            );
+                          if (payInvoiceResponse) {
+                            setPaid(true);
+                            toast({
+                              title: "Channel successfully requested",
+                            });
+                          }
+                          setPaid(true);
+                        } catch (e) {
+                          toast({
+                            variant: "destructive",
+                            title: "Failed to send: " + e,
+                          });
+                          console.error(e);
+                        }
+                        setPaying(false);
+                      }}
+                    >
+                      Pay and open channel
+                    </LoadingButton>
+                    {!payExternally && (
+                      <Button
+                        type="button"
+                        variant="link"
+                        className="text-muted-foreground text-xs"
+                        onClick={() => setPayExternally(true)}
+                      >
+                        Pay with another wallet
+                      </Button>
+                    )}
+                  </>
+                )}
+
+                {(payExternally || !canPayInternally) && (
+                  <Payment
+                    invoice={wrappedInvoiceResponse.invoice}
+                    payment={
+                      newChannel ? { preimage: "dummy preimage" } : undefined
+                    }
+                    paymentMethods="external"
+                  />
+                )}
+              </>
+            )}
           </div>
         </>
       )}
diff --git a/frontend/src/screens/wallet/Send.tsx b/frontend/src/screens/wallet/Send.tsx
index 62d6bbdf..4106f703 100644
--- a/frontend/src/screens/wallet/Send.tsx
+++ b/frontend/src/screens/wallet/Send.tsx
@@ -39,10 +39,10 @@ export default function Send() {
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!csrf) {
-      throw new Error("csrf not loaded");
-    }
     try {
+      if (!csrf) {
+        throw new Error("csrf not loaded");
+      }
       setLoading(true);
       const payInvoiceResponse = await request<PayInvoiceResponse>(
         `/api/payments/${invoice.trim()}`,
@@ -68,9 +68,8 @@ export default function Send() {
         title: "Failed to send: " + e,
       });
       console.error(e);
-    } finally {
-      setLoading(false);
     }
+    setLoading(false);
   };
 
   const copy = () => {