diff --git a/.vscode/settings.json b/.vscode/settings.json index 4d7872e..fdd58b4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,7 @@ { "files.exclude": { - "dist": true + "dist": true, + "react/dist": true }, "editor.formatOnSave": true, "tailwindCSS.experimental.configFile": { diff --git a/README.md b/README.md index c03cffa..bac8265 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Lightning Wallet Connect +# Bitcoin Connect This project includes web components for connecting to Lightning Wallets and enabling [WebLN](https://webln.guide). Websites only need to implement a single interface to connect with multiple wallets (WebLN), and users can connect from both desktop and mobile devices. These components work with pure HTML and all Javascript libraries frameworks such as React, Angular, Vue, Solid.js, etc. @@ -10,17 +10,17 @@ This project includes web components for connecting to Lightning Wallets and ena ### Web Components Package -`npm install @getalby/lightning-wallet-connect` or `yarn add @getalby/lightning-wallet-connect` +`npm install @getalby/bitcoin-connect` or `yarn add @getalby/bitcoin-connect` ``` ### HTML (CDN) -You can use Lightning Wallet Connect without any build tools: +You can use Bitcoin Connect without any build tools: ``` - + ```` @@ -30,23 +30,23 @@ https://user-images.githubusercontent.com/33993199/234830578-0baf25f9-0179-4244- ## 🤙 Usage -Lightning wallet connect exposes the following web components for allowing user to connect their desired Lightning wallet: +Bitcoin Connect exposes the following web components for allowing user to connect their desired Lightning wallet: -- `` - launches the LWC Modal on click +- `` - launches the Bitcoin Connect Modal on click - Optional Arguments: - `icon-only` - display the button as an icon without "Connect wallet" - - `disabled` - mark the button as disabled. _NOTE: in react disabled={false} will not work - attribute must be omitted_ -- `` - render the modal on its own -- `` - render the list of connectors on their own + - `disabled` - mark the button as disabled +- `` - render the modal on its own +- `` - render the list of connectors on their own - _more components coming soon_ -Lightning wallet connect exposes the following events: +Bitcoin Connect exposes the following events: -- `lwc:connected` window event which fires when a wallet is connected and window.webln is ready to use -- `lwc:connecting` window event which fires when LWC is connecting to a wallet -- `lwc:disconnected` window event which fires when user has disconnected from their wallet -- `lwc:modalopened` window event which fires when Lightning Wallet Connect modal is opened -- `lwc:modalclosed` window event which fires when Lightning Wallet Connect modal is closed +- `bc:connected` window event which fires when a wallet is connected and window.webln is ready to use +- `bc:connecting` window event which fires when a user is connecting to their wallet +- `bc:disconnected` window event which fires when user has disconnected from their wallet +- `bc:modalopened` window event which fires when Bitcoin Connect modal is opened +- `bc:modalclosed` window event which fires when Bitcoin Connect modal is closed Current wallets supported: @@ -60,13 +60,13 @@ Current wallets supported: ```css html { - --lwc-color-primary: #21ecc7; - --lwc-color-secondary: #21ecc7; - --lwc-color-bg-primary: black; - --lwc-color-bg-secondary: black; - --lwc-color-text-primary: black; - --lwc-color-text-secondary: #f4f4f4; - --lwc-color-text-tertiary: white; + --bc-color-primary: #21ecc7; + --bc-color-secondary: #21ecc7; + --bc-color-bg-primary: black; + --bc-color-bg-secondary: black; + --bc-color-text-primary: black; + --bc-color-text-secondary: #f4f4f4; + --bc-color-text-tertiary: white; } ```` @@ -77,10 +77,10 @@ html { ```html - - + + + Bitcoin Connect +
- <lwc-button /> - - <lwc-button disabled /> - - <lwc-button icon-only/> - - <lwc-connector-list/> - + <bc-button /> + + <bc-button disabled /> + + <bc-button icon-only/> + + <bc-connector-list/> +
diff --git a/demos/html/minimal.html b/demos/html/minimal.html index 0ab5658..61b2bb7 100644 --- a/demos/html/minimal.html +++ b/demos/html/minimal.html @@ -3,17 +3,17 @@ - LWC Development - + Bitcoin Connect +
- +
diff --git a/demos/react/README.md b/demos/react/README.md index 66e619d..565e57d 100644 --- a/demos/react/README.md +++ b/demos/react/README.md @@ -1,6 +1,6 @@ # demos/react -A simple example of how to add Lightning Wallet Connect to your react app +A simple example of how to add Bitcoin Connect to your react app ## Install diff --git a/demos/react/index.html b/demos/react/index.html index 673c5a4..b8b607c 100644 --- a/demos/react/index.html +++ b/demos/react/index.html @@ -3,7 +3,7 @@ - LWC React + Bitcoin Connect React
diff --git a/demos/react/package.json b/demos/react/package.json index 31d4b86..2df3a9e 100644 --- a/demos/react/package.json +++ b/demos/react/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@getalby/bitcoin-connect-react": "^1.0.0", + "@getalby/bitcoin-connect-react": "^1.0.1", "alby-tools": "^3.2.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx index 35d457f..5ffdb5e 100644 --- a/demos/react/src/App.tsx +++ b/demos/react/src/App.tsx @@ -14,7 +14,7 @@ function App() { ( await ln.requestInvoice({ satoshi: 1, - comment: 'Paid with LWC', + comment: 'Paid with Bitcoin Connect', }) ).paymentRequest ); @@ -41,7 +41,7 @@ function App() { return ( <> -

LWC React

+

Bitcoin Connect React