Damus purple: add "learn more" link in app that leads to damus.io/purple website

[alltheseas]

-add link to damus.io/purple in app
-add landing page

@danieldaquino

related to

subscribe on website via sats #1754

Acceptance criteria

• Hero section and the page follows the style of the Damus Purple views on the app
• Added a rough FAQ section with an interactive accordion
• Added rough copywriting around the benefits section.
• Create CTA at the end with pricing info
• Fill up FAQ with more realistic questions/answers
• Make design responsive and mobile friendly
• Improve some design details (such as making the FAQ section look a bit less rough)
• Add "purple" link to the menu
• Fix compilation error due to missing Japanese strings on the new page
• Integrate Lightning payment flow
• Make "learn more" button scroll down, and change the arrow icon on the link
• Add the subheadline below "Purple" to say "For free speech maximalists"
• Make "Open in Damus" button actually open Damus Purple screen in the app
• Add a bit of animation to add a little "wow" effect (Delegated to Damus Purple landing page minor improvements #1893)
• Optimize lighthouse score (i.e. performance, SEO, accessibility) (Delegated to Damus Purple landing page minor improvements #1893)
• Any other minor improvements or fixes to issues we find (Examples: make html body background color black, Adjust page title, etc) (Delegated to Damus Purple landing page minor improvements #1893)

[danieldaquino]

I will get started on this while I wait for the sandbox environment

[danieldaquino]

Update: So far I was able to make a rough draft of this landing page. Definitely not ready yet, but some good progress was made today!

• Hero section and the page follows the style of the Damus Purple views on the app
• Added a rough FAQ section with an interactive accordion
• Added rough copywriting around the benefits section.
• Need to improve the accordion styling. It does not look very good
• Still need to add a bit of animation on the hero section to add a little "wow" effect
• Need to fill up FAQ with actual questions/answers
• Design still needs to be made responsive and mobile friendly
• CTA at the end still needs to be edited.
• Lightning payment needs to be integrated

@jb55, @alltheseas, please let me know if you have ideas/suggestions!

[alltheseas]

90%+ traffic will be mobile. Looks like that's your last point. I'll provide comments when I can see the content on mobile 😅

[jb55]

On Sat, Dec 30, 2023 at 12:59:54AM -0800, Daniel D’Aquino wrote: **Update:** So far I was able to make a rough draft of this landing page. Definitely not ready yet, but some good progress was made today!

looking good!

[danieldaquino]

Status update!

Previously in this ticket:

• Hero section and the page follows the style of the Damus Purple views on the app
• Added a rough FAQ section with an interactive accordion
• Added rough copywriting around the benefits section.

Today:

• Create CTA at the end with pricing info
• Fill up FAQ with more realistic questions/answers
• Make design responsive and mobile friendly
• Improve some design details (such as making the FAQ section look a bit less rough)
• Add "purple" link to the menu
• Fix compilation error due to missing Japanese strings on the new page

Draft preview: https://659619afa475881f5b888d57--legendary-dango-acb4d9.netlify.app/purple

What is left:

• Integrate Lightning payment flow
• Make "Open in Damus" button actually open Damus Purple screen in the app
• Add a bit of animation to add a little "wow" effect
• Optimize lighthouse score (i.e. performance, SEO, accessibility)
• Any other minor improvements or fixes to issues we find (Examples: make html body background color black, Adjust page title, etc)

[danieldaquino]

Please feel free to critique or mention any issues that I might have missed in my list. I will keep working on what is missing.

Thanks!

[alltheseas]

Website works on mobile! It seems legible for my eyes that have a tough time with small text.

When I click on the "Learn more" button the same page opens in a new tab. Maybe tapping this button can simply scroll down to the next section.

Should we add a sub-header below the PURPLE title, and above the Subscribe button?

e.g. PURPLE
"For free speech maximalists" or something to get people excited

[danieldaquino]

When I click on the "Learn more" button the same page opens in a new tab. Maybe tapping this button can simply scroll down to the next section.

Good point, I need to hook up that button. Scroll down is a good action for it. I also need to remove the up-right arrow as it usually signifies "Open in a new tab"

Should we add a sub-header below the PURPLE title, and above the Subscribe button?
e.g. PURPLE
"For free speech maximalists" or something to get people excited

I like that! I will add it in.

I will build the acceptance criteria on the top with updated items

[danieldaquino]

Patches!

Changes since my last update here

• Integrate Lightning payment flow
• Create new branch and backup the old one
• Make HTML structure to be step by step
• Add step 1 to be "choose plan"
• Add step 2 to be "verify npub"
• Add step 3 to be "Lightning payment"
• Make product list show up
• Add env var that makes product only 1 sat
• Make a verification QR code appear with a url containing a unique checkout UUID
• Make this QR code open a sheet in the Damus app
• Make the sheet have a button saying "verify npub"
• Make that button trigger a "Account verified" on the website
• Lightning payment
• LN flow: make "Continue in app" do something
• Lightning flow: Copy and paste invoice
• LN flow: Only create an account after invoice is paid
• Make "learn more" button scroll down, and change the arrow icon on the link
• Add the subheadline below "Purple" to say "For free speech maximalists"
• Make "Open in Damus" button actually open Damus Purple screen in the app
• Lightning flow: Allow choice between year and month options

Big payment flow change

I changed the checkout flow to include npub authentication. I did this because I noticed the previous flows had the potential of causing lots of confusion and dissatisfaction.

Why not the previous gift-able flow

1. Sudden purple activation on the app (if someone else gifts it without saying anything) might feel weird and intrusive to some people, causing confusion
2. In the current flow, there is no automated way of knowing who gave them the gift. This might cause confusion
3. Flow might completely fail if the user is running an incompatible version of Damus, or no Damus at all, leading to loss of money and users wanting a refund

We can make a flow for gifting later, but it needs extra care to avoid confusion

Testing (and new demo)

Due to changes being present in 3 different repos, I will post a video of my latest test/demo here: https://drive.google.com/file/d/1FGBkyFFWVAut12EVvbsoeW7C2jfLqfP4/view?usp=sharing

The Patches

1. Backend server: https://groups.google.com/a/damus.io/g/patches/c/tH-cdvr6vZc
2. App: https://groups.google.com/a/damus.io/g/patches/c/Qogc9vCT3cE
3. Website: https://groups.google.com/a/damus.io/g/patches/c/PkMBd2_XPFw

Other notes

@jb55, @alltheseas, please let me know if I am missing anything, there is a lot going on here 😂

Thanks!

[alltheseas]

From Jan 15 discussion:

• Investigate how time out happens
• Design as to prevent time out
• Investigate how does LNSocket crash server
• Add support at damus email on purple website

[danieldaquino]

Thanks @alltheseas for that list! I will complement your list with some other notes I have been taking while developing this

• Better safeguards against unauthorized use of damus:purple links
• Lightning flow: Fix invoice monitoring connection issues when the server is restarted (fails decryption) (Will sent me an email explaining that LNSockets does not support concurrent requests, which explains this issue)
• LN flow: Tweak LN waitinvoice parameters for more efficient connection with LN node (Will mentioned this a few meetings ago)
• LN flow: Handle edge cases better (e.g. How does the UI display an expired invoice? How does the UI handle when the server is having issues? Does it displays errors nicely?)
• Add a bit more animation on the landing page to add a little "wow" effect
• Optimize lighthouse score on the landing page (i.e. performance, SEO, accessibility)
• Any other minor improvements or fixes to issues we find
• Lightning flow: Better integrate lightning expiry into the code as a mechanism to prevent stale/unmonitored invoices and improve robustness

CC @jb55

[danieldaquino]

@jb55, I am making the changes requested:

• The change into using LNSocket like fetch (Open a new connection each time it talks to it) seems to be ok
• I have a draft for the change where I am making the client-side do most of the heavy lifting when polling for invoice status. I am trying to use lnmessage for that since it integrates better with the website's JS environment. However, I am getting connection errors.

@jb55, are there any logs on your end of the LN node that might point to the reason why connection is failing?

[danieldaquino]

I tried connecting to:

• wss://ln.damus.io:9735
• ws://ln.damus.io:9735

The socket seems to close as soon as it is opened, with no data exchanged

[danieldaquino]

I will try using LNSocket on the client-side instead of LNMessage. LNMessage integrates better with the website's JS setup, but I am not sure how well that package is maintained.

I will provide an update very soon

[jb55]

On Mon, Jan 15, 2024 at 05:25:42PM -0800, Daniel D’Aquino wrote: I tried connecting to: - wss://ln.damus.io:9735 - ws://ln.damus.io:9735 The socket seems to close as soon as it is opened, with no data exchanged

You have to use the websockets port on the web: ws://ln.damus.io:8324 In an https context ws:// is not allowed, so you have to use a lightning-websockets proxy: wss://proxy.lnlink.org/ln.damus.io

[danieldaquino]

Thank you @jb55! I will try those and report back!

[danieldaquino]

@jb55, it worked!

I had to use a workaround in LNMessage (Seems like the way they format proxied URLs is incorrect). I will see if I can open a quick ticket for this on that repo.

But the workaround works, I was able to go through the overall flow.

There is one issue with displaying the invoice that applies only on iOS, I will take a quick look at that

[danieldaquino]

I will see if I can open a quick ticket for this on that repo.

Done: lnbc1QWFyb24/lnmessage#52

There is one issue with displaying the invoice that applies only on iOS, I will take a quick look at that

Found out the cause, and fixed it. 👍

I will test the flow 5 times to check robustness

[danieldaquino]

Testing complete , I also cleaned up my commits, prepared the patches, and sent them via email.

• Website changes: https://groups.google.com/a/damus.io/g/patches/c/BefJ7Ji3afw
• Backend changes: https://groups.google.com/a/damus.io/g/patches/c/rmiThE5XjLM

@jb55, please let me know if this looks good, or if any further changes are needed. Thanks!

[danieldaquino]

Created a placeholder task where we can organize further hardening work on the LN flow: #1892

[danieldaquino]

The last patch of this ticket was pushed. Thanks @jb55!

I documented follow-up work into two tickets:

• LN payment flow hardening #1892
• Damus Purple landing page minor improvements #1893

I believe all items in the acceptance criteria and all items discussed are covered in the patches pushed or the tickets mentioned above.

Closing ticket. @alltheseas, @jb55, please feel free to reopen if I missed anything. Thanks!