Skip to content

Commit

Permalink
Merge pull request #38 from getAlby/feat/react-wrapper
Browse files Browse the repository at this point in the history
feat: add react wrapper package
  • Loading branch information
rolznz authored Aug 28, 2023
2 parents b479ff7 + d701d83 commit 0885362
Show file tree
Hide file tree
Showing 19 changed files with 3,831 additions and 94 deletions.
46 changes: 17 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,25 @@ This project includes web components for connecting to Lightning Wallets and ena

## 🚀 Quick Start

```
npm install @getalby/lightning-wallet-connect
```
### React Package

or
`npm install @getalby/bitcoin-connect-react` or `yarn add @getalby/bitcoin-connect-react`

### Web Components Package

`npm install @getalby/lightning-wallet-connect` or `yarn add @getalby/lightning-wallet-connect`

```
yarn add @getalby/lightning-wallet-connect
```
or for use without any build tools:
### HTML (CDN)
You can use Lightning Wallet Connect without any build tools:
```

<script src="https://cdn.jsdelivr.net/npm/@getalby/lightning-wallet-connect@1.0.5/dist/index.browser.js"></script>
```

````
## 📽️ Demo
Expand Down Expand Up @@ -64,7 +68,7 @@ html {
--lwc-color-text-secondary: #f4f4f4;
--lwc-color-text-tertiary: white;
}
```
````

### Pure HTML

Expand All @@ -77,7 +81,6 @@ html {
<script src="https://cdn.jsdelivr.net/npm/@getalby/lightning-wallet-connect@1.0.5/dist/index.browser.js"></script>
<script>
window.addEventListener('lwc:connected', async () => {
// TODO: hide the lwc-button
const invoice = // (...invoice generated by backend)
await window.webln.sendPayment(invoice);
confetti();
Expand All @@ -89,31 +92,16 @@ html {

### React

#### Button

> Example replit: https://replit.com/@rolznz/make-me-an-image-lwc-version
```tsx
import '@getalby/lightning-wallet-connect';

// in your component, listen to lightning wallet connected event
const [lwcConnected, setLwcConnected] = React.useState(false);

React.useEffect(() => {
const onConnected = () => setLwcConnected(true);
window.addEventListener('lwc:connected', onConnected);

return () => {
window.removeEventListener('lwc:connected', onConnected);
};
}, []);
import {Button} from '@getalby/bitcoin-connect-react';

const invoice = // (...invoice generated by backend)

return lwcConnected ? <>
<button onClick={() => window.webln.sendPayment(invoice)}/>
</> : (
{/* @ts-ignore */}
<lwc-button/>
);
return <Button onConnect={() => window.webln.sendPayment(invoice)}/>
```

# Demos
Expand Down
2 changes: 1 addition & 1 deletion demos/react/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>LWC React</title>
</head>
<body>
<div id="root"></div>
Expand Down
4 changes: 2 additions & 2 deletions demos/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@
"preview": "vite preview"
},
"dependencies": {
"@getalby/lightning-wallet-connect": "1.0.0",
"@getalby/bitcoin-connect-react": "^1.0.0",
"alby-tools": "^3.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@webbtc/webln-types": "^1.0.13",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"@webbtc/webln-types": "^1.0.13",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
Expand Down
68 changes: 29 additions & 39 deletions demos/react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,10 @@
import '@getalby/lightning-wallet-connect';
import React from 'react';
import {LightningAddress} from 'alby-tools';
import {Button} from '@getalby/bitcoin-connect-react';

function App() {
const [invoice, setInvoice] = React.useState<string | undefined>(undefined);
const [preimage, setPreimage] = React.useState<string | undefined>(undefined);
const [lwcConnected, setLwcConnected] = React.useState(false);

React.useEffect(() => {
const onConnected = () => setLwcConnected(true);
window.addEventListener('lwc:connected', onConnected);

return () => {
window.removeEventListener('lwc:connected', onConnected);
};
}, []);

React.useEffect(() => {
(async () => {
Expand All @@ -32,39 +22,39 @@ function App() {
}, []);

async function payInvoice() {
if (!invoice) {
throw new Error('No invoice available');
}
const result = await window.webln?.sendPayment(invoice);
setPreimage(result?.preimage);
if (!result?.preimage) {
alert('Payment failed. Please try again');
try {
if (!window.webln || !window.webln) {
throw new Error('Please connect your wallet');
}
if (!invoice) {
throw new Error('No invoice available');
}
const result = await window.webln.sendPayment(invoice);
setPreimage(result?.preimage);
if (!result?.preimage) {
throw new Error('Payment failed. Please try again');
}
} catch (error) {
alert(error);
}
}

return (
<>
<h1>Vite + React</h1>
{lwcConnected ? (
<>
{preimage ? (
<p>
Paid! ✅<br />
<span style={{fontSize: '10px'}}>Preimage: {preimage}</span>
</p>
) : invoice ? (
<button onClick={payInvoice}>Pay 1 sat to hello@getalby.com</button>
) : (
<p>Loading invoice...</p>
)}
</>
) : (
<>
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/* @ts-ignore */}
<lwc-button />
</>
)}
<h1>LWC React</h1>
<Button onConnect={() => alert('Connected!')} />
<div style={{marginTop: '16px'}}>
{preimage ? (
<p>
Paid! ✅<br />
<span style={{fontSize: '10px'}}>Preimage: {preimage}</span>
</p>
) : invoice ? (
<button onClick={payInvoice}>Pay 1 sat to hello@getalby.com</button>
) : (
<p>Loading invoice...</p>
)}
</div>
</>
);
}
Expand Down
58 changes: 44 additions & 14 deletions demos/react/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -149,13 +149,29 @@
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==

"@getalby/lightning-wallet-connect@1.0.0":
"@getalby/bitcoin-connect-react@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.0.tgz#14a9dcfc10fdd78584096beaca69657fa1a9f3b9"
integrity sha512-4YXf/08WoB8cqjiXTXRKItsHo3P0MUTgq1eqUM2ECZHqI/t3htVvmOBdeSd41cDk3XbBObGxLuBlgF35j8j45g==
resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect-react/-/bitcoin-connect-react-1.0.0.tgz#c8124cc0d92c04a53d0b6e599dec7daf142c7cf0"
integrity sha512-64CYGkzy+7fazJbb7A+Y3tNTyUDH9yvVHlTfCL9g1gO1EMuASLIdSG6snToGZpbtkY+6sSOmD7scz0bSIUKtAw==
dependencies:
alby-js-sdk "^2.1.0"
"@getalby/lightning-wallet-connect" "^1.0.14"

"@getalby/lightning-wallet-connect@^1.0.14":
version "1.0.14"
resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.14.tgz#9e9641a596bb478126a63acf55aca306465070af"
integrity sha512-9Xlk7L0qsZOSc6yXWn86QWbfVRV36dXIP+LWgIae4YA545WRlUwHe5z3dtOY+jEPkXBcF/70Kr4au9tk9jpcvQ==
dependencies:
"@getalby/sdk" "^2.2.3"
lit "^2.2.4"
zustand "^4.4.1"

"@getalby/sdk@^2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-2.2.3.tgz#fda6de0bc241b59e7ed813204067c4d14b794668"
integrity sha512-8NvzGtpyne8EmRlCcg/sF3kUZWeHRXqZwS1HNuP1ytNNfmKFUZpo3GOauwzEpFFmaD+Fht5bjT3Y/XLk0QtFSw==
dependencies:
crypto-js "^4.1.1"
nostr-tools "1.13.1"

"@humanwhocodes/config-array@^0.11.10":
version "0.11.10"
Expand Down Expand Up @@ -195,11 +211,16 @@
dependencies:
"@noble/hashes" "1.3.1"

"@noble/hashes@1.3.1", "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
"@noble/hashes@1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==

"@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==

"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
Expand All @@ -221,11 +242,16 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"

"@scure/base@1.1.1", "@scure/base@~1.1.0":
"@scure/base@1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==

"@scure/base@~1.1.0":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.2.tgz#ff0cf51874aaf176490c9cb46e4df807a2e581d2"
integrity sha512-sSCrnIdaUZQHhBxZThMuk7Wm1TWzMD3uJNdGgx3JS23xSqevu0tAOsg8k66nL3R2NwQe65AI9GgqpPOgZys/eA==

"@scure/bip32@1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.1.tgz#7248aea723667f98160f593d621c47e208ccbb10"
Expand Down Expand Up @@ -468,14 +494,6 @@ ajv@^6.12.4:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"

alby-js-sdk@^2.1.0:
version "2.1.3"
resolved "https://registry.yarnpkg.com/alby-js-sdk/-/alby-js-sdk-2.1.3.tgz#588f16da20911cc8328110bfea0d0305c316afee"
integrity sha512-FO5ng7C+VQqYyxZ9D89HNbQg0w4yAxLeG6zHQNwPwOawTM0wGMMxWlIeUB/su0WtLNyygO00mwIqlfBtFcvEMg==
dependencies:
crypto-js "^4.1.1"
nostr-tools "1.13.1"

alby-tools@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/alby-tools/-/alby-tools-3.2.1.tgz#60f15983454b6635cd90da40f097d32fd0875308"
Expand Down Expand Up @@ -1299,6 +1317,11 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"

use-sync-external-store@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==

vite@^4.4.5:
version "4.4.8"
resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.8.tgz#31e4a438f8748695c68bd57ffd262ba93540fdf7"
Expand Down Expand Up @@ -1331,3 +1354,10 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

zustand@^4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.1.tgz#0cd3a3e4756f21811bd956418fdc686877e8b3b0"
integrity sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==
dependencies:
use-sync-external-store "1.2.0"
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@getalby/lightning-wallet-connect",
"version": "1.0.13",
"version": "1.0.14",
"description": "Web components to connect to a lightning wallet and power a website with WebLN",
"type": "module",
"source": "src/index.ts",
Expand Down
12 changes: 12 additions & 0 deletions react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Bitcoin Connect React

A React wrapper for Bitcoin Connect

## Development

`yarn install`
`yarn dev`

### Viewing changes

Run `yarn link` then in `../demos/react` run `yarn link @getalby/bitcoin-connect-react`. The component changes can be seen in the demo app
33 changes: 33 additions & 0 deletions react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "@getalby/bitcoin-connect-react",
"version": "1.0.0",
"type": "module",
"source": "src/index.ts",
"main": "./dist/index.cjs",
"module": "./dist/index.module.js",
"unpkg": "./dist/index.umd.js",
"types": "./dist/index.d.ts",
"exports": {
"require": "./dist/index.cjs",
"types": "./dist/index.d.ts",
"default": "./dist/index.modern.js"
},
"license": "MIT",
"files": [
"dist/**/*"
],
"scripts": {
"dev": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react watch",
"build": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
},
"dependencies": {
"@getalby/lightning-wallet-connect": "^1.0.14"
},
"devDependencies": {
"@types/react": "^18.2.21",
"microbundle": "^0.15.1"
},
"peerDependencies": {
"react": "^18.2.0"
}
}
14 changes: 14 additions & 0 deletions react/src/components/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import '@getalby/lightning-wallet-connect';
import {ComponentProps} from '../types/ComponentProps';
import {useCoreEvents} from '../hooks/useCoreEvents';

type ButtonProps = ComponentProps & {};

export const Button: React.FC<ButtonProps> = (props) => {
useCoreEvents(props);

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return <lwc-button />;
};
14 changes: 14 additions & 0 deletions react/src/components/Modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import '@getalby/lightning-wallet-connect';
import {ComponentProps} from '../types/ComponentProps';
import {useCoreEvents} from '../hooks/useCoreEvents';

type ModalProps = ComponentProps & {};

export const Modal: React.FC<ModalProps> = (props) => {
useCoreEvents(props);

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return <lwc-modal />;
};
Loading

0 comments on commit 0885362

Please sign in to comment.