Merge pull request #227 from getAlby/chore/balance-cleanup

chore: simplify conditional balance display and bitcoin connect store

README.md

@@ -36,13 +36,13 @@ You can use Bitcoin Connect without any build tools:
 
 ```html
 <script type="module">
-  import {launchModal} from 'https://esm.sh/@getalby/[email protected].1'; // jsdelivr.net, skypack.dev also work
+  import {launchModal} from 'https://esm.sh/@getalby/[email protected].2'; // jsdelivr.net, skypack.dev also work
 
   // use Bitcoin connect API normally...
   launchModal();
 
   // or if you just want access to the web components:
-  import 'https://esm.sh/@getalby/[email protected].1';
+  import 'https://esm.sh/@getalby/[email protected].2';
 </script>
 
 <!-- Bitcoin Connect components are now available -->

demos/html/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <title>Bitcoin Connect</title>
     <script type="module">
-      import {onConnected} from 'https://esm.sh/@getalby/[email protected].1';
+      import {onConnected} from 'https://esm.sh/@getalby/[email protected].2';
       onConnected((provider) => {
         console.log('Connected with provider', provider);
       });

package.json

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

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect-react",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -27,7 +27,7 @@
     "build": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect": "^3.4.1"
+    "@getalby/bitcoin-connect": "^3.4.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.21",

react/yarn.lock

@@ -1018,10 +1018,10 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@getalby/bitcoin-connect@^3.4.1":
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.4.1.tgz#b12b27ecf6c5b7ddbafd962a99880a32ce639a25"
-  integrity sha512-RLfBAMKVWcEjWFU8OidqFDpass2piTjtY/bCaDFYiB79pMCtzGpS/HjfBdqgPITgM0b5kQUySdKylDBfVAnMgw==
+"@getalby/bitcoin-connect@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.4.2.tgz#1aa3009e4f3499bab496af796b3c9aee2b71af09"
+  integrity sha512-TsIKASy/823DJLw8DEgwpnJyHGRt2Xfm4kGpot2NxuRrTD8V5s2nlMHmyZhmkuxzrKE83wA0KpIXgqse5We/xA==
   dependencies:
     "@getalby/lightning-tools" "^5.0.3"
     "@getalby/sdk" "^3.5.1"

src/api.ts

@@ -1,29 +1,7 @@
 import {SendPaymentResponse, WebLNProvider} from '@webbtc/webln-types';
 import store from './state/store';
-import {ConnectorFilter} from './types/ConnectorFilter';
-import {WebLNProviderConfig} from './types/WebLNProviderConfig';
 import {PaymentMethods} from './types/PaymentMethods';
-
-type BitcoinConnectConfig = {
-  /**
-   * Name of the application that the user is interacting with.
-   *   May be passed to the connector the user chooses to connect with (e.g. NWC)
-   */
-  appName?: string;
-  /**
-   * Limit which connectors are shown in the connect flow
-   */
-  filters?: ConnectorFilter[];
-  /**
-   * Set to false to not request or show the user's wallet balance
-   */
-  showBalance?: boolean;
-
-  /**
-   * Customize individual providers (NWC, LNC, LNbits etc)
-   */
-  providerConfig?: WebLNProviderConfig;
-};
+import {BitcoinConnectConfig} from './types/BitcoinConnectConfig';
 
 type LaunchPaymentModalArgs = {
   /**
@@ -193,10 +171,7 @@ export function isConnected() {
  * @param config
  */
 export function init(config: BitcoinConnectConfig = {}) {
-  store.getState().setAppName(config.appName);
-  store.getState().setFilters(config.filters);
-  store.getState().setShowBalance(config.showBalance);
-  store.getState().setProviderConfig(config.providerConfig);
+  store.getState().setBitcoinConnectConfig(config);
 }
 
 /**
@@ -312,5 +287,5 @@ export function disconnect() {
  * @returns the configuration of the current connector (if connected)
  */
 export function getConnectorConfig() {
-  return store.getState().config;
+  return store.getState().connectorConfig;
 }

src/components/BitcoinConnectElement.ts

@@ -1,4 +1,4 @@
-import {property, state} from 'lit/decorators.js';
+import {state} from 'lit/decorators.js';
 import store from '../state/store';
 import {InternalElement} from './internal/InternalElement';
 import {ConnectorFilter} from '../types/ConnectorFilter';
@@ -29,28 +29,13 @@ export class BitcoinConnectElement extends InternalElement {
   @state()
   protected _route: Route;
 
-  @property({
-    type: String,
-    attribute: 'app-name',
-  })
-  appName?: string;
-
-  @property({
-    type: Array,
-    attribute: 'filters',
-    converter(value, _type) {
-      return value?.split(',');
-    },
-  })
-  filters?: ConnectorFilter[];
-
   constructor() {
     super();
     this._connected = store.getState().connected;
     this._connecting = store.getState().connecting;
     this._connectorName = store.getState().connectorName;
-    this._appName = store.getState().appName;
-    this._filters = store.getState().filters;
+    this._appName = store.getState().bitcoinConnectConfig.appName;
+    this._filters = store.getState().bitcoinConnectConfig.filters;
     this._error = store.getState().error;
     this._route = store.getState().route;
     this._modalOpen = store.getState().modalOpen;
@@ -60,21 +45,11 @@ export class BitcoinConnectElement extends InternalElement {
       this._connected = currentState.connected;
       this._connecting = currentState.connecting;
       this._connectorName = currentState.connectorName;
-      this._appName = currentState.appName;
-      this._filters = currentState.filters;
+      this._appName = currentState.bitcoinConnectConfig.appName;
+      this._filters = currentState.bitcoinConnectConfig.filters;
       this._error = currentState.error;
       this._route = currentState.route;
       this._modalOpen = currentState.modalOpen;
     });
   }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    if (this.appName != undefined) {
-      store.getState().setAppName(this.appName);
-    }
-    if (this.filters != undefined) {
-      store.getState().setFilters(this.filters);
-    }
-  }
 }

src/components/bc-balance.ts

@@ -82,21 +82,10 @@ export class Balance extends withTwind()(BitcoinConnectElement) {
     (async () => {
       try {
         const provider = store.getState().provider;
-        if (!provider) {
+        if (!provider?.getBalance) {
           return;
         }
 
-        const info = store.getState().info;
-        if (
-          !info?.methods ||
-          info.methods.indexOf('getBalance') < 0 ||
-          !provider.getBalance
-        ) {
-          throw new Error(
-            'The current WebLN provider does not support getBalance'
-          );
-        }
-
         const balanceResponse = await provider.getBalance();
         if (balanceResponse) {
           this._balanceSats = balanceResponse.balance;

src/components/bc-button.ts

@@ -9,7 +9,6 @@ import {launchModal} from '../api.js';
 import './bc-balance';
 import store from '../state/store.js';
 import {waitingIcon} from './icons/waitingIcon.js';
-import {GetInfoResponse, WebLNProvider} from '@webbtc/webln-types';
 
 /**
  * A button that when clicked launches the modal.
@@ -21,33 +20,23 @@ export class Button extends withTwind()(BitcoinConnectElement) {
 
   @state()
   protected _showBalance: boolean | undefined = undefined;
-  @state()
-  protected _info: GetInfoResponse | undefined = undefined;
-  @state()
-  protected _provider: WebLNProvider | undefined = undefined;
 
   constructor() {
     super();
 
-    this._showBalance = store.getState().showBalance;
-    this._info = store.getState().info;
-    this._provider = store.getState().provider;
+    this._showBalance =
+      store.getState().bitcoinConnectConfig.showBalance &&
+      store.getState().supports('getBalance');
 
     // TODO: handle unsubscribe
     store.subscribe((store) => {
-      this._showBalance = store.showBalance;
-      this._info = store.info;
-      this._provider = store.provider;
+      this._showBalance =
+        store.bitcoinConnectConfig.showBalance && store.supports('getBalance');
     });
   }
 
   override render() {
     const isLoading = this._connecting || (!this._connected && this._modalOpen);
-    const showBalance =
-      !!this._showBalance &&
-      !!this._info?.methods &&
-      this._info.methods.indexOf('getBalance') > -1 &&
-      !!this._provider?.getBalance;
 
     return html`<div>
       <div
@@ -76,7 +65,7 @@ export class Button extends withTwind()(BitcoinConnectElement) {
               : html`${this.title}`}
           </span>
         </bci-button>
-        ${this._connected && showBalance
+        ${this._connected && this._showBalance
           ? html`<bc-balance class="select-none cursor-pointer"></bc-balance> `
           : null}
       </div>

src/components/bc-start.ts

@@ -9,46 +9,34 @@ import {disconnectSection} from './templates/disconnectSection';
 import './bc-balance';
 import store from '../state/store';
 import './bc-currency-switcher';
-import {GetInfoResponse, WebLNProvider} from '@webbtc/webln-types';
 
 // TODO: split up this component into disconnected and connected
 @customElement('bc-start')
 export class Start extends withTwind()(BitcoinConnectElement) {
   @state()
   protected _showBalance: boolean | undefined = undefined;
-  @state()
-  protected _info: GetInfoResponse | undefined = undefined;
-  @state()
-  protected _provider: WebLNProvider | undefined = undefined;
 
   constructor() {
     super();
 
-    this._showBalance = store.getState().showBalance;
-    this._info = store.getState().info;
-    this._provider = store.getState().provider;
+    this._showBalance =
+      store.getState().bitcoinConnectConfig.showBalance &&
+      store.getState().supports('getBalance');
 
     // TODO: handle unsubscribe
     store.subscribe((store) => {
-      this._showBalance = store.showBalance;
-      this._info = store.info;
-      this._provider = store.provider;
+      this._showBalance =
+        store.bitcoinConnectConfig.showBalance && store.supports('getBalance');
     });
   }
 
   override render() {
-    const showBalance =
-      !!this._showBalance &&
-      !!this._info?.methods &&
-      this._info.methods.indexOf('getBalance') > -1 &&
-      !!this._provider?.getBalance;
-
     return html`<div
       class="flex flex-col justify-center items-center w-full font-sans"
     >
       ${this._connected
         ? html`
-            ${showBalance
+            ${this._showBalance
               ? html`<span
                     class="text-xs font-medium mb-2 ${classes[
                       'text-neutral-secondary'

src/components/connectors/bc-alby-nwc-connector.ts

@@ -17,10 +17,10 @@ export class AlbyNWCConnector extends ConnectorElement {
 
   protected async _onClick() {
     const nwc = webln.NostrWebLNProvider.withNewSecret();
-    const providerConfig = store.getState().providerConfig;
+    const providerConfig = store.getState().bitcoinConnectConfig.providerConfig;
     await nwc.initNWC({
       ...(providerConfig?.nwc?.authorizationUrlOptions || {}),
-      name: this._appName || 'Bitcoin Connect',
+      name: this._appName,
     });
 
     this._connect({

src/components/pages/bc-umbrel.ts

@@ -33,7 +33,7 @@ export class UmbrelPage extends withTwind()(BitcoinConnectElement) {
       authorizationUrl: 'http://umbrel.local:58000/apps/new',
     });
     await nwc.initNWC({
-      name: this._appName || 'Bitcoin Connect',
+      name: this._appName,
     });
 
     await store.getState().connect({