diff --git a/README.md b/README.md index 6b4a863..3fed01e 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,10 @@ Bitcoin Connect exposes the following web components for allowing users to conne - `` - render the list of connectors on their own - _more components coming soon_ +##### Common Attributes (can be passed to any Bitcoin Connect component) + +- `app-name` (React: `appName`) - Name of the app requesting access to wallet. Currently used for NWC connections + #### Window Events Bitcoin Connect exposes the following events: diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx index edc8604..fbc573f 100644 --- a/demos/react/src/App.tsx +++ b/demos/react/src/App.tsx @@ -9,16 +9,20 @@ function App() { React.useEffect(() => { (async () => { - const ln = new LightningAddress('hello@getalby.com'); - await ln.fetch(); - setInvoice( - ( - await ln.requestInvoice({ - satoshi: 1, - comment: 'Paid with Bitcoin Connect', - }) - ).paymentRequest - ); + try { + const ln = new LightningAddress('hello@getalby.com'); + await ln.fetch(); + setInvoice( + ( + await ln.requestInvoice({ + satoshi: 1, + comment: 'Paid with Bitcoin Connect', + }) + ).paymentRequest + ); + } catch (error) { + console.error(error); + } })(); }, []); @@ -45,7 +49,10 @@ function App() {

Bitcoin Connect React

toast('Modal Connected!')} /> -

Components

-

Button

- +

diff --git a/react/src/components/Button.tsx b/react/src/components/Button.tsx index adbeb49..2c23beb 100644 --- a/react/src/components/Button.tsx +++ b/react/src/components/Button.tsx @@ -10,5 +10,5 @@ export const Button: React.FC = (props) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - return ; + return ; }; diff --git a/react/src/components/Modal.tsx b/react/src/components/Modal.tsx index 2d116fd..2389b09 100644 --- a/react/src/components/Modal.tsx +++ b/react/src/components/Modal.tsx @@ -10,9 +10,10 @@ export const Modal: React.FC = (props) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - return ; + return ; }; +// TODO: move to bitcoin connect package and just re-export it here export function launchModal() { const modal = document.querySelector('bc-modal'); if (!modal) { diff --git a/react/src/types/ComponentProps.ts b/react/src/types/ComponentProps.ts index 8a49f3a..fd95105 100644 --- a/react/src/types/ComponentProps.ts +++ b/react/src/types/ComponentProps.ts @@ -4,4 +4,5 @@ export type ComponentProps = { onDisconnect?(): void; onModalOpened?(): void; onModalClosed?(): void; + appName?: string; }; diff --git a/src/components/BitcoinConnectElement.ts b/src/components/BitcoinConnectElement.ts index 4229aa3..20525f3 100644 --- a/src/components/BitcoinConnectElement.ts +++ b/src/components/BitcoinConnectElement.ts @@ -1,5 +1,5 @@ import {loadFonts} from './utils/loadFonts'; -import {state} from 'lit/decorators.js'; +import {property, state} from 'lit/decorators.js'; import store from '../state/store'; import {InternalElement} from './internal/InternalElement'; @@ -21,6 +21,15 @@ export class BitcoinConnectElement extends InternalElement { @state() protected _balance: number | undefined = undefined; + @state() + protected _appName: string | undefined = undefined; + + @property({ + type: String, + attribute: 'app-name', + }) + appName?: string; + constructor() { super(); loadFonts(); @@ -29,6 +38,7 @@ export class BitcoinConnectElement extends InternalElement { this._alias = store.getState().alias; this._balance = store.getState().balance; this._connectorName = store.getState().connectorName; + this._appName = store.getState().appName; // TODO: handle unsubscribe store.subscribe((store) => { @@ -37,10 +47,14 @@ export class BitcoinConnectElement extends InternalElement { this._alias = store.alias; this._balance = store.balance; this._connectorName = store.connectorName; + this._appName = store.appName; }); } override connectedCallback() { super.connectedCallback(); + if (this.appName != undefined) { + store.getState().setAppName(this.appName); + } } } diff --git a/src/components/bc-modal.ts b/src/components/bc-modal.ts index bd359ae..02d9b5d 100644 --- a/src/components/bc-modal.ts +++ b/src/components/bc-modal.ts @@ -24,7 +24,9 @@ export class Modal extends withTwind()(BitcoinConnectElement) { @state() protected _closing = false; - @property() + @property({ + type: Boolean, + }) open?: boolean = false; _prevOpen?: boolean = false; diff --git a/src/components/connectors/bc-alby-nwc-connector.ts b/src/components/connectors/bc-alby-nwc-connector.ts index b82baa5..062ba04 100644 --- a/src/components/connectors/bc-alby-nwc-connector.ts +++ b/src/components/connectors/bc-alby-nwc-connector.ts @@ -18,8 +18,7 @@ export class AlbyNWCConnector extends ConnectorElement { const nwc = webln.NostrWebLNProvider.withNewSecret(); await nwc.initNWC({ - // TODO: pass to component - name: 'Bitcoin Connect', + name: this._appName || 'Bitcoin Connect', }); this._connect({ diff --git a/src/state/store.ts b/src/state/store.ts index 64e4eda..ea12fca 100644 --- a/src/state/store.ts +++ b/src/state/store.ts @@ -30,12 +30,14 @@ interface Store { readonly alias: string | undefined; readonly balance: number | undefined; readonly connectorName: string | undefined; + readonly appName: string | undefined; connect(config: ConnectorConfig): void; disconnect(): void; setAlias(alias: string | undefined): void; setBalance(balance: number | undefined): void; setRoute(route: Route): void; + setAppName(appName: string): void; } const store = createStore((set) => ({ @@ -45,6 +47,7 @@ const store = createStore((set) => ({ alias: undefined, balance: undefined, connectorName: undefined, + appName: undefined, connect: async (config: ConnectorConfig) => { dispatchEvent('bc:connecting'); set({ @@ -95,6 +98,9 @@ const store = createStore((set) => ({ setRoute: (route: Route) => { set({route: route}); }, + setAppName: (appName) => { + set({appName}); + }, })); export default store;