Add WebLN support #215

KoalaSat · 2022-08-22T12:47:51Z

Fixes #176

This PR implements the automatic detection of WebLN providers on user's browser.

It also includes a workaround to deal with locked payments, since WebLN does not support yet this feature, we just wait for the back-end to communicate a new status.

The main workflow will behave as follows:

The user with a WebLN app takes/creates an order.
Robosats detects WebLN and automatically tries to contact with the provider, if this is the first time, the provider ask for permissions to the user:
Robosats creates a payment with the BOLT-11 invoice received from back-end, a notification is shown to help the user understand the next step:
The user accepts the payment on the provider popup, at this point WebLN does not contemplate locking payments so for this case (Alby) it'll keep loading forever, until the user cancels or the order expires, Robosats updates the message to help the user understand the next step:
The user closes the provider popup and continue with the standard order process.

I tried to create several payment locks with the same wallet and despite the loading button problem, all payments are successfully locked in the network.

@Reckless-Satoshi - I need some help testing this on Tor Browser, looks like my Alby extension does not work.

KoalaSat · 2022-08-22T15:04:17Z

frontend/src/components/OrderPage.js

+        } else {
+          this.setState({ waitingWebNL: false });
+        }
+      });


Please, confirm these are the right combinations of user role + status + invoice

KoalaSat · 2022-08-22T15:12:29Z

frontend/src/components/OrderPage.js

+  }
+
+  orderDetailsReceived = (data) =>{
+    if (data.status !== this.state.status) { this.handleWebLN(data) }


This is the only way I found to manage status changes without using Hooks, happy to hear any other suggestions I might have missed out.

Reckless-Satoshi · 2022-08-22T16:16:26Z

This looks absolutely fantastic!! Congrats! 🚀
Haven't tested it, hope to find some time for it during this week.

I assume there is about 5-10 second when Alby shows the spinner and RoboSats still shows "please check your WebLN wallet"? Does WebLN send any signal the moment the payment is initiated? If so, it could be used to trigger a text change in the dialog "Waiting for your bond to be accepted".

@Reckless-Satoshi - I need some help testing this on Tor Browser, looks like my Alby extension does not work.

I also was not able to get the extension to work. I cannot get pass the password creation step, the "confirm password" button simply does not work. Have you tried testing on Brave with Tor or on a torified Mozilla session? We should report about the TOR Browser bug anyway.

Can WebLN generate and autofill the Bolt11 invoice requested to buyers in (data.status == 6 || data.status == 8) and on the "Rewards and Compensations" payout?

KoalaSat · 2022-08-22T16:29:24Z

I assume there is about 5-10 second

On average for me took 1-2 seconds, never 5.

Does WebLN send any signal the moment the payment is initiated?

No, there are 0 signals from the provider until the payment is completed, so never. WebLN is really restrictive.

Have you tried testing on Brave with Tor or on a torified Mozilla session?

I tried Brave but looks like it has a strong CORS block, even for localhost, Tor Browser has the same limitation and I manage to make it work, but I had no luck with brave. I never tried the torified Mozilla session.

We should report about the TOR Browser bug anyway.

I think I can create tomorrow an issue for them.

Can WebLN generate and autofill the Bolt11 invoice requested to buyers in (data.status == 6 || data.status == 8) and on the "Rewards and Compensations" payout?

I think what you want is to use this function right? https://webln.dev/#/api/make-invoice
So the idea is to automatically generate an invoice and send it to the back-end?

Reckless-Satoshi · 2022-08-22T17:09:38Z

No, there are 0 signals from the provider until the payment is completed, so never. WebLN is really restrictive.

Ah, I see. Well, then this is the best approach possible at the moment :)

I think I can create tomorrow an issue for them.

Very appreciated!

I think what you want is to use this function right? https://webln.dev/#/api/make-invoice So the idea is to automatically generate an invoice and send it to the back-end?

It looks exactly like what is needed, with an explicit amount. Once the user confirms creating the invoice on the extension RoboSats could directly proceed with the API request.

KoalaSat · 2022-08-22T21:29:50Z

I included the invoice generation for the buyer status and the rewards program.

Rewards program

If the user has a WebLN provider and claims a reward, the "Generate with WebLN" button is displayed.
If the user clicks on it, a provider's popup shows the invoice form with the reward amount.
If the user generates the invoice, it's sent to the back-end the same way as the manual submit.

Since this is a regular invoice generation contemplated on WebLN, the popup closes automatically once the invoice is generated.

Canceling on the provider's popup won't make any change and the user will still be able to click again or submit it manually.

Buyer Invoice

It's not possible to test this steps on the testnet, so the only way I can imagine to check is to actually generate a real order. Anyways I hacked the code to reach to that step and the invoice request looks as good as in the reward request.

Signed-off-by: KoalaSat <111684255+KoalaSat@users.noreply.github.com>

KoalaSat · 2022-08-23T07:37:50Z

getAlby/lightning-browser-extension#1328

Reckless-Satoshi · 2022-08-23T23:54:39Z

Been testing it for a little while, it's amazing! I need more time to test it but I am super tight these days. I left a few comments.

This feature will be the best companion with the release of the Umbrel / Citadel apps as TOR browser won't be a limiting factor for those that self host the RoboSats client.

fernandoporazzi · 2022-08-24T13:38:54Z

frontend/src/components/Dialogs/Profile.tsx

@@ -90,6 +93,18 @@ const ProfileDialog = ({
    copyToClipboard(`http://${host}/ref/${referralCode}`);
  };

+  const handleWeblnInvoiceClicked = (e: any) =>{


Suggested change

const handleWeblnInvoiceClicked = (e: any) =>{

const handleWeblnInvoiceClicked = async (e: any) =>{

fernandoporazzi · 2022-08-24T13:40:50Z

frontend/src/components/Dialogs/Profile.tsx

+          webln.makeInvoice(earnedRewards).then((response) => {
+            handleSubmitInvoiceClicked(e, response.paymentRequest);
+          })
+        });


What about the following suggestion to avoid the nested callbacks?

const webln = await getWebln(); const response = await webln.makeInvoice(earnedRewards); handleSubmitInvoiceClicked(e, response.paymentRequest)

If that's the patterns you apply it's fine, but I'm curious now, what's the difference?

fernandoporazzi · 2022-08-24T13:41:58Z

frontend/src/components/OrderPage.js

@@ -113,6 +122,44 @@ class OrderPage extends Component {
    this.getOrderDetails(this.state.orderId);
  }

+  handleWebln = (data) => {


The same concept could be applied here, so we can await the getWebln function call.

Reckless-Satoshi · 2022-08-22T16:11:52Z

frontend/src/components/OrderPage.js

+        } else {
+          this.setState({ waitingWebNL: false });
+        }
+      });


These conditions exactly match the rol+status that is expected to lock an invoice.
https://github.com/Reckless-Satoshi/robosats/blob/67a542cf31d36933a0bbb5bb1832110ba0070e12/api/models.py#L272-L279
The use of data.bond_invoice and escrow_invoice is also correct.

Reckless-Satoshi · 2022-08-22T16:17:54Z

frontend/static/locales/en.json

@@ -300,6 +300,9 @@
    "This order has been cancelled collaborativelly":"This order has been cancelled collaboratively",
    "This order is not available":"This order is not available",
    "The Robotic Satoshis working in the warehouse did not understand you. Please, fill a Bug Issue in Github https://github.com/reckless-satoshi/robosats/issues":"The Robotic Satoshis working in the warehouse did not understand you. Please, fill a Bug Issue in Github https://github.com/reckless-satoshi/robosats/issues",
+    "WebNL Payment": "WebNL Payment",


Just small typo WebNL -> WebLN (happens in every translation file and javascript source)

KoalaSat · 2022-08-24T19:42:05Z

frontend/src/components/OrderPage.js

+    this.setState({openWebNLDialog: false});
+  }
+
+  webNLDialog =() =>{


Yes I noticed yesterday and I tried to change it everywhere, on the last version of this PR all NL typos should be fixed

Reckless-Satoshi · 2022-08-23T23:11:14Z

frontend/src/components/OrderPage.js

+            {this.state.waitingWebln ? 
+              <>
+                <CircularProgress size={16} thickness={5} style={{ marginRight: 10 }}/>
+                {data.is_buyer ? t("Invoice not received, please check your WebLN wallet.") : t("Payment not received, please check your WebLN wallet.")} 


data.is_buyer does not exist. Therefore the app crashes when creating a maker / buy order. It should be replaced with this.state.is_buyer

Reckless-Satoshi · 2022-08-23T23:17:29Z

frontend/src/components/HomePage.js

+      getWebln()
+        .then((webln) => {
+          this.setState({ weblnEnabled: webln !== undefined })
+        });


This is probably not the best location to introduce the webln enabling routine. In case webln is not enabled, it will keep checking everytime setAppState is called (that's very often!).

I tested to directly define the state variable as

weblnEnabled: getWebln().then((webln) => {webln !== undefined })

However webln enabling tends to fail the first few times. On componentDidMount does also not work for me. Ideas?

componentDidMount() { getWebln() .then((webln) => { this.setState({ weblnEnabled: webln !== undefined }) }); };

Ok on that case let's keep it on the component using it (just the rewards), I move it there it was more convenient for future uses, anyways with the implementation of typescripts eventually it might be created a Context for this one-shot global data.

Reckless-Satoshi · 2022-08-23T23:18:50Z

frontend/src/components/OrderPage.js

+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.handleCloseWeblnDialog} autoFocus>{t("Go back")}</Button>


"Done" might be more appropriate than "Go back" when the text is "You can close now your WebLN wallet popup."

Reckless-Satoshi · 2022-08-23T23:36:55Z

frontend/src/components/OrderPage.js

+          this.setState({ waitingWebln: true, openWeblnDialog: true});
+        } else if (data.is_buyer & (data.status == 6 || data.status == 8 )) {
+          webln.makeInvoice(data.amount).then((invoice) => {
+            this.sendWeblnInvoice(invoice)


Submitting a payout invoice as a buyer. I get this error immediately after clicking the

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id') at OrderPage.eval [as sendWeblnInvoice] (OrderPage.js:216:61)

In case the user rejects the creation of the invoice ("Cancel" button in Aldy) the "User Rejected" response could be used to close the WebLN Dialog.

Pop up with the spinner also stays open when the invoice is successfully submitted and the order moves to the next state.

I think a catch will do the trick, but I can't confirm

I assume you cannot test it since this feature can only be tested on mainnet. While it is a bit of a hassle, it possible to test the submission of the invoice payout on the mainnet platform by taking your own order with another Robot. After the escrow is locked (20K Sats), you can collaboratively cancel to unlock every hodl invoice.

Reckless-Satoshi · 2022-08-23T23:40:07Z

frontend/src/components/OrderPage.js

+        'invoice': invoice,
+      }),
+    };
+    fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)


this.props.data.id -> this.state.orderId
invoice': invoice, -> invoice': invoice.paymentRequest, ?

Invoice submission as buyer works with these fixes.

Reckless-Satoshi · 2022-08-23T23:47:59Z

frontend/src/components/OrderPage.js

+          webln.sendPayment(data.escrow_invoice);
+          this.setState({ waitingWebln: true, openWeblnDialog: true});
+        } else if (data.is_buyer & (data.status == 6 || data.status == 8 )) {
+          webln.makeInvoice(data.amount).then((invoice) => {


data.amount is the amount of fiat. I believe we want to use data.trade_satoshis .Otherwise the invoice is rejected by the backend for having the wrong amount of Sats.

KoalaSat · 2022-08-24T19:42:05Z

frontend/src/components/OrderPage.js

+    this.setState({openWebNLDialog: false});
+  }
+
+  webNLDialog =() =>{


Yes I noticed yesterday and I tried to change it everywhere, on the last version of this PR all NL typos should be fixed

KoalaSat · 2022-08-24T20:53:11Z

Everything ready! thanks for the feedback @Reckless-Satoshi @fernandoporazzi

Reckless-Satoshi · 2022-08-24T23:08:54Z

frontend/src/components/OrderPage.js

+                {this.state.is_buyer ? t("Invoice not received, please check your WebLN wallet.") : t("Payment not received, please check your WebLN wallet.")} 
+              </> 
+              : <>
+                  {t("You can close now your WebLN wallet popup.")}


To highlight the barely noticeable change in the dialog when the bond is locked, after CircularProgress spinner is gone we could place a green checkmark

import CheckIcon from '@mui/icons-material/Check'; ... <CheckIcon color="success"/> {t("You can close now your WebLN wallet popup.")} ...

Reckless-Satoshi · 2022-08-24T23:24:29Z

frontend/src/components/OrderPage.js

+      webln.sendPayment(data.escrow_invoice);
+      this.setState({ waitingWebln: true, openWeblnDialog: true});
+    } else if (data.is_buyer & (data.status == 6 || data.status == 8 )) {
+      webln.makeInvoice(data.trade_satoshis)


Move this.setState({ waitingWebln: true, openWeblnDialog: true}); here

Reckless-Satoshi · 2022-08-24T23:25:06Z

frontend/src/components/OrderPage.js

+      webln.makeInvoice(data.trade_satoshis)
+        .then((invoice) => {
+          if (invoice) {
+            this.sendWeblnInvoice(invoice.paymentRequest);


Remove this.setState({ waitingWebln: true, openWeblnDialog: true}); from here. The Dialog must be opened earlier.

Reckless-Satoshi · 2022-08-24T23:27:39Z

frontend/src/components/OrderPage.js

+            this.setState({ waitingWebln: true, openWeblnDialog: true});
+          }
+        }).catch(() => {
+          this.setState({ waitingWebln: false, openWeblnDialog: false });


The catch does not close the dialog if the invoice is successfully submitted and the order advances status. The dialog only closes with this catch when the Alby invoice generation is Canceled.

ON that case we need to set some special conditions here, so the dialog is closed automatically with invoices but keeps open with payment, makes sense.

Reckless-Satoshi · 2022-08-24T23:35:39Z

It's looking ready to be merged! There is only a couple of things to polish with the invoice submission (comments above).

Please @KoalaSat , send a LN invoice for 200K Sats with a long expiration time from a proxy wallet (not your node pubkey)

Thanks a lot @fernandoporazzi for reviewing

KoalaSat · 2022-08-25T07:09:45Z

Last changes applied, thanks for the extra support!

lnbc2m1p3swgpjpp5an5elzvn6r76rhf6m2vx0klz7eu6gqccyak6qcmnndgklj7uqftqdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5q0jmu9wpdww93xg08yqnyv78dfcw66v7d5wtey22r3gdcv6sv05s9qyyssqqcz2yxw3c8jsh9a2z3jtwk3vafwj75muwd6s2qzl55t8ep2jvn5p6h6q7t79jel8hvnpgkhgx8s6wsjllk4c602l6mzdkrml3cgax6gp526kjq

Reckless-Satoshi · 2022-08-25T09:25:52Z

lnbc2m1p3swgpjpp5an5elzvn6r76rhf6m2vx0klz7eu6gqccyak6qcmnndgklj7uqftqdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5q0jmu9wpdww93xg08yqnyv78dfcw66v7d5wtey22r3gdcv6sv05s9qyyssqqcz2yxw3c8jsh9a2z3jtwk3vafwj75muwd6s2qzl55t8ep2jvn5p6h6q7t79jel8hvnpgkhgx8s6wsjllk4c602l6mzdkrml3cgax6gp526kjq

3662393239386161343530323765363265366431643766303565653164383237

* Add WebLN support * Fix Variable Typo * Invoice Generation Signed-off-by: KoalaSat <111684255+KoalaSat@users.noreply.github.com> * Code Review * Second CR * Catch cancelations * Final Review Signed-off-by: KoalaSat <111684255+KoalaSat@users.noreply.github.com>

KoalaSat force-pushed the add-webln-support branch 2 times, most recently from cde3e08 to 959380d Compare August 22, 2022 15:00

KoalaSat commented Aug 22, 2022

View reviewed changes

Add WebLN support

452b255

KoalaSat force-pushed the add-webln-support branch from a9be7b8 to 452b255 Compare August 22, 2022 15:09

KoalaSat marked this pull request as ready for review August 22, 2022 15:10

KoalaSat mentioned this pull request Aug 22, 2022

Add WebLN support #176

Closed

KoalaSat commented Aug 22, 2022

View reviewed changes

KoalaSat added 2 commits August 22, 2022 18:40

Fix Variable Typo

7dccac2

Merge branch 'Reckless-Satoshi:main' into add-webln-support

cb71f49

Reckless-Satoshi force-pushed the main branch from b70bc61 to 6013757 Compare August 22, 2022 17:53

KoalaSat force-pushed the add-webln-support branch from c9e9810 to 1160fb1 Compare August 22, 2022 21:30

Invoice Generation

e3ef5b0

Signed-off-by: KoalaSat <111684255+KoalaSat@users.noreply.github.com>

KoalaSat force-pushed the add-webln-support branch from 2dd915f to e3ef5b0 Compare August 23, 2022 06:51

Reckless-Satoshi force-pushed the main branch from d77d167 to d5c3bcf Compare August 23, 2022 09:29

Reckless-Satoshi self-requested a review August 23, 2022 09:29

Reckless-Satoshi force-pushed the main branch from d5c3bcf to 6ff8df6 Compare August 23, 2022 10:16

fernandoporazzi reviewed Aug 24, 2022

View reviewed changes

Code Review

0381c56

Reckless-Satoshi reviewed Aug 24, 2022

View reviewed changes

KoalaSat commented Aug 24, 2022

View reviewed changes

Second CR

c71cead

KoalaSat force-pushed the add-webln-support branch from 4e7ea5f to c71cead Compare August 24, 2022 20:03

Catch cancelations

4af8ae2

KoalaSat force-pushed the add-webln-support branch from 56d9504 to 4af8ae2 Compare August 24, 2022 20:51

Reckless-Satoshi reviewed Aug 24, 2022

View reviewed changes

Final Review

addcc64

Reckless-Satoshi merged commit 7083423 into RoboSats:main Aug 25, 2022

KoalaSat deleted the add-webln-support branch August 25, 2022 21:16

KoalaSat restored the add-webln-support branch August 25, 2022 21:16

	const handleWeblnInvoiceClicked = (e: any) =>{
	const handleWeblnInvoiceClicked = async (e: any) =>{

Add WebLN support #215

Add WebLN support #215

Conversation

KoalaSat commented Aug 22, 2022 • edited

KoalaSat Aug 22, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reckless-Satoshi commented Aug 22, 2022 • edited

KoalaSat commented Aug 22, 2022 • edited

Reckless-Satoshi commented Aug 22, 2022

KoalaSat commented Aug 22, 2022 • edited

Rewards program

Buyer Invoice

KoalaSat commented Aug 23, 2022

Reckless-Satoshi commented Aug 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KoalaSat Aug 24, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reckless-Satoshi Aug 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KoalaSat Aug 24, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reckless-Satoshi Aug 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KoalaSat commented Aug 24, 2022

Reckless-Satoshi Aug 24, 2022 • edited

Choose a reason for hiding this comment

Reckless-Satoshi Aug 24, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reckless-Satoshi Aug 24, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reckless-Satoshi commented Aug 24, 2022

KoalaSat commented Aug 25, 2022 • edited

Reckless-Satoshi commented Aug 25, 2022

KoalaSat commented Aug 22, 2022 •

edited

KoalaSat Aug 22, 2022 •

edited

Reckless-Satoshi commented Aug 22, 2022 •

edited

KoalaSat commented Aug 22, 2022 •

edited

KoalaSat commented Aug 22, 2022 •

edited

Reckless-Satoshi commented Aug 23, 2022 •

edited

KoalaSat Aug 24, 2022 •

edited

Reckless-Satoshi Aug 23, 2022 •

edited

KoalaSat Aug 24, 2022 •

edited

Reckless-Satoshi Aug 23, 2022 •

edited

Reckless-Satoshi Aug 24, 2022 •

edited

Reckless-Satoshi Aug 24, 2022 •

edited

Reckless-Satoshi Aug 24, 2022 •

edited

KoalaSat commented Aug 25, 2022 •

edited