Merge pull request #72 from Sakshi-75/replace-hardcoded-appname

replaced the hardcoded appName in bc-alby-nwc-connector
getAlby · Oct 5, 2023 · f3dee48 · f3dee48
2 parents a31e5ed + 0ce243c
commit f3dee48
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,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
@@ -9,16 +9,20 @@ function App() {
 
   React.useEffect(() => {
     (async () => {
-      const ln = new LightningAddress('[email protected]');
-      await ln.fetch();
-      setInvoice(
-        (
-          await ln.requestInvoice({
-            satoshi: 1,
-            comment: 'Paid with Bitcoin Connect',
-          })
-        ).paymentRequest
-      );
+      try {
+        const ln = new LightningAddress('[email protected]');
+        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
@@ -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/[email protected]":
   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
@@ -107,9 +107,8 @@ <h1>Light / Dark Mode</h1>
     </button>
 
     <h1>Components</h1>
-
     <h2>Button</h2>
-    <bc-button></bc-button>
+    <bc-button app-name="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
@@ -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
@@ -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
@@ -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
@@ -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';
 
@@ -21,6 +21,15 @@ export class BitcoinConnectElement extends InternalElement {
   @state()
   protected _balance: number | undefined = undefined;
 
+  @state()
+  protected _appName: string | undefined = undefined;
+
+  @property({
+    type: String,
+    attribute: 'app-name',
+  })
+  appName?: string;
+
   constructor() {
     super();
     loadFonts();
@@ -29,6 +38,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 +47,14 @@ 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();
+    if (this.appName != undefined) {
+      store.getState().setAppName(this.appName);
+    }
   }
 }
diff --git 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;

diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts
@@ -18,8 +18,7 @@ export class AlbyNWCConnector extends ConnectorElement {
     const nwc = webln.NostrWebLNProvider.withNewSecret();
 
     await nwc.initNWC({
-      // TODO: pass to component
-      name: 'Bitcoin Connect',
+      name: this._appName || 'Bitcoin Connect',
     });
 
     this._connect({

diff --git 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): 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;