feat: APP-366 account orders

[blushi]

Description

https://regennetwork.atlassian.net/browse/APP-366

---

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

• provided a link to the relevant issue or specification
• provided instructions on how to test
• reviewed "Files changed" and left comments if necessary
• confirmed all CI checks have passed

How to test

From https://deploy-preview-2566--regen-marketplace.netlify.app/

1. First, login and buy some credits with fiat and with crypto (older crypto orders below a certain block height are not available on staging because of state pruning on our redwood node, this won't be the case on mainnet since we use the archive node where we should be able to see old crypto orders)
2. Check out "my orders" and verify orders info there

NB: credit card info is missing for now, I've realized that we need some server update for that, which I'm working on, but the rest can still be tested in the mean time. DONE

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

• confirmed all author checklist items have been addressed
• reviewed code correctness and readability
• verified React components follow DRY principles
• reviewed documentation is accurate
• reviewed tests
• manually tested (if applicable)

[netlify]

✅ Deploy Preview for terrasos ready!

Name	Link
🔨 Latest commit	e6c3ce3
🔍 Latest deploy log	https://app.netlify.com/sites/terrasos/deploys/677bf260458b41000889a252
😎 Deploy Preview	https://deploy-preview-2566--terrasos.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	e6c3ce3
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/677bf260b40fe5000810db61
😎 Deploy Preview	https://deploy-preview-2566--regen-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[blushi]

@erikalogie @S4mmyb see testing instructions

[erikalogie]

Some styling and other comments:

On another notes, do we need a task to have the name of the user account change to the name that I put in the 2nd step of the buy flow?

[blushi]

On another notes, do we need a task to have the name of the user account change to the name that I put in the 2nd step of the buy flow?

We have one: https://regennetwork.atlassian.net/browse/APP-441

[blushi]

@erikalogie you can have another look, I've also added support for displayed credit card info.

[erikalogie]

A few more small alignment things:

[blushi]

@erikalogie how much should I increase the space between image and project name/id on mobile? there's a space of 10px as on figma

[erikalogie]

@erikalogie how much should I increase the space between image and title on mobile? there's a space of 10px as on figma

on Figma it is 20px between the two sections, you can see here, and same on mobile and desktop:

[blushi]

@erikalogie I'm asking about this:

[erikalogie]

@erikalogie I'm asking about this:

Oh maybe that part will look fine if the space below is changed. So leave it for now.

[blushi]

@erikalogie you can have another look
Although we need to wait on https://github.com/regen-network/regen-server/pull/517 to be merged before testing the stripe receipt, that I've implemented (not yet pushed)
I'll create a follow-up task to implement the custom receipt popup for crypto purchases

[erikalogie]

Everything looks good, just let me know when the server PR is merged and I can test the stripe receipt button

[blushi]

Everything looks good, just let me know when the server PR is merged and I can test the stripe receipt button

@erikalogie you can test this now

[erikalogie]

LGTM! Nice work here

[blushi]

@r41ph I've added some new stuff since your initial approval, so let me know if you wanna have another look before I merge this, thanks!

[r41ph]

@blushi the code looks good to me. A couple of things:

• There are tests failing inOrder.test.tsx and CreditsAmount.test.tsx (I've fixed some test in CreditsAmount here: fix APP 407 inputs logic #2572 after the latest changes and think we can probably ignore those for now)
• The buttons on mobile should go in the same line and there is some spacing differences in the order details as well as per figma designs (https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=1229-75403&node-type=frame&m=dev):

Storybook

Figma

[blushi]

@blushi the code looks good to me. A couple of things:

• There are tests failing inOrder.test.tsx and CreditsAmount.test.tsx (I've fixed some test in CreditsAmount here: fix APP 407 inputs logic #2572 after the latest changes and think we can probably ignore those for now)
• The buttons on mobile should go in the same line and there is some spacing differences in the order details as well as per figma designs (https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=1229-75403&node-type=frame&m=dev):

Storybook

Figma

I've fixed the Order tests and spacing issues. Could you have another look? @r41ph
For mobile devices with width > 370px, the buttons get displayed on the same line as in the designs.

Else (like it's the case on your screen shot), they wrap and this prevents overflowing on even smaller screens, which would look bad:

We would need to set a lower horizontal padding for the buttons which would look quite bad as well IMO:

Thoughts @erikalogie ?

[erikalogie]

Thoughts @erikalogie ?

I think the way you've done it looks good