Improved providers filter (change for the issue https://github.com/getAlby/bitcoin-connect/issues/92)

src/components/bc-connector-list.ts

@@ -10,24 +10,61 @@ import './connectors/index.js';
 @customElement('bc-connector-list')
 export class ConnectorList extends withTwind()(BitcoinConnectElement) {
   override render() {
-    // TODO: find a better way to filter these when multiple filters exist
-    // TODO: allow re-ordering connectors
     const connectors: TemplateResult<1>[] = [];
-    connectors.push(html`<bc-alby-nwc-connector></bc-alby-nwc-connector>`);
-    connectors.push(html`<bc-mutiny-nwc-connector></bc-mutiny-nwc-connector>`);
-    connectors.push(html`<bc-umbrel-nwc-connector></bc-umbrel-nwc-connector>`);
-    connectors.push(html`<bc-nwc-connector></bc-nwc-connector>`);
-    connectors.push(html`<bc-lnfi-nwc-connector></bc-lnfi-nwc-connector>`);
-    if (!this._filters || this._filters.indexOf('nwc') === -1) {
+
+    if (this._filters?.length && this._filters?.indexOf('nwc') === -1) {
+      // Only certain providers listed in order they are mentioned in the filters list
+      this._filters.forEach((name) => {
+        switch (name) {
+          case 'alby':
+            connectors.push(html`<bc-alby-nwc-connector></bc-alby-nwc-connector>`);
+            break;
+          case 'mutiny':
+            connectors.push(html`<bc-mutiny-nwc-connector></bc-mutiny-nwc-connector>`);
+            break;
+          case 'umbrel':
+            connectors.push(html`<bc-umbrel-nwc-connector></bc-umbrel-nwc-connector>`);
+            break;
+          case 'nostr':
+            connectors.push(html`<bc-nwc-connector></bc-nwc-connector>`);
+            break;
+          case 'lnfi':
+            connectors.push(html`<bc-lnfi-nwc-connector></bc-lnfi-nwc-connector>`);
+            break;
+          case 'extension':
+            // TODO: is there a better way to check if a desktop extension exists?
+            if (window.webln) {
+              connectors.push(html`<bc-extension-connector></bc-extension-connector>`);
+            }
+            break;
+          case 'lnbits':
+            connectors.push(html`<bc-lnbits-connector></bc-lnbits-connector>`);
+            break;
+          case 'lnc':
+            connectors.push(html`<bc-lnc-connector></bc-lnc-connector>`);
+            break;
+        }
+      })
+    } else if (this._filters?.length && this._filters?.indexOf('nwc') !== -1) {
+      // Only nwc providers listed
+      connectors.push(html`<bc-alby-nwc-connector></bc-alby-nwc-connector>`);
+      connectors.push(html`<bc-mutiny-nwc-connector></bc-mutiny-nwc-connector>`);
+      connectors.push(html`<bc-umbrel-nwc-connector></bc-umbrel-nwc-connector>`);
+      connectors.push(html`<bc-nwc-connector></bc-nwc-connector>`);
+      connectors.push(html`<bc-lnfi-nwc-connector></bc-lnfi-nwc-connector>`);
+    } else {
+      // All providers listed
+      connectors.push(html`<bc-alby-nwc-connector></bc-alby-nwc-connector>`);
+      connectors.push(html`<bc-mutiny-nwc-connector></bc-mutiny-nwc-connector>`);
+      connectors.push(html`<bc-umbrel-nwc-connector></bc-umbrel-nwc-connector>`);
+      connectors.push(html`<bc-nwc-connector></bc-nwc-connector>`);
+      connectors.push(html`<bc-lnfi-nwc-connector></bc-lnfi-nwc-connector>`);
       // TODO: is there a better way to check if a desktop extension exists?
       if (window.webln) {
-        connectors.push(
-          html`<bc-extension-connector></bc-extension-connector>`
-        );
+        connectors.push(html`<bc-extension-connector></bc-extension-connector>`);
       }
       connectors.push(html`<bc-lnbits-connector></bc-lnbits-connector>`);
       connectors.push(html`<bc-lnc-connector></bc-lnc-connector>`);
-
     }
 
     return html`

src/components/bc-start.ts

@@ -9,6 +9,7 @@ import {disconnectSection} from './templates/disconnectSection';
 import './bc-balance';
 import store from '../state/store';
 import './bc-currency-switcher';
+import {ConnectorFilterOptions} from "../types/ConnectorFilter";
 
 // TODO: split up this component into disconnected and connected
 @customElement('bc-start')
@@ -23,14 +24,17 @@ export class Start extends withTwind()(BitcoinConnectElement) {
       store.getState().bitcoinConnectConfig.showBalance &&
       store.getState().supports('getBalance');
 
-    // TODO: handle unsubscribe
+      // TODO: handle unsubscribe
     store.subscribe((store) => {
       this._showBalance =
         store.bitcoinConnectConfig.showBalance && store.supports('getBalance');
+      this._filters = store.bitcoinConnectConfig.filters;
     });
   }
 
   override render() {
+    const isOneProviderOption = this._filters?.length === 1 && this._filters[0] !== 'nwc' && ConnectorFilterOptions.includes(this._filters[0]);
+
     return html`<div
       class="flex flex-col justify-center items-center w-full font-sans"
     >
@@ -60,8 +64,9 @@ export class Start extends withTwind()(BitcoinConnectElement) {
                 'text-neutral-primary'
               ]} w-64 max-w-full text-center"
             >
-              How would you like to
-              connect${this._appName ? `\nto ${this._appName}` : ''}?
+              ${isOneProviderOption 
+                  ? 'Please connect your wallet' 
+                  : 'How would you like to connect'}${this._appName ? `\nto ${this._appName}` : ''}${isOneProviderOption ? '' : '?'}
             </h1>
 
             <bc-connector-list></bc-connector-list>

src/types/ConnectorFilter.ts

@@ -1 +1,2 @@
-export type ConnectorFilter = 'nwc';
+export type ConnectorFilter = 'nwc' | 'alby' | 'mutiny' | 'umbrel' | 'nostr' | 'lnfi' | 'extension' | 'lnbits' | 'lnc';
+export const ConnectorFilterOptions = ['nwc', 'alby', 'mutiny', 'umbrel', 'nostr', 'lnfi', 'extension', 'lnbits', 'lnc'];