fix: bitcoin connect import in confirm subscription page (#76)

app/confirm/components/ConfirmSubscriptionForm.tsx

@@ -5,10 +5,6 @@ import { CreateSubscriptionRequest } from "types/CreateSubscriptionRequest";
 import { useRouter } from "next/navigation";
 import { CreateSubscriptionResponse } from "types/CreateSubscriptionResponse";
 import React from "react";
-import {
-  Button as BitcoinConnectButton,
-  init,
-} from "@getalby/bitcoin-connect-react";
 import { UnconfirmedSubscription } from "types/UnconfirmedSubscription";
 import { Box } from "app/components/Box";
 import { SubscriptionSummary } from "app/confirm/components/SubscriptionSummary";
@@ -18,6 +14,13 @@ import { toast } from "react-hot-toast";
 import { captureException } from "@sentry/nextjs";
 import { NostrWebLNProvider } from "@getalby/sdk/dist/webln";
 import { DEFAULT_CURRENCY } from "lib/constants";
+import dynamic from "next/dynamic";
+const BitcoinConnectButton = dynamic(
+  () => import("@getalby/bitcoin-connect-react").then((mod) => mod.Button),
+  {
+    ssr: false,
+  },
+);
 
 type FormData = CreateSubscriptionRequest;
 
@@ -27,12 +30,6 @@ type ConfirmSubscriptionFormProps = {
   nwcUrl?: string;
 };
 
-// always use a new NWC connection
-init({
-  filters: ["nwc"],
-  appName: "ZapPlanner",
-});
-
 export function ConfirmSubscriptionForm({
   unconfirmedSubscription,
   returnUrl,
@@ -51,6 +48,15 @@ export function ConfirmSubscriptionForm({
     },
   });
 
+  React.useEffect(() => {
+    import("@getalby/bitcoin-connect-react").then((mod) =>
+      mod.init({
+        filters: ["nwc"],
+        appName: "ZapPlanner",
+      }),
+    );
+  }, []);
+
   const [isNavigating, setNavigating] = React.useState(false);
   const { push } = useRouter();
   const hasLinkedWallet = !!watch("nostrWalletConnectUrl");