Merge pull request #226 from getAlby/fix/balance

Fix: NWC connection URL and improve checks to see if balance is supported

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].0'; // jsdelivr.net, skypack.dev also work
+  import {launchModal} from 'https://esm.sh/@getalby/[email protected].1'; // 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].0';
+  import 'https://esm.sh/@getalby/[email protected].1';
 </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].0';
+      import {onConnected} from 'https://esm.sh/@getalby/[email protected].1';
       onConnected((provider) => {
         console.log('Connected with provider', provider);
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@getalby/lightning-tools": "^5.0.3",
-    "@getalby/sdk": "^3.5.0",
+    "@getalby/sdk": "^3.5.1",
     "@lightninglabs/lnc-web": "^0.3.1-alpha",
     "qrcode-generator": "^1.4.4",
     "zustand": "^4.5.2"

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect-react",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "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.0"
+    "@getalby/bitcoin-connect": "^3.4.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.21",

react/yarn.lock

@@ -1018,13 +1018,13 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@getalby/bitcoin-connect@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.4.0.tgz#60d51a9c7f98b6e3fdc22f9893d5884c07706f7d"
-  integrity sha512-xkGxaBkHA9Ugnz4eAAq22aV/17VhesRaF09mMLgA6s1PXXN8Q871T/4EOn4kYscKKtyqMg/OSZ698vGDU0sMEA==
+"@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==
   dependencies:
     "@getalby/lightning-tools" "^5.0.3"
-    "@getalby/sdk" "^3.5.0"
+    "@getalby/sdk" "^3.5.1"
     "@lightninglabs/lnc-web" "^0.3.1-alpha"
     qrcode-generator "^1.4.4"
     zustand "^4.5.2"
@@ -1034,10 +1034,10 @@
   resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.3.tgz#4cc6ef1253a30fb4913af89b842645e0c04994bf"
   integrity sha512-QG3/SBI5n2py5IgsjP3K+c8eq55eiI3PQB12yo9Pot0b5hcN7TNNoTKn0fgLJjO1iEVCUkF513kDOpjjXwK0hQ==
 
-"@getalby/sdk@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.5.0.tgz#8ef53cda9f22cf31d3e99d3ff4d00366aee0567d"
-  integrity sha512-gnjILgoXOMjCVD1fHcoS3ghhO0UpvFHXuCBb0hz5iuzRYxbPWHXt0eVd60y+z5kR/+T+/S3S2fRMnbCYma+ppQ==
+"@getalby/sdk@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.5.1.tgz#2549f416e200d42bfa83e4d2f9999305eac5ba8c"
+  integrity sha512-Qz9GgXMoVpupDLqbzA2CHpru+9yqijQrxeRN7CDfV6l39js/BGwin93MFTh7eFj2TsMo+i8JeM3BVn+SJn/iRg==
   dependencies:
     eventemitter3 "^5.0.1"
     nostr-tools "^1.17.0"

src/components/bc-balance.ts

@@ -85,14 +85,18 @@ export class Balance extends withTwind()(BitcoinConnectElement) {
         if (!provider) {
           return;
         }
-        // TODO: consider using getInfo to check if balance is supported
-        // and do not show an error if it is not supported
-        // (do not display the balance - needs to be handled somewhere else)
-        if (!provider.getBalance) {
+
+        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,6 +9,7 @@ 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.
@@ -20,20 +21,33 @@ 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;
 
     // TODO: handle unsubscribe
     store.subscribe((store) => {
       this._showBalance = store.showBalance;
+      this._info = store.info;
+      this._provider = store.provider;
     });
   }
 
   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
@@ -62,7 +76,7 @@ export class Button extends withTwind()(BitcoinConnectElement) {
               : html`${this.title}`}
           </span>
         </bci-button>
-        ${this._connected && this._showBalance !== false
+        ${this._connected && showBalance
           ? html`<bc-balance class="select-none cursor-pointer"></bc-balance> `
           : null}
       </div>

src/components/bc-start.ts

@@ -9,31 +9,46 @@ 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;
 
     // TODO: handle unsubscribe
     store.subscribe((store) => {
       this._showBalance = store.showBalance;
+      this._info = store.info;
+      this._provider = store.provider;
     });
   }
 
   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`
-            ${this._showBalance !== false
+            ${showBalance
               ? html`<span
                     class="text-xs font-medium mb-2 ${classes[
                       'text-neutral-secondary'

src/state/store.ts

@@ -4,7 +4,7 @@ import {connectors} from '../connectors';
 import {Connector} from '../connectors/Connector';
 import {Route} from '../components/routes';
 import {ConnectorFilter} from '../types/ConnectorFilter';
-import {WebLNProvider} from '@webbtc/webln-types';
+import {GetInfoResponse, WebLNProvider} from '@webbtc/webln-types';
 import {WebLNProviderConfig} from '../types/WebLNProviderConfig';
 
 interface Store {
@@ -23,6 +23,7 @@ interface Store {
   readonly providerConfig: WebLNProviderConfig | undefined;
   readonly connector: Connector | undefined;
   readonly config: ConnectorConfig | undefined;
+  readonly info: GetInfoResponse | undefined;
 
   connect(config: ConnectorConfig): void;
   disconnect(): void;
@@ -61,6 +62,7 @@ const store = createStore<Store>((set, get) => ({
   providerConfig: undefined,
   connector: undefined,
   config: undefined,
+  info: undefined,
   connect: async (config: ConnectorConfig) => {
     set({
       connecting: true,
@@ -70,11 +72,19 @@ const store = createStore<Store>((set, get) => ({
       const connector = new connectors[config.connectorType](config);
       const provider = await connector.init();
       await provider.enable();
+      let info: GetInfoResponse | undefined;
+      try {
+        info = await provider.getInfo();
+      } catch (error) {
+        console.error('Failed to request wallet info');
+      }
+
       set({
         config,
         connector,
         connected: true,
         connecting: false,
+        info,
         provider,
         connectorName: config.connectorName,
         route: '/start',

yarn.lock

@@ -1309,10 +1309,10 @@
   resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.3.tgz#4cc6ef1253a30fb4913af89b842645e0c04994bf"
   integrity sha512-QG3/SBI5n2py5IgsjP3K+c8eq55eiI3PQB12yo9Pot0b5hcN7TNNoTKn0fgLJjO1iEVCUkF513kDOpjjXwK0hQ==
 
-"@getalby/sdk@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.5.0.tgz#8ef53cda9f22cf31d3e99d3ff4d00366aee0567d"
-  integrity sha512-gnjILgoXOMjCVD1fHcoS3ghhO0UpvFHXuCBb0hz5iuzRYxbPWHXt0eVd60y+z5kR/+T+/S3S2fRMnbCYma+ppQ==
+"@getalby/sdk@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.5.1.tgz#2549f416e200d42bfa83e4d2f9999305eac5ba8c"
+  integrity sha512-Qz9GgXMoVpupDLqbzA2CHpru+9yqijQrxeRN7CDfV6l39js/BGwin93MFTh7eFj2TsMo+i8JeM3BVn+SJn/iRg==
   dependencies:
     eventemitter3 "^5.0.1"
     nostr-tools "^1.17.0"