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 https://github.com/Giveth/giveth-dapps-v2/issues/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.

---

• [x] 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.

   ---

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

[maryjaf]

• [x] 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]

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.

This is ready. @maryjaf please test and verify

[mosaeedi]

This banner is still incorrect!

the correct style

[mosaeedi]

Important

Link to Figma

These are all states of the QF badge.

1. The project/network is eligible for matching. but user didn't enter the right amount in the input.

---

2. The project/network is eligible for matching. user enter the right amount and the donation is now going to be matched.

---

3. The token is not eligible for qf matching.

---

4. The project is not eligible for qf matching.

---

@RamRamez @maryjaf

[RamRamez]

This banner is still incorrect!

the correct style

@mosaeedi how did you test that? Please test with this link https://giveth-dapps-v2-git-add-givbacks-and-qf-badges-ed2d3d-givethio.vercel.app/donate/test-stellar

[RamRamez]

1. The purple box is removed

This gray badge is added

2. The purple box for givbacks is removed

This gray box is added

@maryjaf please test and verify (Stellar page only)

[mosaeedi]

In this state, when the project or token is not eligible, the border is not gray, it should be in semantic/warning/400

@RamRamez

[maryjaf]

This gray badge is added

• [x] 4- This badge related to QF for stellar donation should be like as above design that Mo has shared @RamRamez

---

current view

more than 1$ lower than 1$

---

**

Expected view:

**

[RamRamez]

In this state, when the project or token is not eligible, the border is not gray, it should be in semantic/warning/400

@RamRamez

Done (Stellar only)!

[RamRamez]

This gray badge is added

• [x] 4- This badge related to QF for stellar donation should be like as above design that Mo has shared @RamRamez

current view

more than 1$ lower than 1$

**

Expected view:

**

@maryjaf It's fixed and you can test it after 5 min. This is the the expected view:

[maryjaf]

@maryjaf It's fixed and you can test it after 5 min. This is the the expected view:

https://github.com/user-attachments/assets/e3e3feba-36fe-4d3c-9b7f-1d2a164beba3

@RamRamez

[RamRamez]

@maryjaf It's fixed and you can test it after 5 min. This is the the expected view:

Screen.Recording.2024-09-19.at.5.31.22.PM.mov @RamRamez

@maryjaf Can you explain the problem?

[RamRamez]

• [x] 3-

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

not signed user:

@maryjaf it's fixed. You can test it after 10 min

[RamRamez]

@maryjaf It's fixed and you can test it after 5 min. This is the the expected view:

Screen.Recording.2024-09-19.at.5.31.22.PM.mov @RamRamez

When QF is matched the badge sizes are changed, @mosaeedi do think it's ok? if not, what is your suggestion for this case?

[mosaeedi]

@RamRamez Please change the copy for the QF badge when the network is not eligible.

"[Network] aren’t eligible for matching"

[RamRamez]

Important

Link to Figma

These are all states of the QF badge.

1. The project/network is eligible for matching. but user didn't enter the right amount in the input.

2. The project/network is eligible for matching. user enter the right amount and the donation is now going to be matched.

3. The token is not eligible for qf matching.

4. The project is not eligible for qf matching.

@RamRamez @maryjaf

Done!

[RamRamez]

@RamRamez Please change the copy for the QF badge when the network is not eligible.

"[Network] aren’t eligible for matching"

Done!

[RamRamez]

@maryjaf please test these QF and givbacks badges on both Stellar and normal donations

[RamRamez]

https://www.youtube.com/watch?v=oEHhmh6B7BE

@maryjaf This is ready to be tested

[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]

• [x] @RamRamez

[maryjaf]

• [x] 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]

• [x] 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