Invoice: Improve expiry display

[myxmaster]

Description

Instead of displaying the initially defined time until expiration, the remaining time is now displayed in a human readable form. Also made the layout more consistent by putting labels on the left and values on the right.

Before:

This fixes #1509.

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (c-lightning-REST)
• Core Lightning (Spark)
• Eclair
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the Zeus Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[shubhamkmr04]

utACK

[shubhamkmr04]

We are getting expiration time as 0 seconds in LNDHub. I am using Alby instance in this one

[kaloudis]

We are getting expiration time as 0 seconds in LNDHub. I am using Alby instance in this one

Yeah, as suspected we need to test this against all the backends

[myxmaster]

@shubhamkmr04 Kind of fixing this blindly, please check if it's working now.

[kaloudis]

@myxmaster can you fix the conflicts here?

This PR will pave the way for this to work with LNDHub and all the other backends #1652

[myxmaster]

It works now... Maybe something was changed?

[kaloudis]

Instead of saying 4 days, 2 hours and it refers to the time to expiration and not the absolute time it is valid for, perhaps it should say 4 days, 2 hours from now

[myxmaster]

I understand you want to make clear that it is the time as of now and not as of invoice creation time.

The problem is, I can already see trouble for german translation with your suggestion, plus I like to have 'values only' on the right (its very clear structured / easy to read).

What about making it clear on the left, where we have text already:
Time until expiry 4 days, 2 hours

Edit:
Or maybe even better: lets put an explainer behind "Expiration"!

[myxmaster]

• Renamed "Expiration" --> "Time until Expiry" as discussed with @kaloudis
• Improved activity layout by putting expiry time to the bottom (lines up with left side now) and displaying memo in italic (easier to distinguish from other context)
  

Invoice details displays both now, "Time until Expiry" and "Original Expiration":

As you can see in the screenshot above, there is just one last issue with the calculation of expiry time: 53 years is not correct :) This happens when using LNDhub (via lnbits); LND, CLN, getAlby is fine.
I think this is because of this (from PR #1652):

zeus/models/Invoice.ts

Line 240 in ad64b07

if (expiry && new BigNumber(expiry).gte(1600000000)) {

[kaloudis]

@myxmaster what's the raw formatting of that timestamp above?

[myxmaster]

A fresh lnbits invoice created from Zeus while connected via LNDhub extension has "expiry = 1698222471".
When I create an invoice in the web interface of legend.lnbits.com, and scan it with Zeus, it displays "600".

Current unix time is ~1698222471, that is the problem (https://www.unixtimestamp.com/). So we have to make clear cases for which Backends use unix time and which expiry in seconds.

[myxmaster]

We now take the expiry and timestamp from the bolt11 payment request as the format is standardized - with one exception: Core Lightning (expiry is missing in payment request here).

Now displaying original expiration also as time span instead of timestamp:

[kaloudis]

what enhancements have been made here that make it faster than the original library?

[myxmaster]

From the docs of the lib:

It doesn't recover payee from signature, doesn't check signature, doesn't parse fallback addresses and doesn't do any encoding

Since the signature wasn't checked before, this is no security downgrade. And checking the signature worsens the performance so much (about 20 times) that the usability would not be acceptable.

Furthermore we removed almost all the parts we don't need for this PR.

[kaloudis]

Looking good, tested on LND and CLN so far.

Do we need to display expiry on paid invoices?

[kaloudis]

Furthermore, on an expired request, maybe we remove the third line and replace the title with 'Expired request' or 'Expired invoice'?

[shubhamkmr04]

Tested for LND and LNDHub in both iOS and Android. Working fine.

[myxmaster]

Good ideas, done. Displaying original expiry for paid invoices works for LND and CLN but does not work with lndhub.

[kaloudis]

tACK