From 5dd71c3de001273636152181b90fcb4989037c81 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Mon, 12 May 2025 18:50:32 -0500
Subject: [PATCH] started on bitcoinconnect update

---
 .../bitcoinConnect/BitcoinConnect.js          | 28 +++++----
 .../SubscriptionPaymentButton.js              | 60 ++++++++++++++++---
 src/config/appConfig.js                       |  3 +-
 3 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/src/components/bitcoinConnect/BitcoinConnect.js b/src/components/bitcoinConnect/BitcoinConnect.js
index d9f83e1..11752a0 100644
--- a/src/components/bitcoinConnect/BitcoinConnect.js
+++ b/src/components/bitcoinConnect/BitcoinConnect.js
@@ -6,20 +6,25 @@ const Button = dynamic(() => import('@getalby/bitcoin-connect-react').then(mod =
 });
 
 let initialized = false;
+let bitcoinConnectClient = null;
 
 export async function initializeBitcoinConnect() {
   if (!initialized) {
     try {
-      const { init } = await import('@getalby/bitcoin-connect-react');
-      // Check if custom elements are already registered
-      if (!customElements.get('bc-balance')) {
-        init({
-          appName: 'PlebDevs',
-          filters: ['nwc'],
-          showBalance: false,
-        });
-        initialized = true;
-      }
+      // Import the full module
+      const bc = await import('@getalby/bitcoin-connect-react');
+      
+      // Initialize with the config options
+      bc.init({
+        appName: 'PlebDevs',
+        filters: ['nwc'],
+        showBalance: false,
+      });
+      
+      // Store the client for use in components
+      bitcoinConnectClient = bc.client;
+      initialized = true;
+      console.log('Bitcoin Connect initialized successfully, client:', bitcoinConnectClient);
     } catch (error) {
       // If the error is about custom element already being defined, we can ignore it
       // as it means the component is already initialized
@@ -27,7 +32,10 @@ export async function initializeBitcoinConnect() {
         console.error('Error initializing Bitcoin Connect:', error);
       }
     }
+  } else {
+    console.log('Bitcoin Connect already initialized');
   }
+  return bitcoinConnectClient;
 }
 
 const BitcoinConnectButton = () => {
diff --git a/src/components/bitcoinConnect/SubscriptionPaymentButton.js b/src/components/bitcoinConnect/SubscriptionPaymentButton.js
index 695899f..f5b396f 100644
--- a/src/components/bitcoinConnect/SubscriptionPaymentButton.js
+++ b/src/components/bitcoinConnect/SubscriptionPaymentButton.js
@@ -4,7 +4,7 @@ import { initializeBitcoinConnect } from './BitcoinConnect';
 import { LightningAddress } from '@getalby/lightning-tools';
 import { useToast } from '@/hooks/useToast';
 import { useSession } from 'next-auth/react';
-import { webln, nwc } from '@getalby/sdk';
+import { webln } from '@getalby/sdk';
 import { useRouter } from 'next/router';
 import { Divider } from 'primereact/divider';
 import dynamic from 'next/dynamic';
@@ -30,6 +30,7 @@ const SubscriptionPaymentButtons = ({
   const [invoice, setInvoice] = useState(null);
   const [showRecurringOptions, setShowRecurringOptions] = useState(false);
   const [nwcInput, setNwcInput] = useState('');
+  const [bitcoinConnectClient, setBitcoinConnectClient] = useState(null);
   const { showToast } = useToast();
   const { data: session, status } = useSession();
   const router = useRouter();
@@ -38,7 +39,18 @@ const SubscriptionPaymentButtons = ({
   const amount = 50000;
 
   useEffect(() => {
-    initializeBitcoinConnect();
+    // Initialize Bitcoin Connect as early as possible
+    const initBC = async () => {
+      try {
+        const client = await initializeBitcoinConnect();
+        console.log("Client in SubscriptionPaymentButton:", client);
+        setBitcoinConnectClient(client);
+      } catch (err) {
+        console.error("Error initializing Bitcoin Connect in SubscriptionPaymentButton:", err);
+      }
+    };
+    
+    initBC();
   }, []);
 
   useEffect(() => {
@@ -95,11 +107,35 @@ const SubscriptionPaymentButtons = ({
 
   const handleRecurringSubscription = async () => {
     setIsProcessing(true);
-    const newNwc = nwc.NWCClient.withNewSecret();
-    const yearFromNow = new Date();
-    yearFromNow.setFullYear(yearFromNow.getFullYear() + 1);
-
+    
+    // Re-initialize if not already initialized
+    if (!bitcoinConnectClient) {
+      try {
+        console.log("Client not found, reinitializing");
+        const client = await initializeBitcoinConnect();
+        setBitcoinConnectClient(client);
+        
+        if (!client) {
+          showToast('error', 'Connection Error', 'Failed to initialize Bitcoin Connect client');
+          setIsProcessing(false);
+          return;
+        }
+      } catch (err) {
+        console.error("Error reinitializing Bitcoin Connect:", err);
+        showToast('error', 'Connection Error', 'Failed to initialize Bitcoin Connect client');
+        setIsProcessing(false);
+        return;
+      }
+    }
+    
     try {
+      // Import the SDK directly to avoid client issues
+      const { nwc } = await import('@getalby/sdk');
+      const newNwc = nwc.NWCClient.withNewSecret();
+      
+      const yearFromNow = new Date();
+      yearFromNow.setFullYear(yearFromNow.getFullYear() + 1);
+
       const initNwcOptions = {
         name: 'plebdevs.com',
         requestMethods: ['pay_invoice'],
@@ -108,28 +144,34 @@ const SubscriptionPaymentButtons = ({
         budgetRenewal: 'monthly',
         expiresAt: yearFromNow,
       };
+      
+      // Initialize NWC directly with the SDK
       await newNwc.initNWC(initNwcOptions);
       showToast('info', 'Alby', 'Alby connection window opened.');
+      
+      // Get NWC URL directly
       const newNWCUrl = newNwc.getNostrWalletConnectUrl();
 
       if (newNWCUrl) {
-        const nwc = new webln.NostrWebLNProvider({
+        const nwcProvider = new webln.NostrWebLNProvider({
           nostrWalletConnectUrl: newNWCUrl,
         });
 
-        await nwc.enable();
+        await nwcProvider.enable();
 
         const invoice = await fetchInvoice();
 
         if (!invoice || !invoice.paymentRequest) {
           showToast('error', 'NWC', `Failed to fetch invoice from ${lnAddress}`);
+          setIsProcessing(false);
           return;
         }
 
-        const paymentResponse = await nwc.sendPayment(invoice.paymentRequest);
+        const paymentResponse = await nwcProvider.sendPayment(invoice.paymentRequest);
 
         if (!paymentResponse || !paymentResponse?.preimage) {
           showToast('error', 'NWC', 'Payment failed');
+          setIsProcessing(false);
           return;
         }
 
diff --git a/src/config/appConfig.js b/src/config/appConfig.js
index a8325ba..4363377 100644
--- a/src/config/appConfig.js
+++ b/src/config/appConfig.js
@@ -11,7 +11,8 @@ const appConfig = {
   ],
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
-    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345'
+    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
+    '6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4'
   ],
   customLightningAddresses: [
     {