Implement "My Grants" Page - Frontend

[captnseagraves]

User Story

As a Grants user, I want to see all grants that I am contributing to or am an administrator of so that I can easily find grants I am involved in.

Why Is this Needed

The "Fund Grant" page is needed to allow users easily find grants they are involved in.

Description

Type: Feature

Definition of Done

• Frontend implements designs at Create "My Grants" Page - Design #1909 on the https://github.com/gitcoinco/web/tree/grants branch

Additional Information

To be reviewed with @PixelantDesign @mbeacom @captnseagraves

History of the project can be found at this PR: #674
More information about the Dev Grants project can be found here: #1469

Please allow the core team a few rounds of revisions.

[captnseagraves]

Assigning @eswarasai

[eswarasai]

Assigning this to @octavioamu

[captnseagraves]

@octavioamu can you handle this in the next week or over the weekend?

[octavioamu]

Yes I'm delayed, sorry for that but I will do it

[captnseagraves]

Any movement on this? @octavioamu should we reassign this to @eswarasai ?

[octavioamu]

I unassigned myself from this one, I believe is a good start point maybe @thelostone-mc want to take it.
Also I think who take this one should do the index pagination too, mostly the same request without the owner id I believe

[captnseagraves]

@thelostone-mc @SaptakS Hey guys, do one of you have the bandwidth to take on this view? It is meant to provide a single point for a user to find grants they are involved with, instead of needing to search through all grants.

[captnseagraves]

@thelostone-mc @SaptakS This view and "Grants Admin" need to be priorities for the next bit of time. They are the last two view of the application that have not been created yet. This issue should be clear. We had some design work done today. I think it has settled, but I havent gotten a response from @willsputra via slack yet, and it hasnt been posted to the design issue. It would be awesome if we could begin inplementing what is designed in this image. other relevant issue is #2325. This is where I expect final designs to be posted in addition to the creative repo.

[thelostone-mc]

@captnseagraves @willsputra.

Before I make out a base template (just to get the ball rolling)

• The grant card for my grants page and the grants landing page look very different?
  Was it done intentionally ? If yes could we ensure both look consistent ?
  If not -> which one do I use ?
• Why would we have an edit button within the card ? Where would it do redirect to?
  (if i own a grant vs if i contribute to a grant )
• grants/new takes in an array of users. who is decided as the true owner of the grant (as I see only name in the design mockups)
• If I created a grant for myself and @SaptakS -> would it appear on both of ours my-grants page ?
• What if we have more than 3 grants ? Would they be displayed as card one below the other ?
  Does that take up too much screen space ?

[thelostone-mc]

update: I've followed the new design for the card for grants and it seemed a lot cleaner

[captnseagraves]

@thelostone-mc Great questions. Thank you for picking this up.

1. I don't think the difference in design was intentional. I think we should be consistent. Whichever you think looks cleaner, I say we go with that. I would like to have images included in the card though. It is nice to have images on the page and not just text.

2. The desired functionality would be to click on the card and it would bring you to the "Grant Admin" view. Although, I can see why a grant creator would want to click on the card and go to "Grant Details" and click edit to go to "Grant Admin" @PixelantDesign Do you have opinion on this UX choice?
   @thelostone-mc I'd take out edit for now and have a click on the card go to "Grant Admin" Shouldn't be too big of a fix if the other option is taken later.

3. The owner of the grant is the user who creates the grant and deploys the Subscription contract.

4. @thelostone-mc would appear as the owner of the grants. @saptak would be listed as a teammate when you are creating the grant. And yes, the grant would appear in Saptak's "My Grants"
   - Perhaps that is a reason to keep the edit button, and have the main card click through to the "Grant Detail" view. So the owner can edit, but teammembers can only click into details.

5. I like how it looks with 3 cards across the top. Can we do pagination for additional grants? this will be consistent with the rest of the grants product as well. @PixelantDesign Do you have an opinion on this point?

Does this answer your questions? Please let me know if you need any other clarification! Thank you!

[thelostone-mc]

@captnseagraves

1. I've stuck to what @willsputra design as that felt a lot cleaner
2. Will drop the edit button on the card for now.
   Redirecting to grant-admin only makes sense if I own the grant. Won't make sense if I'm part of the team / contributing to it. Wouldn't that confuse the user in terms of behavior ? Might I suggest introducing two links one to take you to the details page and another to admin (latter is only visible to admin )
   PS: ( @eswarasai is the admin thing in yet ? )
3. In the create form -> we don't explicity ask for user ( I'm assuming we have a check in place to ensure grant creation is allowed only for logged in users )
4. Makes sense. cc @willsputra looks like we are good
5. Hmm not sure how would the pagination would look only for that row 🤔 while we have the txn history listed below it. cc @SaptakS

[willsputra]

@captnseagraves @thelostone-mc

Thanks for the feedback! 😄

2. Edit was added to make it clearer that you can click on that card to edit your grant.
   For funders, editing might mean modifying their contribution.
   For owners, editing might mean editing their grant, withdrawing fund, etc.
   If an owner can also view the grant details from the admin page anyway (since admin page = details page but editable Implement "Grants Detail - Admin" Page - Frontend #2026 ), maybe we don't need two links?

3. If it becomes too long, maybe we could also consider having a View All button, which will reveal the rest of my grants?

@PixelantDesign would love your thought here too. 🙂

[captnseagraves]

@SaptakS @thelostone-mc can we add some copy for when a user does not have any subscriptions? Something like, "It looks like you are not supporting any grants yet. You can check out all of the projects seeking funding here (link to index page)"

We also need to have a users outgoing transactions listed below the supported by me tab, and incoming transactions below created by me. Currently nothing shows below supported by me.

[thelostone-mc]

@captnseagraves you mean like a placeholder ?
I could throw in the robot prime logo and below that stating

It looks like you are not supporting any grants yet. You can check out all of the projects seeking funding here (link to index page)

unless @willsputra has something for this 🤔

[willsputra]

@thelostone-mc @captnseagraves Maybe we could use a layout similar to #2508. What do you think?

[captnseagraves]

@willsputra Yes, that is great! @thelostone-mc is this something you have the bandwidth to implement in the next few days? If you're crunched for time we can go with the robot prime logo and copy above for the time being.

[thelostone-mc]

@captnseagraves consider it done :)

[thelostone-mc]

@captnseagraves I've pushed into this PR #2747
Could we get this in today if it looks alright ?

Thanks @willsputra ^_^