@getalby/bitcoin-connect - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0-beta.2

dist/api.d.ts

@@ -1,2 +0,2 @@
-import { WebLNProvider } from '@webbtc/webln-types';
+import { SendPaymentResponse, WebLNProvider } from '@webbtc/webln-types';
 import { ConnectorFilter } from './types/ConnectorFilter';
@@ -10,2 +10,3 @@ declare type BitcoinConnectConfig = {
     invoice?: string;
+    onPaid?: (response: SendPaymentResponse) => void;
 };
@@ -20,5 +21,5 @@ export declare function onConnected(callback: (provider: WebLNProvider) => void): () => void;
 export declare function init(config?: BitcoinConnectConfig): void;
-export declare function launchModal({ invoice }?: LaunchModalArgs): void;
+export declare function launchModal({ invoice, onPaid }?: LaunchModalArgs): void;
 export declare function closeModal(): void;
 export declare function disconnect(): void;
 export {};

package.json

 {
   "name": "@getalby/bitcoin-connect",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -65,3 +65,6 @@ ![image](https://github.com/getAlby/bitcoin-connect/assets/33993199/e99f0651-25a5-47cb-bd58-c75360517dfe)
 // launch a payment flow
-await launchModal({invoice: 'lnbc...'});
+await launchModal({
+  invoice: 'lnbc...',
+  onPaid: ({preimage}) => alert('Paid: ' + preimage), // NOTE: only fired if paid with WebLN
+});
 
@@ -78,3 +81,3 @@ // or request a WebLN provider to use the full WebLN API
 ```jsx
-import {Button, init, launchModal, closeModal, requestProvider} from '@getalby/bitcoin-connect-react';
+import {Button, init, launchModal, closeModal, requestProvider, Connect, SendPayment} from '@getalby/bitcoin-connect-react';
 
@@ -86,2 +89,13 @@ // Initialize Bitcoin Connect
 
+// render the Bitcoin Connect button
+<Button onConnect={(provider) => {
+  const {preimage} = await provider.sendPayment("lnbc...");
+}}/>
+
+// render the connect flow on its own without the modal
+<Connect/>
+
+// render the send payment flow on its own without the modal
+<SendPayment invoice="lnbc..."/>
+
 // request a provider
@@ -96,12 +110,4 @@ <button onClick={() => {
 
-// render the Bitcoin Connect button
-<Button onConnect={(provider) => {
-  provider.sendPayment("lnbc...")
-}} />
-
-// render a payment component on its own
-<SendPayment invoice="lnbc..."/>
-
-// open modal programmatically to pay an invoice
-<button onClick={() => launchModal({invoice: "lnbc..."})}>
+// open modal programmatically to pay an invoice (for one-off payments)
+<button onClick={() => launchModal({invoice: "lnbc...", onPaid: ({preimage}) => alert("Paid: " + preimage)})}>
   Programmatically launch modal
@@ -116,8 +122,25 @@ </button>
 
-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), using next/dynamic, or a dynamic import e.g.
+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), using `next/dynamic`, or a dynamic import e.g.
 
 ```ts
+import dynamic from 'next/dynamic';
+
+const BitcoinConnectButton = dynamic(() =>
+  import('@getalby/bitcoin-connect-react').then((mod) => mod.Button)
+);
+```
+
+or
+
+```ts
 useEffect(() => {
   // init bitcoin connect to provide webln
-  import('@getalby/bitcoin-connect-react');
+  const {onConnected} import('@getalby/bitcoin-connect-react');
+  const unsub = onConnected((provider) => {
+    window.webln = provider;
+  });
+
+  return () => {
+    unsub();
+  };
 }, []);
@@ -139,5 +162,8 @@ ```
 - `<bc-button/>` - launches the Bitcoin Connect Modal on click
-- `<bc-send-payment/>` - render a payment request UI
+- `<bc-connect-flow/>` - render connect wallet UI without modal
+- `<bc-send-payment-flow/>` - render a payment request UI without modal
   - Arguments:
     - `invoice` - BOLT11 invoice
+  - Events:
+    - **WebLN only**: fires `bc:onpaid` event with WebLN payment response in `event.detail` (contains `preimage`)
 - _more components coming soon_
@@ -192,2 +218,3 @@
   invoice: 'lnbc...', // bolt11 invoice
+  onPaid: ({preimage}) => alert('Paid: ' + preimage), // NOTE: only fired if paid with WebLN
 });
@@ -301,2 +328,4 @@ ```
 
+_More methods coming soon. Is something missing that you'd need? let us know!_
+
 #### WebLN events
@@ -306,4 +335,2 @@
 
-_More methods coming soon. Is something missing that you'd need? let us know!_
-
 ### Styling
@@ -310,0 +337,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1961996

increased by0.08%

Lines of code

8854

increased by0.05%

Number of lines in readme file

502

increased by5.68%

No dependency changes