Donation page UI Improvements

[mosaeedi]

On the donation page, we recently added an option to donate with Stellar,
We also need to tell users about minimum donations to make the donation eligible for QF matching and GIVbacks.

It's getting more cluttered and different elements are not working perfectly with each other.

I made these adjustments to enhance the overall user experience during the final step of the donation process.

I've added all the necessary info on Figma to make it as clear as possible, please take a look and in case you find any issues, reach out to me.

Here is the link to Figma.

Regular donation

Stellar donation

CC: @laurenluz

[laurenluz]

@mosaeedi these are great just one note for devs:

• please consider if the project is GIVbacks eligible (not just "verified") or not
• consider if the projects is QF eligible or not
• for the copy on the "eligible" boxes for QF and GIVbacks, please use the variables (I don't know the names ) for "min GIVbacks eligible amount" and "min QF amout", rather than just a hard coded $5 and $1
• for the conditions on knowing when to say if the donation is eligible for QF or GIVbacks, also use the variables instead of hard-coded values

@mohammadranjbarz can you take this one and implement it along w/ the other GIVbacsk related issues - to be live on prod by Sept 16? :)

[mohammadranjbarz]

@laurenluz I'm not so fast on FE and not familiar with these pages, so I think I might not deliver it, it's better if some FE developer takes it.
@Meriem-B @MohammadPCh @RamRamez @mateodaza Are you free? can someone pick this to release it on Sept16 ?

[laurenluz]

@RamRamez is working on this today @mohammadranjbarz!

Have we set a variable in the backed for minimum USD value for GIVbacks? Or should we hard code the threshold for GIVbacks for now?

the minimum donation for GIVbacks eligiblity we communicate to the user should be basically $5 USD... but our actual minimum should be $4 USD... so that (for example) if the user makes a $5 donation to a project and gives 10% of it to Giveth... it still counts. And if the USD value of the token they are donating fluctuates a little below $5 it should still count.

So:

• We should tell the user to donate $5 to be eligible for GIVbacks
• If they put any % of $5 to Giveth... their entire donation should still be eligible for GIVbacks
• When we record if a donation was GIVbacks eligible or not in our backend, we should use $4 as the actual threshold, to account for price fluctuations.

[mohammadranjbarz]

@RamRamez is working on this today @mohammadranjbarz!

Have we set a variable in the backed for minimum USD value for GIVbacks? Or should we hard code the threshold for GIVbacks for now?

the minimum donation for GIVbacks eligiblity we communicate to the user should be basically $5 USD... but our actual minimum should be $4 USD... so that (for example) if the user makes a $5 donation to a project and gives 10% of it to Giveth... it still counts. And if the USD value of the token they are donating fluctuates a little below $5 it should still count.

So:

• We should tell the user to donate $5 to be eligible for GIVbacks
• If they put any % of $5 to Giveth... their entire donation should still be eligible for GIVbacks
• When we record if a donation was GIVbacks eligible or not in our backend, we should use $4 as the actual threshold, to account for price fluctuations.

@laurenluz @RamRamez We don't have any variable for that in the backend, I suggest using hard coded value or put it in the config of FE in Vercel

[maryjaf]

Stellar donation

About this section, for now the stellar donation doesn't work for QF
@mosaeedi @RamRamez @MoeNick

[maryjaf]

Regular donation

• for normal donation the changes are done and works fine

• for stellar since stellar donation doesn't work for QF for now, and every ui item and banner related to QF are removed in stellar donation page, It seems it doesn't need for now

• Givback for stellar should be activated on production in admin js @laurenluz could you please do it, Moenick isn't available for now
  but the new design hasn't been ready for givback on stellar yet

[maryjaf]

could you please take a look on below scenario ? @laurenluz

when the donation amount is lower than minimum for QF matching in success donation page this box is shown. should it be removed?

it's related to this issue #4539

[laurenluz]

For the donation success page box in #4539, let's leave it for now. I'll respond in that other issue and we can address on a later release.

For the stellar GIVbacks & QF thing, we'll I'm sort of confused about how this works, and I don't know how to activate GIVbacks for stellar in admin bro 🤔 will DM you @maryjaf

[mosaeedi]

The mini banner on the top should stick to the man nav, and it should be 100% of the screen,

---

This is how it should look like.

[mosaeedi]

When the wallet is connected but the token is not selected the input is not how it should be.

This is how it look like now:

This is how it should be:

1. Please pay attention to the colors!
2. The right part, where user can enter the amount is completely grayed out on disable mode.
3. Also the available: 0 needs to be removed when user hasn't selected any token yet.

[mosaeedi]

Why are we still showing these two elements!?
We have the mini badges on the top, please remove these two.

[maryjaf]

Thanks @RamRamez Now the correct copy is shown in stellar donation page when the user isn't signed in
cc: @MoeNick @mosaeedi

[maryjaf]

Why are we still showing these two elements!? We have the mini badges on the top, please remove these two.

---

• 1- but these two element are still shown @RamRamez

[maryjaf]

When the wallet is connected but the token is not selected the input is not how it should be.

This is how it look like now:

This is how it should be:

1. Please pay attention to the colors!
2. The right part, where user can enter the amount is completely grayed out on disable mode.
3. Also the available: 0 needs to be removed when user hasn't selected any token yet.

---

• 2- and also this change hasn't been applied yet @RamRamez

[maryjaf]

• 3-

These two badges shouldn't be shown in this page @RamRamez
cc: @mosaeedi
signed user:

not signed user:

[RamRamez]

Why are we still showing these two elements!? We have the mini badges on the top, please remove these two.

• 1- but these two element are still shown @RamRamez

@maryjaf It's not ready to be tested yet!

[RamRamez]

When the wallet is connected but the token is not selected the input is not how it should be.
This is how it look like now:
This is how it should be:

1. Please pay attention to the colors!
2. The right part, where user can enter the amount is completely grayed out on disable mode.
3. Also the available: 0 needs to be removed when user hasn't selected any token yet.

• 2- and also this change hasn't been applied yet @RamRamez

@maryjaf It's not ready to be tested yet!

[RamRamez]

Why are we still showing these two elements!? We have the mini badges on the top, please remove these two.

Done!

Also this one is removed

cc @maryjaf

[maryjaf]

when there is no active round this badge is shown , I think in this case the badge shouldn't be shown, am I right?

@mosaeedi @RamRamez

[RamRamez]

When the wallet is connected but the token is not selected the input is not how it should be.

This is how it look like now:

This is how it should be:

1. Please pay attention to the colors!
2. The right part, where user can enter the amount is completely grayed out on disable mode.
3. Also the available: 0 needs to be removed when user hasn't selected any token yet.

Done! Also donation USD value is added!
cc @maryjaf

[maryjaf]

when there is no active round this badge is shown , I think in this case the badge shouldn't be shown, am I right?

@mosaeedi @RamRamez

only this item remains , all other problems have been fixed

[mosaeedi]

Please take a look here to see how we should tell user about the eligible network for the QF matching.

Link to Figma

Please note:

On Stellar flow, we don't show the Switch network & bridge tokens.

[RamRamez]

@maryjaf These sections are ready to be tested!

[RamRamez]

when there is no active round this badge is shown , I think in this case the badge shouldn't be shown, am I right?

@mosaeedi @RamRamez

It's done!
cc @maryjaf

[maryjaf]

when there is no active round this badge is shown , I think in this case the badge shouldn't be shown, am I right?

It's done! cc @maryjaf

Thank @RamRamez , Now if there is no active round, the badge related to QF isn't shown in one time and stellar donation page .
and the tests of donation page changes have been passed

[RamRamez]

@maryjaf This section is ready to be tested

Also the old QF network switch toast is removed

[RamRamez]

@maryjaf The animation for estimated matching toast is added.

[maryjaf]

@maryjaf This section is ready to be tested

The eligible networks for the round in admin is like as below pic:

but I see only op in donation page

@RamRamez

[maryjaf]

but I see only op in donation page

it should be related to this

[maryjaf]

• @RamRamez
  

[maryjaf]

• Estimated matching is shown in below page also when user isn't signed in, it shouldn't be shown in this page based on this comment

• The donation amount is lower than minimum amount for QF matching , in this case the estimated matching is also shown
  

• when project isn't in the round
  

@RamRamez

[maryjaf]

• based on @mosaeedi' comment when the user isn't signed in the switch network and bridge token buttons should be removed in normal donation page

[RamRamez]

• based on @mosaeedi' comment when the user isn't signed in the switch network and bridge token buttons should be removed in normal donation page

@maryjaf Done! (can be tested after 10 minutes)

[RamRamez]

• @RamRamez
  

@maryjaf Done! (can be tested after 10 minutes)

[RamRamez]

@maryjaf This section is ready to be tested

The eligible networks for the round in admin is like as below pic: but I see only op in donation page

@RamRamez

This problem is only in staging and we had this problem before.

[RamRamez]

• Estimated matching is shown in below page also when user isn't signed in, it shouldn't be shown in this page based on this comment

• The donation amount is lower than minimum amount for QF matching , in this case the estimated matching is also shown
  

• when project isn't in the round
  

@RamRamez

@maryjaf Done!

[maryjaf]

Thanks @RamRamez all problems have been fixed

[maryjaf]

@maryjaf This section is ready to be tested

The eligible networks for the round in admin is like as below pic: but I see only op in donation page
@RamRamez

This problem is only in staging and we had this problem before.

So Is this normal that stellar and solana icons isn't shown in this modal? @RamRamez

[RamRamez]

@maryjaf This section is ready to be tested

The eligible networks for the round in admin is like as below pic: but I see only op in donation page
@RamRamez

This problem is only in staging and we had this problem before.

So Is this normal that stellar and solana icons isn't shown in this modal? @RamRamez

@maryjaf I fixed it and now Stellar and Solana icons will be shown but Solana will not be shown in staging because we use different network ids in FE and BE for Solana. You can test after 10 min.

[maryjaf]

• when the network is set on solana I see the below badge
  this project is in the round
  https://giveth-dapps-v2-git-add-givbacks-and-qf-badges-ed2d3d-givethio.vercel.app/donate/test-stellar

@RamRamez

[maryjaf]

@maryjaf I fixed it and now Stellar and Solana icons will be shown but Solana will not be shown in staging because we use different network ids in FE and BE for Solana. You can test after 10 min.

Is the showing of the icons approved ? @mosaeedi

Screen.Recording.2024-09-23.at.7.55.14.PM.mov

[RamRamez]

• when the network is set on solana I see the below badge
  this project is in the round
  https://giveth-dapps-v2-git-add-givbacks-and-qf-badges-ed2d3d-givethio.vercel.app/donate/test-stellar

@RamRamez

@maryjaf I fixed showing Solana icons and chain names but still it shows Solana as a QF not eligible chain even though Solana is added to QF round, because three IDs are defined (101, 102, 103) for Solana in staging BE and FE.

[maryjaf]

There is a problem in switch network but I think it isn't exactly related to this issue and changes, please take a look on below screen records

• when my network is set on op , I change the network to solana, and then change it to gnosis , in this case my network is set on op as one step before solana

Screen.Recording.2024-09-24.at.10.06.02.AM.mov

• when my network is set on op , I change the network to solana, and then change it to OP again , in this case that the network before and after solana are same, there is no problem in switch network

Screen.Recording.2024-09-24.at.10.06.28.AM.mov

@MoeNick @RamRamez
cc: @divine-comedian I think it's related to the change had been made by Mateo before

[RamRamez]

There is a problem in switch network but I think it isn't exactly related to this issue and changes, please take a look on below screen records

• when my network is set on op , I change the network to solana, and then change it to gnosis , in this case my network is set on op as one step before solana

Screen.Recording.2024-09-24.at.10.06.02.AM.mov

• when my network is set on op , I change the network to solana, and then change it to OP again , in this case that the network before and after solana are same, there is no problem in switch network

Screen.Recording.2024-09-24.at.10.06.28.AM.mov
@MoeNick @RamRamez cc: @divine-comedian I think it's related to the change had been made by Mateo before

@maryjaf I think it's not related to this issue and my codes.