fix: ssr issues

README.md

@@ -43,8 +43,14 @@ import {Button, Modal, launchModal} from '@getalby/bitcoin-connect-react';
   Programmatically launch modal
 </button>
 ```
+
+#### React SSR / NextJS
+
+Make sure to only render the components **client side**. This can be done either by creating a wrapper component with 'use client' directive (NextJS app directory) or by using next/dynamic.
+
 ### Other Frameworks
-*Use another popular framework? please let us know or feel free to create a PR for a wrapper. See the React package for an example implementation.*
+
+_Use another popular framework? please let us know or feel free to create a PR for a wrapper. See the React package for an example implementation._
 
 ### Pure HTML
 
@@ -210,6 +216,10 @@ You should have a certain level of trust on the website you decide to connect yo
 - [Alby NWC](https://nwc.getalby.com)
 - [Generic NWC URL](https://github.com/nostr-protocol/nips/blob/master/47.md)
 
+## Known Issues
+
+- NWC connectors do not work on iOS in non-secure contexts because window.crypto.subtle is unavailable. If testing on your phone, please run an https server or use an https tunnel.
+
 ## 🔥 Lit
 
 This project is powered by Lit.

src/components/internal/InternalElement.ts

@@ -29,10 +29,13 @@ export class InternalElement extends LitElement {
   }
 
   protected _getBrandColorLuminance() {
+    if (!globalThis.window) {
+      return 0;
+    }
     const brandColor =
-      getComputedStyle(this as HTMLElement).getPropertyValue(
-        '--bc-color-brand'
-      ) || '#196CE7';
+      window
+        .getComputedStyle(this as HTMLElement)
+        .getPropertyValue('--bc-color-brand') || '#196CE7';
     function calculateLuminance(color: string) {
       if (color.startsWith('#')) {
         color = color.slice(1); // Remove the '#' character

src/components/twind/withTwind.ts

@@ -1,6 +1,7 @@
 import {defineConfig} from '@twind/core';
 import presetTailwind from '@twind/preset-tailwind';
 import install from '@twind/with-web-components';
+import {LitElement} from 'lit';
 
 const colors = {
   'brand-light': 'var(--bc-color-brand, #196CE7)',
@@ -74,4 +75,16 @@ export const withTwindExtended = () =>
     })
   );
 
-export const withTwind = () => withTwindExtended();
+export const withTwind = () => {
+  if (globalThis.window) {
+    return withTwindExtended();
+  } else {
+    // prevent SSR issues
+    return withNothing;
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function withNothing<T extends new (...args: any[]) => LitElement>(Base: T) {
+  return Base;
+}

src/components/utils/loadFonts.ts

@@ -1,6 +1,6 @@
 let appendedFonts = false;
 export function loadFonts() {
-  if (appendedFonts) {
+  if (!globalThis.document || appendedFonts) {
     return;
   }
   appendedFonts = true;

src/state/store.ts

@@ -128,5 +128,7 @@ function addEventListeners() {
   });
 }
 
-loadConfig();
-addEventListeners();
+if (globalThis.window) {
+  loadConfig();
+  addEventListeners();
+}