Crypto Payment

[FSM1]

closes #1782

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1844.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7c66i4objd8v4ckqg1g.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1844.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7c66isobjd8v4ckqge0.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1844.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7c66jcobjd8v4ckqgig.

[Tbaut]

Went through the code, and played a bit, looks great already! Left a couple comments.

[tanmoyAtb]

Overall implementation looks great and well connected.
Left some comments. It would be great to have the loaders in place.

Some of the UI could use some spacing in between,
between QR code and text,

below the select cryptocurrency label,

The dark mode and mobile views need some tweaks.

One thing that happens,
Once I initialize a crypto payment, if I go through the select plan again, I get the Failed to create a charge error. We should probably disable plan change while an invoice is pending. Ok to have this in scope of the previous invoices issue #1829

[Tbaut]

I was on the Plan 2 out of 3 (monthy payment), and to test the crypto payment I click on the plan 3.
Now I never have the option to pay annually. Isn't that an issue?

Billing-weird-2.mp4

[Tbaut]

Yeah there's something very weird, the plan 3 doesn't allow the annual/monthly payment 🤷 The plan 2 does.

annual-missing.mp4

[Tbaut]

Once I initialize a crypto payment, if I go through the select plan again, I get the Failed to create a charge error. We should probably disable plan change while an invoice is pending. Ok to have this in scope of the previous invoices issue #1829

I ran into this too when I clicked on "go back" as I was on the crypto payment slide

[Tbaut]

The dark view looks good, but the mobile view modal is to wide and on iphone 11 pro, or Galaxy S20 (pretty recent phone I believe) it's not scaling well:

[Tbaut]

A couple nits that the linter doesn't figure out 🙄

[FSM1]

The dark view looks good, but the mobile view modal is to wide and on iphone 11 pro, or Galaxy S20 (pretty recent phone I believe) it's not scaling well

I suspect this only happens when the viewport size changes during rendering. At least it seems like it is fine when the page is rendered with mobile emulation on from the start:

[FSM1]

I was on the Plan 2 out of 3 (monthy payment), and to test the crypto payment I click on the plan 3. Now I never have the option to pay annually. Isn't that an issue?

This is merely a side-effect of the daily/annual selector, since the Premium plan does not have a daily price, which is what is being looked for by the code... Once we revert back to the annual period this should return to normal.

[Tbaut]

suspect this only happens when the viewport size changes during rendering. At least it seems like it is fine when the page is rendered with mobile emulation on from the start:

I just tried, and it's the same, try with the Galaxy S20 non ultra, you'll see

[FSM1]

suspect this only happens when the viewport size changes during rendering. At least it seems like it is fine when the page is rendered with mobile emulation on from the start:

I just tried, and it's the same, try with the Galaxy S20 non ultra, you'll see

Ahhh great, brave removed a bunch of devices from their emulation. Either case, I seem to have figured out what was causing these glitches and resolved...

[Tbaut]

Oops the cross isn't happy with that last change, and also the clock for the remaining time I think is messed up.

[FSM1]

Oops the cross isn't happy with that last change, and also the clock for the remaining time I think is messed up. ![image]

I think I have finally nailed down the styling weirdness... @Tbaut would appreciate your keen eye on this one 🙏🏼

[Tbaut]

Absolutely, you nailed it and I couldn't find any other issue!