Merge pull request #228 from jimwjl666/feature/micro-node

feat:add micro-node

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';
 
 /**
@@ -17,6 +17,7 @@ export class ConnectorList extends withTwind()(BitcoinConnectElement) {
     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) {
       // TODO: is there a better way to check if a desktop extension exists?
       if (window.webln) {
@@ -26,6 +27,7 @@ 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-lnfi-nwc-connector.ts

@@ -0,0 +1,23 @@
+import { customElement } from 'lit/decorators.js';
+import { nwcIcon } from '../icons/connectors/lnfiIcon';
+import { ConnectorElement } from './ConnectorElement';
+import store from '../../state/store';
+
+export const lnfiConnectorTitle = 'Micro node connect';
+
+@customElement('bc-lnfi-nwc-connector')
+export class LnfiNWCConnector extends ConnectorElement {
+  constructor() {
+    super('nwc.generic', lnfiConnectorTitle, '#ffffff', nwcIcon);
+  }
+
+  protected async _onClick() {
+    store.getState().pushRoute('/lnfi');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-lnfi-nwc-connector': LnfiNWCConnector;
+  }
+}

src/components/connectors/index.ts

@@ -4,3 +4,4 @@ export * from './bc-umbrel-nwc-connector';
 export * from './bc-generic-nwc-connector';
 export * from './bc-mutiny-nwc-connector';
 export * from './bc-lnc-connector';
+export * from './bc-lnfi-nwc-connector';

src/components/icons/connectors/lnfiIcon.ts

@@ -0,0 +1,16 @@
+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">
+<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"/>
+<path d="M35 5H29.4V10.6L36.1 16.1L35 5Z" fill="#041011"/>
+<path d="M16.7 40H22.2L27.8 29.4L16.7 34.4V40Z" fill="#041011"/>
+<path d="M5 29.4V35H10.6L22.2 26.7L5 29.4Z" fill="#041011"/>
+<path d="M18.9 18.6L5.6 17.5H0V23.1H5.6L18.9 18.6Z" fill="#041011"/>
+<path d="M10.6 5H5V10.6L21.1 12.8L10.6 5Z" fill="#041011"/>
+</svg>
+`;

src/components/pages/bc-lnfi.ts

@@ -0,0 +1,77 @@
+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 { genericConnectorTitle } from '../connectors/bc-generic-nwc-connector';
+
+@customElement('bc-lnfi')
+export class LnfiNWCPage extends withTwind()(BitcoinConnectElement) {
+  @state()
+  private _nwcUrl = '';
+
+  override render() {
+    return html`<div class="w-full">
+      <bc-navbar class="flex w-full" heading="Micro node Wallet Connect">
+      </bc-navbar>
+      <div class="font-sans text-sm w-full">
+        <div class="px-8 pt-4 w-full">
+        <div class="mb-2 ${classes['text-neutral-secondary']}">
+            1. Add a new
+            <a
+              href="https://doc.nostrassets.com/micronode-early-access/micronode-connect-mnc"
+              target="_blank"
+              class="font-bold"
+              >Wallet Connection
+            </a>
+            from
+            <span class="${classes['text-neutral-tertiary']}"
+              >MicroNode => Generate NWC</span
+            >
+            and copy the connection string.
+          </div>
+          <div class="mb-1 ${classes['text-neutral-secondary']}">
+            2. Paste the connection string below:
+          </div>
+
+          <input
+            value=${this._nwcUrl}
+            @change=${this.nwcUrlChanged}
+            placeholder="nostr+walletconnect://..."
+            type="password"
+            class="w-full mb-8 rounded-lg p-2 border-1 ${classes[
+      'border-neutral-secondary'
+      ]}"
+          />
+          <bci-button @click=${this.onConnect}>
+            <span class="${classes['text-brand-mixed']}">Connect</span>
+          </bci-button>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  private nwcUrlChanged(event: { target: HTMLInputElement }) {
+    this._nwcUrl = event.target.value;
+  }
+  private async onConnect() {
+    if (!this._nwcUrl) {
+      store.getState().setError('Please enter a URL');
+      return;
+    }
+
+    await store.getState().connect({
+      nwcUrl: this._nwcUrl,
+      connectorName: genericConnectorTitle,
+      connectorType: 'nwc.generic',
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-lnfi': LnfiNWCPage;
+  }
+}

src/components/routes.ts

@@ -1,4 +1,4 @@
-import {html} from 'lit';
+import { html } from 'lit';
 import './bc-start.js';
 import './bc-navbar.js';
 import './pages/bc-help.js';
@@ -8,11 +8,13 @@ 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'
 
 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>`,
   '/lnbits': html`<bc-lnbits class="flex w-full"></bc-lnbits>`,
   '/umbrel': html`<bc-umbrel class="flex w-full"></bc-umbrel>`,

src/connectors/index.ts

@@ -1,14 +1,15 @@
-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.generic': NWCConnector,
   'nwc.mutiny': NWCConnector,
   'nwc.umbrel': NWCConnector,
+  'nwc.lnfi': NWCConnector,
   lnbits: LnbitsConnector,
   lnc: LNCConnector,
 };