getAlby · rolznz · Feb 21, 2025 · Jan 18, 2025 · Jan 21, 2025 · Feb 19, 2025
diff --git a/README.md b/README.md
@@ -241,7 +241,7 @@ init({
 });
 ```
 
-- `appName` - Name of the app requesting access to wallet. Currently used for NWC connections (Alby and Mutiny)
+- `appName` - Name of the app requesting access to wallet. Currently used for NWC connections (e.g. Alby Hub)
 - `filters` - Filter the type of connectors you want to show. Example: "nwc" (only show NWC connectors).
 - `showBalance` - If false, do not request the connected wallet's balance
 - `providerConfig` - **Experimental**: add provider-specific configuration (for NWC, LNC, LNbits etc). Currently only `nwc.authorizationUrlOptions` is supported. `NWCAuthorizationUrlOptions` can be found in the [Alby JS SDK](https://github.com/getAlby/js-sdk).
@@ -596,11 +596,10 @@ Connectors with budget controls or confirmation dialogs (Alby extension or NWC)
 
 ### What connectors are supported?
 
-- [Alby Browser extension](https://getalby.com)
-- [Alby NWC](https://nwc.getalby.com)
+- [Alby Browser Extension](https://getalby.com)
+- [Alby Hub](https://albyhub.com)
 - [LNC](https://github.com/lightninglabs/lightning-node-connect)
 - [LNbits](https://lnbits.com/)
-- [Mutiny NWC URL](https://www.mutinywallet.com/)
 - [Generic NWC URL](https://github.com/nostr-protocol/nips/blob/master/47.md)
 
 ### If a user pays with another wallet why does the modal stay open?

diff --git a/dev/vite/connector-list.html b/dev/vite/connector-list.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 0px;
+        @media (prefers-color-scheme: dark) {
+          background-color: black;
+          color: white;
+        }
+      }
+
+      .container {
+        padding: 20px;
+        max-width: 448px;
+      }
+    </style>
+    <script type="module">
+      import '../../src/index.ts';
+    </script>
+  </head>
+  <body>
+    <div class="container">
+      <bc-connector-list></bc-connector-list>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "prepack": "yarn run build",
     "build": "microbundle --no-sourcemap",
     "clean": "rm -rf dist",
-    "dev": "yarn --cwd dev/vite dev",
+    "dev": "yarn --cwd dev/vite dev --force",
     "dev:build": "microbundle watch",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint 'src/**/*.ts'",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@getalby/lightning-tools": "^5.1.0",
-    "@getalby/sdk": "^3.8.2",
+    "@getalby/sdk": "4.0.0",
     "@lightninglabs/lnc-web": "^0.3.2-alpha",
     "qrcode-generator": "^1.4.4",
     "zustand": "^4.5.5"

diff --git a/src/components/bc-connector-list.ts b/src/components/bc-connector-list.ts
@@ -1,7 +1,7 @@
-import { TemplateResult, html } from 'lit';
-import { withTwind } from './twind/withTwind.js';
-import { BitcoinConnectElement } from './BitcoinConnectElement.js';
-import { customElement } from 'lit/decorators.js';
+import {TemplateResult, html} from 'lit';
+import {withTwind} from './twind/withTwind.js';
+import {BitcoinConnectElement} from './BitcoinConnectElement.js';
+import {customElement} from 'lit/decorators.js';
 import './connectors/index.js';
 
 /**
@@ -12,27 +12,41 @@ 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>`);
+    const connectors: {order: number; result: TemplateResult<1>}[] = [];
+    connectors.push({
+      order: 0,
+      result: html`<bc-alby-hub-connector></bc-alby-hub-connector>`,
+    });
+    connectors.push({
+      order: 0,
+      result: html`<bc-nwc-connector></bc-nwc-connector>`,
+    });
+    connectors.push({
+      order: 10,
+      result: html`<bc-lnfi-nwc-connector></bc-lnfi-nwc-connector>`,
+    });
     if (!this._filters || this._filters.indexOf('nwc') === -1) {
       // 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({
+          order: 0,
+          result: 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>`);
-
+      connectors.push({
+        order: 7,
+        result: html`<bc-lnbits-connector></bc-lnbits-connector>`,
+      });
+      connectors.push({
+        order: 9,
+        result: html`<bc-lnc-connector></bc-lnc-connector>`,
+      });
     }
+    connectors.sort((a, b) => a.order - b.order);
 
     return html`
       <div class="flex justify-center items-start flex-wrap gap-5">
-        ${connectors}
+        ${connectors.map((c) => c.result)}
       </div>
     `;
   }

diff --git a/src/components/bc-navbar.ts b/src/components/bc-navbar.ts
@@ -23,7 +23,7 @@ export class Navbar extends withTwind()(BitcoinConnectElement) {
           ${backIcon}
         </div>
       </div>
-      <div class="font-sans font-medium ${classes['text-neutral-secondary']}">
+      <div class="font-sans font-medium ${classes['text-neutral-primary']}">
         ${this.heading}
       </div>
     </div>`;

diff --git a/src/components/bc-start.ts b/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 {DEFAULT_BITCOIN_CONNECT_CONFIG} from '../types/BitcoinConnectConfig';
 
 // TODO: split up this component into disconnected and connected
 @customElement('bc-start')
@@ -61,7 +62,10 @@ export class Start extends withTwind()(BitcoinConnectElement) {
               ]} w-64 max-w-full text-center"
             >
               How would you like to
-              connect${this._appName ? `\nto ${this._appName}` : ''}?
+              connect${this._appName &&
+              this._appName !== DEFAULT_BITCOIN_CONNECT_CONFIG.appName
+                ? `\nto ${this._appName}`
+                : ''}?
             </h1>
 
             <bc-connector-list></bc-connector-list>

diff --git a/src/components/connectors/bc-alby-hub-connector.ts b/src/components/connectors/bc-alby-hub-connector.ts
@@ -0,0 +1,23 @@
+import {customElement} from 'lit/decorators.js';
+import {ConnectorElement} from './ConnectorElement';
+import store from '../../state/store';
+import {albyhubIcon} from '../icons/connectors/albyHubIcon';
+
+export const albyHubConnectorTitle = 'Alby Hub';
+
+@customElement('bc-alby-hub-connector')
+export class AlbyHubConnector extends ConnectorElement {
+  constructor() {
+    super('nwc.albyhub', albyHubConnectorTitle, '#000000', albyhubIcon);
+  }
+
+  protected async _onClick() {
+    store.getState().pushRoute('/alby-hub');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-alby-hub-connector': AlbyHubConnector;
+  }
+}
diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts
diff --git a/src/components/connectors/bc-extension-connector.ts b/src/components/connectors/bc-extension-connector.ts
@@ -5,7 +5,7 @@ import {ConnectorElement} from './ConnectorElement';
 @customElement('bc-extension-connector')
 export class ExtensionConnector extends ConnectorElement {
   constructor() {
-    super('extension.generic', 'Extension Wallets', '#ffffff', extensionIcon);
+    super('extension.generic', 'Browser Extensions', '#ffffff', extensionIcon);
   }
 
   protected _onClick() {

diff --git a/src/components/connectors/bc-lnfi-nwc-connector.ts b/src/components/connectors/bc-lnfi-nwc-connector.ts
@@ -1,14 +1,14 @@
-import { customElement } from 'lit/decorators.js';
-import { nwcIcon } from '../icons/connectors/lnfiIcon';
-import { ConnectorElement } from './ConnectorElement';
+import {customElement} from 'lit/decorators.js';
+import {lnfiIcon} from '../icons/connectors/lnfiIcon';
+import {ConnectorElement} from './ConnectorElement';
 import store from '../../state/store';
 
 export const lnfiConnectorTitle = 'LN Link';
 
 @customElement('bc-lnfi-nwc-connector')
 export class LnfiNWCConnector extends ConnectorElement {
   constructor() {
-    super('nwc.generic', lnfiConnectorTitle, '#ffffff', nwcIcon);
+    super('nwc.generic', lnfiConnectorTitle, '#ffffff', lnfiIcon);
   }
 
   protected async _onClick() {

diff --git a/src/components/connectors/bc-mutiny-nwc-connector.ts b/src/components/connectors/bc-mutiny-nwc-connector.ts
diff --git a/src/components/connectors/bc-umbrel-nwc-connector.ts b/src/components/connectors/bc-umbrel-nwc-connector.ts
diff --git a/src/components/connectors/index.ts b/src/components/connectors/index.ts
@@ -1,7 +1,5 @@
 export * from './bc-extension-connector';
-export * from './bc-alby-nwc-connector';
-export * from './bc-umbrel-nwc-connector';
+export * from './bc-alby-hub-connector';
 export * from './bc-generic-nwc-connector';
-export * from './bc-mutiny-nwc-connector';
 export * from './bc-lnc-connector';
 export * from './bc-lnfi-nwc-connector';
diff --git a/src/components/icons/connectors/albyCloudIcon.ts b/src/components/icons/connectors/albyCloudIcon.ts
@@ -0,0 +1,5 @@
+import {svg} from 'lit';
+
+export const albyCloudIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 19C4.73858 19 2.5 16.7614 2.5 14C2.5 11.4673 4.38316 9.37436 6.82568 9.04508C7.63649 6.69118 9.87075 5 12.5 5C15.8137 5 18.5 7.68629 18.5 11C20.7091 11 22.5 12.7909 22.5 15C22.5 17.2091 20.7091 19 18.5 19H7.5Z" stroke="#196CE7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
diff --git a/src/components/icons/connectors/albyHubIcon.ts b/src/components/icons/connectors/albyHubIcon.ts
@@ -0,0 +1,3 @@
+import {svg} from 'lit';
+
+export const albyhubIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"><path fill="#fff" d="M29.313 17.863a9.57 9.57 0 0 0-11.455-7.193c-.1.492-.196 1.008-.28 1.548-.156.96-.284 1.996-.384 3.113a53.932 53.932 0 0 0-.196 4.668c0 1.024.028 1.993.076 2.92a56.187 56.187 0 0 0 7.583-.12c1.12-.1 2.156-.227 3.116-.383.54-.088 1.056-.18 1.548-.28a9.598 9.598 0 0 0 0-4.265l-.008-.008Zm-2.772-.724a4.047 4.047 0 0 0-1.86.8c-.868.66-1.492 1.652-1.672 2.72 0 .02-.02.029-.032.024-.012 0-.024-.011-.024-.023-.284-1.82-1.755-3.241-3.531-3.525-.032-.004-.032-.052 0-.056a4.3 4.3 0 0 0 2.812-1.772 4.195 4.195 0 0 0 .723-1.769c.005-.032.052-.032.056 0 .108.688.388 1.316.784 1.852.228.309.492.58.792.817.56.444 1.228.752 1.952.876.032.004.032.052 0 .056Z"/><path fill="#fff" d="M39.984 19.305v1.372c0 2.04-2.196 3.896-6.18 5.225-1.403.468-2.983.856-4.683 1.16-.124.024-.248.044-.372.068-.464.076-.932.148-1.416.212a52.252 52.252 0 0 1-3.16.328c-.583.04-1.171.076-1.771.1a60.038 60.038 0 0 1-6.596-.1 45.756 45.756 0 0 1-1.72-.156 50.451 50.451 0 0 1-2.847-.384c-.128-.02-.252-.044-.376-.068-1.7-.3-3.28-.688-4.684-1.16C2.196 24.573 0 22.717 0 20.677v-1.372c0-2.04 2.196-3.897 6.18-5.225 1.403-.469 2.983-.857 4.683-1.16l-.06.504a47.322 47.322 0 0 0-.24 2.68c-.44.088-.864.176-1.276.276-3.88.912-6.443 2.264-7.107 3.613.664 1.348 3.227 2.7 7.107 3.608a32.59 32.59 0 0 0 2.036.416 45.84 45.84 0 0 0 4.128.52c.571.048 1.155.088 1.751.116a57.648 57.648 0 0 0 5.6 0c.596-.028 1.18-.068 1.747-.116a48.514 48.514 0 0 0 4.128-.52c.256-.044.508-.092.76-.14.44-.084.864-.176 1.276-.272 3.88-.912 6.443-2.264 7.107-3.612-.664-1.349-3.227-2.7-7.107-3.609a11.17 11.17 0 0 0-1.952-3.525c.124.02.252.044.376.068 1.7.3 3.28.689 4.684 1.16C37.804 15.417 40 17.273 40 19.314l-.016-.008Z"/><path fill="#fff" d="M27.115 11.234a11.228 11.228 0 0 0-3.524-1.952c-.908-3.881-2.26-6.446-3.608-7.11-1.348.664-2.7 3.229-3.607 7.11a32.407 32.407 0 0 0-.416 2.036 45.933 45.933 0 0 0-.52 4.129 46.919 46.919 0 0 0-.116 1.748 57.68 57.68 0 0 0 0 5.601c-1.12-.1-2.156-.228-3.112-.384a60.068 60.068 0 0 1 0-4.825c.028-.6.06-1.188.104-1.772a50.812 50.812 0 0 1 .324-3.16c.064-.48.136-.953.212-1.413.02-.124.044-.252.068-.376.3-1.7.688-3.28 1.16-4.685C15.408 2.196 17.264 0 19.303 0h1.372c2.04 0 3.896 2.196 5.224 6.181.468 1.404.856 2.985 1.16 4.685.024.124.044.252.068.376l-.012-.008ZM27.056 29.133c-.3 1.7-.688 3.28-1.16 4.685-1.328 3.984-3.184 6.18-5.224 6.18H19.3c-2.04 0-3.895-2.196-5.223-6.18-.468-1.405-.856-2.985-1.16-4.685l.504.06c.876.104 1.768.184 2.68.24.088.44.176.864.276 1.276.908 3.88 2.26 6.445 3.607 7.11 1.348-.665 2.7-3.23 3.612-7.11.096-.412.188-.836.272-1.276.912-.06 1.808-.14 2.68-.24.168-.016.336-.04.504-.06h.004Z"/></svg>`;
diff --git a/src/components/icons/connectors/albyIcon.ts b/src/components/icons/connectors/albyIcon.ts
diff --git a/src/components/icons/connectors/lnfiIcon.ts b/src/components/icons/connectors/lnfiIcon.ts
@@ -1,9 +1,9 @@
-import { svg } from 'lit';
+import {svg} from 'lit';
 
 // WARNING: if replacing this icon make sure to:
 // - set class="w-10 h-10"
 
-export const nwcIcon = svg`<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const lnfiIcon = svg`<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M40 17.5H34.4V23.1H40V17.5Z" fill="#041011"/>
 <path d="M16.7 0V5.6L27.8 8.9L22.2 0H16.7Z" fill="#041011"/>
 <path d="M29.4 35H35L36.7 25L29.4 29.4V35Z" fill="#041011"/>

diff --git a/src/components/icons/connectors/mutinyIcon.ts b/src/components/icons/connectors/mutinyIcon.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {svg} from 'lit';

		export const albyhubIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"><path fill="#fff" d="M29.313 17.863a9.57 9.57 0 0 0-11.455-7.193c-.1.492-.196 1.008-.28 1.548-.156.96-.284 1.996-.384 3.113a53.932 53.932 0 0 0-.196 4.668c0 1.024.028 1.993.076 2.92a56.187 56.187 0 0 0 7.583-.12c1.12-.1 2.156-.227 3.116-.383.54-.088 1.056-.18 1.548-.28a9.598 9.598 0 0 0 0-4.265l-.008-.008Zm-2.772-.724a4.047 4.047 0 0 0-1.86.8c-.868.66-1.492 1.652-1.672 2.72 0 .02-.02.029-.032.024-.012 0-.024-.011-.024-.023-.284-1.82-1.755-3.241-3.531-3.525-.032-.004-.032-.052 0-.056a4.3 4.3 0 0 0 2.812-1.772 4.195 4.195 0 0 0 .723-1.769c.005-.032.052-.032.056 0 .108.688.388 1.316.784 1.852.228.309.492.58.792.817.56.444 1.228.752 1.952.876.032.004.032.052 0 .056Z"/><path fill="#fff" d="M39.984 19.305v1.372c0 2.04-2.196 3.896-6.18 5.225-1.403.468-2.983.856-4.683 1.16-.124.024-.248.044-.372.068-.464.076-.932.148-1.416.212a52.252 52.252 0 0 1-3.16.328c-.583.04-1.171.076-1.771.1a60.038 60.038 0 0 1-6.596-.1 45.756 45.756 0 0 1-1.72-.156 50.451 50.451 0 0 1-2.847-.384c-.128-.02-.252-.044-.376-.068-1.7-.3-3.28-.688-4.684-1.16C2.196 24.573 0 22.717 0 20.677v-1.372c0-2.04 2.196-3.897 6.18-5.225 1.403-.469 2.983-.857 4.683-1.16l-.06.504a47.322 47.322 0 0 0-.24 2.68c-.44.088-.864.176-1.276.276-3.88.912-6.443 2.264-7.107 3.613.664 1.348 3.227 2.7 7.107 3.608a32.59 32.59 0 0 0 2.036.416 45.84 45.84 0 0 0 4.128.52c.571.048 1.155.088 1.751.116a57.648 57.648 0 0 0 5.6 0c.596-.028 1.18-.068 1.747-.116a48.514 48.514 0 0 0 4.128-.52c.256-.044.508-.092.76-.14.44-.084.864-.176 1.276-.272 3.88-.912 6.443-2.264 7.107-3.612-.664-1.349-3.227-2.7-7.107-3.609a11.17 11.17 0 0 0-1.952-3.525c.124.02.252.044.376.068 1.7.3 3.28.689 4.684 1.16C37.804 15.417 40 17.273 40 19.314l-.016-.008Z"/><path fill="#fff" d="M27.115 11.234a11.228 11.228 0 0 0-3.524-1.952c-.908-3.881-2.26-6.446-3.608-7.11-1.348.664-2.7 3.229-3.607 7.11a32.407 32.407 0 0 0-.416 2.036 45.933 45.933 0 0 0-.52 4.129 46.919 46.919 0 0 0-.116 1.748 57.68 57.68 0 0 0 0 5.601c-1.12-.1-2.156-.228-3.112-.384a60.068 60.068 0 0 1 0-4.825c.028-.6.06-1.188.104-1.772a50.812 50.812 0 0 1 .324-3.16c.064-.48.136-.953.212-1.413.02-.124.044-.252.068-.376.3-1.7.688-3.28 1.16-4.685C15.408 2.196 17.264 0 19.303 0h1.372c2.04 0 3.896 2.196 5.224 6.181.468 1.404.856 2.985 1.16 4.685.024.124.044.252.068.376l-.012-.008ZM27.056 29.133c-.3 1.7-.688 3.28-1.16 4.685-1.328 3.984-3.184 6.18-5.224 6.18H19.3c-2.04 0-3.895-2.196-5.223-6.18-.468-1.405-.856-2.985-1.16-4.685l.504.06c.876.104 1.768.184 2.68.24.088.44.176.864.276 1.276.908 3.88 2.26 6.445 3.607 7.11 1.348-.665 2.7-3.23 3.612-7.11.096-.412.188-.836.272-1.276.912-.06 1.808-.14 2.68-.24.168-.016.336-.04.504-.06h.004Z"/></svg>`;