18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const BLANK = null
4 | export const HOME = 'HOME'
5 | export const PROMPT_PAYMENT = 'PROMPT_PAYMENT'
6 | export const MAKE_PAYMENT = 'MAKE_PAYMENT'
7 | export const PROMPT_INVOICE = 'PROMPT_INVOICE'
8 | export const MAKE_INVOICE = 'MAKE_INVOICE'
9 | export const REQUEST_GETINFO = 'REQUEST_GETINFO'
10 |
11 | export const MENUITEM_GENERATE = 'generate-invoice-here'
12 | export const MENUITEM_PAY = 'pay-invoice'
13 | export const MENUITEM_BLOCK = 'block-domain'
14 |
15 | export const INVOICE_EXPIRY_SECONDS = 60 * 60 * 24
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "kwh",
3 | "private": true,
4 | "license": "MIT",
5 | "browserify": {
6 | "transform": [
7 | [
8 | "babelify",
9 | {
10 | "sourceMaps": true,
11 | "sourceMapsAbsolute": true
12 | }
13 | ]
14 | ]
15 | },
16 | "devDependencies": {
17 | "@babel/core": "7.0.0-rc.1",
18 | "@babel/preset-env": "7.0.0-rc.1",
19 | "@babel/preset-react": "7.0.0-rc.1",
20 | "babelify": "^9.0.0",
21 | "browserify": "^16.2.2",
22 | "browserify-incremental": "^3.1.1",
23 | "stylus": "^0.54.5",
24 | "terser": "^3.17.0"
25 | },
26 | "dependencies": {
27 | "create-hmac": "^1.1.7",
28 | "cuid": "^2.1.6",
29 | "debounce-with-args": "^1.0.1",
30 | "friendly-time": "^1.1.1",
31 | "keysim": "^2.1.0",
32 | "prop-types": "^15.7.2",
33 | "react": "^16.8.4",
34 | "react-contenteditable": "^3.2.6",
35 | "react-dom": "^16.8.4",
36 | "react-qr-svg": "^2.2.1",
37 | "webextension-polyfill": "^0.4.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 alhur.es
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/style.styl:
--------------------------------------------------------------------------------
1 | .wrap
2 | word-wrap break-word
3 |
4 | .hide
5 | transition opacity .25s ease-in
6 | opacity 0
7 |
8 | .show
9 | opacity 1
10 |
11 | /* checkmark */
12 | .checkmark
13 | width 56px
14 | height 56px
15 | border-radius 50%
16 | display block
17 | stroke-width 2
18 | stroke #fff
19 | stroke-miterlimit 10
20 | box-shadow inset 0px 0px 0px #19a974
21 | animation fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
22 |
23 | .checkmark__circle
24 | stroke-dasharray 166
25 | stroke-dashoffset 166
26 | stroke-width 2
27 | stroke-miterlimit 10
28 | stroke #19a974
29 | fill none
30 | animation stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
31 |
32 | .checkmark__check
33 | transform-origin 50% 50%
34 | stroke-dasharray 48
35 | stroke-dashoffset 48
36 | animation stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
37 |
38 | @keyframes stroke
39 | 100%
40 | stroke-dashoffset 0
41 | @keyframes scale
42 | 0%, 100%
43 | transform none
44 | 50%
45 | transform scale3d(1.1, 1.1, 1)
46 | @keyframes fill
47 | 100%
48 | box-shadow inset 0px 0px 0px 30px #19a974
49 |
--------------------------------------------------------------------------------
/docs/privacy-policy.md:
--------------------------------------------------------------------------------
1 | Privacy Policy
2 | ==============
3 |
4 | **kWh** doesn't collect any personal data, doesn't track websites you visit, doesn't collect any form of usage analytics, doesn't sends any information to any service over the internet -- in fact, it doesn't even have a server anywhere, it's just an extension installed in your computer.
5 |
6 | The only places **kWh** sends information to are the URL endpoints you define in the settings page for the extension, the URLs that identify the Lightning nodes you want to talk to, which **kWh** assumes are under your control or under the control of a third-party you trust.
7 |
8 | **kWh** stores only the information you explicitly write in the settings page: _node URL_, _username_ and _password_ (where applicable). That information, however, is only stored in your own browser, using the _local_ storage mode, not the _synced_ storage mode that saves data to a browser-determined sync server. So if the guarantees offered by the browser itself hold true _that information never leaves your browser_.
9 |
10 | For more information on the browser guarantees on which **kWh** depends, please read Firefox's [Privacy Policy](https://www.mozilla.org/en-US/privacy/websites/) and [Terms of Service](https://www.mozilla.org/en-US/about/legal/terms/mozilla/) and Google Chrome [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://ssl.gstatic.com/chrome/webstore/intl/en-US/gallery_tos.html).
11 |
--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "kwh",
3 | "applications": {
4 | "gecko": {
5 | "id": "kwh@alhur.es",
6 | "strict_min_version": "57.0"
7 | }
8 | },
9 | "manifest_version": 2,
10 | "name": "kWh",
11 | "description": "Send and receive Lightning payments in the browser with c-lightning, Eclair or Ptarmigan.",
12 | "version": "0.5.3",
13 | "author": "fiatjaf",
14 | "icons": {
15 | "16": "icon16.png",
16 | "48": "icon48.png",
17 | "64": "icon64.png",
18 | "128": "icon128.png"
19 | },
20 | "options_ui": {
21 | "page": "options.html",
22 | "browser_style": true,
23 | "open_in_tab": false
24 | },
25 | "content_scripts": [
26 | {
27 | "matches": [
28 | "file://*/*",
29 | "http://*/*",
30 | "https://*/*"
31 | ],
32 | "js": [
33 | "content-bundle.js"
34 | ],
35 | "run_at": "document_start",
36 | "all_frames": true
37 | }
38 | ],
39 | "background": {
40 | "scripts": [
41 | "background-bundle.js"
42 | ],
43 | "persistent": true
44 | },
45 | "browser_action": {
46 | "default_icon": {
47 | "16": "icon16.png",
48 | "64": "icon64.png"
49 | },
50 | "default_title": "KwH",
51 | "default_popup": "popup.html"
52 | },
53 | "web_accessible_resources": [
54 | "webln-bundle.js"
55 | ],
56 | "permissions": [
57 | "storage",
58 | "clipboardWrite",
59 | "notifications",
60 | "contextMenus",
61 | "tabs",
62 | ""
63 | ]
64 | }
65 |
--------------------------------------------------------------------------------
/src/current-action.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import browser from 'webextension-polyfill'
4 | import {HOME, PROMPT_PAYMENT, PROMPT_INVOICE} from './constants'
5 |
6 | const blankAction = {type: HOME}
7 |
8 | var currentActions = {}
9 | var actionIdNext = 1
10 |
11 | export function get(tabId) {
12 | if (tabId in currentActions) {
13 | return currentActions[tabId]
14 | }
15 | return [{...blankAction, id: actionIdNext++}, null]
16 | }
17 |
18 | export function set(tabId, action) {
19 | if (action.type === PROMPT_PAYMENT || action.type === PROMPT_INVOICE) {
20 | emphasizeBrowserAction(tabId, action.type)
21 | } else {
22 | cleanupBrowserAction(tabId)
23 | }
24 |
25 | // schedule cleanup
26 | setTimeout(() => {
27 | delete currentActions[tabId]
28 | cleanupBrowserAction(tabId)
29 | }, 1000 * 60 * 4 /* 4 minutes */)
30 |
31 | let promise = new Promise((resolve, reject) => {
32 | currentActions[tabId] = [{...action, id: actionIdNext++}, {resolve, reject}]
33 | })
34 | return [currentActions[tabId][0], promise]
35 | }
36 |
37 | export const prompt_defs = {
38 | PROMPT_PAYMENT: ['pay', '#d5008f'],
39 | PROMPT_INVOICE: ['req', '#357edd']
40 | }
41 |
42 | export function emphasizeBrowserAction(tabId, type) {
43 | let [label, bg] = prompt_defs[type]
44 |
45 | browser.browserAction.setBadgeText({text: label, tabId})
46 | browser.browserAction.setIcon({
47 | path: {16: 'icon16-active.png', 64: 'icon64-active.png'},
48 | tabId
49 | })
50 | browser.browserAction.setBadgeBackgroundColor({color: bg, tabId})
51 |
52 | try {
53 | browser.browserAction.setBadgeTextColor({color: '#ffffff'})
54 | } catch (e) {}
55 | }
56 |
57 | export function cleanupBrowserAction(tabId) {
58 | browser.browserAction.setBadgeText({text: '', tabId})
59 | browser.browserAction.setIcon({
60 | path: {16: 'icon16.png', 64: 'icon64.png'},
61 | tabId
62 | })
63 | }
64 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | all: build
2 |
3 | icons: static/icon64.png static/icon128.png static/icon48.png static/icon16.png static/icon64-active.png static/icon128-active.png static/icon48-active.png static/icon16-active.png
4 | build: icons static/webln-bundle.js static/content-bundle.js static/background-bundle.js static/popup-bundle.js static/options-bundle.js static/style.css
5 |
6 | static/icon%.png: icon.png
7 | convert $< -resize $*x$* $@
8 |
9 | static/icon%-active.png: icon-active.png
10 | convert $< -resize $*x$* $@
11 |
12 | static/background-bundle.js: src/background.js src/predefined-behaviors.js src/current-action.js src/utils.js src/interfaces/index.js src/interfaces/lightningd_spark.js src/interfaces/eclair.js src/interfaces/ptarmigan.js
13 | ./node_modules/.bin/browserifyinc $< -dv --outfile $@
14 |
15 | static/content-bundle.js: src/content.js src/utils.js
16 | ./node_modules/.bin/browserifyinc $< -dv --outfile $@
17 |
18 | static/webln-bundle.js: src/webln.js src/utils.js
19 | ./node_modules/.bin/browserifyinc $< -dv --outfile $@
20 |
21 | static/popup-bundle.js: src/popup.js $(shell find src/components/)
22 | ./node_modules/.bin/browserifyinc $< -dv --outfile $@
23 |
24 | static/options-bundle.js: src/options.js src/utils.js
25 | ./node_modules/.bin/browserifyinc $< -dv --outfile $@
26 |
27 | static/style.css: src/style.styl
28 | ./node_modules/.bin/stylus < $< > $@
29 |
30 | extension.zip: build
31 | cd static/ && \
32 | for file in $$(ls *.js); \
33 | do ../node_modules/.bin/terser $$file --compress --mangle | sponge $$file; \
34 | done; \
35 | zip -r extension * && \
36 | mv extension.zip ../
37 |
38 | sources.zip: build
39 | rm -fr tmpsrc/
40 | mkdir -p tmpsrc
41 | mkdir -p tmpsrc/src
42 | mkdir -p tmpsrc/static
43 | cd static && \
44 | cp -r *.html ../tmpsrc/static/
45 | cd src && \
46 | cp -r *.js ../tmpsrc/src
47 | cp *.png package.json Makefile README.md tmpsrc/
48 | cd tmpsrc/ && \
49 | zip -r sources * && \
50 | mv sources.zip ../
51 |
--------------------------------------------------------------------------------
/src/predefined-behaviors.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import browser from 'webextension-polyfill'
4 |
5 | import {HOME} from './constants'
6 | import {set, cleanupBrowserAction} from './current-action'
7 | import {formatmsat, notify} from './utils'
8 |
9 | const behaviors = {
10 | 'navigate-home': (_, __, tabId) => {
11 | set(tabId, {type: HOME})
12 | },
13 | 'save-pending-to-current-action': (_, [action], tabId) => {
14 | set(tabId, {...action, pending: true})
15 | },
16 | 'return-preimage': ({preimage}, [_, promise]) => {
17 | if (promise) promise.resolve(preimage)
18 | },
19 | 'notify-payment-success': ({msatoshi_paid, msatoshi_fees}, _) => {
20 | notify({
21 | title: 'Payment succeeded',
22 | message: `${formatmsat(msatoshi_paid)} paid with a fee of ${formatmsat(
23 | msatoshi_fees
24 | )}.`,
25 | iconUrl: '/icon64-active.png'
26 | })
27 | },
28 | 'return-payment-error': (resp, [_, promise]) => {
29 | console.log(resp)
30 | if (promise) promise.reject(new Error('Payment failed or still pending.'))
31 | },
32 | 'notify-payment-error': (e, _) => {
33 | notify({
34 | message: e.message,
35 | title: 'Payment error'
36 | })
37 | },
38 | 'paste-invoice': ({bolt11}, [{pasteOn}]) => {
39 | if (pasteOn) {
40 | browser.tabs.sendMessage(pasteOn[0], {
41 | paste: true,
42 | elementId: pasteOn[1],
43 | bolt11
44 | })
45 | }
46 | },
47 | 'save-invoice-to-current-action': (invoiceData, [action, _], tabId) => {
48 | set(tabId, {...action, invoiceData})
49 | },
50 | 'return-invoice': (invoiceData, [_, promise]) => {
51 | if (promise) promise.resolve(invoiceData)
52 | },
53 | 'notify-invoice-error': (e, _) => {
54 | notify({
55 | message: e.message,
56 | title: 'Error generating invoice'
57 | })
58 | },
59 | 'cleanup-browser-action': (_, [action]) => {
60 | cleanupBrowserAction(action.tabId)
61 | }
62 | }
63 |
64 | export function getBehavior(name) {
65 | return behaviors[name]
66 | }
67 |
68 | export default behaviors
69 |
--------------------------------------------------------------------------------
/src/webln.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import {PROMPT_PAYMENT, PROMPT_INVOICE, REQUEST_GETINFO} from './constants'
4 |
5 | class WebLNProvider {
6 | enable() {
7 | return this._sendMessage({getBlocked: true}).then(blocked => {
8 | if (blocked) {
9 | throw new Error('webln acess is blocked on this domain.')
10 | }
11 |
12 | return true
13 | })
14 | }
15 |
16 | getInfo() {
17 | return this.enable()
18 | .then(() => this._prompt(REQUEST_GETINFO))
19 | .then(info => ({
20 | node: {
21 | alias: info.alias,
22 | pubkey: info.id,
23 | color: info.color
24 | }
25 | }))
26 | }
27 |
28 | sendPayment(invoice) {
29 | return this.enable()
30 | .then(() => this._prompt(PROMPT_PAYMENT, {invoice}))
31 | .then(preimage => ({preimage}))
32 | }
33 |
34 | makeInvoice(args) {
35 | return this.enable().then(() => {
36 | if (typeof args !== 'object') {
37 | args = {amount: args}
38 | }
39 | return this._prompt(PROMPT_INVOICE, args).then(({bolt11}) => ({
40 | paymentRequest: bolt11
41 | }))
42 | })
43 | }
44 |
45 | signMessage(message) {
46 | return Promise.reject("Can't sign message.")
47 | }
48 |
49 | verifyMessage(signedMessage, rawMessage) {
50 | return Promise.reject("Can't verify message.")
51 | }
52 |
53 | _prompt(type, params) {
54 | return this._sendMessage({type, ...params})
55 | }
56 |
57 | _sendMessage(message) {
58 | return new Promise((resolve, reject) => {
59 | window.postMessage({...message, application: 'kWh'}, '*')
60 |
61 | function handleWindowMessage(ev) {
62 | if (!ev.data || ev.data.application !== 'kWh' || !ev.data.response) {
63 | return
64 | }
65 |
66 | if (ev.data.error) {
67 | reject(new Error(ev.data.error))
68 | } else {
69 | resolve(ev.data.data)
70 | }
71 |
72 | window.removeEventListener('message', handleWindowMessage)
73 | }
74 |
75 | window.addEventListener('message', handleWindowMessage)
76 | })
77 | }
78 | }
79 |
80 | window.webln = new WebLNProvider()
81 |
--------------------------------------------------------------------------------
/src/interfaces/index.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import React from 'react' // eslint-disable-line
4 |
5 | import * as lightningd_spark from './lightningd_spark'
6 | import * as eclair from './eclair'
7 | import * as ptarmigan from './ptarmigan'
8 | import {getRpcParams, structuredprint} from '../utils'
9 |
10 | const kinds = {
11 | lightningd_spark,
12 | eclair,
13 | ptarmigan
14 | }
15 |
16 | export const defs = [
17 | {
18 | label: 'lightningd',
19 | value: 'lightningd_spark',
20 | title: 'Spark RPC Server',
21 | subtitle: (
22 | <>
23 | Set up a Spark{' '}
24 | RPC endpoint server tied
25 | to your c-lightning node.
26 |
27 | ),
28 | fields: ['endpoint', 'username', 'password']
29 | },
30 | {
31 | label: 'Eclair',
32 | value: 'eclair',
33 | title: 'Eclair HTTP API',
34 | subtitle: (
35 | <>
36 | Use Eclair >=0.3 and{' '}
37 |
38 | enable the API in the configuration
39 | {' '}
40 | so kWh can talk to it.
41 |
42 | ),
43 | fields: ['endpoint', 'password']
44 | },
45 | {
46 | label: 'Ptarmigan',
47 | value: 'ptarmigan',
48 | title: 'Ptarmigan REST API',
49 | subtitle: (
50 | <>
51 | Start the{' '}
52 |
53 | REST API application
54 | {' '}
55 | for your Ptarmigan node and paste the URL here.
56 |
57 | ),
58 | fields: ['endpoint']
59 | }
60 | ]
61 |
62 | export function handleRPC(rpcField = {}) {
63 | return getRpcParams().then(({kind}) => {
64 | for (let method in rpcField) {
65 | let args = rpcField[method]
66 | console.log(`[rpc][${kind}]: ${method} ${structuredprint(args)}`)
67 | return kinds[kind][method].apply(null, args)
68 | }
69 | })
70 | }
71 |
72 | var currentListener
73 |
74 | export function listenForEvents(callback) {
75 | return getRpcParams().then(({kind}) => {
76 | if (currentListener) {
77 | console.log(`[stop-listening][${currentListener}]`)
78 | kinds[currentListener].cleanupListener()
79 | }
80 |
81 | console.log(`[listening][${kind}]`)
82 | let startListening = kinds[kind].listenForEvents(callback)
83 | Promise.all([startListening, kind]).then(([ok, kind]) => {
84 | if (ok) {
85 | currentListener = kind
86 | }
87 | })
88 | })
89 | }
90 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
The companion browser extension for c-lightning, Eclair and Ptarmigan nodes.
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## Features
13 |
14 | - Browse balance and latest transactions;
15 | - [`webln`](https://webln.dev/#/) support;
16 | - Pay highlighted invoice with a context menu click;
17 | - Handle `lightning:` links;
18 | - ["Generate invoice here"](https://youtu.be/wzkxxz5FsJo) context menu;
19 | - Manual payments and invoice creation;
20 | - Instant notifications on received payments;
21 | - No window popups, all interactions happen in the `browserAction` popup.
22 |
23 |
24 |
25 |
26 |
27 | ## Requirements
28 |
29 | Either
30 |
31 | * a [lightningd](https://github.com/ElementsProject/lightning/) node with a [Spark](https://github.com/shesek/spark-wallet) [RPC server](https://github.com/fiatjaf/sparko) in front of it;
32 | * an [Eclair](https://github.com/ACINQ/eclair) node with the [API](https://github.com/ACINQ/eclair#configuring-eclair) enabled and accessible;
33 | * a [Ptarmigan](https://github.com/nayutaco/ptarmigan) node with the [REST API Node.js app](https://github.com/nayutaco/ptarmigan/blob/master/docs/howtouse_rest_api.md) running.
34 |
35 | ### Caveats
36 |
37 | * If you are using **Google Chrome**, consider enabling the `Experimental Extension APIs` flag on chrome://flags for a better experience. Read more in [this issue](https://github.com/fiatjaf/kwh/issues/4#issuecomment-485288552).
38 | * If you are using Eclair, [the WebSocket won't connect on Firefox](https://github.com/ACINQ/eclair/issues/1001), so you won't get notifications when a payment is sent or received, the experience will not be as nice as if it did.
39 |
40 | ## Build instructions
41 |
42 | You'll need: Node.js>=10, npm, Make
43 |
44 | ```
45 | npm install
46 | make extension.zip
47 | ```
48 |
49 | ---
50 |
51 |
3 | 
9 | 
10 | 
25 |