Add subscription/recurring donation option on Damus website

[alltheseas]

user story

As a satisfied Damus user who would like to support the Damus team, I would like a way to "subscribe" on the Damus website with sats, so that I can support the Damus team in app maintenance & development.

acceptance criteria

1. On the Damus.io website, I can find and click on a "subscribe" button
2. I can see subscribe, and see fiat amountpreset subscription amounts: $5, $10, $20, $30, $50, $100 in both USD, and sats (see satsperusd https://bitbo.io/)
3. I can set a custom subscription amount
4. I can optionally provide my npub , or choose to donate anonymously
5. For Damus internal records it should be clear that the donation originated from website subscriptions

future consideration/how might we

Subscribers could get access to subscriber premium features #659

context

One time donation capability exists #1753

[jb55]

Isn't this just Damus purple? Most people will want to subscribe in app.

[alltheseas]

Isn't this just Damus purple?

Damus purple can be a follow on (e.g. multi-account log-ins, long-term storage on damus relay etc). We can add something simpler than Damus purple #659: There can simply be a donation subscription option. My gut feel is that folks would be happy to subscribe to this without purple.

If we want to go the previous zap splits route, we could simply re-add the ⭐️ to Damus donators/subscribers as a way to acknowledge and thank subscribers.

Most people will want to subscribe in app.

You are probably right. Apple will want their cut in app. How might we process sats in app, and pay the apple toll in fiat?

Signal has both in app, and website subscription options.

https://www.signal.org/donate/

[danieldaquino]

@jb55, is this the library you mentioned that allows us to integrate lightning payments into the web page?

https://github.com/jb55/lnsocket

[jb55]

On Fri, Dec 29, 2023 at 09:07:14PM -0800, Daniel D’Aquino wrote: @jb55, is this the library you mentioned that allows us to integrate lightning payments into the web page? https://github.com/jb55/lnsocket

yup, a better project to look at is this one as it provides an example of how to do it: http://lnlink.org/?d=ASED88EIzNU2uFJoQfClxYISu55lhKHrSTCA58HMNPgtrXECbW9uYWQuZW5kcG9pbnQuamI1NS5jb206ODMyNAADXwCvw0xBgoUUZ98_2ao7Z8uX3zTo8UxJfqSxHfjqW2cNPTYmbWV0aG9kPWludm9pY2V8bWV0aG9kPXdhaXRpbnZvaWNlJnBuYW1lbGFiZWxebG5saW5rLSZyYXRlPTIwBERlYXRoIFN0YXIABQAAAGQGQW4gb2JqZWN0IG9mIHVuZmF0aG9tYWJsZSBwb3dlci4gUGxlYXNlIGVudGVyIHlvdXIgYWRkcmVzcyBmb3IgZGVsaXZlcnkuAAcCCGh0dHBzOi8vdXBsb2FkLndpa2ltZWRpYS5vcmcvd2lraXBlZGlhL2VuL2YvZjkvRGVhdGhfc3RhcjEucG5nAA%3D%3D&edit=1 https://github.com/jb55/cln-payment-links entirely of the code is here: http://lnlink.org/index.js?v=27

[danieldaquino]

Thank you @jb55. Quick question on LNSocket, do you know if anyone was able to make it work on an ES5+ javascript/typescript environment (e.g. React)?

I tried several strategies for importing it, but no matter how I try to import it, I get this error:

./node_modules/lnsocket/dist/js/lnsocket.js:46:0
Module not found: Can't resolve 'net'

Looking at LNSocket source code, I believe it is being caused the WebSocket object being undefined from that context (for some reason), and the initializer believing it is inside a node.js context.

I saw this issue in LNSocket: jb55/lnsocket#4. Do you know if there is an easy way for us to get around this issue (perhaps using the WASM module?), or would you recommend me to try using https://github.com/aaronbarnardsound/lnmessage (which seems to be a fork of LNSocket made for this type of javascript environment)

[danieldaquino]

@jb55, nevermind, I found a way that seems to be partially working!

I found a way to import it vanilla JS style (direct <script> tag) and call it from React. I am getting a different error, I will look into it

[jb55]

you could try using lnmessage, it's basically the same library. lnsocket is just a plain JS library without any fancy features.

[danieldaquino]

@jb55, no worries, I was able to make the bolt11 invoice generation work with pure lnsocket by importing the code plain JS style (<script> tag), and using it inside of React.

I am currently working on the payment verification with the server. I am researching for the best way to do it, and I am thinking of the following:

1. Moving the invoice generation code from the client-side page to Purple server and use lnsocket there
2. Use the waitinvoice rpc from the server-side (similar to how lnlink is using it through the wait_for_invoice function) to wait for payment confirmation (or failure).
3. Use a Rest API or websockets to communicate between the client and server side and sync the state of payment and to communicate the bolt11 invoice.

If I generate the bolt11 invoice from the server side, and use the waitinvoice rpc call (using lnsocket on both instances) would that be considered a secure lightning payment verification? (Sorry if this is a newbie lightning/lnsocket question)

[danieldaquino]

Sent a draft of the server code changes via email to double-check if my approach seems correct: https://groups.google.com/a/damus.io/g/patches/c/liM3fBWcZG0.

Please let me know if you think this is on the right track, or if you have suggestions! Thanks!

[jb55]

On Fri, Jan 05, 2024 at 06:21:06PM -0800, Daniel D’Aquino wrote: @jb55, no worries, I was able to make the bolt11 invoice generation work with pure lnsocket by importing the code plain JS style (`<script>` tag), and using it inside of React. I am currently working on the payment verification with the server. I am researching for the best way to do it, and I am thinking of the following: 1. Moving the invoice generation code from the client-side page to Purple server and use lnsocket there 2. Use the `waitinvoice` rpc from the server-side (similar to how lnlink is using it through the `wait_for_invoice` function) to wait for payment confirmation (or failure).

server side works for me.

3. Use a Rest API or websockets to communicate between the client and server side and sync the state of payment and to communicate the bolt11 invoice.

we can do this all with lnsocket (which is the lightning protocol over websockets).

If I generate the bolt11 invoice from the server side, and use the `waitinvoice` rpc call _(using lnsocket on both instances)_ would that be considered a secure lightning payment verification? _(Sorry if this is a newbie lightning/lnsocket question)_

Yes, the lightning node will return a result on the waitinvoice call only when the invoice is successfully paid. The most important thing is to associate an invoice ids with the account, so that we can have a record of all the payments, failed or succeeded. We should also include their npub in the description, just so I can pull it out on the lightning node side if I ever need to do reporting/accounting.

[danieldaquino]

Updates for today:

1. Organized my commits on the server-side changes
2. Added unit tests to check various important aspects of the invoicing flow.
3. Fixed several issues with the draft arising from test failures
4. Created part of the UI flow (with design) on the checkout page. The UX flow is as follows:
   1. Enter npub
   2. The web page will pull up the user's username and picture, as a confirmation mechanism
   3. User presses "pay", which generates the invoice and shows the QR code and lightning link

I am getting close to being able to film a video demo, but I need to work on it a bit more.

I am making the UI and testing it with the server simultaneously. Currently, I am debugging an error I am getting with the Websocket connection during invoice generation.

[danieldaquino]

@jb55, I am having an issue with the node.js version of LNSocket

When I make the first connection to the LN node (connect_and_init specifically), that function times out trying to connect to the LN node.

This timeout seems to only happen on the Node.js version of LNSocket. The browser version seems to work well. Here is what I already checked:

1. I checked that the nodeid and address arguments being passed are exactly the same as your working LNLink example
2. With a debugger, I checked that none of the 3 Websocket event handlers from handle_connect are being called. After 15 seconds, the timer just calls setTimeout
3. My connection code is very similar to the LNLink implementation:

const LNSocket = require('lnsocket')

(...)

class PurpleInvoiceManager {

  (...)

  // Connects and initializes this invoice manager
  async connect_and_init() {
    this.ln = await LNSocket()
    this.ln.genkey()
    console.log(`Connecting to LN node. Node ID: ${this.nodeid}, Address: ${this.address};`)
    await this.ln.connect_and_init(this.nodeid, this.address)
    // Purge old invoices every 10 minutes
    if (PURGE_OLD_INVOICES) {
      this.purging_interval_timer = setInterval(() => this.purge_old_invoices(), 10 * 60 * 1000)
    }
    this.continue_monitoring_invoices()
  }
  
  (...)

}

Have you encountered this type of issue before, and do you happen to know possible causes for this (Perhaps a missing init call, parameter, or dependency)?

[danieldaquino]

@jb55, I believe I found the root cause. There seems to be an inconsistency in API between the browser version and Node.js version of LNSocket. They seem to parse Websocket URLs differently

I removed the ws:// prefix from the url, and the timeout no longer occurs.

[danieldaquino]

However, sending RPC commands to the LN node does not seem to be working on the node.js version

Debugging reveals that it stays stuck on recv functions. I debugged it all the way down to here:

LNSocket.prototype.queue_recv = function() {
		let self = this
		return new Promise((resolve, reject) => {
			const checker = setInterval(() => {
				const val = self.queue.shift()
				if (val) {
					clearInterval(checker)
					resolve(val)
				} else if (!self.connected) {
					clearInterval(checker)
					reject()
				}
			}, 5);
		})
	}

It seems to be checking and checking, but val stays undefined.

[jb55]

On Wed, Jan 10, 2024 at 12:37:21PM -0800, Daniel D’Aquino wrote: However, sending RPC commands to the LN node does not seem to be working on the node.js version

Can you send me the connection parameters and code you are using so I can see what's up? The node lnsocket powers my lightning address and is quite stable, so it's likely its just some small issue.

[danieldaquino]

Can you send me the connection parameters and code you are using so I
can see what's up?

Sure, thank you!

I sent the current code draft, as well as my .env parameters via email to [email protected] (https://groups.google.com/a/damus.io/g/patches/c/b4vRvTklTuY)

Please let me know if you need more info!

[alltheseas]

Suggest to add a copy "Lightning Invoice" button that copies alphanumeric invoice string

[danieldaquino]

I will continue conversation about this on #1827

[danieldaquino]

The patches for the initial Lightning payment flow were pushed in #1827.

@alltheseas, since the work pushed deviated a bit from what is written in the description, can you please check if this ticket can be closed, or if we need to open other tickets to address remaining items here?

[alltheseas]

Thank you - I just revised. Is there a USD/fiat equivalent displayed in the subscribe to Purple flow?

[danieldaquino]

Thank you - I just revised. Is there a USD/fiat equivalent displayed in the subscribe to Purple flow?

@alltheseas, not yet, but I can add one. Would it be a good idea to add it to #1893 and close this ticket?

[alltheseas]

Yes, added

[danieldaquino]

Thanks @alltheseas!