Implement UX for users to add a donation to Giveth for every donation

divine-comedian commented 2 years ago

Following conclusive GIVeconomy research and forum discussion on revenue streams we should begin thinking of how to ask users to give a % of the donation amount to Giveth DAO - these extra donation amounts will be used to fund Giveth's day to day operations.

Here's an shot of the modal from the Gitcoin Grants UI we can look to as an example:

The idea here is that we automatically add a % fee on the donation amount, the user can set the fee to 0% (turn it off) or set another amount.

We should make it very easy, almost thoughtless for users to make donations and give a percentage to Giveth.

We should make it mildly inconvenient, but possible for users to change the amount to 0%

Looping @laurenluz and @GriffGreen into the conversation for any points I might have missed.

markoprljic commented 2 years ago

Easiest and simplest way to add this in the UI is adding this little piece on the Donation page, and include the cost breakdown on that page and in the donation confirmation modal as well.

From design side this can be done in few hours. Dev need to estimate their effort.

@mosaeedi @MoeNick

MoeNick commented 2 years ago

Does it approved in the forum to add fees?

divine-comedian commented 2 years ago

Does it approved in the forum to add fees?

yes

MoeNick commented 2 years ago

just a heads up that the comms team and @ahmadabugosh actively promoting "no-fees" slogan for SEO and content for all Giveth channels, I think we at least have comms heads up on this if the decision is made.

markoprljic commented 2 years ago

This doesn't conflict with that. We're not charging fees, we're inviting users to donate a % to Giveth. They can reject if they want.

On Thu, Sep 29, 2022, 17:08 Moe Nick @.***> wrote:

just a heads up that the comms team and @ahmadabugosh https://github.com/ahmadabugosh actively promoting "no-fees" slogan for SEO and content on everywhere, I think we at least have comms heads up on this if the decision is made.

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1262419145, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXJDAZ7LK2CJKFQTJHDWAWWG3ANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were assigned.Message ID: @.***>

mosaeedi commented 2 years ago

Screen Shot 2022-10-11 at 8 03 18 PM I had to redo the whole screen to make it look good! As you can see, I've added two sections,

First-> Donate to Giveth

Screen Shot 2022-10-11 at 8 04 40 PM

Second -> Show the total donation to the project and Giveth

Screen Shot 2022-10-11 at 8 05 26 PM

I made some changes too, like moving the Make it anonymous to the bottom.

What do you guys think? @markoprljic @Tosinolawale @MoeNick @laurenluz @divine-comedian

If you need to take a closer look -> Figma link [Go to your right -> on Figma]

markoprljic commented 2 years ago

Looks good!

On Tue, Oct 11, 2022, 19:09 mosaeedi @.***> wrote:

[image: Screen Shot 2022-10-11 at 8 03 18 PM] https://user-images.githubusercontent.com/13708322/195154977-b1016e92-d952-40e7-8dcf-3a962b1dfdf0.png I had to redo the whole screen to make it look good! As you can see, I've added two sections, First-> Donate to Giveth

[image: Screen Shot 2022-10-11 at 8 04 40 PM] https://user-images.githubusercontent.com/13708322/195155197-9eadf03b-a713-47bf-9430-29dcf9aa5876.png Second -> Show the total donation to the project and Giveth

[image: Screen Shot 2022-10-11 at 8 05 26 PM] https://user-images.githubusercontent.com/13708322/195155342-862d128f-b63c-4450-9fe5-7e0231b49e54.png

I made some changes too, like moving the Make it anonymous to the bottom.

What do you guys think? @markoprljic https://github.com/markoprljic @Tosinolawale https://github.com/Tosinolawale @MoeNick https://github.com/MoeNick @laurenluz https://github.com/laurenluz @divine-comedian https://github.com/divine-comedian

If you need to take a closer look -> Figma link https://www.figma.com/file/nVoinu0tgJ565enN5R4WDE/Giveth.io-%26-GIVeconomy?node-id=14138%3A253052 [Go to your right -> on Figma]

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1275012528, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXNLTVMZGZWXOPMZSTTWCWNMXANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were mentioned.Message ID: @.***>

divine-comedian commented 2 years ago

just a small comment @mosaeedi how would it look in the text box to keep the % symbol outside the custom input box, just to the right and make the custom % input box itself smaller.

we could also remove the 0% option or replace it with 20%.

If the user wants to select 0% it could be a check box

[x] I do not want to support Giveth with part of my donation.

just another idea to make it more inconvenient to remove the default donation

If you're crunched for space on the card I would recommend removing the cryptocurrency / credit card toggle at the top up - tbh it's not coming soon and might not be coming at all

markoprljic commented 2 years ago

Love inconvenience suggestions by Mitch. 😃

On Wed, Oct 12, 2022, 15:22 Mitch @.***> wrote:

just a small comment @mosaeedi https://github.com/mosaeedi how would it look in the text box to keep the % symbol outside the custom input box, just to the left and make the custom % input box itself smaller.

we could also remove the 0% option or replace it with 20%.

If the user wants to select 0% it could be a check box

I do not want to support Giveth with part of my donation.

just another idea to make it more inconvenient to remove the default donation

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1276167140, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXKNFIDDR6LZCNDI6OTWC23QVANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were mentioned.Message ID: @.***>

MoeNick commented 2 years ago

@aminlatifi you can provide your ideas here.

divine-comedian commented 2 years ago

here's a capture from the gardens for multi tx actions

MoeNick commented 2 years ago

@mosaeedi as per talks over the GIVeconomy call, we have to rethink about the whole flow"

redesign the modals
having steps in modal
what to do with "you are a giver" now page/
if modal is closed, what to do even after.

aminlatifi commented 2 years ago

@aminlatifi you can provide your ideas here.

It's totally a frontend task and can be implemented shortly if the design is finalized.

divine-comedian commented 2 years ago

Also just a small detail - should we consider taking a % of the amount the donor specifies to donate or add a percentage on top? i.e donates 900 GIV to a project + 10% to Giveth

should that equal 900 GIV to the project and 90 to Giveth OR 810 to the project and 90 to Giveth

the former stays in line with the slogan "100% of your donation goes to the project" while the logic becomes confusing when a donor would like to simply donate all of their tokens to a project - we can't add an amount on top if they are already donating the max.

I would be in favour of the latter option

810 to the project and 90 to Giveth

markoprljic commented 2 years ago

I'd add it on top. It's a common sense when selecting % on already selected amount, it's expected results to see amount + % selected.

On Thu, Oct 13, 2022, 16:43 Mitch @.***> wrote:

Also just a small detail - should we consider taking a % of the amount the donor specifies to donate or add a percentage on top? i.e donates 900 GIV to a project + 10% to Giveth

should that equal 900 GIV to the project and 90 to Giveth OR 810 to the project and 90 to Giveth

the former stays in line with the slogan "100% of your donation goes to the project" while the logic becomes confusing when a donor would like to simply donate all of their tokens to a project - we can't add an amount on top if they are already donating the max.

I would be in favour of the latter option

810 to the project and 90 to Giveth

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1277729071, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXNQ5HZGTH2T4PUZVHLWDAN2TANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were mentioned.Message ID: @.***>

divine-comedian commented 2 years ago

Another note to consider is the edge case where the project being donated to is Giveth itself.

In this case I think it makes sense that we wouldn't split the donation and perhaps hide the elements relating to that functionality

or if there's something else we should show the user in this very specific case.

markoprljic commented 2 years ago

Great catch @divine-comedian

I'd leave the effort estimate to the devs but if it turns out to be large, then IMO I wouldn't make any significant difference in the UI for the edge case, to avoid complicating things both on FE And BE. We can just default the donation to 0%.

Up to devs to estimate and let us know.

MoeNick commented 2 years ago

[ ] redesign the modals - having steps in modal
[ ] what to do with the "you are a giver now" page.
[ ] if the modal gets closed, what to in every step?

Questions: 1- for some third-party integrations (like giving-block and CHANGE ) some of them differ in the list of tokens and the supported networks, also some of the projects don't accept funds in specific networks. So, what if a XXX token is acceptable on the project for the current user network and not acceptable for GIVETH, I know it's not a case now because we accept all tokens in all supported networks, but for future edge-Cases we have to make sure the token and the network is ok for these 2 projects.

2- Do we have to apply this handler for all projects? including third party projects?

3- Do we want to have different Giveth projects for the second trx in the future?

MoeNick commented 2 years ago

4- input % field limit: 0-%100? why not more than %100 if you want to add it on top? @divine-comedian

divine-comedian commented 2 years ago

[ ] redesign the modals - having steps in modal

[ ] what to do with the "you are a giver now" page.

[ ] if the modal gets closed, what to in every step?

Questions: 1- for some third-party integrations (like giving-block and CHANGE ) some of them differ in the list of tokens and the supported networks, also some of the projects don't accept funds in specific networks. So, what if a XXX token is acceptable on the project for the current user network and not acceptable for GIVETH, I know it's not a case now because we accept all tokens in all supported networks, but for future edge-Cases we have to make sure the token and the network is ok for these 2 projects.

2- Do we have to apply this handler for all projects? including third party projects?

3- Do we want to have different Giveth projects for the second trx in the future?

1- I think this is an edge case we'll very likely never have to worry about. Giveth will always have a project address deployed on any network that the dapp uses and we won't restrict the tokens that can be accepted.

2 - If by third party projects like giving block then I would say yes

3- If we have a cart of projects feature in the future perhaps we would ask the user if they wanted to donate to the matching pool - but this would likely be very far in the future. The main focus at the moment is creating revenue for Giveth to allow the DAO to sustain it's costs.

RamRamez commented 2 years ago

What is the content of the tooltip?

divine-comedian commented 2 years ago

What is the content of the tooltip?

"Support Giveth to continue building the Future of Giving by making a donation to the Giveth DAO! The percentage you choose will be added on top of your donation amount, in the same token you are donating."

divine-comedian commented 2 years ago

testing on: https://default-donations.vercel.app/donate/how-many-photos-is-too-many-photos browser: firefox OS: ubuntu 22.04

@RamRamez I'm just going to dump feedback as i come across

make the tooltip text just a few points smaller - it takes up a lot of the page

Can we also implement this change here?

just a small comment @mosaeedi how would it look in the text box to keep the % symbol outside the custom input box, just to the right and make the custom % input box itself smaller.

we could also remove the 0% option or replace it with 20%.

If the user wants to select 0% it could be a check box
* [x]  I do not want to support Giveth with part of my donation.
just another idea to make it more inconvenient to remove the default donation

If you're crunched for space on the card I would recommend removing the cryptocurrency / credit card toggle at the top up - tbh it's not coming soon and might not be coming at all

Maybe something like this? in lieu of @mosaeedi I tried my hand - maybe @markoprljic can tell me if it's okay If left unchecked user can set any percent they want.

If the user checks the box the donation amount is set to 0% If the user sets donation to 0% then the box becomes checked

If the user sets an amount after then this box becomes unchecked again.

divine-comedian commented 2 years ago

this modal here could be made a bit bigger - the top part showing the numbers for the 2 donation parts is a bit too small

laurenluz commented 2 years ago

@divine-comedian @RamRamez I think that donate to Giveth should be the 2nd tx because it was an "add-on"... this order feels weird to me

open to you disagreeing.

Tosinolawale commented 2 years ago

this modal here could be made a bit bigger - the top part showing the numbers for the 2 donation parts is a bit too small

On it

divine-comedian commented 2 years ago

@divine-comedian @RamRamez I think that donate to Giveth should be the 2nd tx because it was an "add-on"... this order feels weird to me

open to you disagreeing.

I think the logic was that if the user rejects the second transaction or leaves the view or loses the modal at least we get the donation to giveth in the first transaction, which they are least likely to mess up.

laurenluz commented 2 years ago

I think the logic was that if the user rejects the second transaction or leaves the view or loses the modal at least we get the donation to giveth in the first transaction, which they are least likely to mess up.

It just feels very big brother to me: "you must donate to Giveth before you can donate to the project that brought you here"

(if this comment doesn't sway you I will just stop talking and let you do it how you like).

markoprljic commented 2 years ago

Project first, Giveth second.

On Fri, Oct 21, 2022, 18:44 Lauren @.***> wrote:

I think the logic was that if the user rejects the second transaction or leaves the view or loses the modal at least we get the donation to giveth in the first transaction, which they are least likely to mess up.

It just feels very big brother to me: "you must donate to Giveth before you can donate to the project that brought you here"

(if this comment doesn't sway you I will just stop talking and let you do it how you like).

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1287205654, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXJMQUEKDC2WBOVT3LTWELB7TANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were mentioned.Message ID: @.***>

MoeNick commented 2 years ago

Hey @laurenluz @divine-comedian @markoprljic We need a single point of truth for this issue, we were working on a flow with @mosaeedi which is now blocked by his vacation, so I can't help until he's back and the whole flow and the design get ready and then we jump into developing. If anyone else wants to do the PMing of this issue, (which I suggest @divine-comedian wear the hat) please define it well so we can include all backed and front-end and I can analyze it for implementation.

So for now, I told @RamRamez to stop it until we have a straightforward design.

Tosinolawale commented 2 years ago

Hey @laurenluz @divine-comedian @markoprljic We need a single point of truth for this issue, we were working on a flow with @mosaeedi which is now blocked by his vacation, so I can't help until he's back and the whole flow and the design get ready and then we jump into developing. If anyone else wants to do the PMing of this issue, (which I suggest @divine-comedian wear the hat) please define it well so we can include all backed and front-end and I can analyze it for implementation.

So for now, I told @RamRamez to stop it until we have a straightforward design.

Hi @MoeNick, I'll take a look at this and take over

markoprljic commented 2 years ago

If the user wants to select 0% it could be a check box

[x] I do not want to support Giveth with part of my donation.

This is too long text for the tooltip, should be simplified. One sentence is enough.

markoprljic commented 2 years ago

If the user wants to select 0% it could be a check box

[x] I do not want to support Giveth with part of my donation.

No checkbox needed here, there is option for 0% already.

If user wants more than 100% they can enter it in the field. % sign should stay inside the input field.

markoprljic commented 2 years ago

I'm noticing a lot of discussion for a simple enhancement that should be straightforward to design and implement, more so because it is almost a common pattern seen elsewhere (example Gitcoin). We shouldn't reinvent the wheel or try to add more options for the user that could hinder them from completing donation. It's a simple choice, a "click" away, and it should stay so.

Current Figma version looks complete to me. @MoeNick

Deployed version should not have a limitation for user to enter custom % amount. https://default-donations.vercel.app/donate/how-many-photos-is-too-many-photos

Donation modal, 2tx process, since it is re-used throughout the app it should stay as is for now, unless we want to redesign it and apply everywhere else. This should then be another issue treated separately from this one.

MoeNick commented 2 years ago

The redesign of modal and flow of showing success page is matter @markop

Sent from my iPhone

On Oct 24, 2022, at 14:54, Marko @.***> wrote:

I'm noticing a lot of discussion for a simple enhancement that should be straightforward to design and implement, more so because it is almost a common pattern seen elsewhere (example Gitcoin). We shouldn't reinvent the wheel or try to add more options for the user that could hinder them from completing donation. It's a simple choice, a "click" away, and it should stay so.

Current Figma version looks complete to me. @MoeNick

Deployed version should not have a limitation for user to enter custom % amount. https://default-donations.vercel.app/donate/how-many-photos-is-too-many-photos

Donation modal, 2tx process, since it is re-used throughout the app it should stay as is for now, unless we want to redesign it and apply everywhere else. This should then be another issue treated separately from this one.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

divine-comedian commented 2 years ago

@MoeNick I left some comments in #1654 about user flow for the modal

Love inconvenience suggestions by Mitch. smiley … On Wed, Oct 12, 2022, 15:22 Mitch @.***> wrote: just a small comment @mosaeedi https://github.com/mosaeedi how would it look in the text box to keep the % symbol outside the custom input box, just to the left and make the custom % input box itself smaller. we could also remove the 0% option or replace it with 20%. If the user wants to select 0% it could be a check box - I do not want to support Giveth with part of my donation. just another idea to make it more inconvenient to remove the default donation

@markoprljic
to these comments here - only though was just to add an extra step - so when the user chooses 0% they are more aware of what putting 0% implies -

I can see your point with the tooltip text - it is a bit long, we want to explain to the user what they are donating to exactly and then how it actually works. Do you have any suggestions

"Support Giveth to continue building the Future of Giving by making a donation to the Giveth DAO! The percentage you choose will be added on top of your donation amount, in the same token you are donating."

MoeNick commented 2 years ago

If user close the modal, shall we open it up for next trx? Success means success for both? If user rejects the second one, sholud't we allow him to know the first one went ok? This is the user flow after I mean

markoprljic commented 2 years ago

If user closes the modal they will still have pending notification in their Web Wallet (Metamask or other). Later when we will have our Notification center it will also show pending tx's there.

I believe it should behave the same way it does on the GIVfarm for Approve/Stake two tx's. At any point user can reject or close the modal (while still having Pending tx in metamask). If continued through Metamask it will auto-trigger second tx, after which we show Success message.

While we're at this topic, I wonder what Gitcoin is using to bundle everything into a single tx and disperse the donations to projects?

divine-comedian commented 2 years ago

While we're at this topic, I wonder what Gitcoin is using to bundle everything into a single tx and disperse the donations to projects?

Actively working on this in GIVfi research :wink:

I believe it should behave the same way it does on the GIVfarm for Approve/Stake two tx's. At any point user can reject or close the modal (while still having Pending tx in metamask). If continued through Metamask it will auto-trigger second tx, after which we show Success message.

There are some comments from testing in #1654

testing on https://default-donations.vercel.app/donate/how-many-photos-is-too-many-photos browser: firefox OS: ubuntu 22.04

Testing this out by default everything works great! I can choose an amount it is calculated and two txs are generated and successfully execute - once the last transaction passes I am taken to the donation success page!

However when I try to do some funny stuff then it starts to become confusing.... Screencast.from.20-10-22.17.17.18.webm

we should find a logical way for the user to not accidentally lose the screen - mostly by not letting them close the modal by clicking outside the modal to close it.

perhaps we add the close this modal button to the bottom and disable closing the modal on 'outside clicks" - when the user clicks donate the first time the 'close this modal' button disappears or becomes unclickable (the text could change to 'waiting for transactions'), it would only reappear or become clickable once the second donation is initiated.

does this make sense? wdyt @MoeNick ?

However let's move the discussion to here since it's getting confusing.

markoprljic commented 2 years ago

Hooray for the research!

divine-comedian commented 2 years ago

What to do if user rejects second tx - do we take them to success page?
What to do if user rejects first tx?
Is the success page different?

let's work together @Tosinolawale and find some clear solutions - the sooner the better that we can move this feature to production. :money_with_wings:

markoprljic commented 2 years ago

Knowing that the second tx will show pending in web wallet, and user can decide to reject it (unlikely), if they do so, they have done it intentionally and we can assume they expect to see confirmation of the first transaction. In that context ...

What to do if user rejects second tx - do we take them to success page?

Yes. Default success donation of the selected project.

What to do if user rejects first tx?

Show modal tx rejected, abort the whole process.

divine-comedian commented 2 years ago

Yes. Default success donation of the selected project.

Do we also show the tx rejected modal before taking them to the success page?

markoprljic commented 2 years ago

Yes, because the system should always provide feedback on user actions.

On Mon, Oct 24, 2022, 16:56 Mitch @.***> wrote:

Yes. Default success donation of the selected project.

Do we also show the tx rejected modal before taking them to the success page?

— Reply to this email directly, view it on GitHub https://github.com/Giveth/giveth-dapps-v2/issues/1579#issuecomment-1289165510, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLQUXNTIMQDH5XV5DNTGODWE2PQVANCNFSM6AAAAAAQYFPIG4 . You are receiving this because you were mentioned.Message ID: @.***>

Tosinolawale commented 2 years ago

Wallet is connected

For starters, we can use this tool tip, we should be consistent with the tool tip we use across board. I also made changes based on Mitch's suggestion on the input modals

divine-comedian commented 2 years ago

For starters, we can use this tool tip, we should be consistent with the tool tip we use across board. I also made changes based on Mitch's suggestion on the input modals

Thanks @Tosinolawale ! Just a few small grammar things for the tooltip, should read: "Support Giveth with a donation to the Giveth DAO. The selected donation percentage will be added on top of your donation amount in the same token you are donating."

Last issue I think is this page - @Tosinolawale

Should we have some additional content for when a user donates to Giveth as well? i.e

Thanks for donating to . . . We're also grateful for your donation to the Giveth DAO, you can check out our project on Giveth here.
Should we provide the user a link to both transactions they just made?

Tosinolawale commented 2 years ago

Group 624(1)

@divine-comedian

Tosinolawale commented 2 years ago

Group 624 @markoprljic @divine-comedian also drafted the donation flow to this https://www.figma.com/file/nVoinu0tgJ565enN5R4WDE/Giveth.io-%26-GIVeconomy?node-id=14458%3A265012

divine-comedian commented 2 years ago

Hey @Tosinolawale thanks for the update but there's a few things that don't look quite right the first two modals you show should look similar to this: This is because it is just a peer to peer transaction, not a smart contract interaction, there is no 'approve' and no spend limit.

For the cases you mention of close/canceled this is actually two separate cases

user closes modal
user cancels web wallet tx What happens in each? If the user closes the modal after finishing the first tx or accidentally clicks away does that mean the donation to giveth fails? they would still have the pending tx in their web wallet... If they actually cancel the tx on their web wallet this would normally throw an error message...

In the modal below if the user cancels the tx on their web wallet then there is no tx to view on etherscan - the associated text should be omitted in that particular case. If the error fails for another reason then there might be a failed tx to view @RamRamez would know better...

Also some smaller copy fixes - I'll follow up with comments in figma

divine-comedian commented 2 years ago

Okay @RamRamez

I think it's important to get this issue rolling and close it out. I'll try to summarize the changes as best as possible.

[x] revert order of transactions - project donation first, giveth donation second
[x] Implement modal for two transactions https://www.figma.com/file/nVoinu0tgJ565enN5R4WDE/Giveth.io-%26-GIVeconomy?node-id=14511%3A263642
[x] If the user rejects the first transaction on their web wallet then we do not generate the second one automatically - we abort the donation process - but we still show them an error
[x] Modal reacts to donation states - If each donation is sucessful or if one donation fails - here is the modal states https://www.figma.com/file/nVoinu0tgJ565enN5R4WDE/Giveth.io-%26-GIVeconomy?node-id=14511%3A264013
[x] when both donations are successful we reflect it on the modal briefly then take the user to the success page
[x] if the second transaction fails we reflect it on the modal briefly and take the user to the success page
[x] the copy on the success page is different if the user successfully made a giveth donation(user didn't put 0% or tx to giveth didn't fail/reject) and we provide a link to the second (giveth) donation - copy should read:

Thank you for supporting The Giveth Community of Makers and thanks for your donation to the Giveth DAO! You can check out the Giveth DAO project here(ADD LINK TO https://giveth.io/project/the-giveth-community-of-makers).

[x] tool tip on project donate page should read:

Support Giveth with a donation to the Giveth DAO. The selected donation percentage will be added on top of your donation amount in the same token you are donating.

I will probably come behind on your branch and make many text fixes.

does most of this make sense?

Giveth / giveth-dapps-v2

Implement UX for users to add a donation to Giveth for every donation #1579

First-> Donate to Giveth

Second -> Show the total donation to the project and Giveth