feat: add bc-pay-button web component

README.md

@@ -187,6 +187,15 @@ _Use another popular framework? please let us know or feel free to create a PR f
 Bitcoin Connect exposes the following web components for allowing users to connect their desired Lightning wallet:
 
 - `<bc-button/>` - launches the Bitcoin Connect Modal on click
+  - Arguments:
+    - `title` - (optional) change the title of the button
+- `<bc-pay-button/>` - launches the Bitcoin Connect Payment Modal on click
+  - Arguments:
+    - `invoice` - BOLT11 invoice
+    - `title` - (optional) change the title of the button
+    - `preimage` - (optional) set this if you received an external payment
+- - Events:
+    - `bc:onpaid` **Experimental** - fires event with WebLN payment response in `event.detail` (contains `preimage`)
 - `<bc-connect/>` - render connect wallet UI without modal
 - `<bc-payment/>` - render a payment request UI without modal
   - Arguments:
@@ -565,6 +574,7 @@ This project is powered by Lit.
 See [Get started](https://lit.dev/docs/getting-started/) on the Lit site for more information.
 
 ## BOLT FUN
+
 Bitcoin Connect is a BOLT FUN Legends of Lightning vol.2 finalist. [Follow our project and journey](https://bolt.fun/project/bitcoin-connect).
 
 ## License

dev/vite/index.html

@@ -33,6 +33,9 @@
         document
           .getElementById('send-payment')
           .setAttribute('invoice', invoice.paymentRequest);
+        document
+          .getElementById('pay-button')
+          .setAttribute('invoice', invoice.paymentRequest);
         document
           .getElementById('payment-flow')
           .setAttribute('invoice', invoice.paymentRequest);
@@ -200,6 +203,8 @@ <h2>Payment Flow</h2>
       <h1>Components</h1>
       <h2>Button</h2>
       <bc-button></bc-button>
+      <h2>Pay Button</h2>
+      <bc-pay-button id="pay-button"></bc-pay-button>
 
       <h2>Modal header</h2>
       <bc-modal-header show-help>Example Title</bc-modal-header>

package.json

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

src/components/bc-pay-button.ts

@@ -0,0 +1,67 @@
+import {PropertyValues, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {BitcoinConnectElement} from './BitcoinConnectElement.js';
+import {bcIcon} from './icons/bcIcon.js';
+import {withTwind} from './twind/withTwind.js';
+import {loadingIcon} from './icons/loadingIcon.js';
+import {launchPaymentModal} from '../api.js';
+import './bc-balance.js';
+import {SendPaymentResponse} from '@webbtc/webln-types';
+
+/**
+ * A button that when clicked launches a modal to pay an invoice.
+ */
+@customElement('bc-pay-button')
+export class PayButton extends withTwind()(BitcoinConnectElement) {
+  @property()
+  override title = 'Pay Now';
+
+  @property()
+  invoice?: string;
+
+  @property({})
+  preimage?: string;
+
+  private _setPaid?: (response: SendPaymentResponse) => void;
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('preimage') && this.preimage) {
+      this._setPaid?.({
+        preimage: this.preimage,
+      });
+    }
+  }
+
+  override render() {
+    const isLoading = this._connecting || (!this._connected && this._modalOpen);
+
+    return html` <div class="inline-flex" @click=${this._onClick}>
+      <bci-button variant="primary">
+        ${isLoading
+          ? html`<span class="ml-1 mr-1">${loadingIcon}</span>`
+          : html`<span class="-ml-0.5">${bcIcon}</span>`}
+        <span class="font-semibold">
+          ${isLoading ? html`Waiting...` : html`${this.title}`}
+        </span>
+      </bci-button>
+    </div>`;
+  }
+
+  private _onClick() {
+    if (!this.invoice) {
+      throw new Error('No invoice');
+    }
+    const {setPaid} = launchPaymentModal({
+      invoice: this.invoice,
+    });
+    this._setPaid = setPaid;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-pay-button': PayButton;
+  }
+}

src/components/flows/bc-payment.ts

@@ -33,6 +33,7 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
   })
   invoice?: string;
 
+  // TODO: change to preimage
   @property({
     type: Boolean,
   })

src/index.ts

@@ -4,6 +4,7 @@ import {LnbitsWebLNProvider} from './connectors/LnbitsConnector';
 import './state/boot';
 
 export * from './components/bc-button';
+export * from './components/bc-pay-button';
 export * from './components/bc-modal';
 export * from './components/bc-connector-list';
 export * from './components/pages/bc-send-payment';