getalby / lightning-browser-extension Goto Github PK

Additionally to the satoshi amounts we should show fiat amounts for the not-yet hyper-bitcoinized users.

The favorit currency should be configurable and additional to the satoshi amounts we should convert the amount to fiat.

Hello, why you are not using manifest v3 in your extension?

It seems that the payment request promise in the content script resolve successfully after a network error in the background script.

This is likely because error: undefined is assuming there is no error

lsat.tech is actually a standard to authenticate API calls. Basically it is a standardized way on how the server responds with an invoice and how the client proofs the payment.

Can we use lsat.tech to make a more seamless payment flow in the browser?
Current experiments: https://github.com/bumi/lightning-browser-extension/blob/master/source/Background/lsatInterceptor.js

needs to be welcome.html instead of Welcome.html

We need an options page that allows the user to see, add and edit the configured account(s).

Accounts consist of:

• name
• connector specific credentials (e.g. for LND: host + macaroon, for LNDHub host + API key)
• status (if the connection works)

It should be possible to remove and add a new account.

Step 4 and Step 5 are somewhat both confirmation screens.
Maybe we can combine both into one screen that shows the connection details and also leads the user to the demo publisher

It looks like the variable browser is not defined for chorme and chromium and it prevents the extension to work on those browsers.

The full error in the console looks like:

Uncaught ReferenceError: browser is not defined
    at t.default.load (options.bundle.js?aec019069628d7b690f7:4682)
    at B (options.bundle.js?aec019069628d7b690f7:4642)
    at options.bundle.js?aec019069628d7b690f7:4642
    at pb (options.bundle.js?aec019069628d7b690f7:4400)
    at HTMLUnknownElement.v (options.bundle.js?aec019069628d7b690f7:4387)
    at Object.$n (options.bundle.js?aec019069628d7b690f7:4387)
    at tr (options.bundle.js?aec019069628d7b690f7:4387)
    at mb (options.bundle.js?aec019069628d7b690f7:4400)
    at t.unstable_runWithPriority (options.bundle.js?aec019069628d7b690f7:4538)
    at xu (options.bundle.js?aec019069628d7b690f7:4400)

I'm new to React, sorry if this already explained/configured somewhere else.

We need to have the Source Code visible in the Browser console so we can easily locate errors.
Currently the stack trace is for the generated JS file (hard to read).

I've added the default configs for sourcemaps in this PR #22
But it still does not give me the friendly source code.

See #20 for current stack trace.

For development the react-dev tools are quite handy.
Seems it is not straight forward to use those in an extension.
see: abhijithvijayan/web-extension-starter#51

How does it work for us?

The extension supports multiple backend connections/accounts.

A lnbits connector could allow users to use their lnbits accounts with the extension.

What do we show on the publishers page when a user does not yet has configured any allowances?
Maybe: an explanation what an allowance is and a link to a demo publisher (as after the onboarding screen)

After setting up an account I can see the account details & config displayed in the options window of the extension.

When trying to use the account to pay, webln reports err, provider No account available.
When returning to the account options, the account config seems not to be persisted

{
  "currentKey": "e3c6b9ac4ccae3f063a4c4c1a9b464a8bb60413de200e60457b638c6e27834d0",
  "accounts": {}
}

The account config should be persisted.

The receive screen should allow the user to create an invoice

We should check how we are doing on Android and iOS Versions of Chrome and Firefox.

• AFAIK iOS Firefox/ Chrome is nothing more than Safari with a different UI. Are we able to address this?
• How is the extension/onboarding behaving on mobile OS'es in general
• is a browser extension for mobile browsers a thing at all?
• How can we integrate mobile OS'es into our testing pipeline?

When setting a custom LND url in the options screen, it is not respected.

It will not persist and coming back to the page show's the pre-filled URL defined in https://github.com/bumi/lightning-browser-extension/blob/master/source/forms/lnd/index.js

Setting a custom host

After saving the config

UPDATE:

seems the config is saved, the plugin console reports an error with the configured LND host & macaroon set

We should have a way to display messages/errors. When running into an error on a payment e.g.

payment_error "insufficient_balance"

it would be nice to see what happened.

If we decide to let the client website show the message, we should standardize and document the API's necessary to react to events.

The send screen should allow the user to paste a lightning invoice and to pay this lightning invoice.

The confirmation prompt is shown whenever a website requests a payment from the user (and the user does not have an allowance configured)

We need to show the user all relevant information required to decide if the payment should be made:

• Website details (URL, Title, Favicon,...)
• Amount
• Memo
• Fees

We should also allow the user to configure an allowance budget for the page.

Related component:
https://github.com/bumi/lightning-browser-extension/blob/master/src/app/components/ConfirmPayment/index.jsx

the publishers list is currently implemented as table.
The data and UI might not fully fit in a table and for flexibility we might want to move it over to use <div>.

Currently we have percentage indicator bar that does not show where the 100% end is.

After resetting my account I am no longer asked to set a password.

When trying to use my previous password I'll see

action: "unlock"
​
error: Error
​​
columnNumber: 2640
​​
fileName: "moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js"
​​
lineNumber: 2315
​​
message: "Malformed UTF-8 data"
​​
stack: "stringify@moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js:2315:2640\ntoString@moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js:2315:1400\no@moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js:4137:373\nvalue@moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js:4149:1615\nv@moz-extension://ccdfc1cb-f91c-49b8-864d-e4af850c4fe3/js/background.bundle.js:4173:1923\n"
​

I'm still able to setup my account by manually visiting the optionspage but not use it

Allowances will be a core feature that allows users to set budgets for specific sites.
The allowances page should allow users to see a list of all configured allowances with their details and allow users to configure those.

Joule did some amazing work on that which is a great inspiration:
https://medium.com/@wbobeirne/introducing-joule-allowances-2b08bec75e3a

Currently the options page becomes one big page and the components become quite hard to handle.
How can we best split up the options page int smaller parts/components?
Potentially also different pages for general options, accounts and allowances.

Currently we do not have an option to edit the allowance of a publisher.
This could be a full publisher edit page?

I think authentication could become a pretty cool feature.
We need to investigate how we can do it and how we can support lnurl-auth: https://xn--57h.bigsun.xyz/lnurl-auth.html

Currently it is not possible to lock an account after it is unlocked.

Hitting the extensions icon should result in the options page being opened.

Sometimes during the payment process I am getting an "Promised response from onMessage listener went out of scope" error. currently I do not know which promise exactly fails and I can not reliably reproduce it.

The extension supports multiple backend connections/accounts.

A LndHub connector could allow users to use their LndHub (e.g. bluewallet) accounts with the extension.

https://xn--57h.bigsun.xyz/lnurl-pay-flow.txt

https://github.com/fiatjaf/awesome-lnurl

Currently only the LND connector supports fetching payment history from the node.

Missing connectors:

• LNBits

Minor prio:

• Eclair
• Galoy

Should be a password field
Viewport should be bigger

• Test end-2-end connection
• Show public key
• unlock wallet if needed?

The Password pop-up always asks to confirm the password.

The confirmation field should be required only when the password is set (or changed).
The password should not be entered twice for the unlock flow.

The popup should inform the user of current active allowance/budget settings for the currently visited page.

Initial frontend for the extension popup including:

• unlock option if the account is locked
• balance in satoshis (and fiat - which later should be configurable)
• receive / send (links to create an invoice or pay an invoice from within the popup)
• switch accounts (link to list and select an account - if multiple ones arr configured)

Current status:

https://github.com/bumi/lightning-browser-extension/blob/master/source/Popup/Popup.js

Inspiration

On the payment prompt we want to allow the users to set an allowance for the current website/publisher.

Instead of doing a "one-time payment" the user can choose to setup an allowance for the publisher. For this the user should be able to set a maximum budget and a time period.

Currently the LND client uses REST over HTTP. This approach works, but there is a lot of overhead in handling the communication.

The alternative is to use gRPC.
By using gRPC we get all the LND APIs out of the box with minimal configuration.

gRPC-generated stubs and skeletons hide HTTP from the client and server too, so nobody has to worry how the RPC concepts are mapped to HTTP

LND supports gRPC:

• https://github.com/lightningnetwork/lnd/blob/master/docs/grpc/javascript.md

The gRPC API is well documented:

• https://api.lightning.community/?javascript#subscribesingleinvoice

It is a low effort to replace it since I have already created a client on a boilerplate project that I'm building:

• https://github.com/motorina0/node-express-postgres-ln-boilerplate/blob/issue_1/src/ln/client/index.js

Sphinx_chat also uses gRPC for LND

Question:

• is it OK to replace the current REST API with gRPC for the LND connection?

Currently we are using Webpack v4 (as provided by the extension boilerplate) we should update to v5.
Maybe this also makes it easier to have good source maps? (#23 )

I tried to update all dependencies but getting the following error:

lightning/lightning-browser-extension@issue_23  » yarn dev:firefox
yarn run v1.22.10
$ cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch
[ Starting the Hot Extension Reload Server... ]
(node:47178) [DEP_WEBPACK_COMPILATION_AFTER_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: afterOptimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:47178) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:47178) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'reduce' is deprecated)
wext-manifest-webpack-plugin: removed js/manifest.bundle.js
(node:47178) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(node:47178) [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API
[webpack-cli] HookWebpackError: item.node is not a function
    at makeWebpackError (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack/lib/HookWebpackError.js:49:9)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack/lib/Compilation.js:2394:12
    at eval (eval at create (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:80:1)
-- inner error --
TypeError: item.node is not a function
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/dist/index.js:321:27
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:31
    at run (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:43)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:45:20
caused by plugins in Compilation.hooks.processAssets
TypeError: item.node is not a function
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/dist/index.js:321:27
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:31
    at run (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:43)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:45:20
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In order to completely remove a publisher we want to have the delete option on the detail page.
Maybe behind a dot/hamburger menu at the top right?

Whenever a website requests to access to webln we show the user a prompt to confirm.
This is mainly for security reasons that the website can not get any LN details without the user's consent.
The user can save the decision to not get asked again in the future.

Related component:
https://github.com/bumi/lightning-browser-extension/blob/master/src/app/components/Enable/index.jsx

Inspiration:

I find https://github.com/conventional-changelog/standard-version to be an amazing tool to create releases. This adds a yarn release command which automatically bumps your version (can be displayed inside the plugin), adds a git tag, creates/ appends a changelog.md .

All you need to do is to add feat: my awesome feature or fix: fixes the world or breaking: integrated non-backward compatibe feature as your commit message (only the ones that are supposed to show up inside the changelog) and upon yarn release you get the complete changelog

Example:

hey @bumi is it possible that branches I take from you include a githook that tries to find husky.sh? I cannot base any new commit ontop of #37

❯ git commit
error Command "husky-run" not found.

EDIT: I actually have husky.sh in .git

After the user installs the extension we need some kind of onboarding wizzard that gives the user some introduction and helps the user getting started connecting an account.

Figma screens:

https://www.figma.com/file/xEPJFGFdc3HD0JS1ax2IpH/Lightning-Browser-Extension

Current page:

https://github.com/bumi/lightning-browser-extension/blob/master/source/Welcome/Welcome.js

Goals

• Guide the user through the initial required account configuration
• Validate and test the account
• Explain the user the concept of lightning payments in the browser

Steps

• Intro
• Choose an account type (LND, Lnbits, etc.)
• Configure account (e.g. enter LND macaroon and URL) (later we can also add some onramp tools here)
• Validate and review the connection details (can we connect to the node, get node details)
• Confirm and save the account
• Success: explain what can be done now. give an example of a payment to test. - maybe list pages that support webln

ToDos:

• automatically open the page after the user has installed the extension

Inspiration:

https://metamask.zendesk.com/hc/en-us/articles/360015489531-Getting-Started-With-MetaMask-Part-1-

Later

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (bumi/lightning-browser-extension) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

oh and this should be "list payments"
https://api.lightning.community/#v1-payments
https://api.lightning.community/#listpayments

The payments are the lightning payments. Transactions are the on-chain bitcoin transactions.

Originally posted by @bumi in #41 (comment)