feat: add alby hub (WIP)

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'",

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';
 
 /**
@@ -13,9 +13,11 @@ export class ConnectorList extends withTwind()(BitcoinConnectElement) {
     // 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>`);
+    // TODO: consider replacing alby connector with Alby OAuth API
+    // 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-alby-hub-connector></bc-alby-hub-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) {
@@ -27,7 +29,6 @@ export class ConnectorList extends withTwind()(BitcoinConnectElement) {
       }
       connectors.push(html`<bc-lnbits-connector></bc-lnbits-connector>`);
       connectors.push(html`<bc-lnc-connector></bc-lnc-connector>`);
-
     }
 
     return html`

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;
+  }
+}

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

@@ -3,12 +3,12 @@ import {nwcIcon} from '../icons/connectors/nwcIcon';
 import {ConnectorElement} from './ConnectorElement';
 import store from '../../state/store';
 
-export const genericConnectorTitle = 'Nostr Wallet Connect';
+export const genericConnectorTitle = 'NWC';
 
 @customElement('bc-nwc-connector')
 export class GenericNWCConnector extends ConnectorElement {
   constructor() {
-    super('nwc.generic', genericConnectorTitle, '#ffffff', nwcIcon);
+    super('nwc.generic', genericConnectorTitle, '#000000', nwcIcon);
   }
 
   protected async _onClick() {

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() {

src/components/connectors/index.ts

@@ -1,5 +1,6 @@
 export * from './bc-extension-connector';
 export * from './bc-alby-nwc-connector';
+export * from './bc-alby-hub-connector';
 export * from './bc-umbrel-nwc-connector';
 export * from './bc-generic-nwc-connector';
 export * from './bc-mutiny-nwc-connector';

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>`;

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"/>

src/components/icons/connectors/nwcIcon.ts

@@ -1,15 +1,17 @@
 import {svg} from 'lit';
 
-// WARNING: if replacing this icon make sure to:
-// - set class="w-10 h-10"
-
-export const nwcIcon = svg`<svg class="w-10 h-10" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M43.7274 23.9471C41.9608 25.7054 39.52 25.284 37.7615 23.5178C37.7615 23.5178 37.7615 23.5178 37.7613 23.5175L23.53 9.22225L30.1989 2.52452C32.1302 0.584715 35.4069 1.18529 36.5245 3.68405L43.9437 23.0097C44.0657 23.3272 43.9888 23.6869 43.7476 23.927L39.0614 28.5911L43.7272 23.9471H43.7274Z" fill="#472459"/>
-<path d="M37.7607 24.8117C37.7607 24.8117 37.7607 24.8117 37.7604 24.8114L19.145 6.11204C17.3862 4.34557 14.5285 4.33895 12.7616 6.0972L1.32946 17.4755C-0.437483 19.234 -0.443845 22.0913 1.31462 23.8581L19.9298 42.5572C21.6886 44.3237 24.5463 44.3303 26.3132 42.572L29.9892 38.9135L31.0661 37.8417L27.6301 34.393C25.0886 36.0405 21.656 35.7473 19.4344 33.512L17.0962 31.1593C16.7639 30.8248 16.7654 30.2897 17.1 29.9574L18.2506 28.814L15.3608 25.9063C14.9078 25.4504 14.8368 24.7173 15.2453 24.2238C15.7126 23.6572 16.5555 23.6307 17.0634 24.1417L19.9897 27.0862L22.2839 24.8069L19.3941 21.8992C18.9411 21.4433 18.8701 20.7102 19.2823 20.2133C19.753 19.6504 20.5925 19.6201 21.1004 20.1311L24.0267 23.0757L25.1811 21.9286C25.5156 21.5963 26.0508 21.5978 26.3832 21.9323L28.7213 24.2851C30.9432 26.5206 31.2143 29.955 29.55 32.4858L32.9844 35.9326L34.9417 33.9846L37.7453 31.194L43.7263 25.2413C41.9597 26.9996 39.5189 26.5781 37.7602 24.8119L37.7607 24.8117Z" fill="url(#paint0_linear_856_1234)"/>
+export const nwcIcon = svg`<svg width="393" height="392" viewBox="0 0 393 392" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M179.272 99.0639C169.038 88.8691 152.419 88.9782 142.221 99.2091L76.2474 165.414C66.0488 175.646 66.1786 191.974 76.4095 202.17L184.58 310.34C194.813 320.534 211.4 320.449 221.597 310.218L253.749 278.066C244.372 287.443 236.656 280.701 227.512 271.595L209.578 253.662C195.964 259.051 180.052 256.374 169.022 245.365L155.356 231.699C154.896 231.243 154.542 230.767 154.292 230.17C154.043 229.572 153.914 228.931 153.914 228.284C153.913 227.637 154.041 226.995 154.289 226.398C154.537 225.8 154.926 225.293 155.385 224.837L163.119 217.103L146.284 200.268C143.648 197.638 143.218 193.391 145.575 190.522C148.269 187.228 153.153 187.053 156.108 190.002L173.171 207.051L184.728 195.494L167.853 178.661C165.216 176.03 164.787 171.784 167.164 168.895C167.794 168.128 168.578 167.501 169.465 167.054C170.353 166.608 171.323 166.352 172.315 166.303C173.307 166.254 174.298 166.413 175.225 166.77C176.152 167.127 176.994 167.673 177.697 168.375L194.829 185.393L202.089 178.132C202.545 177.673 202.994 177.259 203.592 177.01C204.189 176.761 204.83 176.632 205.478 176.632C206.125 176.631 206.766 176.758 207.364 177.006C207.962 177.254 208.505 177.618 208.962 178.077L222.65 191.738C233.542 202.609 236.39 218.431 231.298 231.943L249.235 249.88C258.379 258.985 266.03 265.785 275.408 256.408L315.979 215.836C306.227 225.588 298.215 218.075 288.578 208.446L179.272 99.0639Z" fill="url(#paint0_linear_1_280)"/>
+<path d="M255.975 81.0273L221.487 115.487L298.115 192.116C305.45 199.419 311.825 205.239 318.899 202.417C322.988 200.787 325.795 196.351 324.228 192.238C287.561 96.0253 287.546 96.0238 282.682 85.507C277.818 74.9901 264.138 72.7602 255.975 81.0273Z" fill="#897FFF"/>
+<path d="M255.975 81.0273L221.487 115.487L298.115 192.116C305.45 199.419 311.825 205.239 318.899 202.417C322.988 200.787 325.795 196.351 324.228 192.238C287.561 96.0253 287.546 96.0238 282.682 85.507C277.818 74.9901 264.138 72.7602 255.975 81.0273Z" fill="#897FFF"/>
+<path d="M255.975 81.0273L221.487 115.487L298.115 192.116C305.45 199.419 311.825 205.239 318.899 202.417C322.988 200.787 325.795 196.351 324.228 192.238C287.561 96.0253 287.546 96.0238 282.682 85.507C277.818 74.9901 264.138 72.7602 255.975 81.0273Z" fill="#897FFF"/>
+<path d="M255.975 81.0273L221.487 115.487L298.115 192.116C305.45 199.419 311.825 205.239 318.899 202.417C322.988 200.787 325.795 196.351 324.228 192.238C287.561 96.0253 287.546 96.0238 282.682 85.507C277.818 74.9901 264.138 72.7602 255.975 81.0273Z" fill="#897FFF"/>
+<path d="M255.975 81.0273L221.487 115.487L298.115 192.116C305.45 199.419 311.825 205.239 318.899 202.417C322.988 200.787 325.795 196.351 324.228 192.238C287.561 96.0253 287.546 96.0238 282.682 85.507C277.818 74.9901 264.138 72.7602 255.975 81.0273Z" fill="#897FFF"/>
 <defs>
-<linearGradient id="paint0_linear_856_1234" x1="21.8632" y1="4.78284" x2="21.8632" y2="43.8864" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_1_280" x1="192.323" y1="78.4384" x2="192.323" y2="317.939" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FFCA4A"/>
 <stop offset="1" stop-color="#F7931A"/>
 </linearGradient>
 </defs>
-</svg>`;
+</svg>
+`;

src/components/pages/bc-alby-hub.ts

@@ -0,0 +1,75 @@
+import {customElement, state} from 'lit/decorators.js';
+import {BitcoinConnectElement} from '../BitcoinConnectElement';
+import {withTwind} from '../twind/withTwind';
+import {html} from 'lit';
+import '../internal/bci-button';
+import {classes} from '../css/classes';
+import store from '../../state/store';
+import {albyHubConnectorTitle} from '../connectors';
+import {nwc} from '@getalby/sdk';
+
+@customElement('bc-alby-hub')
+export class AlbyHubPage extends withTwind()(BitcoinConnectElement) {
+  override render() {
+    return html`<div class="w-full">
+      <bc-navbar
+        class="flex w-full"
+        heading=${albyHubConnectorTitle}
+      ></bc-navbar>
+      <div class="font-sans text-sm w-full">
+        <div
+          class="px-8 pt-4 w-full flex flex-col items-center justify-center gap-2"
+        >
+          <div class="mb-2 ${classes['text-neutral-secondary']}">
+            Choose how to connect
+          </div>
+
+          <bci-button @click=${this.onClickAlbyCloud} class="w-full">
+            <span class="${classes['text-brand-mixed']}">Alby Cloud</span>
+          </bci-button>
+
+          <bci-button @click=${this.onClickAlbyGo} class="w-full">
+            <span class="${classes['text-brand-mixed']}">Alby Go</span>
+          </bci-button>
+
+          <bci-button @click=${this.onClickConnectionSecret} class="w-full">
+            <span class="${classes['text-brand-mixed']}"
+              >Connection Secret</span
+            >
+          </bci-button>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  private async onClickAlbyCloud() {
+    const providerConfig = store.getState().bitcoinConnectConfig.providerConfig;
+    const nwcClient = await nwc.NWCClient.fromAuthorizationUrl(
+      'http://localhost:5173/apps/new', // TODO: 'https://my.albyhub.com/apps/new'
+      {
+        ...(providerConfig?.nwc?.authorizationUrlOptions || {}),
+        name: this._appName,
+      }
+    );
+
+    nwcClient.close();
+    // TODO: it makes no sense to connect again
+    await store.getState().connect({
+      nwcUrl: nwcClient.nostrWalletConnectUrl,
+      connectorName: 'Alby Hub',
+      connectorType: 'nwc.albyhub',
+    });
+  }
+  private async onClickAlbyGo() {
+    alert('Coming soon');
+  }
+  private async onClickConnectionSecret() {
+    store.getState().pushRoute('/nwc');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-alby-hub': AlbyHubPage;
+  }
+}

src/components/pages/bc-mutiny.ts

@@ -12,9 +12,6 @@ export class MutinyPage extends withTwind()(BitcoinConnectElement) {
   @state()
   private _nwcUrl = '';
 
-  // TODO: subscribe to store.providerConfig and pass extra options to mutiny URL below
-  // (also consider whether this should be replaced with NWC Wallet Auth - https://github.com/nostr-protocol/nips/pull/851)
-
   override render() {
     return html`<div class="w-full">
       <bc-navbar
@@ -68,7 +65,6 @@ export class MutinyPage extends withTwind()(BitcoinConnectElement) {
       return;
     }
 
-    // TODO: dispatch an event and listen in the Start component
     await store.getState().connect({
       nwcUrl: this._nwcUrl,
       connectorName: mutinyNWCConnectorTitle,

src/components/pages/bc-umbrel.ts

@@ -5,7 +5,6 @@ import {html} from 'lit';
 import '../internal/bci-button';
 import {classes} from '../css/classes';
 import store from '../../state/store';
-import {webln} from '@getalby/sdk';
 
 @customElement('bc-umbrel')
 export class UmbrelPage extends withTwind()(BitcoinConnectElement) {
@@ -15,7 +14,7 @@ export class UmbrelPage extends withTwind()(BitcoinConnectElement) {
       <div class="font-sans text-sm w-full">
         <div class="px-8 pt-4 w-full">
           <div class="mb-4 ${classes['text-neutral-secondary']}">
-            Install the App "NWC" from the Umbrel app store and click the
+            Install the App "Alby Hub" from the Umbrel app store and click the
             connect button below. If you don't use
             <span class="italic">umbrel.local</span>
             as your umbrel domain use the Generic NWC connector instead.
@@ -29,18 +28,7 @@ export class UmbrelPage extends withTwind()(BitcoinConnectElement) {
   }
 
   private async onConnect() {
-    const nwc = webln.NostrWebLNProvider.withNewSecret({
-      authorizationUrl: 'http://umbrel.local:58000/apps/new',
-    });
-    await nwc.initNWC({
-      name: this._appName,
-    });
-
-    await store.getState().connect({
-      nwcUrl: nwc.getNostrWalletConnectUrl(),
-      connectorName: 'Umbrel',
-      connectorType: 'nwc.umbrel',
-    });
+    store.getState().pushRoute('/alby-hub');
   }
 }
 

src/components/routes.ts

@@ -1,21 +1,23 @@
-import { html } from 'lit';
+import {html} from 'lit';
 import './bc-start.js';
 import './bc-navbar.js';
 import './pages/bc-help.js';
 import './pages/bc-nwc.js';
+import './pages/bc-alby-hub.js';
 import './pages/bc-mutiny.js';
 import './pages/bc-lnbits.js';
 import './pages/bc-umbrel.js';
 import './pages/bc-send-payment.js';
 import './pages/bc-new-wallet.js';
-import './pages/bc-lnfi.js'
+import './pages/bc-lnfi.js';
 
 export const routes = {
   '/start': html`<bc-start class="flex w-full"></bc-start>`,
   '/help': html`<bc-help class="flex w-full"></bc-help>`,
   '/nwc': html`<bc-nwc class="flex w-full"></bc-nwc>`,
   '/lnfi': html`<bc-lnfi class="flex w-full"></bc-lnfi>`,
   '/mutiny': html`<bc-mutiny class="flex w-full"></bc-mutiny>`,
+  '/alby-hub': html`<bc-alby-hub class="flex w-full"></bc-alby-hub>`,
   '/lnbits': html`<bc-lnbits class="flex w-full"></bc-lnbits>`,
   '/umbrel': html`<bc-umbrel class="flex w-full"></bc-umbrel>`,
   /*(params) => {

src/connectors/index.ts

@@ -1,11 +1,12 @@
-import { ExtensionConnector } from './ExtensionConnector';
-import { LnbitsConnector } from './LnbitsConnector';
-import { LNCConnector } from './LNCConnector';
-import { NWCConnector } from './NWCConnector';
+import {ExtensionConnector} from './ExtensionConnector';
+import {LnbitsConnector} from './LnbitsConnector';
+import {LNCConnector} from './LNCConnector';
+import {NWCConnector} from './NWCConnector';
 
 export const connectors = {
   'extension.generic': ExtensionConnector,
   'nwc.alby': NWCConnector,
+  'nwc.albyhub': NWCConnector,
   'nwc.generic': NWCConnector,
   'nwc.mutiny': NWCConnector,
   'nwc.umbrel': NWCConnector,