NOTICE: Joule is no longer being actively developed. You can find other WebLN browser extensions that are actively maintained in the WebLN documentation. This repository now primarily serves as a learning resource for aspiring WebLN developers. Thanks for the support.
A browser extension that lightning-charges your browser with webln, giving you the ability to pay and use your node as an identity on the web.
WARNING: Joule is no longer acitvely developed, and should not be used for large mainnet funds
joule-extension/
├── src # All source code
│ ├── app # The main React app, used by the other clients
│ │ ├── index.tsx # Entry point for the app
│ │ ├── AppRoutes.tsx # Routes used in the popup and options clients
│ │ ├── PromptRoutes.tsx # Routes used in the prompt client
│ │ ├── components # All reusable components
│ │ ├── lib # Standalone libraries, potentially split into node modules
│ │ ├── modules # Vertical slices of business logic, mostly redux code
│ │ ├── pages # Container components for app routes
│ │ ├── prompts # Container components for prompts
│ │ ├── static # Static assets that are compiled and processed
│ │ ├── store # Redux setup and configuration
│ │ ├── style # Global or common-use styles
│ │ ├── typings # Module typings for TypeScript
│ │ └── utils # Miscellanious utility functions and constants
│ ├── background_script # Extension background script
│ ├── content_script # Extension content script, injects inpage_script and communicates with background_script
│ ├── inpage_script # In-page injected script, manages WebLN
│ ├── options # Options client, full screen version of the app
│ ├── popup # Popup client, opened by clicking icon in toolbar
│ ├── prompt # Prompt client, opened by WebLN and BOLT-11 links
│ └── webln # WebLN implementation, injected via inpage_script
├── static # Static assets that don't go through any processing
├── dist-dev # Developer builds go here, not checked into git
└── dist-prod # Production builds go here, not checked into git
- Run
yarn install && yarn run dev
- Open Chrome -> More Tools -> Extensions
- Toggle "Developer mode" (if such a toggle exists)
- Click "Load unpacked"
- Select the
joule-extension/dist-dev
folder you created - Get to work!
If you're also working on webln
, you'll
want to clone and build that repository, and run yarn link
. Then come back
to the joule folder and run yarn link webln
.
NOTE: After making changes, you'll need to close and re-open the extension to load the latest build.
Redux DevTools:
- Open the extension popup or full page
- Right click on the background
- Choose Redux Devtools -> Open Remote DevTools
- A new window will open displaying the Redux actions list
React DevTools:
- Run
npm install -g react-devtools
- Be sure to use
yarn run dev
to build the app - Run
react-devtools
in a new Terminal - A new window will open displaying the React vdom inspector
React Hot Reload:
- Run
yarn run hot
instead ofyarn run dev
To make a production build, follow these steps
- Run
yarn build
- Raw files and a zip of them will be output to
dist-prod
- Bump the version number in
package.json
andstatic/manifest.json
and commit it to develop - Create a git tag called
v${version}
and push it - CI will make a release with the assets uploaded and place it in draft
- Build the release locally with Docker and sign the manifest with
yarn build:docker && cd dist-docker && gpg --output manifest-[version].wbobeirne.sig --detach-sig manifest.txt
- Download the
manifest-[version].txt
from the release and verify it with the signature you just madegpg --verify manifest-[version].wbobeirne.sig manifest-[version].txt
- Upload the built zip to the Chrome developer dashboard + Firefox addons site
...regrettably, TBD
Please see the Contributor Guidelines on the Wiki.
- Thanks to the MetaMask team for establishing a ton of the UX best practices for browser crypto payments.
- Thanks to @afilini for providing a small prototype reference implementation of the extension flow.
- Thanks to Chaincode Labs for putting together the 2018 Lightning residency, where this was born.