From f56dfaab6982fd09d92031ba4b3729f8d6ea9a8f Mon Sep 17 00:00:00 2001
From: Lehebax <lehebax724@ktasy.com>
Date: Tue, 3 Oct 2023 22:01:07 +0530
Subject: [PATCH 1/6] replaced the hardcoded appName in bc-alby-nwc-connector

---
 src/components/BitcoinConnectElement.ts            | 8 ++++++++
 src/components/connectors/bc-alby-nwc-connector.ts | 2 +-
 src/state/store.ts                                 | 6 ++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/BitcoinConnectElement.ts b/src/components/BitcoinConnectElement.ts
index 4229aa3..08e70eb 100644
--- a/src/components/BitcoinConnectElement.ts
+++ b/src/components/BitcoinConnectElement.ts
@@ -21,6 +21,11 @@ export class BitcoinConnectElement extends InternalElement {
   @state()
   protected _balance: number | undefined = undefined;
 
+  @state()
+  protected _appName: string | undefined = undefined;
+
+  protected appName = 'Bitcoin Connect';
+
   constructor() {
     super();
     loadFonts();
@@ -29,6 +34,7 @@ export class BitcoinConnectElement extends InternalElement {
     this._alias = store.getState().alias;
     this._balance = store.getState().balance;
     this._connectorName = store.getState().connectorName;
+    this._appName = store.getState().appName;
 
     // TODO: handle unsubscribe
     store.subscribe((store) => {
@@ -37,10 +43,12 @@ export class BitcoinConnectElement extends InternalElement {
       this._alias = store.alias;
       this._balance = store.balance;
       this._connectorName = store.connectorName;
+      this._appName = store.appName;
     });
   }
 
   override connectedCallback() {
     super.connectedCallback();
+    store.getState().appName = this.appName;
   }
 }
diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts
index b82baa5..04176d9 100644
--- a/src/components/connectors/bc-alby-nwc-connector.ts
+++ b/src/components/connectors/bc-alby-nwc-connector.ts
@@ -19,7 +19,7 @@ export class AlbyNWCConnector extends ConnectorElement {
 
     await nwc.initNWC({
       // TODO: pass to component
-      name: 'Bitcoin Connect',
+      name: this._appName,
     });
 
     this._connect({
diff --git a/src/state/store.ts b/src/state/store.ts
index 0d48f57..7715caf 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -30,12 +30,14 @@ interface Store {
   readonly alias: string | undefined;
   readonly balance: number | undefined;
   readonly connectorName: string | undefined;
+  readonly appName: string | undefined;
 
   connect(config: ConnectorConfig): void;
   disconnect(): void;
   setAlias(alias: string | undefined): void;
   setBalance(balance: number | undefined): void;
   setRoute(route: Route): void;
+  setAppName(appName: string | undefined): void;
 }
 
 const store = createStore<Store>((set) => ({
@@ -45,6 +47,7 @@ const store = createStore<Store>((set) => ({
   alias: undefined,
   balance: undefined,
   connectorName: undefined,
+  appName: undefined,
   connect: async (config: ConnectorConfig) => {
     dispatchEvent('bc:connecting');
     set({
@@ -95,6 +98,9 @@ const store = createStore<Store>((set) => ({
   setRoute: (route: Route) => {
     set({route: route});
   },
+  setAppName: (appName) => {
+    set({appName});
+  },
 }));
 
 export default store;

From bb6291c1842e8a37dc2360487cc1d914bda56542 Mon Sep 17 00:00:00 2001
From: Lehebax <lehebax724@ktasy.com>
Date: Wed, 4 Oct 2023 19:00:41 +0530
Subject: [PATCH 2/6] addressed feedbacks

---
 src/components/BitcoinConnectElement.ts            | 6 ++++--
 src/components/connectors/bc-alby-nwc-connector.ts | 2 +-
 src/state/store.ts                                 | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/BitcoinConnectElement.ts b/src/components/BitcoinConnectElement.ts
index 08e70eb..059b444 100644
--- a/src/components/BitcoinConnectElement.ts
+++ b/src/components/BitcoinConnectElement.ts
@@ -24,7 +24,7 @@ export class BitcoinConnectElement extends InternalElement {
   @state()
   protected _appName: string | undefined = undefined;
 
-  protected appName = 'Bitcoin Connect';
+  protected appName = undefined;
 
   constructor() {
     super();
@@ -49,6 +49,8 @@ export class BitcoinConnectElement extends InternalElement {
 
   override connectedCallback() {
     super.connectedCallback();
-    store.getState().appName = this.appName;
+    if (this.appName != undefined) {
+      store.setAppName(this.appName);
+    }
   }
 }
diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts
index 04176d9..9cad832 100644
--- a/src/components/connectors/bc-alby-nwc-connector.ts
+++ b/src/components/connectors/bc-alby-nwc-connector.ts
@@ -19,7 +19,7 @@ export class AlbyNWCConnector extends ConnectorElement {
 
     await nwc.initNWC({
       // TODO: pass to component
-      name: this._appName,
+      name: this._appName || 'Bitcoin Connect',
     });
 
     this._connect({
diff --git a/src/state/store.ts b/src/state/store.ts
index 7715caf..faa713f 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -37,7 +37,7 @@ interface Store {
   setAlias(alias: string | undefined): void;
   setBalance(balance: number | undefined): void;
   setRoute(route: Route): void;
-  setAppName(appName: string | undefined): void;
+  setAppName(appName: string): void;
 }
 
 const store = createStore<Store>((set) => ({

From b0ef9fc683eeaeebe9b9189860dd0f493b76d3a5 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Thu, 5 Oct 2023 11:03:15 +0700
Subject: [PATCH 3/6] chore: fix appName property and store setAppName

---
 src/components/BitcoinConnectElement.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/BitcoinConnectElement.ts b/src/components/BitcoinConnectElement.ts
index 059b444..9984c15 100644
--- a/src/components/BitcoinConnectElement.ts
+++ b/src/components/BitcoinConnectElement.ts
@@ -1,5 +1,5 @@
 import {loadFonts} from './utils/loadFonts';
-import {state} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import store from '../state/store';
 import {InternalElement} from './internal/InternalElement';
 
@@ -24,7 +24,10 @@ export class BitcoinConnectElement extends InternalElement {
   @state()
   protected _appName: string | undefined = undefined;
 
-  protected appName = undefined;
+  @property({
+    type: String,
+  })
+  appName?: string;
 
   constructor() {
     super();
@@ -50,7 +53,7 @@ export class BitcoinConnectElement extends InternalElement {
   override connectedCallback() {
     super.connectedCallback();
     if (this.appName != undefined) {
-      store.setAppName(this.appName);
+      store.getState().setAppName(this.appName);
     }
   }
 }

From 840c56c7af39412abf9d4401c6fe5a847d447deb Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Thu, 5 Oct 2023 11:03:53 +0700
Subject: [PATCH 4/6] fix: missing model open property type

---
 src/components/bc-modal.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/bc-modal.ts b/src/components/bc-modal.ts
index bd359ae..02d9b5d 100644
--- a/src/components/bc-modal.ts
+++ b/src/components/bc-modal.ts
@@ -24,7 +24,9 @@ export class Modal extends withTwind()(BitcoinConnectElement) {
   @state()
   protected _closing = false;
 
-  @property()
+  @property({
+    type: Boolean,
+  })
   open?: boolean = false;
 
   _prevOpen?: boolean = false;

From a804c68bed47b2701b1078be18a6c4adf6695a00 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Thu, 5 Oct 2023 13:40:35 +0700
Subject: [PATCH 5/6] feat: add appName to react wrapper, documentation

---
 README.md                                     |  4 +++
 demos/react/src/App.tsx                       | 29 ++++++++++++-------
 demos/react/yarn.lock                         | 18 ++++++------
 dev/vite/index.html                           |  3 +-
 react/src/components/Button.tsx               |  2 +-
 react/src/components/Modal.tsx                |  3 +-
 react/src/types/ComponentProps.ts             |  1 +
 src/components/BitcoinConnectElement.ts       |  1 +
 .../connectors/bc-alby-nwc-connector.ts       |  1 -
 9 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index da83656..1dca604 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,10 @@ Bitcoin Connect exposes the following web components for allowing users to conne
 - `<bc-connector-list/>` - render the list of connectors on their own
 - _more components coming soon_
 
+##### Common Attributes (can be passed to any Bitcoin Connect component)
+
+- `app-name` (React: `appName`) - Name of the app requesting access to wallet. Currently used for NWC connections
+
 #### Window Events
 
 Bitcoin Connect exposes the following events:
diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx
index edc8604..fbc573f 100644
--- a/demos/react/src/App.tsx
+++ b/demos/react/src/App.tsx
@@ -9,16 +9,20 @@ function App() {
 
   React.useEffect(() => {
     (async () => {
-      const ln = new LightningAddress('hello@getalby.com');
-      await ln.fetch();
-      setInvoice(
-        (
-          await ln.requestInvoice({
-            satoshi: 1,
-            comment: 'Paid with Bitcoin Connect',
-          })
-        ).paymentRequest
-      );
+      try {
+        const ln = new LightningAddress('hello@getalby.com');
+        await ln.fetch();
+        setInvoice(
+          (
+            await ln.requestInvoice({
+              satoshi: 1,
+              comment: 'Paid with Bitcoin Connect',
+            })
+          ).paymentRequest
+        );
+      } catch (error) {
+        console.error(error);
+      }
     })();
   }, []);
 
@@ -45,7 +49,10 @@ function App() {
       <Toaster />
       <h1>Bitcoin Connect React</h1>
       <Modal onConnect={() => toast('Modal Connected!')} />
-      <Button onConnect={() => toast('Connected!')} />
+      <Button
+        appName="Bitcoin Connect (React Demo)"
+        onConnect={() => toast('Connected!')}
+      />
       <div style={{marginTop: '16px'}}>
         {preimage ? (
           <p>
diff --git a/demos/react/yarn.lock b/demos/react/yarn.lock
index c354fa3..d6c62e0 100644
--- a/demos/react/yarn.lock
+++ b/demos/react/yarn.lock
@@ -257,9 +257,9 @@
   integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
 
 "@scure/base@~1.1.0":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.2.tgz#ff0cf51874aaf176490c9cb46e4df807a2e581d2"
-  integrity sha512-sSCrnIdaUZQHhBxZThMuk7Wm1TWzMD3uJNdGgx3JS23xSqevu0tAOsg8k66nL3R2NwQe65AI9GgqpPOgZys/eA==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.3.tgz#8584115565228290a6c6c4961973e0903bb3df2f"
+  integrity sha512-/+SgoRjLq7Xlf0CWuLHq2LUZeL/w65kfzAPG5NH9pcmBhs+nunQTn4gvdwgMTIXnt9b2C/1SeL2XiysZEyIC9Q==
 
 "@scure/bip32@1.3.1":
   version "1.3.1"
@@ -381,9 +381,9 @@
   integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
 
 "@types/trusted-types@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
-  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.4.tgz#2b38784cd16957d3782e8e2b31c03bc1d13b4d65"
+  integrity sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==
 
 "@typescript-eslint/eslint-plugin@^6.0.0":
   version "6.2.1"
@@ -1374,8 +1374,8 @@ yocto-queue@^0.1.0:
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
 zustand@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.1.tgz#0cd3a3e4756f21811bd956418fdc686877e8b3b0"
-  integrity sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.2.tgz#e26ad331d0a2e28a7d4aa126b00c7140b34904bb"
+  integrity sha512-qF3/vZHCrjPUX5DvPE3DPDZlh+FiAWRKlP9PI7SlW1MCk8q4vUCDqyWsbF8K41ne0Yx8eeeb0m1cypn1LqUMYQ==
   dependencies:
     use-sync-external-store "1.2.0"
diff --git a/dev/vite/index.html b/dev/vite/index.html
index 5ba361c..b1c4b05 100644
--- a/dev/vite/index.html
+++ b/dev/vite/index.html
@@ -107,9 +107,8 @@ <h1>Light / Dark Mode</h1>
     </button>
 
     <h1>Components</h1>
-
     <h2>Button</h2>
-    <bc-button></bc-button>
+    <bc-button appName="Bitcoin Connect Vite"></bc-button>
     <br /><br />
     <div class="theme-geyser">
       <bc-button></bc-button>
diff --git a/react/src/components/Button.tsx b/react/src/components/Button.tsx
index adbeb49..2c23beb 100644
--- a/react/src/components/Button.tsx
+++ b/react/src/components/Button.tsx
@@ -10,5 +10,5 @@ export const Button: React.FC<ButtonProps> = (props) => {
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <bc-button />;
+  return <bc-button app-name={props.appName} />;
 };
diff --git a/react/src/components/Modal.tsx b/react/src/components/Modal.tsx
index 2d116fd..2389b09 100644
--- a/react/src/components/Modal.tsx
+++ b/react/src/components/Modal.tsx
@@ -10,9 +10,10 @@ export const Modal: React.FC<ModalProps> = (props) => {
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <bc-modal />;
+  return <bc-modal app-name={props.appName} />;
 };
 
+// TODO: move to bitcoin connect package and just re-export it here
 export function launchModal() {
   const modal = document.querySelector('bc-modal');
   if (!modal) {
diff --git a/react/src/types/ComponentProps.ts b/react/src/types/ComponentProps.ts
index 8a49f3a..fd95105 100644
--- a/react/src/types/ComponentProps.ts
+++ b/react/src/types/ComponentProps.ts
@@ -4,4 +4,5 @@ export type ComponentProps = {
   onDisconnect?(): void;
   onModalOpened?(): void;
   onModalClosed?(): void;
+  appName?: string;
 };
diff --git a/src/components/BitcoinConnectElement.ts b/src/components/BitcoinConnectElement.ts
index 9984c15..20525f3 100644
--- a/src/components/BitcoinConnectElement.ts
+++ b/src/components/BitcoinConnectElement.ts
@@ -26,6 +26,7 @@ export class BitcoinConnectElement extends InternalElement {
 
   @property({
     type: String,
+    attribute: 'app-name',
   })
   appName?: string;
 
diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts
index 9cad832..062ba04 100644
--- a/src/components/connectors/bc-alby-nwc-connector.ts
+++ b/src/components/connectors/bc-alby-nwc-connector.ts
@@ -18,7 +18,6 @@ export class AlbyNWCConnector extends ConnectorElement {
     const nwc = webln.NostrWebLNProvider.withNewSecret();
 
     await nwc.initNWC({
-      // TODO: pass to component
       name: this._appName || 'Bitcoin Connect',
     });
 

From 0ce243cb530b0c5fabc197db1e2c2f48f99bb9bd Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Thu, 5 Oct 2023 13:42:32 +0700
Subject: [PATCH 6/6] fix: app-name usage in vite dev page

---
 dev/vite/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev/vite/index.html b/dev/vite/index.html
index b1c4b05..5b76eaf 100644
--- a/dev/vite/index.html
+++ b/dev/vite/index.html
@@ -108,7 +108,7 @@ <h1>Light / Dark Mode</h1>
 
     <h1>Components</h1>
     <h2>Button</h2>
-    <bc-button appName="Bitcoin Connect Vite"></bc-button>
+    <bc-button app-name="Bitcoin Connect Vite"></bc-button>
     <br /><br />
     <div class="theme-geyser">
       <bc-button></bc-button>