From 5b16a7fe04830ea8021905f7e7bddccdc2de0ef8 Mon Sep 17 00:00:00 2001 From: Jim <149987098+jimtracy007@users.noreply.github.com> Date: Tue, 21 May 2024 11:28:46 +0800 Subject: [PATCH 1/2] feat:add micro-node --- src/components/bc-connector-list.ts | 10 +-- .../connectors/bc-lnfi-nwc-connector.ts | 23 +++++++ src/components/connectors/index.ts | 1 + src/components/icons/connectors/lnfiIcon.ts | 16 +++++ src/components/pages/bc-lnfi.ts | 69 +++++++++++++++++++ src/components/routes.ts | 4 +- src/connectors/index.ts | 9 +-- 7 files changed, 123 insertions(+), 9 deletions(-) create mode 100644 src/components/connectors/bc-lnfi-nwc-connector.ts create mode 100644 src/components/icons/connectors/lnfiIcon.ts create mode 100644 src/components/pages/bc-lnfi.ts diff --git a/src/components/bc-connector-list.ts b/src/components/bc-connector-list.ts index 8234a88..b4275e1 100644 --- 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'; /** @@ -17,6 +17,7 @@ export class ConnectorList extends withTwind()(BitcoinConnectElement) { connectors.push(html``); connectors.push(html``); connectors.push(html``); + connectors.push(html``); 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``); connectors.push(html``); + } return html` diff --git a/src/components/connectors/bc-lnfi-nwc-connector.ts b/src/components/connectors/bc-lnfi-nwc-connector.ts new file mode 100644 index 0000000..6401786 --- /dev/null +++ b/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; + } +} diff --git a/src/components/connectors/index.ts b/src/components/connectors/index.ts index 9cbcc4e..018c8af 100644 --- a/src/components/connectors/index.ts +++ b/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'; diff --git a/src/components/icons/connectors/lnfiIcon.ts b/src/components/icons/connectors/lnfiIcon.ts new file mode 100644 index 0000000..0389b71 --- /dev/null +++ b/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` + + + + + + + + + +`; diff --git a/src/components/pages/bc-lnfi.ts b/src/components/pages/bc-lnfi.ts new file mode 100644 index 0000000..f2c1887 --- /dev/null +++ b/src/components/pages/bc-lnfi.ts @@ -0,0 +1,69 @@ +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`
+ +
+
+
+ Enter your + Micro node connection string + + below +
+ + + + Connect + +
+
+
`; + } + + 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; + } +} diff --git a/src/components/routes.ts b/src/components/routes.ts index b5ff9da..e8e63ca 100644 --- a/src/components/routes.ts +++ b/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``, '/help': html``, '/nwc': html``, + '/lnfi': html``, '/mutiny': html``, '/lnbits': html``, '/umbrel': html``, diff --git a/src/connectors/index.ts b/src/connectors/index.ts index 7c42ef2..fac0122 100644 --- a/src/connectors/index.ts +++ b/src/connectors/index.ts @@ -1,7 +1,7 @@ -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, @@ -9,6 +9,7 @@ export const connectors = { 'nwc.generic': NWCConnector, 'nwc.mutiny': NWCConnector, 'nwc.umbrel': NWCConnector, + 'nwc.lnfi': NWCConnector, lnbits: LnbitsConnector, lnc: LNCConnector, }; From c17ad813e69552066a829acaf968d918a41aec25 Mon Sep 17 00:00:00 2001 From: Jim <149987098+jimtracy007@users.noreply.github.com> Date: Tue, 21 May 2024 19:06:03 +0800 Subject: [PATCH 2/2] feat:add mirco node connection help link --- src/components/pages/bc-lnfi.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/pages/bc-lnfi.ts b/src/components/pages/bc-lnfi.ts index f2c1887..76ff87f 100644 --- a/src/components/pages/bc-lnfi.ts +++ b/src/components/pages/bc-lnfi.ts @@ -14,18 +14,26 @@ export class LnfiNWCPage extends withTwind()(BitcoinConnectElement) { override render() { return html`
- + +
-
- Enter your +
+ 1. Add a new Micro node connection string + >Wallet Connection - below + from + MicroNode => Generate NWC + and copy the connection string. +
+
+ 2. Paste the connection string below: